image-to-ui-skill
by zhu-guli326
Use when the user asks for image2 生图, 调用 image2, image2 生成图片, gpt-image-2, AI 生图, 出图, 生成 UI 位图资产, 参考图生图, or image-to-UI. 将 UI 截图、设计稿、图片转换为可实现的前端代码和图片资产；also use for UI screenshot to code, clickable app demo, mobile prototype, iOS preview, high-fidelity UI recreation from reference images, automated UI output validation, design-spec enforcement, icon rules, and layout/typography quality checks. 分析哪些部分应该用代码实现，哪些部分应该生成位图资产。识别图片依赖区域、图标、按钮、字体、背景、首屏视觉、产品渲染图、抠图、透明 PNG 资产，生成提示词并回填到前端 UI 中。涉及生图时必须把系统内置 imagegen/image_gen 和项目 image2 命令都视为 native-image2 来源；如果 native-image2 不可用或失败，再走 Youtoken/OpenRouter ICU gpt-image-2 API 备案通道。普通系统生图和项目原生 image2 最终都可标记为 native-image2，但要记录来源 source=system-imagegen 或 source=project-image2；项目可复跑资产优先用 scripts/image2_asset.py，它会先尝试 native-image2，失败再备案到 youtoken-gpt-image-2 或 openrouter-icu-gpt-image-2，确保真实生成位图文件。当用户说“找不到 image2”“检索不到 image2 生图”“没有真的生图”时，先运行 image2-ui doctor 诊断系统 imagegen、项目 image2 命令和 API 备案入口，再落地真实图片。当用户要求做成 App 形式、手机 App、iOS 预览、可点击 App demo 或移动端原型时，必须生成带 iOS 手机外边框的可点击预览，并提供渲染截图。交付前应进行页面输出巡检和参考图对照，检查破图、文字溢出、低对比度、嵌套卡片、模板化渐变文字、单一 AI 配色、icon tile 模板化、无障碍标签、触摸目标、图标视觉错位、交互死区和响应式问题。