别让 AI 画框图了，让它给你造一台机器

npx skills add wheresryan22/anatomy -g

/anatomy 解释一下令牌桶限流，要能交互，深色主题

---
name: competitor-analysis
description: 分析竞品，输出一份专业的分析报告
---

# 竞品分析

- 分析要专业、要有深度
- 数据要准确，不能编
- 语气口语化一点
- 最好配个例子

---
name: token-bucket-figure
description: 把限流策略画成一台能动的机器
---

# 限流器图纸

## 1. 输入口（只认这几个数）
- capacity = 10（桶的容量，令牌）
- rate = 2（每秒补几个）
- burst = 12（压测时的并发数）

## 2. 机构（零件 + 约束）
| 零件 | 约束 |
|---|---|
| 桶体 | 半径 2.0，高 5.0，坐在底座上 |
| 进水管 | 从左上进入，末端在桶口上方 0.6 |
| 阀门 | 装在桶右侧，只控制放行速率 |
| 水滴 | 只从阀门出口落下，不许凭空出现 |

## 3. 读数（必须和零件同源）
- 水位 = tokens / capacity
- 卡片数字 = tokens.toFixed(1)
- 禁止在图上手写任何数字

## 4. 自检（不合格就打回）
- 没有任何零件穿过另一个零件
- 每条管的两个端点都落在零件上
- 截图放大后，读数和几何能对上

// kit/iso-kit 的核心：投影 + 三面着色
const C30 = Math.cos(Math.PI / 6);
const S30 = Math.sin(Math.PI / 6);

export function iso(x: number, y: number, z: number) {
  return {
    x: (x - y) * C30,          // 水平方向：x 往右下，y 往左下
    y: (x + y) * S30 - z,      // 垂直方向：z 越大越靠上
  };
}

export function box(x, y, z, w, d, h, tone) {
  const p = (a, b, c) => iso(a, b, c);
  // 三个可见面：+x 面、+y 面、顶面
  return [
    face([p(x + w, y, z), p(x + w, y + d, z), p(x + w, y + d, z + h), p(x + w, y, z + h)], tone.dark),
    face([p(x, y + d, z), p(x + w, y + d, z), p(x + w, y + d, z + h), p(x, y + d, z + h)], tone.mid),
    face([p(x, y, z + h), p(x + w, y, z + h), p(x + w, y + d, z + h), p(x, y + d, z + h)], tone.light),
  ].join('');
}

// 唯一的事实来源
export type Bucket = { capacity: number; tokens: number; rate: number; last: number };

export function createBucket(capacity = 10, rate = 2): Bucket {
  return { capacity, rate, tokens: capacity, last: 0 };
}

export function refill(b: Bucket, now: number) {
  const dt = Math.max(0, now - b.last) / 1000;
  b.tokens = Math.min(b.capacity, b.tokens + dt * b.rate);
  b.last = now;
  return b;
}

export function take(b: Bucket, now: number) {
  refill(b, now);
  const ok = b.tokens >= 1;
  if (ok) b.tokens -= 1;
  return { ok, tokens: b.tokens, level: b.tokens / b.capacity };
}

const level = bucket.tokens / bucket.capacity;
const waterTop = Z0 + level * (Z1 - Z0 - 0.2);   // 水位线
const shown = bucket.tokens.toFixed(1);          // 卡片上的数字

// 简化版：轴对齐包围盒相交检测
type Box = { x: number; y: number; z: number; w: number; d: number; h: number };

const overlap = (a: Box, b: Box) =>
  a.x < b.x + b.w && b.x < a.x + a.w &&
  a.y < b.y + b.d && b.y < a.y + a.d &&
  a.z < b.z + b.h && b.z < a.z + a.h;

for (const part of parts) {
  for (const other of parts) {
    if (part === other || part.allowTouch?.includes(other.id)) continue;
    if (overlap(part.box, other.box)) {
      throw new Error(`穿模：${part.id} 撞上了 ${other.id}`);
    }
  }
}

