rapid-prototyper

快速原型构建器

用途

通过可运行的原型快速验证想法。在全面实现之前，创建完整、可运行的代码来测试想法：

1. 从记忆中回忆你偏好的技术栈
2. 生成精简但完整的代码
3. 让代码立即可运行
4. 快速获得视觉反馈
5. 保存已验证的模式，以供生产环境使用

适用于 ADHD 用户：即时满足——几分钟内就能得到可运行的原型，而不是几个小时。 适用于心盲症用户：获得具体、直观的结果，而不是抽象的描述。 适用于所有用户：先验证再投入——快速试错，快速学习。

触发条件

• 用户说：“制作这个原型”“快速演示”“概念验证”“MVP”
• 用户询问：“我们能不能构建”“是否可以”“我们该怎么做”
• 用户提到：“尝试一下”“试验一下”“测试这个想法”
• 重大功能开发之前：主动提议先制作原型

核心工作流

1. 理解需求

提取关键信息：

{
  feature: "User authentication",
  purpose: "Validate JWT flow works",
  constraints: ["Must work offline", "No external dependencies"],
  success_criteria: ["Login form", "Token storage", "Protected route"]
}

2. 回忆技术栈

查询 context-manager：

search memories:
- Type: DECISION, PREFERENCE
- Tags: tech-stack, framework, library
- Project: current project

回忆示例：

Found preferences:
- Frontend: React + Vite
- Styling: Tailwind CSS
- State: Zustand
- Backend: Node.js + Express
- Database: PostgreSQL (but skip for prototype)

3. 设计最小化实现

原型范围：

• ✅ 核心功能可用
• ✅ 可视界面（如果是 UI 功能）
• ✅ 基本验证
• ✅ 主要流程可用
• ❌ 错误处理（尽量精简）
• ❌ 边缘情况（为提速而跳过）
• ❌ 样式润色（仅满足功能需求）
• ❌ 优化（优先制作原型）

示例：身份验证原型的范围

✅ Include:
- Login form
- Token storage in localStorage
- Protected route example
- Basic validation

❌ Skip:
- Password hashing (use fake tokens)
- Refresh tokens
- Remember me
- Password reset
- Email verification

4. 生成原型

结构：

prototype-{feature}-{timestamp}/
├── README.md              # How to run
├── package.json           # Dependencies
├── index.html             # Entry point
├── src/
│   ├── App.jsx           # Main component
│   ├── components/       # Feature components
│   └── utils/            # Helper functions
└── server.js             # If backend needed

示例：身份验证原型

package.json：

{
  "name": "auth-prototype",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.20.0",
    "zustand": "^4.4.7"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.2.1",
    "vite": "^5.0.8"
  }
}

src/App.jsx：

import { useState } from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { useAuthStore } from './store';

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const login = useAuthStore(state => state.login);

  const handleSubmit = (e) => {
    e.preventDefault();
    // Prototype: Accept any credentials
    if (email && password) {
      login({ email, token: 'fake-jwt-token' });
    }
  };

  return (
    <div style={{ maxWidth: 400, margin: '100px auto' }}>
      <h1>Login</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="Email"
          style={{ display: 'block', width: '100%', margin: '10px 0', padding: 8 }}
        />
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          placeholder="Password"
          style={{ display: 'block', width: '100%', margin: '10px 0', padding: 8 }}
        />
        <button type="submit" style={{ padding: '10px 20px' }}>
          Login
        </button>
      </form>
    </div>
  );
}

function Dashboard() {
  const { user, logout } = useAuthStore();

  return (
    <div style={{ maxWidth: 800, margin: '50px auto' }}>
      <h1>Dashboard</h1>
      <p>Welcome, {user.email}!</p>
      <p>Token: {user.token}</p>
      <button onClick={logout} style={{ padding: '10px 20px' }}>
        Logout
      </button>
    </div>
  );
}

function ProtectedRoute({ children }) {
  const isAuthenticated = useAuthStore(state => state.isAuthenticated);
  return isAuthenticated ? children : <Navigate to="/login" />;
}

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<LoginForm />} />
        <Route
          path="/dashboard"
          element={
            <ProtectedRoute>
              <Dashboard />
            </ProtectedRoute>
          }
        />
        <Route path="/" element={<Navigate to="/dashboard" />} />
      </Routes>
    </BrowserRouter>
  );
}

