image-to-code作者 Leonxlnx

Image to Code Skill.

适用于 Claude Code 和 Codex 的 UI 设计 skill：首先生成并分析设计图像，然后实现匹配的页面。

Web & UI
UI 代码

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

前置信息和章节标题读取自上游文件，日期为 2026-09-14 · 完整内容共 36,361 字符

01 功能说明

image-to-code Skill 在 Claude Code 与 Codex 中的作用

摘要、工作流与产物，均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

该 skill 对视觉重要的网页任务强制执行图像先行的工作流。Agent 必须先自行生成设计图像，再编写任何代码，然后深入分析这些图像以提取字体排印、间距、按钮、颜色和布局逻辑。在 Codex 中，它默认为每个板块生成一张较大、清晰可读的图像，而不是压缩多个板块到一张图上，并且在需要板块或细节视图时会创建全新的独立图像，而不是裁剪。

它严格避免嵌套框式布局、虚假 UI 标签、细小的胶囊标签以及拥挤的 hero 区域。Hero 区域必须保持简洁，标题最多不超过 1-3 行。该 skill 强制执行充裕的间距，减少视觉杂乱，并实现与生成的参考图忠实匹配的前端，而不是偏向通用的代码化布局。

图像生成服务UI 代码

查看示例提示词 ↗

工作方式

01
在 Codex 中创建独立的板块图像
在 Codex 内部，该 skill 为每个板块生成一张较大、清晰可读的图像，而不是将多个板块压缩到一张图版中。
02
生成全新图像，绝不裁剪
当某个板块需要专门的视图时，该 skill 会生成一张保留相同设计语言的全新图像，而不是从之前生成的较大图像中裁剪。
03
深入分析所有生成的图像
在实现之前，该 skill 会从每张图像中提取确切的可见文本、字体排印关系、间距逻辑、按钮细节、色彩方案、布局结构和组件样式。
04
实现与参考图匹配的前端
代码忠实地转译所分析的设计，保留布局逻辑、间距节奏、板块顺序、字体排印氛围和组件样式，而不会偏向通用模式。

02 找到适合场景

何时使用 image-to-code Skill

在 Claude Code 或 Codex 中处理此类 UI 设计工作时，使用 image-to-code skill。适用范围和限制取自该 skill 自身的文件。

适合场景

Hero 区域、落地页、营销网站、创业公司网站以及重视视觉质量的编辑类品牌页面
以视觉品味和实现忠实度为核心的高端多板块网站与重设计项目

了解边界

纯技术性任务、缺陷修复，或已提供精确设计系统而无需视觉生成的请求
本质上属于技术性而非视觉性的结构性任务

需要提供的信息

板块数量或网站类型该 skill 会推断所需的板块数量或网站类型（仅 hero、四板块落地页、八板块网站等），以确定要生成多少张图像。
视觉方向或风格偏好用户的诉求，如“简洁”“大胆创意”“高端 SaaS”或“编辑风格”，会引导该 skill 对 DESIGN_VARIANCE、ART_DIRECTION 等基础配置参数的解读。

03 Skill 内部

image-to-code Skill 赋予 Claude Code 和 Codex 的规则

SKILL.md 为 Agent 设定的 6 条具体指令、默认值与边界——文件中真正改变结果的那部分。

图像生成必须优先进行
对于视觉质量重要的网站设计请求，该 skill 必须先生成设计图像，再编写任何代码。
Hero 标题最多保持 1-3 行
Hero 标题理想情况下应保持在 1-3 行以内。如果标题过长，该 skill 必须缩减字数，而不是强行增加行数。
不允许卡片套卡片再套卡片
该 skill 不得默认使用嵌套的盒式布局，即在外层卡片中套更大的卡片，卡片里再套卡片，外面还包一个巨大的圆角区块容器。
大幅减少微 UI 杂乱
该 skill 不得在设计中堆砌不必要的圆角标签、伪系统标记、虚假控件标签、装饰性的代码样式标签，或无助于清晰度的无意义小型元数据。
生成足够数量的图片以保证质量
该 skill 必须生成足够多的图片，以确保设计可读且可提取。生成过多清晰的图片，也好过生成过少压缩过度的图片。
小尺寸笔记本上首屏必须保持干净
在小尺寸笔记本屏幕上，首屏（hero）及第一视觉区域必须显得可用且干净。

04 投入使用

在 Claude Code 或 Codex 中安装 image-to-code

一条 npx skills add 命令，然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 image-to-code 添加到 Claude Code、Codex 或您的 Agent

在你的项目中运行；安装程序会询问要把它添加到哪个 Agent。

Terminal

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

针对 skills/image-to-code-skill/SKILL.md 的通用 skills CLI 形式；仓库可能另有其自身的路径说明。

给 Skill 一个首次 UI 设计任务

按 skill 自身的术语撰写；把括号中的部分换成你的内容。

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.

来源：依据 SKILL.md，按 skill 自身的术语撰写。

