image-to-ui-skill

Skill 简介

image-to-ui-skill 适合把 UI 截图、设计稿或 App 参考图变成可点击 demo。它的重点不是只用 CSS 拼一个相似页面，而是先拆清楚哪些部分应该用代码实现，哪些复杂视觉应该调用 image2 生成真实图片资产。

适合场景

• 看到一张 App 或网页参考图，想快速做出能点的 demo。
• 需要把复杂照片、产品图、纹理、插画或背景接进真实页面。
• 想保留按钮、文字、导航、表单和状态栏的可编辑性。
• 需要验证移动端布局、点击反馈和页面切换，而不是只看静态截图。

工作方式

这个 Skill 会先拆成两张清单：

• code-ui：文字、按钮、状态栏、导航、表单、开关、标签、普通图标和交互控件。
• image2-assets：照片、产品图、人物、插画、纹理、背景、地图、缩略图和物体抠图。

拆完之后，再调用 image2 生成真实图片文件，把这些资产放进项目目录，并用项目现有技术接回页面。这样做的好处是，界面里的文字和控件仍然可编辑，复杂视觉也不会被粗糙占位图替代。

使用步骤

1. 准备参考图，最好同时说明目标设备、页面宽度和需要还原的重点区域。
2. 让 Codex 使用 image-to-ui-skill，并明确要求生成可点击 demo。
3. 要求 Codex 先列出代码界面清单和图片资产清单。
4. 让 Codex 调用 image2 生成必要资产，并保存到项目资源目录。
5. 打开本地预览，检查文字、按钮、图片、移动端宽度和点击反馈。

注意事项

• 如果当前环境没有 image2 入口，Codex 必须说明缺口，不能把占位图说成已经生图。
• 生成图片里不要放可读 UI 文案、Logo、水印、状态栏、按钮或小图标。
• 移动端 demo 需要检查安全区、底部导航、横向溢出和文字截断。
• 最终交付必须能继续修改，不能只给一张静态图。