# 03 · 积木轨道屋

设计 ID：`toy` · 渲染风格：`toy` · 英文名：LITTLE PLAYWORKS。玩具质感候选方案，可与其他方案同时保留。

[Agent 接入约定](../../shared.md) · [配色数据](tokens.json) · [完整设计稿](index.html) · [试玩与审核](../../../design-showcase.html?design=toy)

## 设计目标

圆润积木、红黄蓝绿塑胶零件与原木色轨道板。厚度来自少量同色分层，棋子看起来可以拿在手里；不把整套方案做成灰雾或原版柔紫色系。

## 棋盘与棋子怎么画

复用 [renderer.js](../../../src/renderer.js) 的非 paper 棋盘、[token-art.js](../../../src/token-art.js) 的 toy 分支。r = 格半径 s × 0.985；tint 在 RGB 通道上按比例向白或黑混合。

| 部件 | 当前实现 |
| --- | --- |
| 轨道 | 分格 max(1, s × 0.024)，外缘 max(4, s × 0.16)，中心线 max(2.5, s × 0.10) |
| 下层厚度 | 半径 r × 0.94，向下偏移 r × 0.09，fill 暗化 30% |
| 中间层 | 半径 r × 0.94，fill 暗化 8% |
| 顶面 | 半径 r × 0.83，向上偏移 r × 0.06，原始 fill |
| 边缘高光 | 半径 r × 0.75 的局部边线，fill 提亮 50%，线宽 r × 0.045 |
| 中央压面 | 半径 r × 0.50 的圆，向上偏移 r × 0.04，fill 提亮 11% |
| 箭头 | 实心七点箭头，尺度 r × 0.58，保持清楚独立的方向 |

这套不依赖棋子图集，也不是物理材质或三维光照；所有效果由共享多边形、线与圆组成。移动和碰撞仍复用同一分层画法。

## 五种主题

| 主题 ID | 阶段 | 名称 | 独立用色方向 |
| --- | --- | --- | --- |
| lagoon | 轻松 | 积木黄盒 | 暖黄玩具盒、奶油板面、原色积木 |
| apricot | 进阶 | 蓝色装配台 | 亮蓝台面与原木色插板 |
| lavender | 烧脑 | 橘红工坊 | 橘红环境、木糖底板、绿蓝零件 |
| rose | 挑战 | 绿毯小城 | 绿垫与木色道路 |
| midnight | 每周挑战 | 太空玩具柜 | 太空蓝柜体、浅灰塑胶板 |

完整色值及每主题 4/7/9/12 色搭配见 tokens.json，源为 [art-directions.js](../../../src/art-directions.js)。配色要保留原色塑胶与暖木关系。箭头按 4.5:1 门槛选白或 #172D39，不能给所有黄色积木统一加白箭头。

## 控件与边界

现有顶部控件保留玩具边缘和圆润感。底部道具单独使用 24px 圆角、蓝／红／黄底色与奶油色 3px 边框；**没有**棋子的厚度、投影或高光。不要因名称里有“玩具”就重新给底部道具加阴影。尺寸、位置和未来角标按 shared.md。

## 验收与接入

使用 `artDirection('toy')` 和 `directionTheme(direction, themeId, colorCount)`，不要用 CSS 滤镜把 calm 染成玩具配色。

- 缩小到手机尺寸后，分层仍清楚且不遮住箭头。
- 蓝色和太空主题保持木色／浅灰板面，不能五套都用同一个奶油背景。
- 静态、运动与撤销造型一致；底部道具保持平面。
- 原生几何可复用绘制命令，原生控件和实机效果尚未验收。