How to use
- Copy the installation command and review the source package before installing it in your own agent environment.
- Check the source document for required tools, credentials and supported hosts.
- Describe your input and desired deliverable; review the output against the source material.
npx skills add https://github.com/sergekostenchuk/ui-ux-agent-skill-system --skill figma-design-to-code-bridgeBefore you start
- Installation does not include a model subscription, API allowance or permission to access your files.
- Repository stars and installation counts describe activity, not an independent quality or security test.
Original skill document
Rendered from the source repository. Headings, examples, code, tables, links, and referenced images are preserved.
Figma Design To Code Bridge
Use this skill after figma-context-reader when the goal is implementation. The output is not "code by screenshot"; it is a mapping from design intent, tokens, and components to the existing codebase.
Modes
handoff-plan: create a build/refactor plan from a Figma frame.component-map: map Figma components/variants to existing code components.code-connect: prepare or review Figma Code Connect work.gap-report: identify where the design and code system diverge.implementation-route: hand off towebapp-ui-skillormarketing-site-skill.
Workflow
- Get Figma context through
figma-context-readeror a provided context brief. - Inspect the local codebase before recommending component choices.
- If Code Connect is requested, invoke the installed
figma:figma-code-connectskill before Code Connect-specific work. - Map tokens, components, variants, states, and responsive constraints to local implementation primitives.
- Route dense product/app work to
webapp-ui-skill; route public landing/product pages tomarketing-site-skill. - Require local visual verification after implementation. Figma match alone is not validation.
Output Shape
Use assets/design-to-code-handoff.md.
Decision Rules
- Prefer existing project components and design tokens over generating one-off CSS.
- Preserve UX intent when exact visual parity conflicts with accessibility, responsiveness, or codebase conventions.
- Treat Figma-generated code or MCP-generated code as a draft until reviewed against local architecture.
- If the Figma file lacks states, include loading, empty, error, disabled, focus, hover, and mobile states in the implementation plan.
Safety And Privacy
- Treat non-public Figma files, screenshots, variables, component names, and source code as sensitive.
- Do not send private code or Figma context to external tools without explicit approval and a data-transfer note.
- Do not overwrite local components simply to match a Figma frame; propose a scoped implementation plan first.
Validation And Eval
- Verify that the handoff includes both Figma-to-code component mapping and local validation steps.
- For implemented work, require browser or screenshot evidence from the local app.
- Use
evals/evals.jsonto test app-frame routing, marketing-page routing, and Code Connect gap behavior.
Resources
- Read
$CODEX_SKILLS_DIR/senior-figma-orchestrator/references/figma-mcp-compatibility.mdwhen current Figma tools matter.
