toshiocn/HexTrails
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
e447d1f807209d5f34dbe1e228209388d17d57c7
HexTrails/design/index.html
T
cabinwandClaude Fable 5.1 e447d1f807 feat(design): add the Macaron (07) art direction and land the Signpost (06) package files 
- 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>
2026-09-15 15:43:25 +08:00

19 lines
18 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="zh-CN">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>设计总览 · HEX TRAILS</title><link rel="stylesheet" href="catalog.css"></head>
<body>
<header class="catalog-nav"><a class="brand" href="../index.html">HEX TRAILS <span>设计档案</span></a><nav aria-label="设计文档入口"><a href="README.md">Agent 接入文档 ↗</a><a href="../design-showcase.html">多选与审核 ↗</a></nav></header>
<main>
<section class="catalog-intro"><div><span class="eyebrow">ART DIRECTION LIBRARY / 01–07</span><h1>7 套设计，<br>放在一起看。</h1><p>按方案编号整理，每套都有轻松、进阶、烧脑、挑战和每周挑战。<br>喜欢的可以同时保留，再到审核页逐套记录意见。</p></div><a class="latest-design" href="directions/macaron/index.html"><span>最近新增 · 第 07 套</span><strong>马卡龙</strong><small>奶油色世界上托一张白色软托盘，六角格像带白缝的软糖砖，藕紫轨道压在糖砖上。棋子是糖果色圆角六角，白色贴纸边，粗圆头白箭头。反馈用果糖色说话：路线点亮、糖砖出场、离场撒星。</small><b>查看完整设计稿 ↗</b></a></section>
<section aria-labelledby="compare-title">
<div class="compare-heading"><div><span class="eyebrow">01 / COMPARE</span><h2 id="compare-title">同一棋盘，看清不同画法</h2><p>统一弯曲轨道与七色棋子；切换主题，同时更新全部方案。</p></div><a href="#theme-map">查看 35 种主题 ↓</a></div>
<div class="catalog-theme-picker" role="group" aria-label="对比主题"><button type="button" data-theme="lagoon" aria-pressed="true">轻松</button><button type="button" data-theme="apricot" aria-pressed="false">进阶</button><button type="button" data-theme="lavender" aria-pressed="false">烧脑</button><button type="button" data-theme="rose" aria-pressed="false">挑战</button><button type="button" data-theme="midnight" aria-pressed="false">每周挑战</button></div>
<p class="comparison-status" id="comparison-status" aria-live="polite">当前对比：轻松 · 7 套设计</p>
<div class="catalog-grid"><article class="catalog-card" id="calm"><div class="card-preview" style="background:#C5E4DF;color:#273B50"><span class="design-number">01 / 现有方案</span><canvas data-catalog-design="calm" width="600" height="600" aria-label="柔和原色 · 轻松主题棋盘"></canvas><span class="preview-theme">薄荷浅湾</span></div><div class="card-body"><span class="eyebrow">QUIET TRAILS</span><h3>柔和原色</h3><p>低饱和环境与平面六角棋子，让注意力留在轨道和方向。</p><div class="card-actions"><a href="directions/calm/index.html">完整设计稿 ↗</a><a data-review-design="calm" href="../design-showcase.html?design=calm&theme=lagoon#phone">试玩与审核 →</a></div></div></article><article class="catalog-card" id="vivid"><div class="card-preview" style="background:#B8F34A;color:#12202A"><span class="design-number">02 / 高饱和</span><canvas data-catalog-design="vivid" width="600" height="600" aria-label="高彩游乐场 · 轻松主题棋盘"></canvas><span class="preview-theme">青柠派对</span></div><div class="card-body"><span class="eyebrow">CHROMA CLUB</span><h3>高彩游乐场</h3><p>鲜明撞色、粗线条与贴纸式棋子。像一张能玩的彩色海报，明快、有力量。</p><div class="card-actions"><a href="directions/vivid/index.html">完整设计稿 ↗</a><a data-review-design="vivid" href="../design-showcase.html?design=vivid&theme=lagoon#phone">试玩与审核 →</a></div></div></article><article class="catalog-card" id="toy"><div class="card-preview" style="background:#F4C548;color:#12202A"><span class="design-number">03 / 玩具质感</span><canvas data-catalog-design="toy" width="600" height="600" aria-label="积木轨道屋 · 轻松主题棋盘"></canvas><span class="preview-theme">积木黄盒</span></div><div class="card-body"><span class="eyebrow">LITTLE PLAYWORKS</span><h3>积木轨道屋</h3><p>圆润积木、原色塑胶与压下去有回弹的按钮。棋子像可以拿在手里的小零件。</p><div class="card-actions"><a href="directions/toy/index.html">完整设计稿 ↗</a><a data-review-design="toy" href="../design-showcase.html?design=toy&theme=lagoon#phone">试玩与审核 →</a></div></div></article><article class="catalog-card" id="animals"><div class="card-preview" style="background:#A9CD69;color:#12202A"><span class="design-number">04 / 卡通动物</span><canvas data-catalog-design="animals" width="600" height="600" aria-label="动物弯弯镇 · 轻松主题棋盘"></canvas><span class="preview-theme">青草野餐</span></div><div class="card-body"><span class="eyebrow">PAW PARADE</span><h3>动物弯弯镇</h3><p>猫咪、小熊、兔子与青蛙沿轨道出游。用表情与耳朵增加性格，方向箭头独立保留。</p><div class="card-actions"><a href="directions/animals/index.html">完整设计稿 ↗</a><a data-review-design="animals" href="../design-showcase.html?design=animals&theme=lagoon#phone">试玩与审核 →</a></div></div></article><article class="catalog-card" id="paper"><div class="card-preview" style="background:#EAF0F3;color:#12202A"><span class="design-number">05 / 实验页衍生</span><canvas data-catalog-design="paper" width="600" height="600" aria-label="轻线纸境 · 轻松主题棋盘"></canvas><span class="preview-theme">雾蓝信纸</span></div><div class="card-body"><span class="eyebrow">PAPER ROUTES</span><h3>轻线纸境</h3><p>提取自玩法变种实验页：暖白纸面、轻盈细轨道、白边纯色六角与细线箭头。把颜色留给棋子，让弯路轻轻浮现。</p><div class="card-actions"><a href="directions/paper/index.html">完整设计稿 ↗</a><a data-review-design="paper" href="../design-showcase.html?design=paper&theme=lagoon#phone">试玩与审核 →</a></div></div></article><article class="catalog-card" id="signpost"><div class="card-preview" style="background:#B7CBD3;color:#12202A"><span class="design-number">06 / 线路图</span><canvas data-catalog-design="signpost" width="600" height="600" aria-label="路标 · 轻松主题棋盘"></canvas><span class="preview-theme">晨雾</span></div><div class="card-body"><span class="eyebrow">SIGNPOST</span><h3>路标</h3><p>棋盘是一张线路图：奶白卡片托在世界色上，墨蓝钢轨压在浅色路基里，端点在板边收口。棋子是路标：十二色统一白箭头，一圈细描边，方向一眼可读。</p><div class="card-actions"><a href="directions/signpost/index.html">完整设计稿 ↗</a><a data-review-design="signpost" href="../design-showcase.html?design=signpost&theme=lagoon#phone">试玩与审核 →</a></div></div></article><article class="catalog-card" id="macaron"><div class="card-preview" style="background:#F5EFE7;color:#7A5560"><span class="design-number">07 / 参考 Meowdoku</span><canvas data-catalog-design="macaron" width="600" height="600" aria-label="马卡龙 · 轻松主题棋盘"></canvas><span class="preview-theme">奶油</span></div><div class="card-body"><span class="eyebrow">MACARON</span><h3>马卡龙<small>最新</small></h3><p>奶油色世界上托一张白色软托盘，六角格像带白缝的软糖砖，藕紫轨道压在糖砖上。棋子是糖果色圆角六角，白色贴纸边，粗圆头白箭头。反馈用果糖色说话：路线点亮、糖砖出场、离场撒星。</p><div class="card-actions"><a href="directions/macaron/index.html">完整设计稿 ↗</a><a data-review-design="macaron" href="../design-showcase.html?design=macaron&theme=lagoon#phone">试玩与审核 →</a></div></div></article></div>
</section>
<section class="theme-map" id="theme-map" aria-labelledby="themes-title"><span class="eyebrow">02 / THEME INDEX</span><h2 id="themes-title">7 套设计 × 5 种主题</h2><p>每个名字对应一份配色。点击主题，直接进入对应方案的试玩与审核。</p><div class="theme-matrix"><article class="theme-family"><h3><a href="directions/calm/index.html"><span>01</span> 柔和原色 ↗</a></h3><div><a class="theme-entry" href="../design-showcase.html?design=calm&theme=lagoon#phone"><i style="background:#C5E4DF" aria-hidden="true"></i><span><small>轻松</small><strong>薄荷浅湾</strong></span><b aria-hidden="true">↗</b></a><a class="theme-entry" href="../design-showcase.html?design=calm&theme=apricot#phone"><i style="background:#F1D7B8" aria-hidden="true"></i><span><small>进阶</small><strong>杏色午后</strong></span><b aria-hidden="true">↗</b></a><a class="theme-entry" href="../design-showcase.html?design=calm&theme=lavender#phone"><i style="background:#D8D0EB" aria-hidden="true"></i><span><small>烧脑</small><strong>鸢尾花园</strong></span><b aria-hidden="true">↗</b></a><a class="theme-entry" href="../design-showcase.html?design=calm&theme=rose#phone"><i style="background:#E7C3CE" aria-hidden="true"></i><span><small>挑战</small><strong>玫瑰暮色</strong></span><b aria-hidden="true">↗</b></a><a class="theme-entry" href="../design-showcase.html?design=calm&theme=midnight#phone"><i style="background:#293956" aria-hidden="true"></i><span><small>每周挑战</small><strong>午夜极光</strong></span><b aria-hidden="true">↗</b></a></div></article><article class="theme-family"><h3><a href="directions/vivid/index.html"><span>02</span> 高彩游乐场 ↗</a></h3><div><a class="theme-entry" href="../design-showcase.html?design=vivid&theme=lagoon#phone"><i style="background:#B8F34A" aria-hidden="true"></i><span><small>轻松</small><strong>青柠派对</strong></span><b aria-hidden="true">↗</b></a><a class="theme-entry" href="../design-showcase.html?design=vivid&theme=apricot#phone"><i style="background:#FF771B" aria-hidden="true"></i><span><small>进阶</small><strong>爆橙热浪</strong></span><b aria-hidden="true">↗</b></a><a class="theme-entry" href="../design-showcase.html?design=vivid&theme=lavender#phone"><i style="background:#3E42EE" aria-hidden="true"></i><span><small>烧脑</small><strong>钴蓝电场</strong></span><b aria-hidden="true">↗</b></a><a class="theme-entry" href="../design-showcase.html?design=vivid&theme=rose#phone"><i style="background:#FF3588" aria-hidden="true"></i><span><small>挑战</small><strong>荧粉冲刺</strong></span><b aria-hidden="true">↗</b></a><a class="theme-entry" href="../design-showcase.html?design=vivid&theme=midnight#phone"><i style="background:#1B104D" aria-hidden="true"></i><span><small>每周挑战</small><strong>黑光嘉年华</strong></span><b aria-hidden="true">↗</b></a></div></article><article class="theme-family"><h3><a href="directions/toy/index.html"><span>03</span> 积木轨道屋 ↗</a></h3><div><a class="theme-entry" href="../design-showcase.html?design=toy&theme=lagoon#phone"><i style="background:#F4C548" aria-hidden="true"></i><span><small>轻松</small><strong>积木黄盒</strong></span><b aria-hidden="true">↗</b></a><a class="theme-entry" href="../design-showcase.html?design=toy&theme=apricot#phone"><i style="background:#56AFE0" aria-hidden="true"></i><span><small>进阶</small><strong>蓝色装配台</strong></span><b aria-hidden="true">↗</b></a><a class="theme-entry" href="../design-showcase.html?design=toy&theme=lavender#phone"><i style="background:#EA743E" aria-hidden="true"></i><span><small>烧脑</small><strong>橘红工坊</strong></span><b aria-hidden="true">↗</b></a><a class="theme-entry" href="../design-showcase.html?design=toy&theme=rose#phone"><i style="background:#439A73" aria-hidden="true"></i><span><small>挑战</small><strong>绿毯小城</strong></span><b aria-hidden="true">↗</b></a><a class="theme-entry" href="../design-showcase.html?design=toy&theme=midnight#phone"><i style="background:#244584" aria-hidden="true"></i><span><small>每周挑战</small><strong>太空玩具柜</strong></span><b aria-hidden="true">↗</b></a></div></article><article class="theme-family"><h3><a href="directions/animals/index.html"><span>04</span> 动物弯弯镇 ↗</a></h3><div><a class="theme-entry" href="../design-showcase.html?design=animals&theme=lagoon#phone"><i style="background:#A9CD69" aria-hidden="true"></i><span><small>轻松</small><strong>青草野餐</strong></span><b aria-hidden="true">↗</b></a><a class="theme-entry" href="../design-showcase.html?design=animals&theme=apricot#phone"><i style="background:#E7B947" aria-hidden="true"></i><span><small>进阶</small><strong>橡果秋游</strong></span><b aria-hidden="true">↗</b></a><a class="theme-entry" href="../design-showcase.html?design=animals&theme=lavender#phone"><i style="background:#72BEB2" aria-hidden="true"></i><span><small>烧脑</small><strong>溪边捉迷藏</strong></span><b aria-hidden="true">↗</b></a><a class="theme-entry" href="../design-showcase.html?design=animals&theme=rose#phone"><i style="background:#C67B47" aria-hidden="true"></i><span><small>挑战</small><strong>红土探险</strong></span><b aria-hidden="true">↗</b></a><a class="theme-entry" href="../design-showcase.html?design=animals&theme=midnight#phone"><i style="background:#183F36" aria-hidden="true"></i><span><small>每周挑战</small><strong>萤火森林</strong></span><b aria-hidden="true">↗</b></a></div></article><article class="theme-family"><h3><a href="directions/paper/index.html"><span>05</span> 轻线纸境 ↗</a></h3><div><a class="theme-entry" href="../design-showcase.html?design=paper&theme=lagoon#phone"><i style="background:#EAF0F3" aria-hidden="true"></i><span><small>轻松</small><strong>雾蓝信纸</strong></span><b aria-hidden="true">↗</b></a><a class="theme-entry" href="../design-showcase.html?design=paper&theme=apricot#phone"><i style="background:#F3EEE5" aria-hidden="true"></i><span><small>进阶</small><strong>暖砂手札</strong></span><b aria-hidden="true">↗</b></a><a class="theme-entry" href="../design-showcase.html?design=paper&theme=lavender#phone"><i style="background:#E8EFEB" aria-hidden="true"></i><span><small>烧脑</small><strong>鼠尾草页</strong></span><b aria-hidden="true">↗</b></a><a class="theme-entry" href="../design-showcase.html?design=paper&theme=rose#phone"><i style="background:#E7EBEE" aria-hidden="true"></i><span><small>挑战</small><strong>石墨练习</strong></span><b aria-hidden="true">↗</b></a><a class="theme-entry" href="../design-showcase.html?design=paper&theme=midnight#phone"><i style="background:#253B4A" aria-hidden="true"></i><span><small>每周挑战</small><strong>夜航图纸</strong></span><b aria-hidden="true">↗</b></a></div></article><article class="theme-family"><h3><a href="directions/signpost/index.html"><span>06</span> 路标 ↗</a></h3><div><a class="theme-entry" href="../design-showcase.html?design=signpost&theme=lagoon#phone"><i style="background:#B7CBD3" aria-hidden="true"></i><span><small>轻松</small><strong>晨雾</strong></span><b aria-hidden="true">↗</b></a><a class="theme-entry" href="../design-showcase.html?design=signpost&theme=apricot#phone"><i style="background:#DBC4A6" aria-hidden="true"></i><span><small>进阶</small><strong>杏仁</strong></span><b aria-hidden="true">↗</b></a><a class="theme-entry" href="../design-showcase.html?design=signpost&theme=lavender#phone"><i style="background:#BBCBB1" aria-hidden="true"></i><span><small>烧脑</small><strong>苔原</strong></span><b aria-hidden="true">↗</b></a><a class="theme-entry" href="../design-showcase.html?design=signpost&theme=rose#phone"><i style="background:#D7BAB5" aria-hidden="true"></i><span><small>挑战</small><strong>暮砂</strong></span><b aria-hidden="true">↗</b></a><a class="theme-entry" href="../design-showcase.html?design=signpost&theme=midnight#phone"><i style="background:#1F2C3B" aria-hidden="true"></i><span><small>每周挑战</small><strong>夜航</strong></span><b aria-hidden="true">↗</b></a></div></article><article class="theme-family"><h3><a href="directions/macaron/index.html"><span>07</span> 马卡龙 ↗</a></h3><div><a class="theme-entry" href="../design-showcase.html?design=macaron&theme=lagoon#phone"><i style="background:#F5EFE7" aria-hidden="true"></i><span><small>轻松</small><strong>奶油</strong></span><b aria-hidden="true">↗</b></a><a class="theme-entry" href="../design-showcase.html?design=macaron&theme=apricot#phone"><i style="background:#FBE6DA" aria-hidden="true"></i><span><small>进阶</small><strong>蜜桃</strong></span><b aria-hidden="true">↗</b></a><a class="theme-entry" href="../design-showcase.html?design=macaron&theme=lavender#phone"><i style="background:#EEE8F6" aria-hidden="true"></i><span><small>烧脑</small><strong>香芋</strong></span><b aria-hidden="true">↗</b></a><a class="theme-entry" href="../design-showcase.html?design=macaron&theme=rose#phone"><i style="background:#F9E2E8" aria-hidden="true"></i><span><small>挑战</small><strong>草莓牛奶</strong></span><b aria-hidden="true">↗</b></a><a class="theme-entry" href="../design-showcase.html?design=macaron&theme=midnight#phone"><i style="background:#3E2E35" aria-hidden="true"></i><span><small>每周挑战</small><strong>可可夜</strong></span><b aria-hidden="true">↗</b></a></div></article></div></section>
<section class="catalog-notes"><div><span class="eyebrow">03 / SHARED DETAILS</span><h2>已经统一的细节</h2></div><ul><li>棋盘垂直居中，适配手机、平板、折叠屏和桌面。</li><li>通知统一在剩余步数下方；底部三个道具放大，使用无阴影的纯色平面。</li><li>奖励星星为发光金色；次数和广告角标仅在设计稿中示意。</li><li>第 05 套保留浅色细轨道、细白边和线条箭头，去掉棋盘外围色标与棋子编号。</li></ul><a href="../Design.html">查看组件与交互规范 ↗</a></section>
</main>
<footer><span>HEX TRAILS · 设计方案 01–07</span><a href="../design-showcase.html">选择方案、记录意见与导出审核 →</a></footer>
<script type="module" src="../src/design-catalog.js"></script>
</body></html>
Reference in New Issue View Git Blame Copy Permalink