design-to-code: a website from a design image
design-to-code
A skill that turns a screenshot, mockup, Figma frame or live page into a responsive site and checks it against the design
- 140 ★ on the repository
- Last commit
Minimal access
Why this level
- The skill writes and runs frontend code in the project, with builds and dependencies installed on your machine
- Reproducing someone else's design and brand may infringe the owner's rights
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/design-to-codeDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill writes and runs frontend code in the project, with builds and dependencies installed on your machine
- Reproducing someone else's design and brand may infringe the owner's rights
This is third-party code. Review the repository files before installing.
What it does
design-to-code is a skill with which an agent builds a working responsive website from a design image. The source can be a screenshot, mockup, Figma frame or live page. The agent reads layout, spacing, colours and type straight from the pixels, matches fonts and builds each section as semantic HTML and components. The site is made responsive for screen sizes the design never showed. The agent then takes screenshots of its own build, compares them with the design and fixes differences, looping until the result matches. The repository holds six Next.js sites built with this skill from images alone as proof. The skill consists of a `SKILL.md` with the main workflow and references the agent opens as needed: reference forensics, art direction, interface craft, typography and fonts, motion, verification and evaluations. There is an `agents/openai.yaml` for agent metadata. The author treats the skill as the product and the sites as the proof.
Who it is for. Frontend developers and designers who need a quick move from a screenshot or mockup to a working Next.js page with a check of the result.
Good fit when
- A responsive Next.js site with semantic markup must be built from a page screenshot
- A Figma frame should be turned into code and a screenshot of the build checked against the mockup
- Fonts in the design have to be identified or close ones matched
- A blurry low-resolution preview screenshot has to be brought to a working page
- Animations and fine details of the reference should move into code following the skill's reference
Not a fit when
- You want to copy another site one to one: rights to the design and brand stay with the owner and you must check them yourself
- You need a backend, database and authentication: the skill builds an interface from a picture
- You need a Figma file with tokens and hand-off specs: the skill works from an image
- You want interactive states recovered from a picture: a static image does not show them
Example request
Build a responsive Next.js page from this screenshot, compare a screenshot of the build with the design and fix the differences.Limitations
The skill builds an interface from an image, so states the image does not show (hover, form errors, empty screens) are filled in by the agent and may differ from the designer's intent. Fonts are matched by appearance, and an exact match with the original is not guaranteed.
The six examples in the repository show results on specific brands, and moving someone else's design into a product should be done only with the right to do so. Screenshot comparison catches visual differences but does not prove accessibility or performance, which should be checked separately.
How to disable. Delete the `design-to-code` folder from the agent's skills directory, for example `~/.claude/skills/` or `~/.codex/skills/`. Remove the `websites/` folder from a cloned repository by hand.
FAQ
How do I install design-to-code?
Run `npx skills add https://github.com/Atharvsinh-codez/skills --skill design-to-code`. By hand, copy the `design-to-code` folder into the agent's skills directory: `~/.claude/skills/`, `~/.codex/skills/` or `~/.factory/skills/`.
What can I feed it?
Screenshots, mockups, Figma frames and live pages. The agent takes layout, colours and typography from pixels and then compares its own build with the image.
Which references are in the skill?
Seven files: reference forensics, art direction, interface craft, fonts, motion, verification and evaluations. The agent opens only the one it needs along the way.
Which framework does the skill use?
The examples in the repository are written in Next.js, but the skill itself generates real frontend from a design, and the stack depends on your project and request.
Which agents are supported?
Any that read folders with `SKILL.md`: the README table lists Factory Droid, Claude Code and Codex. The `agents/openai.yaml` file holds metadata for OpenAI agents.
Discussion
No questions or reviews yet.
Related
SkillsA skill that designs UI and landing page mockups and rebuilds screenshots as HTML, a React project or a WeChat mini program
The /taste skill turns a URL into design tokens and trade-off principles, with ready rules for Cursor and Claude Code
A skill that turns reference UIs into a structured design profile in JSON and generates matching UI from your content
A Codex skill: three distinct visual concepts, screenshot review and cutting excess, so interfaces look less templated.
A UI, presentation and graphics design skill for coding agents: canvas drafts driven through the superdesign CLI
A skill for Claude Code and other agents that builds websites directed like films: art direction before code, local CLI asset generation and an anti-slop linter
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| design-to-code: a website from a design image (this card) | no | 140 | ||
| Yueban Image to Code | no | 129 | an image to code skill, without a screenshot comparison loop or design references | |
| Figma To Code MCP: from Figma layout to code | no | API key | 7 | an MCP server for Figma frames, while this skill also works from screenshots and live pages |
README in short
The README presents the idea of the skill and six sites built from images alone, with side-by-side design and result comparisons. Then it describes the repository contents, installation through the skills CLI and by hand, a table of directories for different agents and the agent's order of work, including self-checking by screenshots.