用途：将选定的视觉目标（图片、截图、mockup 或 Image Gen 结果）翻译为高质量、可交互的网站或 Web 应用。仅凭文字需求不足以启动，必须先有明确的视觉参考。
主要能力：解析参考图后，逐段测量布局、间距与元素尺寸；寻找匹配的免费字体与图标库；用内置 Image Gen 工具为设计中的每个图像资产（主视觉、缩略图、装饰插画、纹理、Logo、产品图、头像等）单独生成素材，并保持与参考图一致的艺术方向、配色与渲染风格。禁止用 CSS 绘图、内联 SVG、div/span 形状、渐变、emoji 或文字字形替代真实图标与图像资产。
使用方式：先加载 $user-context 并运行其预检脚本；按 $index 与 $critical-overrides 执行。构建时从 local-prototype-preflight 开始，实现可用的导航、链接、标签页、菜单、主 CTA、表单与可见 UI 状态（hover、focus、选中、加载、空态、成功等）。本地预览通过 sites-preview start "$PWD" 启动，运行 npm run dev -- --host 0.0.0.0 --port 4173 --strictPort；Vite 项目使用 "dev": "vite"，并配置 server.host 与 server.allowedHosts。验证需在云端浏览器打开 http://terminal.local:4173/ 检查渲染、交互与控制台错误，不能以构建成功或健康检查代替。移动端原型按 390 × 844 构建验证。最后运行 design-qa 作为阻塞门禁，生成 design-qa.md，修复 P0/P1/P2 直至 final result: passed 才可交付。
适用场景：把设计稿、截图或生成图快速落地为可交互前端原型。
限制：不构建认证、持久化、后端/API 调用或集成，除非用户要求；不新增页面或路由；Image Gen 不支持透明图，需要时须后处理；若无法解析选定图像或验证被阻塞，应停止并报告。