Skip to content

From the author

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.

Install

npx skills add nahid-sparktales/agent-dispatcher --skill design-to-code -a claude-code

Installs to .claude/skills/design-to-code/ · Each command fetches the skill straight from GitHub with the open skills CLI.

Download .zip

Byte-identical to the scanned commit, with the repository’s licence and a SOURCE.txt.

Want your agent to suggest skills while you type? See how to use skills from your IDE.

Safety checks on SKILL.md

No warnings.

Why 82

Security100
Provenance61
Maintenance100
Licence100
Adoption32

aiqbench computes the trust score from public signals. It is not a security audit, so read a skill before you install it.

Similar skills

Closest to this one by what they do and when they are used.

Ratings & reviews

—

no reviews

Tried this skill? Rate it to help others. Sign in

    Discussion

    Join the discussion. Sign in