src/store.js：

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

export const useAuthStore = create(
  persist(
    (set) => ({
      user: null,
      isAuthenticated: false,
      login: (user) => set({ user, isAuthenticated: true }),
      logout: () => set({ user: null, isAuthenticated: false }),
    }),
    {
      name: 'auth-storage',
    }
  )
);

README.md：

# Auth Prototype

Quick prototype to validate JWT authentication flow.

## Run

```bash
npm install
npm run dev

打开 http://localhost:5173

测试

1. 前往 /login
2. 输入任意电子邮件和密码
3. 点击 Login
4. 应重定向到 /dashboard
5. 刷新页面——应保持登录状态
6. 点击 Logout——应返回 /login

说明

• 使用伪造的令牌（不进行实际的 JWT 验证）
• 不对密码进行哈希处理
• 样式精简
• 不处理错误

验证通过后的后续步骤

1. 实现真实的 JWT 签名和验证
2. 使用 bcrypt 添加密码哈希处理
3. 添加完善的错误处理
4. 添加刷新令牌流程
5. 添加验证和安全措施

### 5. Save to Artifacts

```bash
# Save complete prototype
# Linux/macOS: ~/.claude-artifacts/prototypes/auth-{timestamp}/
# Windows: %USERPROFILE%\.claude-artifacts\prototypes\auth-{timestamp}\
~/.claude-artifacts/prototypes/auth-{timestamp}/

6. 向用户展示

✅ Auth prototype ready!

📁 Location (Linux/macOS): ~/.claude-artifacts/prototypes/auth-20251017/
📁 Location (Windows): %USERPROFILE%\.claude-artifacts\prototypes\auth-20251017\

🚀 To run:
cd ~/.claude-artifacts/prototypes/auth-20251017
# Windows: cd %USERPROFILE%\.claude-artifacts\prototypes\auth-20251017
npm install
npm run dev

🎯 Test flow:
1. Visit http://localhost:5173/login
2. Enter any email/password
3. Click Login → Redirects to Dashboard
4. Refresh → Stays logged in
5. Click Logout → Returns to Login

✅ Validates:
- JWT token flow works
- Protected routes work
- State persistence works
- React Router integration works

❌ Not included (yet):
- Real JWT validation
- Password hashing
- Error handling
- Production security

**Does this validate what you needed?**
- If yes: I'll build production version
- If no: What needs adjusting?

原型模板

单文件 HTML 应用

适用于快速 UI 演示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Prototype</title>
  <script src="https://unpkg.com/vue@3"></script>
  <style>
    body { font-family: sans-serif; max-width: 800px; margin: 50px auto; }
  </style>
</head>
<body>
  <div id="app">
    <h1>{{ title }}</h1>
    <button @click="count++">Count: {{ count }}</button>
  </div>

  <script>
    const { createApp } = Vue;
    createApp({
      data() {
        return {
          title: 'Quick Prototype',
          count: 0
        }
      }
    }).mount('#app');
  </script>
</body>
</html>

适用场景：仅包含 UI 的功能、视觉概念、无需构建步骤

React + Vite

适用于带状态管理的复杂 UI：

npm create vite@latest prototype-name -- --template react
cd prototype-name
npm install
# Add feature code
npm run dev

适用场景：多组件功能、路由、状态管理

Node.js 脚本

适用于后端/API 原型：

// prototype.js
import express from 'express';

const app = express();
app.use(express.json());

app.post('/api/users', (req, res) => {
  // Prototype logic
  res.json({ success: true, user: req.body });
});

app.listen(3000, () => {
  console.log('Prototype running on http://localhost:3000');
});

适用场景：API 端点、数据处理、后端逻辑

Python 脚本

适用于数据分析/处理：

# prototype.py
def process_data(data):
    # Prototype logic
    return [item * 2 for item in data]

if __name__ == '__main__':
    sample = [1, 2, 3, 4, 5]
    result = process_data(sample)
    print(f"Input: {sample}")
    print(f"Output: {result}")

适用场景：数据处理、算法、自动化

上下文集成

回忆偏好

创建原型之前：

// Query context-manager
const techStack = searchMemories({
  type: 'DECISION',
  tags: ['tech-stack', 'framework'],
  project: currentProject
});

