用途：当视觉方向是薄弱环节时使用该工作流，例如用户想要精致前端、Codex 产出通用 UI，或生成一张视觉稿能为实现提供更强目标。它把三件事组合起来：用 Image Gen 创建或打磨 UI 方向、把选定方向翻译成真实前端代码、在浏览器中验证渲染结果并做视觉迭代。
主要能力与流程：设计前先检查产品上下文，包括受众与待办任务、屏幕类型（仪表盘、设置、编辑器、电商、落地页、游戏等）、现有框架与设计系统、组件库与约束，以及页面属于操作工具、表达型站点还是沉浸式/游戏 UI。调用 Image Gen 前先选定一个明确视觉方向，并确定记忆点（排版、信息密度、布局节奏、产品图像、表面处理、动效或交互模型）。提示词应面向实现：要求 UI 截图或屏幕稿而非营销海报，写明布局区域、内容密度、状态与约束，并禁止通用 AI UI 套路（满屏 SaaS 卡片、紫蓝渐变主导、无意义装饰色块、假玻璃面板、无依据图标、工具类超大 hero、掩盖层级的占位文本）。
使用方式：需要新视觉目标或位图素材时，调用内置图像生成路径，或在向其他智能体提问、编写可复用提示词时显式使用 $imagegen。项目相关素材应保留在项目内并引用项目本地文件。生成截图只作参考，不能当作最终 UI，除非用户明确要位图素材。编码前先评审方向是否契合产品、受众与工作流，以及组件结构、响应式、文本密度、素材需求、动画成本与可访问性等可行性；若偏离意图，做一次有针对性的 Image Gen 修订，而不是漫无目的地生成大量无关变体。实现时复用现有组件、令牌、路由、状态与数据模式，用真实布局、排版、CSS 变量/设计令牌、状态与响应式约束编码视觉方向；位图素材只用于其本意用途（主视觉、背景、插画、产品图、纹理或精灵图）。操作类工具应保持高效可扫读，避免把仪表盘、CRM、编辑器和管理后台做成落地页式构图。前端改动后需在浏览器中验证：启动或复用开发服务器，用 Browser 插件或 Playwright 打开相关路由，响应式布局需检查桌面与移动宽度，排查文本溢出、UI 重叠、尺寸不稳、素材损坏、对比度不足、空白画布以及与选定方向不符等问题，迭代到渲染 UI 连贯，而非仅测试通过。
最终报告应包含：选定的视觉方向、生成素材或视觉稿路径（如有）、改动的实现文件、执行的浏览器/设备检查、剩余视觉风险或后续工作。
限制与跳过条件：当用户只要求小型确定性 CSS 修复、项目已有严格设计系统且任务只是套用、UI 主要涉及数据正确性/表单行为/可访问性修复，或所需素材是应保持代码原生的现有 SVG/矢量/图标系统编辑时，跳过 Image Gen 直接实现。资料未提供具体收费、价格、平台支持范围与效果保证等信息。