image-to-codeby Leonxlnx

Image to Code Skill.

A Claude Code and Codex skill for UI design: generates and analyzes a design image first, then implements the matching page.

Web & UI
UI code

Download OpenDesign View usage guide

Leonxlnx/taste-skill · skills/image-to-code-skill/SKILL.mdSKILL.md

--- name: image-to-code description: 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 … --- ## 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

Front matter and section headings read from the upstream file on 2026-09-14 · 36,361 characters in full

01 What it does

What the image-to-code Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

This skill enforces a mandatory image-first workflow for visually important web tasks. The agent must generate design images itself before writing any code, then deeply analyze those images to extract typography, spacing, buttons, colors and layout logic. In Codex it defaults to generating one large, readable image per section rather than compressed multi-section boards, and creates fresh standalone images for sections or detail views instead of cropping.

It aggressively avoids nested-box layouts, fake UI labels, tiny pills, and cramped hero sections. The hero must stay clean with 1-3 line headlines maximum. The skill enforces generous spacing, reduces visual clutter, and implements frontend that faithfully matches the generated references rather than drifting into generic coded layouts.

Image generation serviceUI code

See the example prompt ↗

How It Works

01
Create Separate Section Images in Codex
Inside Codex, the skill generates one large readable image per section rather than compressing multiple sections into one board.
02
Generate Fresh Images, Never Crop
When a section needs a dedicated view, the skill generates a fresh new image preserving the same design language rather than cropping from a previously generated larger image.
03
Deeply Analyze All Generated Images
The skill extracts exact visible text, typography relationships, spacing logic, button details, color palette, layout structure and component styling from each image before implementing.
04
Implement Frontend to Match References
The code translates the analyzed design faithfully, preserving layout logic, spacing rhythm, section ordering, typography mood and component style without drifting into generic patterns.

02 Find your fit

When to Use the image-to-code Skill

Use the image-to-code skill in Claude Code or Codex when the job is UI design of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

Hero sections, landing pages, marketing sites, startup sites and editorial brand pages where visual quality matters
Premium multi-section websites and redesigns where visual taste and implementation fidelity are central

Know the Boundaries

Purely technical tasks, bug fixes, or requests that already provide a precise design system where visual generation is unnecessary
Structural tasks that are mainly technical rather than visual in nature

What to Provide

Section count or site typeThe skill infers the number of sections needed or the type of website (hero only, 4-section landing page, 8-section site, etc.) to determine how many images to generate.
Visual direction or style preferencesUser requests like 'clean', 'crazy creative', 'premium SaaS' or 'editorial' guide the skill's interpretation of the DESIGN_VARIANCE, ART_DIRECTION and other baseline configuration parameters.

03 Inside the skill

Rules the image-to-code Skill Gives Claude Code and Codex

6 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

Image Generation Is Mandatory First
For website design requests where visual quality matters, the skill must generate design images before writing any code.
Hero Headlines Stay 1-3 Lines Maximum
The hero headline should ideally stay within 1-3 lines. If the headline becomes too long, the skill must reduce word count instead of forcing more lines.
No cards-inside-cards-inside-cards
The skill must not default to nested box layouts with giant rounded section containers wrapping cards inside larger cards inside outer cards.
Reduce micro-UI Clutter Aggressively
The skill must not clutter designs with unnecessary pills, pseudo-system markers, fake control labels, decorative code-like tags, or meaningless small metadata that does not improve clarity.
Generate Enough Images for Quality
The skill must generate as many images as needed to make the design readable and extractable. It is better to generate too many clear images than too few compressed ones.
First Screen Must Be Clean on Small Laptops
The hero and first-view area must feel usable and clean on a small laptop.

04 Put it to work

Install image-to-code in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add image-to-code to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

npx skills add https://github.com/Leonxlnx/taste-skill --skill image-to-code

Generic skills CLI form for skills/image-to-code-skill/SKILL.md; the repository may document its own path.

Give the Skill a First UI Design Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt

Design me an 8-section landing page for [AI startup name]. Keep the hero clean and readable, use separate images for each section so I can extract typography and spacing properly, and make sure the first screen feels premium on a small laptop. Avoid nested cards and fake system labels.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

Verify that design images were generated first before any code implementation for visually important tasks
Confirm text remains readable, and if not, check that extra detail images or fresh regenerations were created rather than cropping
Check that enough images were generated and that the image count was not lazily reduced for convenience
Verify the hero stays clean with 1-3 line headlines maximum and does not feel overfilled on a small laptop
Confirm unnecessary nested boxing, useless pills, labels and fake technical micro-elements have been removed
Check that the implemented code faithfully matches the generated references without drifting into generic coded layouts

In OpenDesign import image-to-code from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: Leonxlnx
Repository: github.com/Leonxlnx/taste-skill Branch main
Skill file: skills/image-to-code-skill/SKILL.md Content checksum recorded at verification; commit ccbc156
License: MIT From LICENSE.
Repository stars: 86,946 GitHub snapshot taken 2026-09-14 for the whole Leonxlnx/taste-skill repository, which contains 11 skills in this catalog. Not a rating or usage count for image-to-code.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

CORE DIRECTIVE: IMAGE-FIRST WEBSITE DESIGN TO CODEDefines the skill's job as generating premium implementation-friendly website references then turning them into real frontend
ACTIVE BASELINE CONFIGURATIONSets numeric defaults for design variance, visual density, art direction, implementation clarity and other control parameters
MANDATORY IMAGE-FIRST RULERequires image generation first for visual website tasks; code is the translation layer after image analysis
GENERATE ENOUGH IMAGES RULEInstructs to generate as many images as needed for readability and extraction; never reduce image count for convenience
CODEX-SPECIFIC SECTION IMAGE RULEIn Codex, prefer one large image per section rather than compressing many sections into one unreadable board
DO NOT CROP OLD IMAGES RULEGenerate fresh section-specific images instead of cropping or slicing from previously generated larger images
FRESH RE-GENERATION RULEIf a section is unclear, generate it again as a new standalone image preserving the same visual language
OPTIONAL DETAIL / EXTRACTION IMAGE RULECreate additional closer detail images for sections when extraction quality requires larger text or clearer spacing
DEEP IMAGE ANALYSIS REQUIREMENTTreat generated images as design specifications; extract text, typography, spacing, buttons, colors and layout before implementing
IMAGE-FIRST CODEX WEBSITE WORKFLOWDefines the execution order: generate section images, analyze deeply, extract design system, implement frontend to match
THE COMBINATORIAL VARIATION ENGINEProvides visual direction choices for theme, background, typography, hero architecture, section system and signature components
HERO MINIMALISM RULESEnforces clean cinematic heroes with 1-3 line headlines maximum, no clutter, readable on small laptops

The Skill's Own Description

“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.”

Front-matter description from SKILL.md. The full file is about 36,361 characters. Read the full file on GitHub.

06 Before you install

Questions About the image-to-code Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

Which coding agent should I use this skill with?

The skill is designed for Codex and explicitly references Codex-specific behaviors. It states that inside Codex it must prefer large readable section-specific images instead of compressed boards, and defaults to generating one image per section. Outside Codex it may allow more compact multi-section composition.

What happens if the generated design image is unclear or text is too small?

The skill must generate additional detail or extraction images for that section, or regenerate the section as a fresh standalone image.

It must never crop from a previously generated larger image. If more images would improve readability or extraction quality, it generates more images rather than being lazy with image count.

Image to Code

Run image-to-code on a Real UI Design Task.

Download OpenDesign, import image-to-code from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills