内容
# 设计沙盒
适用于**任何项目中的设计探索**的预热Next.js 16 + Tailwind 4 + shadcn表面。
丢入一个想法、截图或Figma网址——从另一边得到一个可用的组合。
不是交付成果，不是入门套件，不是面试准备。设计到代码的快速原型设计。
## 技术栈
- **Next.js 16**（应用路由器）+ **TypeScript**
- **Tailwind 4** + **shadcn/ui**（radix-nova，中性，CSS变量）——*仅配置，零组件安装*
- **Memoire** (`@sarveshsea/memoire`) —— 设计记忆 + MCP服务器，用于Claude Code
- **Claude Code**子代理：`screenshot-decoder`，`component-scaffolder`，`motion-director`
## 工作流程
```
想法 / 截图 / Figma网址 → /sandbox → page.tsx 渲染
```
在Claude Code中：
```
/sandbox "如何为[项目]设计一个更简洁的设置面板？"
```
或粘贴截图，然后：
```
/sandbox
```
`/sandbox`斜杠命令运行：
1. **截图解码器** → 结构化规范（布局、组件、令牌、运动）
2. **组件脚手架** → `pnpm dlx shadcn add ...` + 编写`src/app/sandbox/page.tsx`
3. **运动总监**（仅当运动在范围内）→ 安装`framer-motion`，分层一个运动传递
打开`http://localhost:3000/sandbox`查看结果。
## 分支
```bash
git checkout main
git checkout -b explore/<topic>
```
`main`始终保持为空的游乐场。每个探索都是其自己的分支——保留、合并或删除。
## 包含内容
```
.claude/ # Claude Code 代理层
CLAUDE.md # 操作手册
agents/ # 3个专门的子代理
screenshot-decoder.md
component-scaffolder.md
motion-director.md
commands/sandbox.md # /sandbox 斜杠命令
settings.json # 预先允许的 shell 调用（无弹窗 mid-spike）
.memoire/ # Memoire 设计记忆
SOUL.md # 声音 + 视觉基线
AGENTS.md # 代理名录（镜像 .claude/agents/）
TOOLS.md # 工具权限策略
HEARTBEAT.md # 探索结束检查
project.json # 自动检测的堆栈快照
.mcp.json # Memoire MCP 连接到 Claude Code
specs/ # 放置复杂探索的 JSON 规范
generated/ # memi 生成目标
research/ # memi 研究输出
prototype/ # 临时空间
src/
app/
page.tsx # 着陆页 → /sandbox
sandbox/page.tsx # 画布（当前为空）
layout.tsx
globals.css # shadcn CSS 变量（中性，浅色 + 深色）
components/ui/ # 空的——填充为 shadcn add 运行
lib/utils.ts # cn() 助手
components.json # shadcn 配置
```
## 本地命令
```bash
pnpm dev # http://localhost:3000
pnpm typecheck # tsc --noEmit
pnpm build # 生产构建
memoire status # 工作区状态
memoire doctor # 健康检查
memoire add <c> # 安装组件的替代路径
```
## 硬性规则（也在 `.claude/CLAUDE.md` 中）
- shadcn优先；绝不重新创建现有的原始组件
- 仅主题令牌；**任何地方都不允许十六进制字面量**
- 每次视觉工作只进行一次聚焦更改
- UI动画 <400ms，始终遵守`prefers-reduced-motion`
- 绝不发明用户未声明的约束
