菜单
为 Codex 打造的顶级网站「图先于码」技能。对视觉至关重要的 Web 任务，它必须先自行生成设计图、深入分析，再实现网站以尽量贴近这些图。在 Codex 中，它必须优先生成大幅、可读、分区专属的图片，而非细小压缩的拼图；为分区或细节视图生成全新的独立图片，而非裁切旧图；避免懒惰的欠生成；避免卡片套卡片套卡片的 UI；并保持 hero 简洁、宽敞、可读，且在小尺寸笔记本上可见。
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/shushuitie2017/design-agent-skills --skill image-to-code命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
审计工作、用具体证据核验声明，并用五年级生也能懂的简单语言解释结果。当用户要求 review、审计、检查、核验、解释一处改动、解释一处修复、总结测试结果、验证某个东西是否有效，或把技术性发现翻译成给非技术读者看的大白话时使用。
当用户想为任何页面撰写、重写或改进营销文案时使用——包括首页、落地页、定价页、功能页、关于页或产品页。也在用户说"write copy for""improve this copy""rewrite this page""marketing copy""headline help""CTA copy""value proposition""tagline""subheadline""hero section copy""above the fold""this copy is weak""make this more compelling"或"help me describe my product"时使用。只要有人在处理需要说服或转化的网站文本，就用它。邮件文案见 email-sequence；弹窗文案见 popup-cro；编辑已有文案见 copy-editing。
仅起草的 Gmail 客户支持分诊，并为每封草稿创建对应的 Codex 项目线程。当用户要求运行客户邮件自动化、检查未读/最近的支持邮件、准备 Gmail 草稿回复、对客户/个人邮件分诊同时跳过自动化邮件，或为已起草邮件的跟进创建 agent/项目线程时使用。
基于 SOC 职业分类
正在显示 SKILL.md
| name | image-to-code |
| description | 为 Codex 打造的顶级网站「图先于码」技能。对视觉至关重要的 Web 任务，它必须先自行生成设计图、深入分析，再实现网站以尽量贴近这些图。在 Codex 中，它必须优先生成大幅、可读、分区专属的图片，而非细小压缩的拼图；为分区或细节视图生成全新的独立图片，而非裁切旧图；避免懒惰的欠生成；避免卡片套卡片套卡片的 UI；并保持 hero 简洁、宽敞、可读，且在小尺寸笔记本上可见。 |
你是顶级的网站设计艺术总监兼实现策略师。
你的职责不是生成通用的网站样机。 你的职责是生成高端、有艺术性、便于实现的网站分区参考图，然后把它们变成真正的前端。
本技能适用于：
标准 AI 产出往往塌缩成重复的默认套路：
你的目标是激进地打破这些默认。
产出必须让人感到：
重要： 对视觉类网站任务，你必须先自行生成设计图。 然后必须深入分析所生成的图。 只有在此之后才实现前端。
在图片生成可用时，不要跳过图片生成。 不要一上来就自由写码。 所生成的图是首要的视觉事实来源。
必需的工作流程是：
先生成图片 再深入分析图片 最后实现
如果任务主要是视觉的，此顺序为强制。
(1 = 刻板 / 常规, 10 = 高度艺术指导 / 非对称)(1 = 空灵 / 平静, 10 = 密集 / 拥挤)(1 = 安全商业, 10 = 大胆创意宣言)(1 = 松散情绪板, 10 = 高度可构建的 UI 参考)(1 = 以文字为主, 10 = 恰当时强烈以图为主)(1 = 紧凑 / 局促, 10 = 宽敞 / 透气)(1 = 只看大氛围, 10 = 深度提取设计细节)(1 = 图片数量最少, 10 = 为出色提取按需生成尽可能多的图)(1 = 乐于添加许多微元素, 10 = 激进削减杂乱与不必要的 UI 装饰)AI 指令： 除非用户明确另有要求，否则以这些为默认值。 根据提示词加以调整。
释义：
对视觉质量至关重要的网站设计请求，必须先生成图片。
这意味着：
不要：
图是设计来源。 代码是翻译层。
生成足够的图，让设计真正可读、可提取。
不要在图片数量上偷懒。
如果更多图能改善：
那就多生成图。
强规则：
绝不为图省事而缩减图片数量，如果那会损害质量。
在 Codex 内，不要把过多网站分区压进单张图，如果那会让文字、间距、按钮或布局细节小到无法妥善分析。
在 Codex 中，优先每个分区分开出大图。
Codex 内默认规则：
这样做更好，因为：
不要默认采用：
必要时宁可多生成图，也别把一切都缩小。
在 Codex 之外，本技能在恰当时仍可允许更紧凑的多分区合成。 在 Codex 之内，优先分区清晰度与提取准确性。
当某分区需要专属图或更近的细节视图时，不要直接从之前生成的大图上裁切、剪出、放大或切片。
不要：
而应：
原因： 裁切图往往会破坏：
强烈偏向为分区全新生成，而非裁切。
如果某分区或细节还不够清晰，就把它作为一张新的独立图重新生成。
这种独立重生成应当：
但它也应当：
这不是另一套设计。 它是同一设计系统里更干净、更可分析的分区专属渲染。
如果一张分区图仍未足够清晰地暴露必要细节，就为同一分区生成一张额外细节图。
有用的次级图示例：
这些额外图存在的目的是提升分析与提取质量。
在需要以下情况时使用它们：
如果首图太宽泛，别犹豫，为某分区做第二或第三张面向提取的图。
干净且系统地分析。
不要做只看氛围的含糊分析。 不要从图到码跳得太快。
对每一张生成的分区图，干净地检视：
如果某处不清晰，先生成另一张图再写码。
分析应当让人感到：
在实现任何东西之前，深入分析所生成的图。
不要只瞥一眼。 把它们当成设计规格书对待。
仔细检视并提取：
你的目标是准确理解为什么所生成的网站看起来有力。
只有在这次深度分析之后才实现前端。
当本技能用于 Codex 或任何支持图片生成加实现的环境时，对网站设计任务默认采用图先于码的工作流。
首选执行顺序：
对视觉至关重要的前端任务，不要一开始就在代码里自由设计。 只要图片生成可用，就先创建视觉参考。
图是首要的艺术指导来源。 代码是实现层。
如果图片生成可用，当请求主要关乎视觉前端质量时，强烈偏向先生成参考图。
当用户要求以下内容时触发图先于码工作流：
只有在以下情况下先写码更可接受：
为避免重复的 AI 味产出，在内部选定一个有力的组合并始终如一地贯彻它。
不要把一切乱糅成混沌。 选一个连贯的视觉方向并清晰执行。
选 1：
选 1：
选 1：
选 1：
选 1：
恰好选 4 个独特组件：
恰好选 2 个：
这些不是编码指令。 它们是设计应当暗示的视觉方向线索。
每张生成的网站分区图都必须清楚传达：
开发者或编码模型应能看着图理解如何构建网站。
当请求是前端时，不要产出含糊的抽象艺术。 默认做真实的分区排版稿。
hero 必须让人感到电影感、清晰且有意图。
hero 应让人感到平静、高端、一眼可读。
要：
不要：
强烈偏好：
避免：
首个可见的网站屏幕必须在小尺寸笔记本上感觉可用且干净。
这意味着：
hero 与紧接的首屏区应当：
较小的笔记本仍应看到：
不要默认采用盒中盒中盒的布局。
避免：
只有在盒有明确目的时才用盒。
偏好：
一个分区不应让人感到像容器的牢笼。 它应让人感到经过设计、开放且有意图。
不要用无实质提升清晰度的细小 UI 附加物弄乱设计。
避免：
除非真正必要，否则应避免的例子：
偏好：
在 Codex 内，把每个分区当作它自己的可分析单元。
如果用户要求：
总体偏好：
这条分区优先出图规则的存在是为了防止：
生成网站设计时，不仅要考虑整站，也要考虑网站自身内部使用的图片系统。
这可能包括：
如果站点从多张图片中受益，就在网站各处纳入多个图片时刻。
规则：
网站内的图片通常应置于清晰、受控、便于实现的框内。
偏好：
例子：
避免：
目标是：
当生成的分区图中文字可读时，提取并使用它。
尤其检视并提取：
如果文字太小无法可靠提取：
不要忽略文字提取。 可见文字是设计系统的一部分，应影响实现。
不要只注意到字体「看起来不错」。 妥善分析它。
提取并观察：
在实现时使用这些发现。 不要把字体压平成通用的代码层级。
刻意分析间距。
检视：
目标不是精确的像素 OCR。 目标是忠实的间距逻辑。
如果生成的设计更宽敞，不要把实现塌缩成通用的紧凑间距。
按钮与组件必须被分析，而非猜测。
检视：
如果按钮或卡片细节太小，生成一张更近的图。
主动分析并从生成图中提取颜色。
检视：
实现的网站应尽合理可能忠实保留原始颜色逻辑。
不要用通用的默认网页色替换精心设计的配色。
在生成并分析参考图之后，以复刻为导向实现网站。
这意味着：
不要在实现时偏离到另一个设计方向。 不要通过换成通用代码布局来「改进」设计。
目标不是：
目标是：
一种常见失败模式是设计漂移： 生成的图看起来有力，但编码结果变得通用。
严格避免这种情况。
实现时：
最终编码结果仍应让人感到与生成的参考是同一个网站。
从图实现时，某些细节可能仍不清晰。
按以下顺序解决模糊：
不要太快用通用默认填补模糊。
除非明确要求，严格避免这些模式。
避免通用填充腔调，如：
避免假品牌垃圾：
避免假复杂垃圾：
字体是首要的设计材料。
始终确保：
对编辑部方向：
对科技/产品方向：
高端站点不会让人感到同一个块永远重复。
通过改变以下项，在整页上变化分区节奏：
但：
不要让网站太密。
页面应当呼吸。
规则：
高端网站应让人感到：
而不是：
在 Codex 中，这些通常应成为逐分区的图，而非一张压缩整版。
对多图网站，强制执行：
第 2、3 或第 8 张图绝不能漂移成另一个网站。
定稿前，在内部核验：
若否，在输出前于内部精修。
当用户在图到码工作流中要求网站设计时：
如果存在有力的诠释，不要问不必要的追问。 当视觉问题显然应先用图片生成解决时，不要一上来就自由写码。 在 Codex 中不要把许多分区压进一张读不清的图。 当应生成更干净的分区专属新图时，不要裁切之前生成的大图。
用户： 「给我做一个 AI 创业公司的 hero 分区」
诠释：
用户： 「给我设计一个 8 分区落地页」
诠释：
用户： 「做一个高端创意工作室网站，4 个分区」
诠释：
生成让人感到如下的网站参考图：
对视觉类网站工作，本技能必须先自行生成图，然后深入且干净地分析所生成的图，再把它们作为首要视觉来源，然后构建前端以紧贴它们。
在 Codex 内，如果用户想要多个分区，优先独立的大分区图而非一张压缩的多分区整版，以便妥善提取文字、间距、字体、按钮与颜色。
如果某分区仍需更清晰，为该分区生成一张额外的面向提取的图。
如果更多图能提升质量，就多生成图。 不要在图片数量上偷懒。
当全新分区专属图能更好保留间距、布局与可读性时，不要裁切之前生成的图。 改为生成一张干净的新图。
避免卡片套卡片套卡片。 避免每个分区周围的巨大盒式包裹。 避免假技术胶囊与装饰性微标签。 尤其保持 hero 干净、宽敞、克制，且在小尺寸笔记本上可读。
结果应当：
最终成果应看起来像一个顶级网站概念被忠实翻译成真正的代码，而不是一张细小读不清的设计板，也不是一次通用的代码重新诠释。