image2_UI_skill

把参考图、设计稿或一句描述，变成真正可运行、可点击、可继续修改的 UI。

不是把整页做成一张图：界面结构、文字、按钮、导航和交互由代码与组件实现；人物、产品、动物、照片、插画和复杂背景等视觉资产由 image2 生成并融入真实布局。

_{Actual generated output · Golden retriever / summer pool visual}

Mimo Activities 活动流、卡片层级与移动端浏览节奏	Softly Reflections 日记记录、柔和过渡与空状态
Cleanbite Scanner 扫码识别流程、结果状态与操作反馈	Museum App 多屏导航、作品缩略图与详情页串联
Fashion Shopping App 商品视觉资产、筛选流程与详情展示

更多案例：UI Case Gallery

最终结果强调四件事：

• 真实代码 UI — 文案、按钮、导航、表单、状态、交互都能继续编辑。
• 真实视觉资产 — 人物、产品、动物、摄影、插画和背景可以用 image2 独立生成，不把整张截图当页面。
• 组件一致性 — 同一个 Status Bar、Bottom Nav、Button、Icon 不会每个页面重新画一套。
• 视觉完成度 — 关注构图密度、裁切、Safe Area、图文关系、层级和最终浏览器 Render，而不只关注“代码能运行”。

• App / Web 页面复刻
• Figma / Screenshot to UI
• Landing Page / Campaign Page
• Dashboard / SaaS
• 电商、内容、社交、工具型产品
• 强视觉 Hero / Editorial Layout
• Design System 对比与组件化生成
• 快速做可点击产品原型

Windows PowerShell:

git clone https://github.com/zhu-guli326/image2_UI_skill.git "$env:USERPROFILE\.codex\skills\image2_UI_skill"

macOS / Linux:

git clone https://github.com/zhu-guli326/image2_UI_skill.git "${CODEX_HOME:-$HOME/.codex}/skills/image2_UI_skill"

示例：

image2-ui run <project-dir> --mode recreate --task "Recreate this UI faithfully" --reference reference.png

image2-ui run <project-dir> --mode redesign --task "Redesign this reference for my product" --reference reference.png

image2-ui run <project-dir> --mode create --task "Create a premium mobile app"

• UI Case Gallery — https://zhu-guli326.github.io/ui_case/library.html?lang=zh
• Design Systems — https://zhu-guli326.github.io/ui_case/brands.html?lang=zh
• UI Vocabulary — https://zhu-guli326.github.io/ui_case/vocabulary.html?lang=zh
• Skill specification — SKILL.md
• Production / validation — PRODUCTION.md
• Video case index — references/video-case-previews.md

• Email: juguli326@gmail.com
• WeChat: 13434361868