图像转代码技能
先生成网站设计参考图，再深度解析，最后忠实实现为前端代码。
该技能仅包含设计流程指令，不涉及凭据、网络请求、外部服务或用户数据，权限最小化原则基本满足。然而，它明确指示模型自行生成设计图像，这可能被视为需要用户确认的副作用（如消耗资源或创建内容），但文档未提及任何用户确认步骤。此外，发布者身份未知，来源归属不完整。这些因素导致扣分，评分为12。
指令自洽，未发现明显矛盾。关键路径（生成图像→分析→实现）清晰，但依赖外部图像生成能力，若不可用则技能失效。静态审查无法测试，且错误处理和失败反馈不足（当图像生成不可用时缺少明确说明）。因此评分为7。
技能适用于视觉网站设计，场景界定清晰，但不适用范围和触发条件的边界有限（未明确说明何时不适用，仅粗略提及技术性任务可跳过图像）。环境适配方面，若图像生成功能依赖大陆无法访问的服务，则存在不可用风险，文档未提及。因此评分为7。
技能有清晰的结构和渐进式披露，包含参数、示例和设计指南，但没有安装说明、依赖说明或已知限制的披露。许可证在仓库中明确为MIT，但该技能文件本身未提及版本或变更记录。维护责任清晰（通过README），但技能内部缺少治理信息。因此评分为10。
技能承诺改善视觉设计质量，通过图像优先流程实现，方法合理。但输出直接可用性和边际收益的证据有限，静态审查无法验证结果，且可能产生大量图像，成本效益不明确。因此评分为7。
仓库包含README中的示例图片和赞助商证据，但技能的关键声明（提升设计质量、避免生成低质输出）没有可复现的测试或独立验证。仅有作者的主张和示例，静态审查无法独立重现。因此评分为5。
- 该技能依赖图像生成能力，若不可用则流程失效；确保环境支持或提供替代方案。
- 技能指示模型自行生成图像，可能产生大量资源消耗；建议在需要用户确认时明确提示。
- 若图像生成服务在中国大陆无法访问，技能可能完全不可用；请评估网络可达性。
- 静态审查未验证实际输出质量，建议在小规模项目上试用后再广泛应用。
这个 Skill 能做什么，适合哪些场景？
这是一个面向 Codex 等编码代理的图像优先设计流程技能。它要求代理在编写代码之前，先自行生成网站各区块的高质量参考图，然后进行深入分析，提取设计系统（排版、间距、色彩、组件等），最后实现与参考图高度一致的前端。该技能强调避免常见的 AI 生成模板化设计，如压缩的示意图、卡片套卡片、过度使用胶囊标签等。它提供详细的规则和流程，确保生成的界面具有艺术指导、可读性和可实现性。
它规定了一个工作流程：首先根据用户请求推断网站类型和区块数量；然后生成每个区块的独立参考图，必要时生成额外的细节图（如文本、按钮的放大图）；对生成的图像进行深度分析，提取文本、排版、间距、色彩、按钮和组件等细节；最后基于这些分析结果实现前端代码，并确保代码忠实于图像设计。
- 想要一个视觉上高品质的营销落地页的开发者，可让代理先生成设计图再编码。
- 设计师需要将概念草图转化为代码，但希望保留设计意图。
- 使用 Codex 的用户希望避免默认的模板化界面，获得更具艺术性的设计。
- 需要重构现有网站，希望先通过图像探索新视觉方向的团队。
- 希望通过图像到代码的工作流，提升网站设计一致性和实现准确性的开发者。
这个 Skill 有哪些优点和局限？
- 强制图像优先流程，避免随意编码，提高设计质量
- 提供详细的反模式清单（如卡片套卡片、假 UI 标签）
- 强调为每个区块生成独立图像，确保可读性和可提取性
- 包含深度分析规则，确保设计系统被忠实保留
- 需要环境支持图像生成，否则无法执行核心工作流
- 规则非常详尽，可能对简单任务来说过于繁琐
- 未提供自动化测试，使用时需要手动验证结果
- 针对 Codex 进行了特定优化，其他平台可能需要调整
如何安装这个 Skill？
使用以下命令安装整个技能集合（包含此技能）：
npx skills add https://github.com/Leonxlnx/taste-skill或仅安装此技能：
npx skills add https://github.com/Leonxlnx/taste-skill --skill "image-to-code"也可以手动将 SKILL.md 文件复制到项目中，或粘贴到对话中。
如何使用这个 Skill？
在支持图像生成的代理（如 Codex）中，在提示中声明使用此技能，例如：
"遵循 image-to-code 技能：先生成图像，再分析，然后编码。"
然后描述你的网站需求，如 '设计一个 8 区块的着陆页'。代理将自动生成各区块的图像，分析它们，然后实现代码。
这个 Skill 与同类方案有什么区别？
与集合中的其他技能（如 design-taste-frontend）相比，本技能专注于图像生成和实现的工作流，而非直接编码时的设计规则。