检查首次结果

SKILL.md 本身如何描述正确的结果：

在处理视觉重要的任务时，确认先生成了设计图片，然后才进行任何代码实现
确认文本依然可读；若不可读，检查是否已生成额外的细节图或重新生成，而不是直接裁剪
检查是否生成了足够数量的图片，图片数量没有为图便利而被随意减少
确认首屏在小尺寸笔记本上依然干净，标题最多 1-3 行，且不显得过于拥挤
确认已移除不必要的嵌套盒式布局、无用的圆角标签、标签以及虚假的技术性微元素
检查实现的代码是否忠实还原了生成的参考图，而不是流于通用的代码化布局

在 OpenDesign 中，通过其 SKILL.md 链接导入 image-to-code：Plugins → Add → Skill → Import from link，然后在顶部栏中选择它。

下载 OpenDesign 阅读快速入门

05 开源、可追溯

来源、许可与验证

本页面事实的来源，以及最后检查时间。

Author: Leonxlnx
Repository: github.com/Leonxlnx/taste-skill 分支 main
Skill 文件: skills/image-to-code-skill/SKILL.md 验证时记录的内容校验和；提交 ccbc156
License: MIT 来自 LICENSE。
仓库星标数: 86,946 GitHub 快照于 2026-09-14 针对整个 Leonxlnx/taste-skill 仓库拍摄，该仓库在此目录中包含 11 个 skills。不是 image-to-code 的评分或使用计数。
已由 OpenDesign 验证: 2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序（检查日期 2026-08-28）；本页面未记录实际运行。

SKILL.md 内部

核心指令：图片先行的网站设计转代码定义该 skill 的任务：先生成高质量、便于实现的网站参考图，再将其转化为真实前端代码
当前基线配置为设计差异度、视觉密度、艺术指导、实现清晰度等控制参数设置数值默认值
强制的图片先行规则要求在处理视觉性网站任务时先生成图片；代码是图片分析之后的转译层
生成足够图片规则要求生成足够数量的图片以保证可读性与可提取性；不得为图方便而减少图片数量
Codex 专属分区图片规则在 Codex 中，优先为每个分区生成一张大图，而不是将多个分区压缩进一张难以阅读的拼图中
禁止裁剪旧图规则应针对具体分区重新生成新图，而不是从之前生成的较大图片中裁剪或切割
重新生成规则若某个分区不够清晰，应作为独立新图重新生成，同时保持相同的视觉语言
可选细节 / 提取图规则当提取质量需要更大的文字或更清晰的间距时，为相应分区额外生成更近距离的细节图
深度图片分析要求将生成的图片视为设计规范；在实现前提取文字、排版、间距、按钮、颜色和布局
以图像优先的 Codex 网站工作流定义执行顺序：先生成各版块图像，再深入分析，提取设计系统，最后实现前端以匹配设计
组合式变化引擎为主题、背景、字体、hero 架构、版块系统和标志性组件提供视觉方向选择
Hero 极简规则强制要求简洁、有电影感的 hero，标题最多 1-3 行，不杂乱，在小型笔记本上也可读

Skill 自身的描述

"为 Codex 设计的精英级网站 image-to-code skill。对于视觉上重要的 Web 任务，它必须首先自己生成设计图像，深度分析它们，然后尽可能贴近地实现网站。在 Codex 中，它必须优先使用大型、可读、针对特定区块的图像，而不是微小的压缩画板；为区块或细节视图生成全新的独立图像，而不是裁剪旧图像；避免懒惰的生成不足；避免卡片套卡片套卡片的 UI；并保持 hero 区域简洁、宽敞、可读，在小型笔记本电脑上也清晰可见。"

SKILL.md 文件的前言描述。完整文件约 36,361 字符。在 GitHub 上阅读完整文件。

06 安装之前

关于 image-to-code Skill 的常见问题

以下回答来自 2026-09-14 读取到的 SKILL.md，而非某次实际运行的记录。

我应该配合哪个编程 Agent 使用这个 skill？

该 skill 专为 Codex 设计，并明确引用了 Codex 特有的行为。它规定在 Codex 内部必须优先使用大幅、可读的分版块图像，而不是压缩式的看板图，并默认为每个版块生成一张图像。在 Codex 之外，则可以采用更紧凑的多版块合成方式。

如果生成的设计图像不清晰或文字太小，会发生什么？

该 skill 必须为该版块生成额外的细节图或提取图，或者将该版块重新生成为一张全新的独立图像。

它绝不能从先前生成的较大图像中裁剪。如果更多图像有助于提高可读性或提取质量，就应生成更多图像，而不是在图像数量上偷懒。

Image to Code

在真实 UI 设计任务中运行 image-to-code。

下载 OpenDesign，从其 SKILL.md 链接导入 image-to-code，粘贴上述提示词，在看到结果前先阅读计划。

下载 OpenDesign 浏览所有 skills

终端

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