interactive-prototype

交互式原型

构建一个可正常点击交互的原型，而非静态模型。使用内联的 React + Babel，并固定版本，外层包裹 DeviceFrame。

阶段 0 — 上下文预检查（自动检测，最多提 1 个问题）

提出设计问题前，先静默检查上下文：

1. 如果 .claude/design-tokens.json 存在，则 Read .claude/design-tokens.json
2. Bash(ls ~/.claude/design-systems/ 2>/dev/null) — 如果需求描述提到的品牌与某个文件夹名称匹配，则自动应用
3. 使用 Glob 查找代码库中的令牌：**/tailwind.config.*、**/theme.{ts,js,json}、**/tokens.{css,scss}、**/_variables.*
4. 扫描需求描述：github URL → Skill: ingest-github；Figma URL → Skill: ingest-figma；图片附件 → Skill: ingest-screenshot；.md/.pdf → Read

如果没有发现任何内容，则提出一个 AskUserQuestion：从注册表/代码库/截图/Figma 中选择设计系统 / 无（使用 frontend-design）/ 由 Claude 决定。报告“使用 。继续。”

阶段 1 — 歧义检查

检查需求描述是否包含：平台（iOS/Android/桌面/Web）、应用类别（外卖、社交、效率工具等）、功能数量、设计上下文（品牌/代码库）。

如果包含平台和类别 → 最多提出 2 个澄清问题。否则使用 AskUserQuestion 询问：

• 平台
• 所需屏幕（列表）
• 屏幕之间的过渡效果（即时 / 滑动 / 淡入淡出 / 自定义）
• 是否需要模拟“实时数据”（伪造 API 返回值）
• 交互方式——仅点击，还是也包括滚动/滑动/拖动
• 需要哪些变体

不要询问品牌上下文——阶段 0 已处理。

阶段 2 — 视觉系统

利用阶段 0 中的上下文，确定适配移动设备的设计系统：

• 移动设备上的点击目标至少为 44px
• 根据已加载的令牌统一间距/字体比例
• 如果没有令牌 → 调用 Skill: frontend-design

阶段 3 — 构建

1. 使用以下外壳创建 artifacts/<slug>.html：

   <!doctype html>
   <html>
   <head>
     <meta charset="utf-8"/>
     <title>{{name}}</title>
     <script src="https://unpkg.com/[email protected]/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
     <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
     <script src="https://unpkg.com/@babel/[email protected]/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
     <script src="./device_frame.jsx" type="text/babel"></script>
     <script src="./animations.jsx" type="text/babel"></script>
     <style>body { margin: 0; display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #f4f4f6; }</style>
   </head>
   <body>
     <div id="root"></div>
     <script type="text/babel">
       const { useState } = React;
       // your components here
       function App() {
         const [screen, setScreen] = useState('home');
         return <DeviceFrame kind="ios">
           {screen === 'home' && <HomeScreen onNav={setScreen}/>}
           {screen === 'detail' && <DetailScreen onBack={() => setScreen('home')}/>}
         </DeviceFrame>;
       }
       ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
     </script>
   </body>
   </html>
   

2. Bash(cp starters/device_frame.jsx "$(dirname <html>)/") + Bash(cp starters/animations.jsx "$(dirname <html>)/") — 复制到与 HTML 相同的目录中
3. 导航模式：使用 useState 跟踪当前屏幕。过渡效果使用 animations.jsx 中的 <Transition>。
4. **React 关键规则：**不要使用 const styles = {...}。使用带组件前缀的名称：const headerStyles、const cardStyles。也可以使用内联样式。
5. 在代码中内联模拟数据；不要进行外部 fetch。

阶段 4 — 验证

**重要：**由于此产物会加载外部 .jsx 启动文件，使用 file:// 会遇到 CORS 错误。先运行 /serve（仅需运行一次），然后通过 http 预览：

/serve
/done http://127.0.0.1:4567/artifacts/<slug>.html

修复错误 → 在后台运行 Skill: verify-artifact。

阶段 5 — 后续步骤

• /make-tweakable 用于开放可调整参数（primaryColor、fontSize、密度变体）
• /export-standalone 用于生成可离线交付的版本
• /handoff 用于为开发团队生成组件文件
• /register-asset 用于添加到概览