用途：构建可点击的高保真原型，而非静态稿。使用固定版本的 React + Babel 内联加载，并包裹在 DeviceFrame 中。触发词为 prototype、clickable、app mockup、interactive demo。
主要能力与流程： 阶段0 上下文预检：自动读取 .claude/design-tokens.json，检查 ~/.claude/design-systems/ 目录，Glob 查找 tailwind.config、theme、tokens、_variables 等代码库令牌；扫描简报中的 GitHub URL、Figma URL、图片附件、.md/.pdf。若未找到，最多问一个问题选择设计系统来源。 阶段1 歧义门：检查平台、应用类别、功能数量、设计上下文；若平台与类别齐全，最多问2个澄清问题，否则询问平台、所需屏幕、转场方式、是否模拟实时数据、交互程度、是否要变体。 阶段2 视觉系统：采用移动端感知系统，最小44px点击目标，使用已加载令牌的间距与字号；无令牌则调用 frontend-design 技能。 阶段3 构建：生成 artifacts/<slug>.html，内联 React 18.3.1、ReactDOM、Babel standalone 固定版本，复制 device_frame.jsx 与 animations.jsx 到同目录。导航用 useState 管理当前屏幕，转场用 animations.jsx 的 Transition。React 规则：不要用 const styles，改用组件前缀命名如 headerStyles、cardStyles。模拟数据内联，不外部请求。 阶段4 验证：因加载外部 .jsx，file:// 会触发 CORS，需先运行 /serve，再通过 http 预览 /done http://127.0.0.1:4567/artifacts/<slug>.html，修复错误后调用 verify-artifact。 阶段5 后续：/make-tweakable 暴露可调项，/export-standalone 导出离线交付物，/handoff 生成组件文件，/register-asset 加入总览。
限制：需先运行 /serve 才能预览；依赖外部 CDN 与本地 starters 文件；具体收费、价格、平台支持范围等资料暂未提供。