ImageGen UI Skill

把 UI 参考图做成可点击 demo。少解释，多落地。

Turn UI references into clickable demos. Keep the explanation lean and make the output real.

必守原则 / Non-Negotiables

• 需要生图时，调用 WorkBuddy 的 ImageGen 工具（通过 ToolSearch 加载后用 DeferExecuteTool 调用）。如果当前环境没有 ImageGen 可用，要说明缺口，不能把 CSS/SVG/占位图说成已生图。
• When image generation is needed, call WorkBuddy's ImageGen tool (load via ToolSearch, then invoke with DeferExecuteTool). If ImageGen is unavailable, state the gap instead of presenting CSS/SVG/placeholders as generated images.
• ImageGen 只负责复杂位图：照片、产品图、人物、插画、纹理、背景、地图、卡片缩略图、物体抠图。
• ImageGen is for complex bitmap work: photos, products, people, illustrations, textures, backgrounds, maps, thumbnails, and object cutouts.
• 代码负责 UI：文字、按钮、状态栏、导航、表单、开关、价格、标签、普通 icon、播放器控件。
• Code owns UI: text, buttons, status bars, navigation, forms, toggles, prices, labels, common icons, and player controls.
• 生成图片里不要包含可读 UI 文案、logo、水印、状态栏、按钮或小图标。
• Generated images must not contain readable UI text, logos, watermarks, status bars, buttons, or small UI icons.
• 最终 demo 必须可打开、可点击、可继续修改。
• The final demo must be openable, clickable, and editable.

ImageGen 调用规范 / ImageGen Channel

本技能使用 WorkBuddy 内置的 ImageGen 工具进行图片生成。ImageGen 是唯一的生图通道，不再依赖外部 API 或脚本。

This skill uses WorkBuddy's built-in ImageGen tool for all image generation. ImageGen is the sole image generation channel — no external APIs or scripts are needed.

调用流程 / Invocation Flow

1. 通过 ToolSearch 加载 ImageGen 工具 schema。
2. 通过 DeferExecuteTool 调用 ImageGen，传入提示词。
3. ImageGen 支持：文生图（prompt only）和图生图（prompt + 参考图）。

4. 生成的图片保存在本地，将路径接入 HTML/CSS。

5. Load the ImageGen tool schema via ToolSearch.

6. Invoke ImageGen via DeferExecuteTool with the prompt.
7. ImageGen supports: text-to-image (prompt only) and image-to-image (prompt + reference image).
8. Generated images are saved locally; wire the file path into HTML/CSS.

信用消耗提醒 / Credit Cost Notice

每次调用 ImageGen 会消耗约 5-10 credits。在开始批量生图前，必须告知用户信用消耗情况。

Each ImageGen call consumes roughly 5-10 credits. Before batch generation, inform the user of the credit cost.

什么不能冒充 ImageGen

以下都不能当作 ImageGen 产出，除非用户明确允许作为替代方案：

• 用 CSS、SVG、渐变、噪点或截图近似复杂视觉
• 从网络下载图片后声称已经生图
• 用 emoji 或位图 icon 冒充真实产品图

If any substitute is used, the final report must explicitly label it as "substitute", not "ImageGen generated".

工作流 / Workflow

1. 拆出两张清单：code-ui 和 imagegen-assets。
2. 为每个 imagegen-assets 写清楚用途、尺寸、风格、裁切方式和负面约束。
3. 调用 ImageGen 生成真实图片文件，并放进项目资产目录。
4. 用项目现有技术实现页面，把生成资产接回界面。
5. 如果是 App 或手机参考图，默认做手机外框、状态栏安全区、Dynamic Island 或等效设备 chrome，以及可点击页面切换。
6. 用 present_files 打开本地预览，检查渲染和交互。

English version:

1. Produce two inventories: code-ui and imagegen-assets.
2. For each imagegen-assets item, record purpose, size, style, crop strategy, and negative constraints.
3. Call ImageGen to generate real image files and place them in the project asset directory.
4. Build the page with the existing project stack and wire the generated assets into the UI.
5. For app or mobile references, include the device frame, safe area, Dynamic Island or equivalent device chrome, and clickable screen changes by default.
6. Open the local preview with present_files and verify rendering and interactions.

Multi-Agent 编排 / Multi-Agent Orchestration

当 WorkBuddy 的 Agent 工具可用时，使用 references/multi-agent-orchestration.md 中的编排规范。

主 agent 负责用户请求、仓库架构、任务拆分、合并决策和最终报告。专家 agent 必须返回结构化产出，不能擅自重定义产品范围。

When WorkBuddy's Agent tool is available, use the orchestration contract in references/multi-agent-orchestration.md.

The lead agent owns the user request, repository architecture, task decomposition, merge decisions, and final report. Specialist agents must return structured artifacts and must not silently redefine the product scope.

推荐角色 / Recommended roles:

