メニュー
Use when any Bridge command is invoked (make, fix, done, setup, drop, status) or any Figma / design-system / compiler / Bridge workflow topic is raised. Sets command priorities and iron laws (compiler-only, semantic tokens only, verification-before-ship).
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use when the user requests to design, create, build, generate, or make a new Figma component or screen — including phrases like "make a button", "design a settings page", "build a new card", "generate X". Produces a CSpec, compiles it to a scene graph, executes it in Figma via MCP, and verifies the output.
Use when the user says they adjusted the design in Figma, mentions "fix", "correct", "learn from", "I changed", "diff", "what changed", or wants the system to incorporate manual Figma edits back into the spec. Diffs the current Figma state against the last snapshot, classifies each change as a DS learning or a hardcoded flag, persists learnings, and patches the active recipe.
Use when the user says "done", "ship it", "finish", "complete", "archive", or otherwise indicates the current design is ready to be shipped. Runs final verification (Gate B), archives the CSpec, updates history, extracts a recipe when eligible, and cleans up temp files.
Use when the user says "setup", "setup bridge", "extract", "extract DS", "onboard", "build knowledge base", "initialize bridge", or is starting Bridge in a project for the first time. Handles the complete bootstrap: pre-flight checks, scaffolding (docs.config.yaml, cron workflow, .bridge/mcp.json), Figma token management (stdin-only), DS extraction via MCP (preferred) or REST (fallback), guide generation, and first commit proposal.
| name | using-bridge |
| description | Use when any Bridge command is invoked (make, fix, done, setup, drop, status) or any Figma / design-system / compiler / Bridge workflow topic is raised. Sets command priorities and iron laws (compiler-only, semantic tokens only, verification-before-ship). |
Bridge is a compiler-driven design workflow for generating Figma designs
and maintaining a design system via Claude Code. The compiler (at
lib/compiler/compile.ts) enforces all 26 Figma Plugin API rules, so Claude
NEVER writes raw Plugin API code and NEVER hardcodes primitive values.
This skill is force-loaded at every SessionStart via hooks/session-start.
Its job is to establish the discipline before any action skill runs. It is
deliberately small (~400 tokens) to keep the fixed per-session cost low.
| User intent (keywords) | Route to |
|---|---|
| "make", "design", "create", "build", "generate", "new component", "new screen" | generating-figma-design |
| "fix", "correct", "learn", "diff", "what changed", "I adjusted" | learning-from-corrections |
| "done", "ship", "ship it", "finish", "complete" | shipping-and-archiving |
| "setup", "setup bridge", "extract", "extract DS", "onboard", "initialize", "bootstrap" | extracting-design-system |
| "drop", "abandon", "cancel" | inline Drop Procedure (this skill) |
| "status", "what's next", "workflow" | inline status logic (this skill) |
drop is handled inline here — it is small enough not to warrant its
own skill. Invoke when the user says "drop", "abandon", or "cancel".
fix first to
capture corrections before archiving.drop: block to the CSpec with
date, reason, and learnings.specs/active/{name}.cspec.yaml →
specs/dropped/{name}.cspec.yaml. Move the snapshot JSON too if it
exists.{ISO date} | {name} | DROPPED | {reason}
to specs/history.log./tmp/bridge-scene-{name}.json if present.Output template:
## Dropped: {name}
Reason: {reason}
CSpec archived: specs/dropped/{name}.cspec.yaml
Learnings: {captured | skipped}
Ready for the next design. Run: `make <description>`.
## Verification section.| Rationalization | Reality |
|---|---|
| "I'll just hardcode this hex once" | Always use a semantic token. No exceptions. |
| "The compiler is overkill for this tiny thing" | The compiler is the only path. |
| "Skip the screenshot, it's obviously right" | 'Looks right' ≠ 'is right'. |
| "I remember this nodeId from my last session" | Node IDs are session-scoped. Re-search. |
| "I'll use figma-api-rules.md for context" | That file is forbidden. Compiler owns all rules. |
| "The user approved, I can skip the compile exit code check" | Compile exit 0 is Gate A. Independent of user approval. |
| "Let me write a small inline Plugin API script for this fix" | No inline scripts. Scene graph → compiler → execute. |
references/compiler-reference.md (repo-root)references/transport-adapter.md (repo-root)references/verification-gates.md (repo-root)references/red-flags-catalog.md (repo-root)