image2_UI_skill

把 UI 截图、设计稿、App 参考图交给 Codex，让它先拆清楚哪些应该用代码实现，哪些必须真实调用 image2 生成位图资产，再把资产接回一个可打开、可点击、可继续修改的 demo。

Give Codex a UI screenshot, design mockup, or app reference. This skill helps Codex split the work into code-rendered UI and real image2 bitmap assets, then wire everything back into an openable, clickable, editable demo.

适合什么场景 / When To Use

• 你有 App、网页、海报式界面或产品 UI 参考图，想快速变成可交互原型。
• You have an app, website, poster-like interface, or product UI reference and want a clickable prototype quickly.
• 画面里有复杂照片、商品图、插画、纹理、背景或抠图，不能只靠 CSS/SVG 占位。
• The reference includes photos, product imagery, illustration, textures, backgrounds, or cutouts that need real bitmap assets.
• 你希望最终结果能本地预览、能点击、能继续改，而不是停在“生成了一张图”。
• You want a local preview that can be clicked and iterated on, not just a single generated image.

安装 / Install

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"

安装后重启 Codex，或新开一个会话。

Restart Codex after installation, or open a new session.

用法 / Usage

把参考图发给 Codex，然后这样说：

Send Codex the reference image and say:

使用 image-to-ui-skill，参考我上传的图，做一个可点击 demo。
需要真实调用 image2 生成必要图片资产，并接回页面。

English prompt:

Use image-to-ui-skill with my uploaded reference image to build a clickable demo.
Call image2 for the required bitmap assets and wire them back into the page.

如果你已经知道目标平台，也可以补一句：

If you already know the target platform, add:

做成手机 App 外框，包含 3 个可点击页面，并验证本地预览。
Build it as a mobile app frame with 3 clickable screens and verify the local preview.

它会怎么做 / Workflow

阶段 / Stage	产出 / Output	判断标准 / Decision rule
拆图 / Split	code-ui 和 image2-assets 两张清单 / two inventories	文案、按钮、状态栏、导航、表单、普通 icon 进入代码；照片、产品、插画、纹理、背景进入 image2 / Text, controls, status bars, navigation, forms, and common icons are code; photos, products, illustrations, textures, and backgrounds are image2 assets.
生图 / Generate	本地图片资产与提示词记录 / local assets and prompt records	资产有用途、尺寸、裁切方式和负面约束，不把可读 UI 文案烯焙进图片 / Assets include purpose, size, crop rules, and negative constraints; readable UI text is not baked into images.
实现 / Build	HTML/CSS/JS 或项目现有技术栈 / existing project stack	页面能打开，控件能点击，移动端不横向滚动 / The page opens, controls are clickable, and mobile layouts avoid horizontal scroll.
校验 / Verify	截图、交互检查、图片加载检查 / screenshots and audits	本地资源可用，关键流程可走通，输出能继续修改 / Local assets load, key flows work, and the output remains editable.

案例 / Examples

点击参考图可以查看原图；点击预览图可以查看视频或更大的输出。

Click a reference image to inspect it; click a preview to open the demo video or larger output.

Museum App

博物馆导览 demo，把参考图里的展览、藏品和层级关系拆成可点击的 Home、Exhibitions、Detail 流程。

An iOS-style museum guide demo that turns exhibitions, artworks, and hierarchy into clickable Home, Exhibitions, and Detail flows.

参考图 / Reference	可点击 demo 预览 / Clickable demo preview
	查看视频 / Watch video

Fashion Shopping App

时尚购物 App 原型，把商品视觉留给图片资产，把 tab、筛选、收藏、卡片状态交给代码实现。

A fashion shopping app prototype where product visuals are bitmap assets and tabs, filters, favorites, and card states stay code-rendered.

参考图 / Reference	可点击 demo 预览 / Clickable demo preview
	查看视频 / Watch video

News App

新闻阅读与发现页 demo，用代码处理列表、标签、底部导航和状态切换，用资产承载新闻封面与视觉氛围。

A news reading and discovery demo where lists, chips, bottom navigation, and state changes are code-rendered while covers and atmosphere are asset-backed.

参考图 / Reference	可点击 demo 预览 / Clickable demo preview
	查看视频 / Watch video

hicolor

内容增长与图文案例展示，适合检验“参考素材 + 结构化页面 + 真实图文资产”的组合输出。

A content-growth case for checking mixed outputs: source material, structured pages, and real visual assets.

素材 / Material	输出 / Output
	查看补充图 / View extra image

关键约束 / Key Rules

• 需要生图时必须调用项目指定的 image2。如果当前环境没有可用入口，应该说明缺口，不能把 CSS/SVG/占位图说成已生图。
• When image generation is required, use the project-designated image2. If no channel is available, state the gap instead of presenting CSS/SVG/placeholders as generated assets.
• 生成图片里不要包含可读 UI 文案、logo、水印、状态栏、按钮或小图标。
• Generated images must not contain readable UI text, logos, watermarks, status bars, buttons, or small UI icons.
• 返回、关闭、菜单、搜索、设置、电量、Wi-Fi、播放、底部 tab、开关、加减号都应该由代码渲染。
• Back, close, menu, search, settings, battery, Wi-Fi, playback, bottom tabs, toggles, plus, and minus controls should be code-rendered.
• 最终 demo 必须可打开、可点击、可继续修改。
• The final demo must be openable, clickable, and editable.

仓库结构 / Repository Structure

.
|-- SKILL.md                  # Codex skill entry and execution rules
|-- references/               # image2 splitting, cases, and engineering loop references
|-- scripts/                  # image2-ui helper scripts
|-- assets/                   # README and case media
`-- demo/                     # Clickable demos

Multi-Agent Production Flow

When the host supports subagents, the skill can orchestrate these specialist roles:

Visual + Asset
      |
Architecture + Backend Contract + State Machine
      |
UI Implementation
      |
Accessibility + QA
      |
Release

If subagent tools are unavailable, the same roles run sequentially in one agent. See references/multi-agent-orchestration.md for inputs, outputs, handoff artifacts, and reusable prompts.

联系作者 / Contact

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

如果你对这个项目有建议、问题或合作想法，欢迎通过邮件或微信联系。

For suggestions, issues, or collaboration ideas, contact the author by email or WeChat.