const preferences = searchMemories({
  type: 'PREFERENCE',
  tags: ['coding-style', 'libraries'],
  project: currentProject
});

// Apply to prototype
const config = {
  framework: techStack.frontend || 'React',
  styling: techStack.styling || 'inline-styles',
  state: techStack.state || 'useState',
  build: techStack.build || 'Vite'
};

保存已验证的模式

用户验证原型之后：

User: "This works perfectly! Build the production version"

# Save pattern as PROCEDURE
remember: Authentication flow pattern
Type: PROCEDURE
Tags: auth, jwt, react-router, zustand
Content: Validated pattern for JWT auth:
- Zustand store with persist middleware
- React Router protected routes
- Token in localStorage
- Login/logout flow
Works well, use for production

从迭代中学习

跟踪发生的更改：

// If user asks for modifications
"Can you add password validation?"
"Make the form prettier"
"Add loading state"

// Track patterns
if (commonRequest) {
  saveMemory({
    type: 'PREFERENCE',
    content: 'User commonly requests password validation in prototypes',
    tags: ['prototyping', 'validation']
  });

  // Auto-include in future prototypes
}

与其他技能集成

Context Manager

回忆技术栈：

Query for DECISION with tags: [tech-stack, framework]
Query for PREFERENCE with tags: [libraries, tools]
Apply to prototype generation

保存已验证的模式：

After user validates prototype
Save pattern as PROCEDURE
Tag with feature name and tech stack

快速生产构建

验证通过后：

User: "Build it properly"
→ Use validated prototype as reference
→ Add error handling
→ Add tests (via testing-builder)
→ Add proper styling
→ Add security measures
→ Create production version

浏览器应用创建器

用于独立工具：

If prototype should be standalone tool:
→ Invoke browser-app-creator
→ Convert prototype to polished single-file app
→ Save to artifacts/browser-apps/

成功模式

快速验证（5 分钟）

范围：单个功能、视觉反馈 交付物：可运行的演示 示例：“这种按钮样式可行吗？”

<!DOCTYPE html>
<html>
<body>
  <button style="background: #3b82f6; color: white; padding: 12px 24px; border: none; border-radius: 8px; font-size: 16px; cursor: pointer;">
    Click Me
  </button>
</body>
</html>

功能原型（15-30 分钟）

范围：包含交互的完整功能 交付物：多文件应用 示例：“用户身份验证流程”

参见上方的完整身份验证原型。

架构验证（30-60 分钟）

范围：系统设计、集成点 交付物：由多个组件构成的可运行系统 示例：“微服务通信模式”

// api-gateway.js
// orchestrator.js
// user-service.js
// Complete working system

原型检查清单

生成前： ✅ 需求清晰 ✅ 已回顾技术栈 ✅ 范围已定义（精简但完整） ✅ 已确立成功标准

生成过程中： ✅ 专注于理想路径 ✅ 可立即运行 ✅ 包含清晰的说明 ✅ 使用简单、直观的代码

生成后： ✅ 测试能否运行 ✅ 确认满足成功标准 ✅ 提供清晰的后续步骤 ✅ 请求验证

快速参考

何时制作原型

情况	制作原型？
新功能想法	✅ 是——在构建前先验证
Bug 修复	❌ 否——直接修复
重构	✅ 是——测试新模式
UI 调整	✅ 是——进行视觉确认
性能优化	❌ 否——先测量
新技术	✅ 是——通过实践学习

触发短语

• “制作这个原型”
• “快速演示”
• “概念验证”
• “我们能否构建”
• “我们会如何做”
• “测试这个想法”

文件位置

• 原型：~/.claude-artifacts/prototypes/（Linux/macOS）或 %USERPROFILE%\.claude-artifacts\prototypes\（Windows）
• 已验证模式：~/.claude-memories/procedures/（Linux/macOS）或 %USERPROFILE%\.claude-memories\procedures\（Windows）——标记为“prototype-validated”

成功标准

✅ 原型可立即运行（无需繁琐的设置） ✅ 直观展示概念 ✅ 测试核心功能 ✅ 创建时间 <30 分钟 ✅ README 清晰易懂，附有说明 ✅ 用户可以快速做出“是/否”的验证