메뉴
将 UI 截图或设计稿复刻为可点击前端/App demo，区分代码 UI 与真实位图资产。Use for image-to-UI, screenshot-to-code, clickable app/iOS prototypes, or faithful recreation; exclude image-only generation and reference-free UI polish.
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/bahayonghang/my-ai-cli-toolkit --skill image-to-ui-skill명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
Independent review of Trellis task planning artifacts. Treats the selected task and its recursive current or archived children as one review scope, verifies repository claims and path:line citations against code, traces every acceptance-criterion clause to a requirement and design mechanism, rechecks arithmetic and units, writes one combined evidence-backed Markdown report under the reviewed project's .trellis/reviews directory, and returns one copyable handoff prompt. Compares the plan with the real diff after the task starts. Use when the user asks to 审阅 trellis 父子任务, 审阅规划, 审查 prd design implement, 检查验收标准有没有机制支撑, review a trellis plan or task tree, audit a plan another agent wrote, or verify plan claims before implementation. Not for a code-diff-only review, writing or repairing the plan, or running the task.
求职申请与面试准备套件：针对目标职位（JD/职位描述）量身定制简历与求职信，在诚实边界内修改与包装既有经历， 生成阶段化面试准备包并支持模拟面试。触发词：写简历、改简历、简历定制、tailor resume、resume、CV、 resume writing、求职信、cover letter、投递、申请职位、job posting、JD、职位描述、岗位匹配、fit 评估、 面试准备、面试问题、interview prep、mock interview、模拟面试、包装经历、量化成果。 不适用于：职位批量抓取与申请追踪管理、通用营销或商务文案、学术论文写作、招聘方视角的简历筛选。
Turn vague or complex agent tasks into project-aware, verifiable `/goal` commands and optional approved root `GOAL.md` handoff contracts for Claude Code, Codex, Grok Build, Oh My Pi, and Kimi Code. Use for Goal 指令, 目标指令, `/goal` prompts, 中文 Goal 模板, goal 持久化/保存/落盘, fresh-Agent or 跨会话交接, plan-to-goal interviews, bounded agent work definitions, Trellis 任务实施, 子任务实施, commit-then-archive cadence, or 终稿展示. Do not use for ordinary one-line work, pure exploration, memory-vault creation, or active-goal management that only needs a platform command.
SOC 직업 분류 기준
SKILL.md 표시 중
| name | image-to-ui-skill |
| description | 将 UI 截图或设计稿复刻为可点击前端/App demo，区分代码 UI 与真实位图资产。Use for image-to-UI, screenshot-to-code, clickable app/iOS prototypes, or faithful recreation; exclude image-only generation and reference-free UI polish. |
| category | developer-tools-integrations |
| tags | ["image-to-ui","codex","frontend","prototype","image2"] |
| version | 0.1.0 |
| argument-hint | [ui-reference-image] |
| allowed-tools | Read, Write, Edit, Bash, Glob, Grep |
使用这个 skill，把 UI 参考图转成可执行的图片资产方案：先分析哪些区域需要生成图片，再生成、后处理，并集成回 UI。
本文件保留路由、核心生图边界与主流程；App/网页交付、UI 分析、字体、尺寸、提示词写法、抠图、集成、交互、审查、差距核对与最终交付报告等细则已下沉到 references/，按需读取(见文末「详细规则索引」)。
当用户明确要求“调用 image2 生图”“用 image2 复刻”“参考图片做高保真 UI”，或参考图的效果明显依赖摄影、插画、颗粒、半色调、像素噪点、复杂纹理、景深、真实材质、复杂岛屿/地图/角色等位图质感时，必须优先走真实的 image2 位图生成流程，而不是只用 HTML/CSS/SVG 做近似。
在这类任务里：
以下内容默认视为 应优先调用 image2：
以下内容默认 不要交给 image2：
本 skill 里的 image2 指项目指定的 image2 调用入口，不等同于任意图片生成工具。当前 skill 也包含一个备案通道：当原生 image2 命令不可用或失败时，scripts/image2_asset.py 会在备案前置条件满足时自动转到 OpenRouter ICU gpt-image-2(前置条件见下方「备案通道前置条件」)。若前置条件不满足，脚本会以非零码明确报错，此时必须如实说明尚未生图，不得声称已落地位图。
执行时：
references/image2-entrypoint.md 确认当前项目的 image2 调用入口和备案通道。scripts/image2_asset.py，不要自己重写 API 请求。scripts/image2_asset.py 会先尝试原生 image2 命令或 IMAGE2_COMMAND 环境变量；失败后自动调用 openrouter-icu-image/scripts/openrouter_icu_image.py，模型固定默认为 gpt-image-2。gpt-image-2 记为“image2 备案通道”或“fallback 通道”，但最终必须说明实际走的是 native-image2 还是 openrouter-icu-gpt-image-2。imagegen skill、其它图片生成插件、随机在线生图服务或手写 SDK 请求当作本 skill 的 image2/fallback 通道。OpenRouter ICU gpt-image-2 备案通道并非无条件可用。scripts/image2_asset.py 走 fallback 需要同时满足：
openrouter-icu-image skill(脚本默认查找 openrouter-icu-image/scripts/openrouter_icu_image.py),或显式设置 OPENROUTER_ICU_IMAGE_CLI 指向该脚本。本仓库默认不附带该兄弟 skill，需要时另行安装或配置。OPENROUTER_ICU_API_KEY 或 OPENAI_API_KEY。任一前置条件不满足时，脚本会以非零码报错(例如 OpenRouter ICU fallback CLI not found，或提示需要配置 API key),不会产出位图。此时按下文「真实生图验真」与 references/image2-entrypoint.md 的「找不到入口时怎么办」处理:完成 UI 拆解、资产清单、提示词与代码骨架，明确标注“尚未完成真实位图资产生成”,不得用 CSS/SVG 代码近似冒充 image2 结果。
下列命令中的
<skill-dir>是 skill 加载时公布的实际根目录。请替换为字面路径；它不是环境变量。Git Bash 使用python，Windows PowerShell 找不到python时将其替换为py -3。
文本生图：
python "<skill-dir>/scripts/image2_asset.py" generate \
--prompt "为 App 首屏生成一张无文字、无 logo 的高级时尚产品主视觉，留出左侧文案空间，柔和自然光，4:3" \
--output "public/generated/hero-main.png" \
--size 1536x1024 \
--quality medium \
--output-format png
参考图编辑或多图参考：
python "<skill-dir>/scripts/image2_asset.py" edit \
--image "reference.png" \
--prompt "保留参考图主体轮廓和色彩气质，生成无文字、无 logo 的 UI 卡片缩略图，适合 3:2 裁切" \
--output "public/generated/card-visual.png" \
--size 1536x1024 \
--quality medium \
--output-format png
强制只测试原生 image2：
python "<skill-dir>/scripts/image2_asset.py" generate \
--prompt "test image" \
--output "output/generated/test.png" \
--prefer image2
强制走备案通道：
python "<skill-dir>/scripts/image2_asset.py" generate \
--prompt "test image" \
--output "output/generated/test.png" \
--prefer fallback
OpenRouter ICU fallback 需要 OPENROUTER_ICU_API_KEY 或 OPENAI_API_KEY 可用。脚本会用当前 Python 运行已安装的 OpenRouter ICU CLI，不使用 py -3。
当任务触发 image2 流程时，至少完成这个闭环：
scripts/image2_asset.py，优先原生 image2，必要时自动备案 OpenRouter ICU gpt-image-2，产出真实位图文件。如果上述 1-7 没完成，不要把任务描述成“已用 image2 完成复刻”；应准确描述为“已完成部分生图”或“仅完成生图准备”。
object-fit、响应式约束、alt 文本和必要的懒加载。确认 image2 调用入口、判断能否真实生图时，读取 references/image2-entrypoint.md。构建资产清单、编写 image-to-ui 提示词、计算输出尺寸或规划抠图/去背景时，读取 references/asset-manifest-and-prompts.md。
当用户要把社媒视觉热点、INS/Pinterest 小趋势或图像创作工具做成可用网页，并关心上线验证、传播数据或技术社区案例时，可读取 references/hicolor-case-study.md 作为真实项目参考。
如果任务涉及 image2，最终必须输出一段“生图验真”信息，至少包含：
native-image2 或 openrouter-icu-gpt-image-2禁止出现以下误导性表述：
如果页面仍主要依赖代码近似，必须明确写成：
以下细则均从本 skill 下沉到 references/，内容与此前 SKILL.md 一致，按需读取：
references/image2-entrypoint.md — 确认 image2 调用入口、备案通道与生图后的验真记录。references/asset-manifest-and-prompts.md — 前期审查模板、资产清单模板、image2 提示词模板、页面级检查清单。references/delivery-app-and-web.md — App 形式触发规则(iOS 外边框、Dynamic Island、可点击预览、截图验真)与网页交付默认规则。references/integration-rules.md — UI 分析规则、字体识别与加载、尺寸规划、image-to-ui 提示词写法、抠图与去背景、集成规则、交互与跳转。references/review-and-gap-check.md — 前期审查与确认、常见风险与防护、页面级审查、原图差距核对与迭代、最终交付报告。references/hicolor-case-study.md — 把社媒视觉趋势做成可上线网页的真实项目案例。references/fashion-shopping-app-case-study.md — 女装购物 App 的风格参考、多屏复刻与展示 mockup 案例。references/museum-app-case-study.md — 博物馆多屏移动端 UI 的还原、串联与交付案例。