image-to-code
Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.
Profile →npx skills add nexu-io/open-design --skill image-to-code-skill --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
Instructs the agent to generate design imagery first for visually important web tasks, then deeply analyze those images, extract a design system, and implement the frontend to closely match the visuals. It advocates using large, readable, section-specific images, creating fresh images per section rather than cropping, and avoiding UI clutter such as nested cards. The workflow emphasizes an image-first process, section-by-section images, and a strong emphasis on readability and implementation fidelity.
How it works
The skill begins by generating design images for the web artifact (hero, sections, etc.). It then deeply analyzes the generated images to extract typography, spacing, color, layout, button styles, and component logic. After extracting these design system details, it proceeds to implement the frontend to closely reflect the visuals. If a section’s image is unclear, it recommends regenerating a fresh, standalone image for that section and, if needed, an extra extraction image to improve readability. It prioritizes section clarity by producing one image per section and avoiding cropping from a larger image.
When to use it
Use for visually important web tasks where design quality matters, such as premium landing pages, editorial brands, product pages, and redesigns with strong visual taste. Trigger image-first workflow when the request emphasizes visual quality and artistry, rather than purely technical tasks.
What it can touch
It uses tools labeled claude-code, codex, and cursor to generate images and implement frontend from the extracted design system details.
Caveats
The approach relies on accurate image generation and deep analysis to extract precise typography, spacing, and component behavior. If sections are unclear, regenerations are suggested to improve extraction fidelity. It avoids lowering image count to preserve readability and implementation fidelity.
# CORE DIRECTIVE: IMAGE-FIRST WEBSITE DESIGN TO CODE You are an elite web design art director and implementation strategist. Your job is not to generate generic website mockups. Your job is to generate premium, artistic, implementation-friendly website section references and then turn them into real frontend. This skill is for: - hero sections - landing pages - marketing sites - startup sites - editorial brand pages - product pages - portfolio websites - premium multi-section websites - redesigns where visual quality matters Standard AI output tends to collapse into repetitive defaults: - one single giant compressed image for too many sections - text that becomes too small to read - centered dark hero clichés - generic card spam - repeated left-text/right-image layouts - weak typography hierarchy - vague spacing - cards inside cards inside cards - giant rounded section containers everywhere - too much visible information in the first screen - tiny pills, labels, tags, system markers, and fake interface jargon - nice-looking but unextractable designs - generic coded reinterpretations after the image step - lazily generating too few images for too many sections Your goal is to aggres
- 1. ACTIVE BASELINE CONFIGURATION
- 2. MANDATORY IMAGE-FIRST RULE
- 3. GENERATE ENOUGH IMAGES RULE
- 4. CODEX-SPECIFIC SECTION IMAGE RULE
- 5. DO NOT CROP OLD IMAGES RULE
- 6. FRESH RE-GENERATION RULE
- 7. OPTIONAL DETAIL / EXTRACTION IMAGE RULE
- 8. CLEAN ANALYSIS STANDARD
- 9. DEEP IMAGE ANALYSIS REQUIREMENT
- 10. IMAGE-FIRST CODEX WEBSITE WORKFLOW
- 11. WHEN TO TRIGGER IMAGE GENERATION FIRST
- 12. THE COMBINATORIAL VARIATION ENGINE
- Theme Paradigm
- Background Character
What does the image-to-code skill do?
Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.
How do I install it?
Run `npx skills add nexu-io/open-design --skill image-to-code-skill --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From nexu-io/open-design, a repository with 83,577 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.