image2_UI_skill — Turn UI screenshots into clickable Codex demos with code UI
image2_UI_skill
Turn UI screenshots into clickable Codex demos with code UI and real image2 assets.
GitHub: https://github.com/zhu-guli326/image2_UI_skill
| 指标 | 值 |
|---|---|
| Stars | 122 |
| Language | Python |
| License | Unknown |
| Topics | ai-ui, app-prototype, codex-skill, design-to-code, frontend-demo |
README 摘要
# Image2 to UI Skill
把 UI 截图、设计稿、App 参考图交给 Codex，生成可点击的网页或 App demo，并在需要真实视觉资产的位置调用 image2 生成位图。
Turn UI screenshots and design references into clickable Codex demos with code-rendered UI and real image2 visual assets.
一句话：一张 UI 参考图 -> 可点击 demo + 真正落地的生图资产。
这个 skill 适合：
- 将 UI 参考图复刻成可预览、可点击的前端 demo
- 区分哪些内容应该用代码实现，哪些内容应该生成图片资产
- 为首屏主视觉、卡片缩略图、复杂插画、纹理、产品图、抠图等资产生成并接回页面
- 做手机 App 参考图时，交付带 iOS 外边框的可交互预览
为什么不一样
- 不是把整张 UI 烘焙成一张图片，而是保留真实可交互的文字、按钮和布局。
- 不是只用 CSS/SVG 临摹复杂视觉，而是把主视觉、插画、纹理、产品图等区域交给
image2。 - 最终目标不是一张截图，而是可打开、可点击、可继续改的 demo。
Demo
| 参考图 | 复刻预览 |
|---|---|
 |
 |
| 原始参考图 | 点击查看原视频 |
案例素材
hicolor 增长案例
从 INS 视觉趋势出发，用 Codex 做成图片创作小工具并上线；上线 3 天获得 1,155 visitors / 2,102 page views。
| 三天访问数据 | 传播证据 |
|---|---|
 |
 |
| 阅读完整 case study | 查看小红书验证图 |
博物馆 App
| 参考图 | 复刻预览 |
|---|---|
 |
 |
| 原始参考图 | 点击查看原视频 |
女装购物 App
| 参考图 | 复刻预览 |
|---|---|
 |
 |
| 原始参考图 | 点击查看原视频 |
新闻阅读 App
| 参考图 | 复刻
目录
image2_UI_skill — Turn UI screenshots into clickable Codex demos with code UI
|
|---|