设计 · 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 基础 · 登记来源即可V1 已固定Dual-pass Audit
管控等级描述 skill 的能力与建议配套的管控措施，不代表质量或安全认证，也不表示可用或不可用。是否使用由用户和管理者决定。不同 agent 宿主对权限的约束各不相同，请勿假定宿主一定会提供安全兜底。第三方 skill 版权归原作者，使用风险由使用者自行承担。
1实现原理 · 为什么它能做到
强制三段式流程：图像生成 → 深度分析 → 实现，顺序被写成硬规则；『视觉为主的任务此顺序强制』，禁止先自由编码。
skills/image-to-code-skill/SKILL.md
image generation first deep image analysis second implementation third
原文 SKILL.md 第 65-69 行：三段流程后紧跟『If the task is mainly visual, this order is mandatory.』（第 69 行）；第 61 行『The generated image(s) are the primary visual source of truth.』把图像定义为设计源，代码只是翻译层——这是本 skill 与纯 prompt 出稿类 skill 的本质区别。
依赖宿主图像生成能力而非自带工具：正文反复以『when image generation is available』限定，Codex 内执行最强规则。
skills/image-to-code-skill/SKILL.md
Do not skip image generation when image generation is available.
skill 文件本身无任何图像生成实现，能力前提由宿主（Codex/ChatGPT 图像模式类）提供；Section 11 同时列出可跳过图像优先的例外（纯技术任务/用户已给设计系统等）。
『1 section = 1 image』按区段粒度出图：明确写出 1-10 sections 各自对应生成张数，反对一张长图塞全站。
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
引文为原文 §4 的连续 bullet 块（1→10 sections 各一张图）。设计意图是保证每张图里的文字/间距/按钮大到可被二次提取，而不是视觉上『好看但抽不出参数』。
禁裁旧图、鼓励整区重生成：裁剪会毁掉间距/字号比例/边距等提取信息，宁可生成一张新的同语言独立区段图。
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.
『Do Not Crop Old Images Rule』与『FRESH RE-GENERATION RULE』成对出现，管住最常见的省事路径。
分析环节被规定成『提取设计系统』而非看个大概：明文列出可提取要素（文字、字型、字号关系、间距、栅格、按钮层级、色板、圆角逻辑、图像处理等），并允许为看不清的细节再生成特写图。
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
§9 全清单把图像当规格书读，正文续列 font mood/line count/line wrapping/对齐/间距/圆角/按钮/色板等数十项；§25 甚至要求提取色板并保留原始色彩逻辑，防止换成默认网页色。
实现阶段用 copy-discipline + anti-drift 双约束：忠实于参考图，禁止在编码时『顺手改进』成通用模板。
skills/image-to-code-skill/SKILL.md
Do not “improve” the design by replacing it with a generic coded layout.
Section 26/27 直指最大失败模式——图很强、代码变回 generic；『The goal is: visually faithful to the image, translated into real frontend』。
重复重申式 prompt 工程：同一规则（如『不要偷懒少出图』、『禁 cards-in-cards』、『hero 干净』）在多节以不同详略反复出现，构成强制语气梯度。
skills/image-to-code-skill/SKILL.md
Do not be lazy with image count.
grep 显示该句在 1228 行中出现 3 处（L107/L137/L1212 附近），另有多个同义句；anti-slop 清单（Section 29）亦分 layout/visual/typography/content/density 五类复述。作者用重复对抗模型注意力衰减。
2核心能力
01图像优先流程编排：先自生成参考图，再分析，后实现（视觉任务强制）
02按区段粒度出图（1 section→1 image 起步），保证文字与组件可读可提取
03深度设计系统提取：文字/字型/间距/按钮/色板/圆角/栅格/图像处理逐项抽取
04整区再生与特写补充：不裁剪旧图，不清晰就重新生成同语言干净图或 detail 图
05忠实实现防漂移：copy-oriented 编码，禁止退化成通用模板
06反 AI-slop 五类清单（layout/visual/typography/content/density）+ hero 极简规则（主标题 1-3 行）
07组合变异引擎选方向：Theme/Background/Type/Hero/Section/Motion 各选一组合并承诺一致
08交付前 21 项 clarity check（含图像数量是否偷懒、是否裁图、nested-box 是否清理等）
4管控建议与判定依据
建议配套管控措施
面向 Agent
可自动加载
面向管理者
登记来源与版本
判定依据（文件路径与关键语句摘要）
- SKILL.md: 纯提示词指令与规则文本，无脚本执行与外部影响
审计说明： （证据：目录仅 SKILL.md 单文件，git ls-files 证实；token 扫描零命中 URL/curl/wget/fetch/bash/exec/API key/.env/fs）。skill 级零脚本、零网络外发、零凭证接触、零本地读写；指示宿主读图/生成图/写码均属用户任务的宿主授权行为面，图像调用走宿主工具。注意点：实际图像生成由宿主完成（网络面随宿主）；从自产图像提取文字入码存在极低的图像内文本注入理论面；无图像能力宿主会退回纯建议。均非代码级风险。
5第二遍独立确认
- [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 生成规则。
6结论
适合： 适合『视觉质量是交付核心』的网站任务且运行在支持图像生成的宿主（Codex 图像模式/ChatGPT Images 生态）：hero/落地页/marketing/作品集/品牌页/多区段站点的 image→analyze→code 一条龙；也适合想建立『图先于码』工作流的团队照搬其 SOP 结构。
不适合： 不适合无图像生成能力的宿主或纯技术/结构型任务（bug 修复、用户已给精确设计系统）；不适合追求单张整站图快速出稿的轻量场景（其规则明确反对）；不适合期望 skill 自带图像 API/密钥管理的用户——图像能力与费用都在宿主侧。
Install Agent-Ready
① Verified Mirror 2026-09-09
Option A · Direct DownloadDownload image-to-code.tar.gz
sha256:
Option B · Copy Guide for Agent60f16fb068787a1c…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 3cca18b368.