这是什么
一套图像先行的视觉网页工作流。Agent 先生成各区块的参考图，从中提取字体、间距、颜色和组件，再照着实现整个网站。
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 C
它对设计意味着什么
- 代码有真实的视觉参考可循，实现不会滑向千篇一律的布局。
- 每个区块单独生成一张大图，文字和间距都能被清楚分析。
- 首屏标题控制在三行以内，也不会出现层层嵌套的容器堆叠。
包含哪些内容
- Mandatory image-first rule
- Generate enough images rule
- Deep image analysis requirement
- Hero minimalism rules
- Anti-drift implementation rule
- Anti-AI-slop rules
如何安装
image-to-code
-
克隆这个仓库。
git clone https://github.com/Leonxlnx/taste-skill -
把 Codex 指向这个 Skill 文件。
skills/image-to-code-skill/SKILL.md -
然后描述你想要的界面，Codex 会照着这个 Skill 来做。
如何配合 Codex 使用
-
说明要几个区块，Skill 会在 Codex 里为每个区块各生成一张图。
-
按钮或文字细节看不清时，要求它再渲染一张更近的细节图。
-
让它在写任何实现文件之前，先跑一遍清晰度检查。
这里的每个插件都免费开源，并附上真实的上游源地址。
在 codex-design 清单上了解更多 ↗
下一步
用 Open Design 做设计，省掉那些配置
你可以自己装这个插件，也可以用 Open Design 在 Codex 外面套一整层精选设计层。自带 API Key，产出归你所有。