const bucket = createBucket(10, 2);
const requests = Array.from({ length: 12 }, (_, i) => ({ id: `r${i + 1}`, t: i * 60 }));

const log = requests.map((r) => {
  const res = take(bucket, r.t);
  return { ...r, ok: res.ok, tokens: +res.tokens.toFixed(2) };
});

console.table(log);

┌─────────┬──────┬────┬────────┐
│ (index) │ id   │ t  │ tokens │
├─────────┼──────┼────┼────────┤
│ 0       │ 'r1' │ 0  │ 9      │
│ 1       │ 'r2' │ 60 │ 8.12   │
│ 2       │ 'r3' │ 120│ 7.24   │
│ 3       │ 'r4' │ 180│ 6.36   │
│ 4       │ 'r5' │ 240│ 5.48   │
│ 5       │ 'r6' │ 300│ 4.6    │
│ 6       │ 'r7' │ 360│ 3.72   │
│ 7       │ 'r8' │ 420│ 2.84   │
│ 8       │ 'r9' │ 480│ 1.96   │
│ 9       │ 'r10'│ 540│ 1.08   │
│ 10      │ 'r11'│ 600│ 0.2    │
│ 11      │ 'r12'│ 660│ 0.32   │  ← ok: false
└─────────┴──────┴────┴────────┘

| 零件 | 数量 | 约束 |
|---|---|---|
| 木底座 | 1 | 9×9，厚 0.4，所有东西坐在上面 |
| 玻璃桶 | 1 | 半径 2.0，高 5.0，底面贴底座 |
| 水体 | 1 | 半径 1.92，高度 = level × 4.8 |
| 进水管 | 1 | 从左上水平进入，z = 6.5 |
| 喷嘴 | 1 | 垂直，末端在桶口上方 0.2 |
| 出水管 | 1 | 从桶右侧水平伸出，z = 1.15 |
| 阀门 | 1 | 装在出水管中段，z = 0.75 |
| 水滴 | 0..4 | 只出现在出水管末端下方 |
| 读数卡片 | 1 | 画面底部，显示 tokens / capacity |

// demo/build.mjs（节选，可运行版本在仓库 demo/ 目录）
const TX = 4.6, TY = 4.6, R = 2.0, Z0 = 0.4, Z1 = 5.4;
const waterTop = Z0 + level * (Z1 - Z0 - 0.2);

let body = '';
body += box(0.1, 0.1, 0, 9.0, 9.0, 0.4, WOOD);          // 底座
body += cylX(-1.4, TX, TY, 6.5, 0.42, STEEL);            // 进水管
body += cylZ(TX, TY, 0.34, 5.6, 6.5, STEEL);             // 喷嘴

const tank  = cylZ(TX, TY, R, Z0, Z1, GLASS, { opacity: 0.3 });
const water = cylZ(TX, TY, R - 0.08, Z0 + 0.05, waterTop, WATER);

body += tank.back;                    // 桶的后半圈
body += water.back + water.front;     // 水体
body += tank.front;                   // 桶的前半圈（半透明，能看见水）

const valve = document.querySelector('#valve') as HTMLElement;
valve.addEventListener('input', (e) => {
  bucket.rate = Number((e.target as HTMLInputElement).value);  // 拖阀门 = 改速率
  render();                                                    // 重画，读数跟着变
});

node build.mjs --audit

✗ 穿模：valve(3) 与 tank(1) 相交，重叠深度 0.12
✗ 悬空：pipe_in(2) 末端 (4.6, 4.6, 6.5) 未落在任何零件上
✓ 深度排序：47 个实体，无逆序
✓ 读数一致：card=4.2, level=0.42, capacity=10

✓ 穿模：0
✓ 悬空：0
✓ 深度排序：47 个实体，无逆序
✓ 读数一致：card=4.2, level=0.42, capacity=10