Mode d’emploi
- Copiez la commande et examinez le paquet avant de l’installer dans votre environnement agent.
- Consultez le document original pour les outils, identifiants et environnements requis.
- Décrivez les entrées et le livrable souhaité ; comparez la sortie aux sources.
npx skills add https://github.com/sergekostenchuk/ui-ux-agent-skill-system --skill figma-design-to-code-bridgeAvant de commencer
- L’installation n’inclut ni abonnement au modèle, ni quota API, ni accès aux fichiers.
- Étoiles et installations reflètent l’activité, pas un test indépendant de qualité ou de sécurité.
Document Skill original
Rendu depuis le dépôt source en conservant titres, exemples, code, tableaux, liens et images.
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.
