design-to-code
De la autor
Turn a design, mockup, Figma frame or screenshot into implementation that actually matches it — mapping values to the codebase's existing tokens and components, covering the states the design never drew, and listing what the design left ambiguous instead of guessing. Use when handed a design to build, when asked whether an implementation matches its source, or when a build has drifted from the design. Not for deciding what the design should be, and not by itself proof that the screen works.
Instalare
npx skills add nahid-sparktales/agent-dispatcher --skill design-to-code -a claude-code
Se instalează în .claude/skills/design-to-code/ · Fiecare comandă descarcă skill-ul direct de pe GitHub cu utilitarul open source skills.
Identic octet cu octet cu commit-ul scanat, cu licența depozitului și un fișier SOURCE.txt.
Vrei ca agentul să-ți propună skill-uri în timp ce scrii? Vezi cum folosești skill-urile din IDE.
Verificări de siguranță pe SKILL.md
Niciun avertisment.
De ce 82
aiqbench calculează scorul de încredere din semnale publice. Nu este un audit de securitate, așa că citește un skill înainte să-l instalezi.
Skill-uri similare
Cele mai apropiate de acesta prin ce fac și când sunt folosite.
- image-to-codeplugin87/ux-ui-agent-skillsTurn a reference image, screenshot, or mockup into token-driven, accessible code — infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it to the 3-tier tokens, rebuild it, then verify with the kit's gates. Use when the user provides a design/screenshot and wants matching UI code.Media★ 2.9K
- figma-generate-designopenai/skillsUse this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code'. This is the preferred workflow skill whenever the user wants to build or update a full page, screen, or view in Figma from code or a description. Discovers design system components, variables, and styles via search_design_system, imports them, and assembles screens incrementally section-by-section using design system tokens instead of hardcoded values.OficialDesign★ 28.3K
- figma-design-to-codeDevin-AXIS/iPolloWorkUse this skill when implementing a Figma design as code (design → code) — the read-FROM-Figma direction. Triggers: 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'code this up from Figma', 'design to code', or a figma.com design URL provided alongside a codebase. Encodes the workflow for reading a node out of Figma with get_design_context and adapting its reference output to the target project — reusing existing components, tokens, and conventions, and honoring Code Connect mappings, component docs, design annotations, and design tokens by priority. Complements figma-code-connect (component mapping) and figma-generate-design / figma-use (the reverse, code → design direction).Design★ 7.2K
- figma-implement-designopenai/skillsTranslates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.OficialDesign★ 28.3K
- design-fixhashgraph-online/awesome-codex-pluginsCompare one already-implemented screen or component against its Figma source and fix the deviations you pick -- reads the node live through the figma-bridge MCP, or from the Node Specs of an existing /design plan, then diffs box, layout, typography, fill, stroke, radius, effects, and content against the code that renders it. Reports first, fixes only what you select, and never touches Figma.Design★ 1.4K
- design-systemsnahid-sparktales/agent-dispatcherBuild UI inside an existing design system — find its tokens and components, reuse before adding, decide between extending a component and introducing a new one, and preserve conventions you did not set. Use when a project already has design tokens, a component library, a theme or a shared Figma library and you are about to add or change UI inside it. Not for establishing a visual direction where no system exists, and not for reviewing an interface's usability.Design★ 59
Note și recenzii
—
nicio recenzie
Ai încercat acest skill? Notează-l ca să-i ajuți pe alții. Autentifică-te
Discuție
Intră în discuție. Autentifică-te