Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components that must match Figma specs. Requires a working Figma MCP server connection.
From hugin-v0npx claudepluginhub michelve/hugin-marketplace --plugin hugin-v0This skill uses the workspace's default tool permissions.
LICENSE.txtassets/figma-small.svgassets/figma.pngassets/icon.svgexamples/design-implementation-scenarios.mdreference/troubleshooting.mdGuides browser automation with Playwright, Puppeteer, Selenium for e2e testing and scraping. Teaches reliable selectors, auto-waits, isolation to fix flaky tests.
Provides checklists to review code for functionality, quality, security, performance, tests, and maintainability. Use for PRs, audits, team standards, and developer training.
Enforces A/B test setup with gates for hypothesis locking, metrics definition, sample size calculation, assumptions checks, and execution readiness before implementation.
This skill uses extended thinking for complex design-to-code translation. ultrathink
!`git status --short 2>/dev/null || echo 'Not a git repository'`
!`git log --oneline -5 2>/dev/null || echo 'No git history available'`
This skill provides a structured workflow for translating Figma designs into production-ready code with pixel-perfect accuracy. It ensures consistent integration with the Figma MCP server, proper use of design tokens, and 1:1 visual parity with designs.
CLAUDE.md/AGENTS.md), switch to figma-create-design-system-rules.get_design_context) are available.https://figma.com/design/:fileKey/:fileName?node-id=1-2
:fileKey is the file key1-2 is the node ID (the specific component or frame to implement)figma-desktop MCP: User can select a node directly in the Figma desktop app (no URL required)figma-desktop MCP: User can select a node directly in the Figma desktop app (no URL required)Follow these steps in order. Do not skip steps.
VS Code + GitHub Copilot users: Figma MCP is pre-configured in .vscode/mcp.json - skip to Step 1. If tools are still unavailable, reload the VS Code window and check the MCP panel.
Claude Code / Codex CLI users: If any MCP call fails because Figma MCP is not connected, pause and set it up:
codex mcp add figma --url https://mcp.figma.com/mcp[features].rmcp_client = true in config.toml or run codex --enable rmcp_clientcodex mcp login figmaAfter successful login, the user will have to restart codex. You should finish your answer and tell them so when they try again they can continue with Step 1.
When the user provides a Figma URL, extract the file key and node ID to pass as arguments to MCP tools.
URL format: https://figma.com/design/:fileKey/:fileName?node-id=1-2
Extract:
:fileKey (the segment after /design/)1-2 (the value of the node-id query parameter)Note: When using the local desktop MCP (figma-desktop), fileKey is not passed as a parameter to tool calls. The server automatically uses the currently open file, so only nodeId is needed.
Example:
https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15kL9xQn2VwM8pYrTb4ZcHjF42-15When using the figma-desktop MCP and the user has NOT provided a URL, the tools automatically use the currently selected node from the open Figma file in the desktop app.
Note: Selection-based prompting only works with the figma-desktop MCP server. The remote server requires a link to a frame or layer to extract context. The user must have the Figma desktop app open with a node selected.
Run get_design_context with the extracted file key and node ID.
get_design_context(fileKey=":fileKey", nodeId="1-2")
This provides the structured data including:
If the response is too large or truncated:
get_metadata(fileKey=":fileKey", nodeId="1-2") to get the high-level node mapget_design_context(fileKey=":fileKey", nodeId=":childNodeId")Run get_screenshot with the same file key and node ID for a visual reference.
get_screenshot(fileKey=":fileKey", nodeId="1-2")
This screenshot serves as the source of truth for visual validation. Keep it accessible throughout implementation.
Download any assets (images, icons, SVGs) returned by the Figma MCP server.
IMPORTANT: Follow these asset rules:
localhost source for an image or SVG, use that source directlylocalhost source is providedProject asset and style file locations:
| Type | Location |
|---|---|
| Images / icons (Vite-processed, imported in TS) | src/client/assets/images/ or src/client/assets/icons/ |
| Static fonts referenced by URL in CSS | public/fonts/ |
| DSAI design tokens (CSS custom properties) | src/generated/css/tokens.css and tokens-dark.css |
| Bootstrap theme with DSAI overrides | src/generated/css/dsai-theme-bs.css |
| Custom CSS (keyframes, @font-face, overrides) | src/client/custom.css |
CRITICAL: NEVER output Tailwind CSS. The Figma MCP generates React + Tailwind by default. You MUST convert ALL Tailwind classes to Bootstrap 5 utilities and DSAI tokens before writing any code. No Tailwind class should appear in the final output.
| Tailwind | Bootstrap 5 / DSAI Equivalent |
|---|---|
flex | d-flex |
flex-col | flex-column |
items-center | align-items-center |
justify-between | justify-content-between |
gap-4 | gap-3 (Bootstrap scale) |
p-4 | p-3 (Bootstrap scale) |
mt-2 | mt-2 (same scale name, different values) |
rounded-lg | rounded or var(--dsai-border-radius) |
shadow-md | var(--dsai-shadow-default) |
text-sm | fs-6 or var(--dsai-font-size-sm) |
text-gray-500 | text-body-secondary or var(--dsai-color-neutral-500) |
bg-white | bg-body or var(--dsai-bg-surface) |
sr-only | visually-hidden |
hover:bg-gray-100 | Use FSM state + cn() conditional class |
Translate the Figma output into this project's framework, styles, and conventions.
Key principles:
var(--dsai-*))@/components/ui/ instead of creating new onesvar(--dsai-color-primary), etc.) and Bootstrap spacing utilities (m-3, p-2, gap-3)cn() from @/lib/utils for class name composition (simple filter+join, not tailwind-merge)Strive for pixel-perfect visual parity with the Figma design.
Guidelines:
Before marking complete, validate the final UI against the Figma screenshot.
Validation checklist:
src/client/components/ui/ — they are local source code you own (installed via dsai add)src/client/components/ that compose DSAI components from @/components/ui/forwardRef + displayName (DSAI convention)style={} when an equivalent Bootstrap utility class existscn() from @/lib/utils for conditional class merging (simple filter+join)src/client/components/ui/ for an existing DSAI component before creating a new onevar(--dsai-color-*), typography via var(--dsai-font-*), spacing via Bootstrap scalecn() from @/lib/utils for all conditional class mergingdsai add <component> if a needed component isn't installed yetSee design-implementation-scenarios.md for detailed scenarios including implementing a button component and building a complete dashboard layout from Figma designs.
Never implement based on assumptions. Always fetch get_design_context and get_screenshot first.
Validate frequently during implementation, not just at the end. This catches issues early.
If you must deviate from the Figma design (e.g., for accessibility or technical constraints), document why in code comments.
Always check for existing components before creating new ones. Consistency across the codebase is more important than exact Figma replication.
When in doubt, prefer the project's design system patterns over literal Figma translation.
See troubleshooting.md for solutions to common issues including truncated Figma output, design mismatches, asset loading problems, and design token discrepancies.
The Figma implementation workflow establishes a reliable process for translating designs to code:
For designers: Confidence that implementations will match their designs with pixel-perfect accuracy. For developers: A structured approach that eliminates guesswork and reduces back-and-forth revisions. For teams: Consistent, high-quality implementations that maintain design system integrity.
By following this workflow, you ensure that every Figma design is implemented with the same level of care and attention to detail.
When invoking this skill with arguments:
$0 or $ARGUMENTS[0] - Figma URL in format https://figma.com/design/:fileKey/:fileName?node-id=1-2
:fileKey (file identifier) and 1-2 (node ID) from the URL/figma-implement-design https://figma.com/design/abc123/MyDesign?node-id=10-25$1 or $ARGUMENTS[1] - Optional explicit node-id override
/figma-implement-design https://figma.com/design/abc123/MyDesign 10-25If invoked without arguments, the skill will prompt for the Figma URL during execution.
This skill uses ${CLAUDE_SESSION_ID} to track design implementation sessions:
// Each implementation is logged with session context
const sessionId = process.env.CLAUDE_SESSION_ID;
console.log(`[${sessionId}] Implementing Figma design: ${fileKey}, node: ${nodeId}`);
This allows correlation between:
Use the session ID to trace the full lifecycle of a design implementation from Figma link to production code.