用途
image-to-code 是一个面向 Codex 的网页图像转代码技能，来源为 leonxlnx/taste-skill。其核心指令为「图像优先的网站设计到代码」（IMAGE-FIRST WEBSITE DESIGN TO CODE）。该技能把自己定位为精英级网页设计艺术指导与实现策略，目标不是生成通用网站稿，而是生成高级、具艺术性、便于实现的网站区块参考，并将其转化为真实前端。
适用对象包括：hero 区域、落地页、营销站点、创业公司站点、编辑型品牌页、产品页、作品集网站、高端多区块网站，以及视觉质量重要的重设计任务。
主要能力
技能强调打破标准 AI 输出中常见的默认模式，例如：把过多区块压进单张巨图、文字小到不可读、居中式暗色 hero 陈词滥调、泛化卡片堆砌、重复的左文右图布局、弱化的字体层级、模糊间距、卡片套卡片、到处是巨大圆角区块容器、首屏信息过多、细小药丸标签与系统标记、好看但不可提取的设计、图像步骤之后的通用代码重述、区块多却懒惰地只生成少量图片等。
技能内置一组基线配置（DESIGN_VARIANCE 8、VISUAL_DENSITY 3、ART_DIRECTION 8、IMPLEMENTATION_CLARITY 9、IMAGE_USAGE_PRIORITY 9、SPACING_GENEROSITY 9、ANALYSIS_PRECISION 10、IMAGE_GENERATION_EAGERNESS 10、UI_SIMPLICITY_DISCIPLINE 9），并说明这些作为默认值，除非用户明确想要其他效果，需根据提示词调整，例如用户说 clean 则降低密度提高清晰度，说 crazy creative 则提高变化度与艺术指导等。
使用方式与工作流
技能规定强制性的图像优先规则：对于视觉质量重要的网站设计请求，必须先自行生成设计图像，再深入检查分析并提取设计系统，最后才实现前端；不得从自由编码开始、不得跳过直接实现、不得在可生成图像时仅凭记忆描述网站。图像是设计来源，代码是翻译层。
在 Codex 中，技能规定不要把一个网站的过多区块压缩进单张图，以免文字、间距、按钮和布局细节过小无法分析，而应优先为每个区块生成单独的大图：请求 1 个区块生成 1 张图，2 个区块生成 2 张图，依此类推。技能还规定禁止裁剪旧图：需要专门区块图或细节视图时，不能从先前生成的大图里裁剪、切出、放大或切片，而应生成全新的区块图或细节图，同时保持同一设计语言、配色、字体调性、按钮风格、圆角逻辑、图像处理和品牌世界。
技能还包含可选细节图规则：若区块图仍不足以清楚暴露细节，可为同一区块生成额外的细节图，例如更近的 hero 渲染、定价卡细节、推荐语细节、导航栏细节、功能卡或 UI 面板细节、页脚或 CTA 细节等。
工作流首选顺序为：推断区块数量、先生成区块参考图、按需生成额外细节或提取图、必要时将不清晰区块重新生成为独立图、深入检查所有生成图、提取文字/字体/间距/颜色/布局/按钮和组件逻辑、实现网站以尽量贴近生成的设计、仅在图像模糊处才自行补足细节。
分析标准
技能要求干净且系统化地分析，不做仅凭感觉的模糊分析，不急于从图像跳到代码。对每张生成的区块图需检查：区块是什么、视觉优先级是什么、哪些文字可读、可见的字体关系、可见的间距关系、可见的按钮与控件、可见的卡片或区块逻辑、主导颜色、可见的结构节奏、仍不清晰的细节。若不清楚则先再生成一张图再编码。
实现前需深度分析生成图，视其为设计规格，仔细提取：可读文字的精确内容、hero 标题措辞、副标题措辞、CTA 措辞、区块标题、字体特征、字号层级关系、字体调性、行数、换行行为、对齐逻辑、区块间距、内部间距、内边距与栏距、卡片尺寸与节奏、圆角逻辑、描边与分割线用法、按钮形状、按钮层级、按钮内边距、视觉暗示的悬停样式（若图中可见）、配色、强调色、背景处理、图像处理、图标处理、阴影与深度逻辑、网格逻辑、布局结构、区块顺序、区块密度、视觉节奏，以及定义设计语言的重复母题。
适用场景与限制
技能规定在图像生成可用且请求主要关乎视觉前端质量时，强烈优先先生成图像参考。触发图像优先工作流的场景包括：漂亮 hero 区块、高端落地页、创意网站、重设计、更现代的网站、更美观的界面、精致营销页、作品集网站、视觉品味重要的创业公司站点、多区块网站概念，以及任何主要以视觉术语描述的请求。仅当任务主要是技术性的、用户要修 bug、用户已提供精确设计系统、或任务主要是结构而非视觉时，才更可接受直接编码优先。
技能还包含组合变化引擎（从主题范式、背景特征、字体特征、hero 架构、区块系统各选 1 项，从标志性组件集选 4 个，从暗示动效语言选 2 项）、网站参考规则、hero 极简规则等。需注意：json 资料未提供收费、价格、平台、安装命令、具体执行效果等信息，这些内容暂未提供。