import { mkdir, readFile, writeFile } from 'node:fs/promises'; import { itemStudy, itemIcon } from '../src/item-study.js'; import { ICON_ATLAS } from '../src/ui-skin.js'; import { ART_DIRECTIONS } from '../src/art-directions.js'; import { buildDesignCatalog } from './design-catalog.mjs'; import { buildDesignPackages } from './design-packages.mjs'; const out=new URL('../design/directions/',import.meta.url);await mkdir(out,{recursive:true}); const referenceLevel=JSON.parse(await readFile(new URL('../labs/variants/levels.json',import.meta.url),'utf8')).find(l=>l.id==='color-1'); function referenceStudy(d){ if(!d.source)return ''; return `
FROM VARIANTS / 画法提取

线条轻一点,
棋子就清楚一点。

以实验页「双色试航」的初始棋盘作对照:暖白格面、浅蓝灰轨道、陶橙与雾蓝棋子。边界只有一道细白线,箭头用圆头线条画出。

环境 / 棋盘
#EAF0F3 / #FAFBF7
轨道 / 分格
#B2C4CE / #D3DFE3
轨道线宽
格半径 × 0.055
棋子半径 / 白边
格半径 × 0.88 / 0.035
箭头
白色线条 · 圆头 · 无阴影

下方五种主题沿用这套棋盘、轨道与箭头画法。

查看原实验页 ↗
`; } for(const d of ART_DIRECTIONS){ const html=`${d.name} · HEX TRAILS 设计稿
${d.en}

${d.name}

${d.description}

${referenceStudy(d)}
01 / FIVE WORLDS

同一风格,五种主题

统一的弯曲轨道关卡 · 用实际渲染检查识别度

${d.themes.map(t=>`
${t.label}

${t.name}

${t.palette.map(i=>``).join('')}
${t.background}
`).join('')}
02 / DESIGN LANGUAGE

造型与交互规则

    ${d.principles.map(p=>`
  • ${p}
  • `).join('')}
  • 所有棋子保留独立方向箭头,颜色和表情不改变规则。
  • 离场与碰撞共用游戏动画,切换设计保持路线与时长一致。

这是一套可与其他方案同时保留的候选设计。到审核页勾选保留、记录修改意见;不会替换你的其他选择。

审核与体验这套设计 ↗
03 / COMPONENT STUDY

控件与奖励

${itemStudy(name=>itemIcon(name,'../../../'+ICON_ATLAS))}
★ ★ ★

漂亮,全部过关!

每一次转弯,都找到出口。

继续旅程 →

底部道具独立于顶部导航。棋盘在通知与旋转区之间垂直居中;可操作棋盘在设计审核页。

`; const packageOut=new URL(`${d.id}/`,out); await mkdir(packageOut,{recursive:true}); // design.md is authored source; generation must never overwrite it. await readFile(new URL('design.md',packageOut),'utf8'); await writeFile(new URL('index.html',packageOut),html); await writeFile(new URL(`${d.id}.html`,out),`${d.name} · 设计稿已迁移

设计稿已整理到独立目录:${d.code} · ${d.name}

`); await writeFile(new URL(`${d.id}.md`,out),`# ${d.code} · ${d.name}\n\n本文件为旧入口。完整、人工维护的 Agent 规范已迁移到 [${d.id}/design.md](${d.id}/design.md)。\n\n[设计稿](${d.id}/index.html) · [配色数据](${d.id}/tokens.json) · [Agent 接入说明](../README.md)\n`); } await buildDesignCatalog(ART_DIRECTIONS); await buildDesignPackages(ART_DIRECTIONS); console.log(`Art direction catalog and sheets built: ${ART_DIRECTIONS.length} designs × 5 themes.`);