Image to code
Screenshot to code and image-to-code skills for Claude, Cursor, and Grok Bot
Screenshot to code and image-to-code skills for Claude Code, Cursor, and Codex: compare five SKILL.md pipelines before you install — generate references then build, clone a screenshot into HTML, pixel-lock a 750px board, write a clone prompt, or capture a DESIGN.md from a URL. This is skill selection and workflow, not an image generator. Install steps: how to install. The same SKILL.md can be pasted into Grok Bot or attached in that chat. Grok Bot instructions: Grok Bot playbooks.
Last reviewed 2026-10-24 · Methodology · How to choose · How to install
How an agent uses this
Install image-to-code-skill when the agent should generate references then build. For a live URL into DESIGN.md, use web-to-design-md instead. Pick one pipeline — do not stack screenshot, pixel-lock, and prompt files together. Agent paths: install guide.
Default file: Image To Code. Read the SKILL.md on that page before you install.
Install
npx skills add https://github.com/leonxlnx/taste-skill/tree/HEAD/skills/image-to-code-skill Try asking
Using the image-to-code-skill, turn this brief into a marketing page: generate section references first, then implement HTML/CSS that matches them. | Skill | When to use it | Platform | Updated | Safety |
|---|---|---|---|---|
| Image To Code leonxlnx/taste-skill | Default when you asked for a visually important website and the agent should generate design images first, analyze them, then implement. | Any agent | 2026-10-18 | pass |
| Screenshot to Html sevzq/screenshot-to-html | When you already have a UI screenshot or mockup and want a high-fidelity, self-contained HTML page. | Cursor | 2026-06-14 | pass |
| 750px Image To Code yuzhworkhard-wq/image-to-code | When the brief is a strict 1:1 rebuild on a 750px board with transparent PNG cutouts and a layer manifest. | Codex | 2026-06-06 | pass |
| Web Clone Prompt xiaopu-ai/web-clone-prompt | When you want a detailed, portable clone prompt from a screenshot or URL before the agent writes code. | Claude Code · Cursor · Codex · Gemini CLI | 2026-07-02 | pass |
| Website to Design Md Paidax01/web-to-design-md | When you have a live website URL and want a reusable DESIGN.md (plus preview) that another agent can follow — not a pixel clone of the page. | Claude Code · Cursor · Codex | 2026-04-18 | pass |
Safety is a text search on the file, not an audit. Pass / Review / Risk are explained in the evaluation guide.
-
01
Image To Code
Leonxlnx’s image-first website skill (folder image-to-code-skill). Section images, then code that matches them. Use it for marketing and editorial sites where taste matters. It is not a 750px pixel-lock pipeline, and it is not the screenshot render-loop file.
npx skills add https://github.com/leonxlnx/taste-skill/tree/HEAD/skills/image-to-code-skill -
02
Screenshot to Html
Sevzq’s screenshot-to-HTML skill: infer structure and tokens, build, then render with Chrome, compare, and refine. Use it for faithful cloning into one HTML file. It is not a prompt-only workflow, and it is not the 750px cutout pipeline.
npx skills add sevzq/screenshot-to-html -
03
750px Image To Code
A pixel-locked Codex workflow: normalize to 750px, measure layers, export assets, then code. Use it when fidelity to the source image beats redesign. It is not the generate-images-first marketing skill, and it is not the HTML render loop.
npx skills add yuzhworkhard-wq/image-to-code -
04
Web Clone Prompt
Xiaopu’s prompt-first clone skill. It reverse-engineers colors, type, motion, and copy into a paste-ready prompt, then asks before building. Use it when the deliverable is the prompt. It does not start by writing the page.
npx skills add xiaopu-ai/web-clone-prompt -
05
Website to Design Md
Paidax’s website-to-DESIGN.md skill. Browser-first extraction into a design rulebook. Use it for documentation of look and feel. It ships helper scripts; we do not run them here. It is not the screenshot-to-HTML rebuild, and it is not design-dna’s JSON profile pipeline.
npx skills add Paidax01/web-to-design-md
FAQ
Which skill should I install first for Cursor or Claude Code?
Start with image-to-code-skill when the job is a premium marketing site and the agent should generate section images, then build. Use screenshot-to-html when you already have a screenshot and want a self-contained HTML page with a render-and-compare loop. Use image-to-code for a strict 750px pixel-locked board and asset cutouts. Use web-clone-prompt when you want a detailed clone prompt before any code. Use web-to-design-md when the deliverable is a DESIGN.md from a live URL, not rebuilt pages. Commands: how to install.
I have a screenshot but the rebuild looks wrong — which pipeline?
Faithful HTML clone with a render loop → screenshot-to-html. Strict 1:1 on a 750px board with cutouts → image-to-code. You only need a paste-ready brief first → web-clone-prompt. Marketing page where the agent invents section art then codes → image-to-code-skill. Do not stack three of these as defaults.
Why is some listing body not in English?
We snapshot the author’s SKILL.md as published. Some files on this short list ship upstream text in another language. Use this page’s when/contrast lines to choose; install still uses the GitHub command on the listing, not our snapshot as the source of truth.
Where are design-dna and extract-design-system?
design-dna turns references into a JSON design profile, then generates matching UI. extract-design-system pulls tokens from a public URL into token files. Both stay in the index. For a DESIGN.md plus preview from a live site, use web-to-design-md on this list.
Is this the same as the taste task?
No. taste-skill on the taste task sets visual direction without an image-to-code pipeline. The image-to-code file from the same author is a different install on this list.
Can I use this with Grok Bot?
Yes. Paste the SKILL.md into Grok Bot or attach the file, then ask for the same job this page describes. MeloSkill is not affiliated with xAI. Grok Bot instructions: Grok Bot playbooks.