用途：把 UI/UX 讨论转成可见的 HTML 草图，让用户在开始实现前确认智能体理解的是否正确。默认在用户想看布局、要 UI/UX 想法、要视觉对比或需要快速线框图时使用；仅当用户明确只要纯文本时跳过。
主要能力：先锁定最小视觉范围（目标区域、平台 web-desktop/mobile-app/desktop-app、主要任务、最关键约束），每次固定给出 Option A、Option B、Option C 三个可行但层级或交互模式不同的方案，并标记一个 Recommended 及理由，允许用户回复单个或多个选项字母，或说都不合适。可引用 Notion、Slack、GitHub、Shopify、Linear、Apple Settings 等作为模式参考，但不克隆品牌样式。
使用方式：基于捆绑模板创建可编辑工作区，例如： python3 scripts/init_mockup_workspace.py /绝对路径/docs/awesome-ai-agent-skills/mockups/<slug> --title "Short mockup question" --platform web-desktop 优先只编辑 mockup-data.js，本地化 uiText、notes 等。启动本地预览： python3 scripts/start_mockup_server.py /绝对路径/mockups/<slug> 预览支持实时重载，结束后停止： python3 scripts/stop_mockup_server.py /绝对路径/mockups/<slug> 截图验证可用： python3 scripts/capture_mockup.py --url http://127.0.0.1:4173 --option B --output /绝对路径/visuals/<slug>-q1.jpg 也支持捕获 URL 契约：http://127.0.0.1:4173/?capture=1&option=B。建议用 Chrome DevTools MCP 或 Playwright MCP 截取对应选项区域，而非整页。
适用场景：网站、移动应用、桌面应用的界面方向确认，侧边栏、弹窗、仪表盘区块、表单区、移动屏幕或桌面面板等具体表面的快速草图与对比。
限制与注意：保持固定画布，不做响应式；用占位块而非最终内容，除非真实内容对解释层级必要；聚焦目标表面，周围只用弱化上下文块示意位置；沿用捆绑的 Svelte CDN + TailwindCSS CDN 查看器，除非用户明确要求其他技术栈；截图只保留已批准的草图区域；用户确认方向前不要进入完整生产实现指导；任务完成或暂停时清理临时预览服务器。引用最新真实案例或需确切证据时应先查官方公开来源。