cabinwandClaude Fable 5.1
e447d1f807
- 07 macaron, referenced from Meowdoku: cream worlds, a white tray with gutters, candy tokens with white arrows, two-column 关卡/待解 HUD, white elevated tool discs (macaron-only exception to the flat rule), full-screen dark result overlay, a brick ripple on board clear, an eased glide-out and dot-lattice dissolve on exit; Resource Han Rounded subset fonts (SIL OFL) in assets/fonts with the charset and regeneration note - 06 signpost: the design.md, tokens and preview directory that earlier commits left untracked - design docs, catalog, manifest, showcase and base spec updated to seven directions; the analysis and proposal live in docs/art-proposal-macaron.html - the renderer, app, geometry and CSS sources for both directions were already carried by the level commits made from this working tree Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
83 lines
6.6 KiB
Markdown
83 lines
6.6 KiB
Markdown
# HEX TRAILS · 设计系统入口
|
|
|
|
这是给设计审核者和 Agent 共用的主游戏设计入口。当前有 7 套并列方案，每套 5 个主题，共 35 种组合。默认方案是 01「柔和原色」，最新候选是 07「马卡龙」；可同时保留多套。
|
|
|
|
人看 [设计总览](index.html) 与 [可操作审核页](../design-showcase.html)。Agent 从本文、[共用接入约定](shared.md) 和本次指定方案的 design.md 开始；可直接读 [manifest.json](manifest.json) 发现全部文件。根目录 [AGENTS.md](../AGENTS.md) 与本目录 [AGENTS.md](AGENTS.md) 提供路由和维护要求。
|
|
|
|
## 按任务找到入口
|
|
|
|
| 你要做什么 | 先读 | 然后做什么 |
|
|
| --- | --- | --- |
|
|
| 使用指定设计实现页面 | shared.md → 该套 design.md → tokens.json | 复用 directionTheme 和 drawScene，并接入对应 CSS |
|
|
| 调整某套造型或配色 | 该套 design.md → 文档列出的 JS/CSS 源 | 修改对应分支，同步文档，再生成配色与预览 |
|
|
| 比较与选择设计 | index.html | 同主题比较，再到审核页多选、记录意见 |
|
|
| 用其他引擎实现 | shared.md 跨引擎范围 → 该套 design.md | 复用绘制命令和几何，按浏览器参考验收 |
|
|
| 自动发现方案与颜色 | manifest.json → designs[].tokens | 路径从仓库根解析，schemaVersion 当前为 1 |
|
|
|
|
## 五套独立规范
|
|
|
|
| 编号 | ID | 方案 | Agent 规范 | 数据 | 预览 |
|
|
| --- | --- | --- | --- | --- | --- |
|
|
| 01 | calm | 柔和原色：哑光原版 | [design.md](directions/calm/design.md) | [tokens.json](directions/calm/tokens.json) | [查看](directions/calm/index.html) |
|
|
| 02 | vivid | 高彩游乐场：高饱和贴纸 | [design.md](directions/vivid/design.md) | [tokens.json](directions/vivid/tokens.json) | [查看](directions/vivid/index.html) |
|
|
| 03 | toy | 积木轨道屋：塑胶积木 | [design.md](directions/toy/design.md) | [tokens.json](directions/toy/tokens.json) | [查看](directions/toy/index.html) |
|
|
| 04 | animals | 动物弯弯镇：动物角色 | [design.md](directions/animals/design.md) | [tokens.json](directions/animals/tokens.json) | [查看](directions/animals/index.html) |
|
|
| 05 | paper | 轻线纸境：细线纸面 | [design.md](directions/paper/design.md) | [tokens.json](directions/paper/tokens.json) | [查看](directions/paper/index.html) |
|
|
| 06 | signpost | 路标：线路图棋盘与压痕控件 | [design.md](directions/signpost/design.md) | [tokens.json](directions/signpost/tokens.json) | [查看](directions/signpost/index.html) |
|
|
| 07 | macaron | 马卡龙：白托盘糖砖棋盘，参考 Meowdoku | [design.md](directions/macaron/design.md) | [tokens.json](directions/macaron/tokens.json) | [查看](directions/macaron/index.html) |
|
|
|
|
设计 ID、主题 ID 和关卡版本各自独立。每套都支持 `lagoon`（轻松）、`apricot`（进阶）、`lavender`（烧脑）、`rose`（挑战）、`midnight`（每周挑战）；显示名可以不同，ID 不变。各主题名称、色值与有序色板从 tokens.json 读取。
|
|
|
|
## 文件架构与来源
|
|
|
|
```text
|
|
design/
|
|
├── AGENTS.md # Agent 工作入口，人工维护
|
|
├── README.md # 本索引，人工维护
|
|
├── shared.md # 共用规则、接入、验证与限制，人工维护
|
|
├── manifest.json # 全部方案与文件路径，生成
|
|
├── index.html # 人看的总览，生成
|
|
├── examples/
|
|
│ └── render-design.mjs # 可执行的无 DOM 接入示例
|
|
├── directions/
|
|
│ ├── calm/ # 其余 vivid / toy / animals / paper 结构相同
|
|
│ │ ├── design.md # 本套设计规范，人工维护，构建不覆盖
|
|
│ │ ├── tokens.json # 12 色库、5 主题与 4/7/9/12 色板，生成
|
|
│ │ └── index.html # 人看的完整设计稿，生成
|
|
│ ├── calm.html # 兼容旧 URL，跳转到 calm/index.html
|
|
│ └── calm.md # 兼容旧文档入口，指向 calm/design.md
|
|
├── art-directions.css # 五套控件的样式源
|
|
├── game-tools.css # 共用扁平道具与布局源
|
|
└── tokens.json # 基础语义色导出，不是五套方案全集
|
|
```
|
|
|
|
设计颜色定义仍在 [src/art-directions.js](../src/art-directions.js) / [src/design-tokens.js](../src/design-tokens.js)，几何仍在 [src/renderer.js](../src/renderer.js) / [src/token-art.js](../src/token-art.js)。没有将运行时代码复制到每套目录。各 design.md 解释意图、精确画法、控件差异、不可丢失的特征和验收点；tokens.json 给 Agent 提供当前数值快照。
|
|
|
|
所有生成 JSON 中 `pathBase` 为 `repository-root`；文件路径从仓库根目录解析。它与 Markdown 内按当前文档位置解析的相对链接不同。manifest 的版本号描述数据格式，不代表第几套设计。新增字段可保持同一版本；改变字段含义或移除字段时升级版本并更新消费者。
|
|
|
|
## 快速验证一次接入
|
|
|
|
在仓库根目录执行，Node.js 20+，无需安装依赖：
|
|
|
|
```sh
|
|
node design/examples/render-design.mjs paper lagoon 7
|
|
```
|
|
|
|
它调用共享主题与渲染器，输出设计 ID、主题 ID、色数、棋盘格数、色板和绘制命令数。可更换为 `animals midnight 12`。未知 ID 或不支持的色数会报错，避免 Agent 拼错 ID 后默默使用默认设计。此例验证无 DOM 几何接入，不代替 PNG、CSS 或实机视觉验收。浏览器 Canvas 示例在 shared.md 中。
|
|
|
|
## 修改、生成与校验
|
|
|
|
```sh
|
|
npm run design
|
|
node --test tests/design-packages.test.js tests/art-directions.test.js tests/themes.test.js
|
|
node scripts/build.mjs
|
|
```
|
|
|
|
- 规范源：本目录 AGENTS.md、README.md、shared.md、各套 design.md，直接编辑且不会被生成脚本覆盖。
|
|
- 实现源：JS/CSS、已接受的图集；在本次指定的方案范围内修改。
|
|
- 生成物：manifest、各套 tokens.json、index.html 及旧入口；不要只改生成物，下一次构建会重建。
|
|
- 新增方案：在 ART_DIRECTIONS 注册稳定 ID，新增 `directions/<id>/design.md`，更新本索引与相关验证，再运行构建。缺少规范时构建会失败。
|
|
- 校验覆盖文件可发现性、链接、配色导出与运行时一致性，以及可执行示例。视觉与原生范围按 shared.md 验收。
|
|
|
|
旧的 `design/directions/<id>.html` 和 `<id>.md` 入口继续可用；新的代码和文档请引用独立目录。根目录 Design.md / Design.html 保留基础组件与历史设计说明，不作为五套独立方案的唯一规范。实验室中的其他玩法原型各有自己的文档，不在这五套主游戏设计的 manifest 中。
|