Home / All Skills / Design & Motion / image-to-code
English (EN)简体中文 (ZH)日本語 (JA)
Design & Motion · leonxlnx/taste-skill

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.

L1 Basic · Source registration onlyV1 Commit-PinnedDual-pass Audit
Author leonxlnxGitHub leonxlnx/taste-skill ↗Stars 85698License MIT（仓库根 LICENSE 文件；GitHub API spdx MIT；Copyright (c) 2026 Leonxlnx）Commit ccbc15639c
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

Enforces a strict three-stage workflow: Image Generation → Deep Analysis → Implementation, defined as hard rules; 'mandatory for visually dominant tasks', strictly prohibiting coding directly from scratch.

skills/image-to-code-skill/SKILL.md
image generation first deep image analysis second implementation third
Original SKILL.md lines 65–69: Immediately following the three-stage process is 'If the task is mainly visual, this order is mandatory.' (line 69); line 61 states 'The generated image(s) are the primary visual source of truth.', defining images as the design source while code acts merely as a translation layer—the fundamental difference between this skill and purely prompt-to-code skills.

Relies on the host environment's image generation capabilities rather than built-in tools: The text repeatedly qualifies rules with 'when image generation is available', executing the strictest rules within Codex.

skills/image-to-code-skill/SKILL.md
Do not skip image generation when image generation is available.
The skill file itself contains no image generation implementation; the capability prerequisite is provided by the host (Codex/ChatGPT image mode classes); Section 11 also lists exceptions where the image-first approach can be skipped (pure technical tasks, user-provided design systems, etc.).

Outputs images at the section granularity ('1 section = 1 image'): Explicitly specifies the required image count for 1–10 sections, strongly advising against cramming an entire site into a single long image.

skills/image-to-code-skill/SKILL.md
- 1 section requested → generate 1 image - 2 sections requested → generate 2 images - 3 sections requested → generate 3 images - 4 sections requested → generate 4 images - 5 sections requested → generate 5 images - 6 sections requested → generate 6 images - 7 sections requested → generate 7 images - 8 sections requested → generate 8 images - 9 sections requested → generate 9 images - 10 sections requested → generate 10 images
Referenced from the continuous bullet block in original §4 (1 to 10 sections, each with a corresponding image). The design intent is to ensure text, spacing, and buttons in each image are large enough to be extracted reliably, rather than merely looking 'visually appealing but impossible to extract parameters from'.

Prohibits cropping old images and encourages full-section regeneration: Cropping degrades critical extractable data like spacing, font-size ratios, and margins; it mandates generating a fresh, standalone section image in the same design language instead.

skills/image-to-code-skill/SKILL.md
When a section needs a dedicated image or a closer detail view, do not simply crop, cut out, zoom into, or slice it from a previously generated larger image.
The 'Do Not Crop Old Images Rule' and 'FRESH RE-GENERATION RULE' appear as pairs, strictly blocking the most common shortcuts.

Defines the analysis phase as 'extracting the design system' rather than casual skimming: Explicitly lists extractable elements (copy, typography, scale relationships, spacing, grids, button hierarchy, palettes, border-radius logic, image treatment, etc.) and allows generating close-up images for unclear details.

skills/image-to-code-skill/SKILL.md
Carefully inspect and extract: - exact visible text where readable - hero headline wording - subheadline wording - CTA wording - section titles - typography character - type scale relationships
The comprehensive checklist in §9 treats images as technical specification sheets, enumerating dozens of attributes including font mood, line count, line wrapping, alignment, spacing, border-radius, buttons, and color palettes; §25 even requires extracting palettes and preserving the original color logic to avoid falling back to default web colors.

Employs dual constraints during implementation: copy-discipline + anti-drift: Stays strictly faithful to reference images, prohibiting 'convenient on-the-fly improvements' that degrade into generic templates during coding.

skills/image-to-code-skill/SKILL.md
Do not “improve” the design by replacing it with a generic coded layout.
Sections 26/27 directly address the primary failure mode—strong visual designs devolving into generic code; 'The goal is: visually faithful to the image, translated into real frontend'.

Reiterative prompt engineering: Core rules (such as 'avoid lazy under-generation', 'forbid cards-in-cards', and 'keep hero clean') recur across multiple sections with varying detail, establishing a gradient of mandatory tone.

skills/image-to-code-skill/SKILL.md
Do not be lazy with image count.
Grep results show variations of these directives appear across lines 107, 137, 1212, and beyond; the anti-slop checklist (Section 29) reiterates across five categories: layout, visual, typography, content, and density. The author leverages repetition to combat model attention decay.

2Core Capabilities

01Image-first workflow orchestration: Self-generate reference images, analyze deeply, then implement (mandatory for visual tasks)
02Section-level image generation (starting at 1 section → 1 image), ensuring text and components remain readable and extractable
03In-depth design system extraction: Methodically pulls copy, typography, spacing, buttons, palettes, border-radius, grids, and image treatments
04Full-section regeneration and close-up supplementation: Never crop old images; regenerate clean or detail images within the same visual language if clarity is insufficient
05Faithful implementation with anti-drift: Copy-oriented coding, strictly avoiding fallback to generic templates
065-category anti-AI-slop checklist (layout/visual/typography/content/density) + minimalist hero rules (1–3 lines for primary headlines)
07Combinatorial mutation engine for direction selection: Select exactly one from Theme, Background, Type, Hero, Section, and Motion, and commit to visual consistency
0821-point pre-delivery clarity check (verifying image generation counts, confirming no cropping, ensuring nested boxes are cleaned up, etc.)

