内容
设计沙盒
**Memi 2.6.2** 的规范证明仓库预热的 Next.js Tailwind 4 + sh空间，AI 编码代理可以在其中运行界面理解检查，然后 UI 代码。
使用它公共 Memi 循环：债务、审核 UX 原则 Tailwind 令牌、导出 shadcn 注册表、打印ma 配置，并模拟 Agent Skills 安装。
## 技术栈
-.js 16**（应用+ **TypeScript**
-wind 4** + **/ui**（radix-n性，CSS 变量）— *仅配置，零组件安装*
- **Memi** (`@memi-design/cli@2.6.2`) — 界面理解、设计系统内存、MCP、Agent Skills 和 shad：`screenshot-decoder`、`component-scaffolder`、`motion-director`
## 快速验证
发布清单固定了确切的公共包和 npm 完整性：
```bash
pnpm install
pnpm verify此命令验证 npm 包完整性，在临时目录中只读 Memi 验证，安全性、lint、单元覆盖生产构建、Chromium 和 渲染、减少运动、显式 Canvas 回退。
在 npm 发布之前，请针对本地 Memi 检查进行测试：
I_BIN=../memi/dist/index.js pnpm verify运行器涵盖：memi --version`
memi diagnose . --json --no-write --fail-on none `memi ux audit .no-write`
- ` --from ./src --output generated/memi-proof/tokens --json --report --json `memi shad --out public/r --nameandbox --homepage https://raw/sarveshsea/design/main/public --json`
- ` shadcn doctor/r --json`
- `memi mcp config --target generic` with `mcp start --figma`
- `memi agent install universal --dry-runproject .`
推送后表 URL：
```text
https://raw.githubusercontent.com/sar/design-sandbox/main/registry.json
```
##实验室
打开 `/labs/sh获取原始 WebGL2 和 Canvas 2D 验证。它包括有序 Bayer 和种子噪声抖动、涟漪和失真减少运动行为、输出颜色空间能力报告和可导出证据。
实现和源边界记录在 [`docs/evidence/shader-lab-sources.md`](docs/shader-lab-sources.md) 中。没有嵌入外部着色器源或媒体。
## 代理工作流
```text
想法 / 截图 / Figma URL -> /sandbox -> memi 验证 -> page.tsx 渲染
```
在 Claude Code 中：
```text
/sandbox "为 [项目] 设计一个更平静的设置面板会是什么样子？"
```
斜杠命令序列是：
1. **screenshot-decoder** → 结构化规范（布局、组件、令牌、运动）
2. **component-scaffolder** → `pnpm dlx shadcn add ...` + 编写 `src/app/sandbox/page.tsx`
3. **motion-director**（仅当运动在范围内）→ 安装 `framer-motion`，分层运动传递
4. **memi 验证** → 在共享前运行设计诊断、UX 审核、令牌提取和注册表导出
打开 `http://localhost:3000/sandbox` 以查看结果。
## 分支
```bash
git checkout main
git checkout -b explore/<主题>
```
`main` 始终保持为空 playground。每个探索都是一个独立的分支 — 保留、合并或删除。
## 盒子里有什么
```
.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/ # memi 设计内存
SOUL.md 视觉基线
AGENTS.md # 代理名册（镜像 .claude/agents/）
TOOLS.md # 工具权限策略
HEARTBEAT.md # 探索结束检查
project.json # 自动检测的堆照
.mcp.json # memi MCP 连接到 Claude Code
specs/ # 为复杂探索放置 JSON 规范
generated/ # memi 生成目标
generated-proof/tokens/ # 令牌提取验证工件
public/r # shadcn 注册表导出验证
research/ # 用于 memi 研究输出
prototype/ # 临时空间
src/
/
page.tsx # 目标 → /sandbox
sandbox/page.tsx 画布（当前为空）
layout.tsx
globals.css # shadcn CSS 变量（中性，浅色 + 深色）
components/ui/ # 空 — shadcn add 运行
lib/utils.ts # cn助手
components.json adcn 配置
```
##命令
```bash
pnpm dev # http://3000
pnpm type # tsc --nopm build #
pnpm memi: 设计债务 JSON 验证pm memi:ux 原则 JSON 验证
pnpm memi:tokens 令牌提取报告
pnpm memi:shadcn # shadcn 注册表导出 + 医生
pnpm memi:mcp # 无 Figma MCP 配置验证
pnpm memi:agent # Agent Skills 模拟运行验证
pnpm verify # 类型检查 + lint + 构建 + 每个 memi 验证
```
## 硬性规则（也在 `.claude/CLAUDE.md` 中）
- shadcn-first；绝不重新创建已存在的原始组件
- 仅主题令牌；允许使用十六面量**
- 每个只进行一次聚焦更改 UI 动画 <400始终遵循 `prefers-motion`
- 绝不发明用户未声明的约束
