메뉴
Deploy and share MxM projects on Vercel. Use when a designer wants a link, wants to share or show the project, mentions deploying or publishing, or at the end of a working session. Handles first-time project linking, preview versus production, and shareable URLs.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | designtools-deploy |
| description | Deploy and share MxM projects on Vercel. Use when a designer wants a link, wants to share or show the project, mentions deploying or publishing, or at the end of a working session. Handles first-time project linking, preview versus production, and shareable URLs. |
Vercel hosts everything. Two kinds of URL: previews (one per push, safe to experiment) and production (the stable link, from main).
The project has a local git history but no remote yet (designtools-start defers that). The simplest deploy needs no GitHub at all: Vercel ships the local build directly.
Prefer the Vercel MCP tools when connected (deploy_to_vercel, list_projects, get_deployment). Otherwise the CLI:
vercel link --yes from the project root, choosing the VERCEL_TEAM scope.vercel --prod. The Vite preset builds static output with no configuration.That is enough for a shareable link. Add GitHub only if the designer wants push-to-deploy previews or is moving to the web surface:
gh repo create GITHUB_ORG/<name> --private --source . --push to create the remote and push the existing history.vercel git connect so every future push deploys itself. From then on, deploys are automatic and the web surface works.vercel --prod ships the current local build. If git was connected, pushing deploys automatically too.vercel ls).Hand over the URL with one line about what changed. If the deployment is protected (Vercel Authentication on team projects), either turn protection off for the project in the dashboard (fine for projects, which contain invented data by design) or mint a bypass link with the MCP tool get_access_to_vercel_url. Check the link in a private browser window before telling the designer it is shareable; nothing burns trust like a client hitting a login wall.
Frontend conventions for MxM projects. Use whenever building, editing, or reviewing screens, components, layouts, or styles in a project generated by designtools-start: creating a page, adding a component, changing visual design, or any React or CSS work. Encodes the stack rules: Base UI, CSS Modules, design tokens, Lucide, motion, accessibility, and the three states.
Use when dialing in a precise visual value on a running web app — box-shadow, an exact color or color token, gradient stops, padding/margin/gap, border-radius, opacity, type size/weight/line-height — and describing it in words is the long way round. Surface is a deterministic visual editor that opens over the running app, takes direct-manipulation input (sliders, scrubs, color swatches, drag handles), and writes each change back to source (a Tailwind class, a CSS property, or a token) as a clean, formatting-preserving edit. Reach for it after a couple of failed attempts to hit an exact visual value by prose ("a bit softer", "slightly warmer"). Do NOT use it for structural/layout changes, copy, logic, or any change you can just write.
The pinned facts and permissions the designtools suite is built on. Not usually invoked directly; designtools-start reads it to begin each new project. Consult when questions arise about pinned dependency versions, Claude Code permissions, or how to bump and test the stack. Holds versions.json, settings.json, and the smoke test. It ships no project source — the project is generated from the conventions in designtools-frontend.
Start a new project for a designer. Use when they want to begin a new project, app, demo, or idea. Generates the project shell from the designtools-frontend conventions, pins versions and permissions from designtools-core, themes it from a brand colour, and starts the dev loop. Components are composed from Base UI primitives on demand as screens need them (see designtools-frontend).
Use when dialing in a precise visual value on a running web app — box-shadow, an exact color or color token, gradient stops, padding/margin/gap, border-radius, opacity, type size/weight/line-height — and describing it in words is the long way round. Surface is a deterministic visual editor that opens over the running app, takes direct-manipulation input (sliders, scrubs, color swatches, drag handles), and writes each change back to source (a Tailwind class, a CSS property, or a token) as a clean, formatting-preserving edit. Reach for it after a couple of failed attempts to hit an exact visual value by prose ("a bit softer", "slightly warmer"). Do NOT use it for structural/layout changes, copy, logic, or any change you can just write.
One-time machine setup for the designtools suite on macOS. Use when a designer is on the desktop surface for the first time, when the doctor script reports failures, or when they ask to get set up, install tools, or fix their environment. Installs and verifies git, Homebrew, Node, pnpm, GitHub CLI, and Vercel CLI, and signs into GitHub and Vercel.