cabinw
10cf93a324
Add the paper direction with thin tracks, outlined hexagons and line arrows, without exterior color markers or piece numbers. Add a unified catalog for five designs and their 25 themes, with direct review links. Organize each design into an authored design.md, generated tokens.json and preview. Add Agent routing, shared integration guidance, a machine-readable manifest and an executable rendering example. Preserve legacy preview and document links. Validation: 16 focused design, theme and package tests passed; npm run design and static build passed. Confirmed all eight authored documents survive generation unchanged. Browser checks covered mobile, tablet and desktop layouts, theme links and migrated previews. Native engine integration and visual verification remain pending.
51 lines
3.0 KiB
Markdown
51 lines
3.0 KiB
Markdown
# 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 染成玩具配色。
|
||
|
||
- 缩小到手机尺寸后，分层仍清楚且不遮住箭头。
|
||
- 蓝色和太空主题保持木色／浅灰板面，不能五套都用同一个奶油背景。
|
||
- 静态、运动与撤销造型一致；底部道具保持平面。
|
||
- 原生几何可复用绘制命令，原生控件和实机效果尚未验收。
|