SuperAPI AI 工具集

image-to-ui-skill

前端与建站

查看项目

更新于 10-15 20:05

技能介绍

用途:把 UI 参考图转成可执行的前端或 App demo,先分析哪些区域需要生成图片,再生成、后处理并集成回 UI。适用于 image-to-UI、截图转代码、可点击 App/iOS 原型或高保真复刻。

主要能力:将 UI 拆分为代码渲染 UI(布局、文字、按钮、卡片、简单渐变、表单、图表等)、图标资产、需真实生图的位图资产(照片、插画、产品渲染、复杂纹理、首屏背景等)和抠图资产。生成前输出资产清单,含资产 id、UI 位置、目标尺寸、宽高比、提示词、后处理与集成目标。

使用方式:先按 references/image2-entrypoint.md 确认 image2 调用入口,优先调用 scripts/image2_asset.py,不要自行重写 API 请求。文本生图示例:python "<skill-dir>/scripts/image2_asset.py" generate --prompt "..." --output "public/generated/hero-main.png" --size 1536x1024 --quality medium --output-format png。参考图编辑用 edit 子命令并传 --image。可用 --prefer image2 或 --prefer fallback 强制通道。脚本先尝试原生 image2 命令或 IMAGE2_COMMAND,失败后自动调用 openrouter-icu-image/scripts/openrouter_icu_image.py,模型默认 gpt-image-2。

限制:fallback 需同时满足能定位 OpenRouter ICU CLI(安装同级 skill 或设置 OPENROUTER_ICU_IMAGE_CLI)和凭据可用(OPENROUTER_ICU_API_KEY 或 OPENAI_API_KEY),否则脚本非零码报错,不产出位图。此时须如实说明尚未生图,不得用 CSS/SVG 近似冒充 image2 结果。最终需输出生图验真信息,说明实际通道、资产路径及哪些区域仍为代码近似。