• visual-analyst: 检查参考图，识别视觉层级，拆分 code-ui 和 imagegen-assets。
• asset-engineer: 创建或验证资产清单、提示词记录、格式、路径、alt text 和来源。
• ui-architect: 定义路由、功能边界、组件 API、设计 token、状态模型和 i18n 结构。
• backend-contract: 定义 API 契约、请求/响应 schema、错误信封、权限和 mock 数据边界。
• state-machine: 定义异步、设备、表单、重试、离线、乐观更新和回滚状态。
• ui-implementer: 用项目现有规范实现 UI。
• accessibility: 审计键盘流、焦点管理、可访问名称、ARIA、对比度、减弱动效和屏幕阅读器语义。
• qa-auditor: 运行构建、类型检查、lint、浏览器、视觉回归和生产就绪检查。
• release: 运行最终检查，总结变更，确认产出，记录执行模式，准备提交或 PR 移交。

当输出互不依赖时，并行运行 visual-analyst 和 asset-engineer。在仓库发现之后、实现之前运行 ui-architect、backend-contract 和 state-machine。实现之后运行 accessibility 和 qa-auditor。最后运行 release。

如果多 agent 执行不可用，在单个上下文中按相同顺序执行相同角色，并保留相同的产出名称和交接格式。

Reference Files

Read only the relevant reference files for the current task:

• references/asset-manifest-and-prompts.md: 资产清单、提示词模板和页面输出审计循环。
• references/icon-system.md: 图标系统、UI Glyph 锁定规则和批准的图标库。
• references/loop-engineering.md: 迭代验证循环。
• references/museum-app-case-study.md: 博物馆/移动端多屏案例。
• references/fashion-shopping-app-case-study.md: 时尚购物视觉资产案例。
• references/hicolor-case-study.md: 内容图形案例。
• references/multi-agent-orchestration.md: 可复用的多 agent 角色、交接规范和回退行为。

Design, Icons, And Layout

• 图标统一用一套代码图标系统。
• Use one code-rendered icon system.
• 返回、关闭、菜单、搜索、设置、状态栏、电量/Wi-Fi/信号、播放、底部 tab、开关、加减号都用代码。
• Back, close, menu, search, settings, status bar, battery/Wi-Fi/signal, playback, bottom tabs, toggles, plus, and minus are code-rendered.
• 设备外观、产品抠图、商品图可以用 ImageGen。
• Device appearances, product-cutout assets, and product images can use ImageGen.
• 按角色而不是名称分类：camera、lamp、speaker 等在按钮里是 code-icon，在商品格或设备卡主视觉里可以是 product-cutout、object-thumbnail 或 device-product-image。
• Classify by role, not name: camera, lamp, and speaker are code-icon in controls, but can be product-cutout, object-thumbnail, or device-product-image in product/device visuals.
• 文字必须是真实文本，不能烘焙进图片里。
• Text must be real text, not baked into images.
• 昭昭控件必须能点击或有明确反馈。
• Visible controls must be clickable or provide clear feedback.
• 移动端不能横向滚动，文字不能溢出按钮或卡片。
• Mobile layouts must avoid horizontal scrolling, and text must not overflow buttons or cards.
• Avoid repeated icon + heading + paragraph card grids unless the reference clearly uses that pattern.
• Touch targets should be at least 44x44px.
• Headings can use text-wrap: balance for better wrapping.

Approved icon libraries:

• @phosphor-icons/react
• hugeicons-react
• @radix-ui/react-icons
• @tabler/icons-react

Application code should use a single icon entry such as UiIcon, IconRegistry, or an SVG sprite. Keep an icon coverage table before delivery.

UI Glyph Lock Rule

ImageGen 提示词必须明确排除 UI glyph：

no icons, no UI symbols, no readable text, no logo, no watermark,
no status bar, no battery/Wi-Fi/signal glyphs, no arrows, no gear,
no menu dots, no plus/minus, no power symbol, no playback controls,
no tab icons, no toggles, no status dots

页面输出审计 / Page Output Audit

生成并接回页面后，按 references/asset-manifest-and-prompts.md 中的检查清单逐项审计。审计方式为：在浏览器中打开 demo HTML，逐项检查以下信号。

After generation and integration, audit the page using the checklist in references/asset-manifest-and-prompts.md. The audit is done by opening the demo HTML in a browser and checking each signal.

审计信号 / Audit Signals

迭代循环 / Iteration Loop

当用户要求"自己优化""继续迭代直到更像参考图"时，按以下循环执行：

1. 打开 demo HTML，逐项检查审计信号。
2. 优先修复所有 fail 级别问题。
3. 再处理 warn 级别中影响还原度的问题。
4. 如果需要重新生成图片，调用 ImageGen 重新生成并替换。
5. 改完后重新打开预览，直到没有 fail，且剩余 warn 都能解释为有意保留。

最终汇报 / Final Report

完成后，最终回复至少列出：

• 预览入口或本地 URL。
• Preview entry or local URL.
• ImageGen 生成资产路径。
• Paths to generated ImageGen assets.
• 实际通道：ImageGen (WorkBuddy native)。
• Actual channel: ImageGen (WorkBuddy native).
• 哪些 UI 是代码实现。
• Which UI surfaces are code-rendered.
• 做过哪些检查。
• Which checks were run.
• 信用消耗：调用 ImageGen 的次数和总信用。
• Credit cost: number of ImageGen calls and total credits.