4Recommended Governance & Evidence

Suggested Controls for Safe Operation
For Agent Runtime
Can be auto-loaded
For Administrators
Register source and version
Evidence & Triggers (File Paths & Excerpts)
  • SKILL.md: Pure prompt instructions and rule text; no script execution or external side effects
Audit Notes: (Evidence: Workspace contains only a single SKILL.md file, verified via git ls-files; token scanning yielded zero matches for URL/curl/wget/fetch/bash/exec/API key/.env/fs). Skill-level operations involve zero scripting, zero outbound network requests, zero credential handling, and zero local file I/O. Directing the host to inspect images, generate images, or write code falls within standard host-authorized operations; image invocations route through host tools. Considerations: Actual image generation is performed by the host (network exposure aligns with host policy); extracting text from generated images poses a negligible theoretical risk of prompt injection via image-rendered text; hosts lacking image generation will fall back to recommendations only. None of these constitute code-level vulnerabilities.

5Second-Pass Verification

  • [ok] 目录资产面（含隐藏/未跟踪文件） — git ls-files + ls -A 双查：该 skill 目录仅 1 个文件 SKILL.md，无 scripts/references/模板/数据/隐藏文件，无可执行代码。
  • [ok] 执行类 token 扫描 — 逐文件扫描 bash/exec/child_process/curl/wget/fetch/axios/process.env/API_KEY/.env/fs./writeFile/.github 等零命中（brutalist 一处 'sans-serifs.' 单词结尾 fs. 为误报，人工复核排除）。
  • [ok] 引文逐条 grep -F 字节复核 — 本 JSON 所用全部 quote 均以 grep -F 在 pin commit 工作树中逐条验证存在，无 paraphrase 冒充。
  • [ok] 元数据与 pin 核对 — 本地 git HEAD == 任务 pin ccbc15639c97057cbfcf32ecebc38ef716e4bb37（README 显示该提交为 docs/sponsor 修订 #102，2026-08-24）；GitHub API 实查 stars=85698、MIT、pushed_at=2026-08-24T15:23:56Z。frontmatter name 与任务给定名一致。
  • [ok] 功能声明 vs 实际能力夸大检查 — description 声称均由 SKILL.md 正文纯 prompt 机制兑现，无脚本可调用、无越界承诺（详见本文件 how_it_works 引文）。
  • [ok] 『generate the design image(s) itself』的实现主体 — 文件全部以指令口吻要求模型出图（'you must first generate the design image(s) yourself'），并自限『when image generation is available』；实际图像工具属宿主能力，在 skill 文件内不可定位实现——此为能力前提而非 skill 缺陷，已在 how_it_works/traits 明示。
  • [ok] 读取中途出现的省略号是否为文件内容（影响引证准确） — raw 复查+grep：文件内不存在字面 '…' 行；先前读取中的省略是展示层对重复行的压缩，全部引文均已逐条 grep -F 复核，无受影响条目。
  • [ok] Codex 内外规则是否冲突 — Codex 内一区一图（§4）与 Codex 外『may still allow more compact multi-section composition』明确按宿主分流，非矛盾；§18 亦以 'Inside Codex' 为界重申 section-first 生成规则。

6Verdict & Scenarios

  • Algorithmizes the image-to-code workflow: Generation granularity, analysis checklists, and implementation discipline are broken down into dedicated chapters, providing the model with actionable SOPs rather than vague slogans.
  • Directly tackles the two major failure modes of image-to-code: unextractable image details (tiny text, single massive boards) and implementation drift (converting stunning designs into generic code), providing multi-section countermeasures for each.
  • The rules forbidding cropping and enforcing full-section regeneration significantly improve extraction fidelity in practice—a rare, detailed insight among similar skills.
  • The combinatorial engine enforces 'choose one and maintain consistency', preventing stylistic incoherence caused by chasing novelty.
  • Clearly defines its operating scope (mandatory for visual tasks, allows direct coding for technical tasks), avoiding unnecessary overhead on non-visual tasks.
    • Best for: Ideal for website tasks where visual quality is the core deliverable and running on hosts supporting image generation (Codex image mode, ChatGPT Images ecosystem): end-to-end image → analyze → code workflows for heroes, landing pages, marketing sites, portfolios, brand pages, and multi-section websites. Also well-suited for teams looking to adopt an 'image-before-code' SOP structure.
    Not for: Not suitable for hosts lacking image generation capabilities or purely technical/structural tasks (bug fixes, projects with existing exact design systems); not suitable for lightweight scenarios seeking quick drafts from a single full-page image (explicitly forbidden by its rules); not suitable for users expecting the skill to manage image APIs or API keys directly—image generation capabilities and billing reside entirely on the host side.
    Install Agent-Ready
    ① Verified Mirror 2026-09-09
    Option A · Direct DownloadDownload image-to-code.tar.gz
    sha256: 60f16fb068787a1c…
    Option B · Copy Guide for Agent
    install.json
    Agents automatically download and verify mirrors from this JSON guide.
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 3cca18b368.