这本笔记自己的规矩
本站的设计宪法
网站按自己教的 UX 规则设计。下面每一样都是站内组件实时画出来的，可以拿“做好看”那本锦囊逐条检查。
色板
每一对颜色都标了对比度：正文至少 4.5，输入框这类界面元素至少 3。浅色和深色是两套值，同一套名字。
浅色
--canvas页面底色（点阵纸）#fbfaf7--paper纸卡、话术卡、浮层#ffffff--ink标题、正文#1f1d1a对比度 16.11--ink-soft次要说明#56524b对比度 7.44--ink-faint编号、日期#6b665e对比度 5.46--accent墨水蓝：链接、主按钮、焦点#2d4bb0对比度 7.33--line-input输入框边界#8a8278对比度 3.63
深色（夜里自习用）
--canvas暖调近黑，不用纯黑#141311--paper纸卡、浮层#1c1b18--ink标题、正文#ece8e1对比度 15.20--ink-soft次要说明#b5afa5对比度 8.52--ink-faint编号、日期#9b948a对比度 6.19--accent墨水蓝（夜读）#93a9f2对比度 8.13--line-input输入框边界#7a7369对比度 3.96
四种能力色
每本锦囊一种颜色，从封面到搜索结果都不变。它们只用来分类，不用在按钮上。
- 准确聊#6a3d9a / #f1eaf8对比度 6.50准确聊#c4a8ea / #2c2436对比度 7.18
- 做好看#b0412e / #f9e7e2对比度 4.82做好看#f0a393 / #3a2622对比度 7.00
- 不怕错#8a5a00 / #f8eed6对比度 5.13不怕错#e8c16e / #37301d对比度 7.66
- 稳定做#256b4a / #e3f1e8对比度 5.49稳定做#86cfa6 / #1f3329对比度 7.35
字体与字号
三种字体各管一件事：宋体印词名，黑体印讲解，楷体印批注。层级靠换字体和字重拉开，不靠一路放大。
词名与标题：思源宋体
API
讲解与界面：系统黑体
API 是一个程序对外提供的调用约定，写明怎么发请求、要带什么、会返回什么。
批注：霞鹜文楷
API 像餐厅的外卖菜单：能点哪些菜、每道菜要选什么口味、多少钱、会送来什么，都写得清清楚楚，你照着下单就行，不用走进后厨。
字号阶梯
--text-hero首页主标题44-64px手机 36px
行高 1.12看懂 AI 说的词
--text-display词名、锦囊封面44px手机 32px
行高 1.15看懂 AI 说的词
--text-title章名、分区标题30px手机 25px
行高 1.3看懂 AI 说的词
--text-xl二级标题24px手机 21px
行高 1.4查一句解释，拿一句话术
--text-lg一句话20px手机 18px
行高 1.6查一句解释，拿一句话术
--text-note大白话20px手机 18px
行高 1.8像餐厅的外卖菜单
--text-read阅读正文17px手机 16px
行高 1.75查一句解释，拿一句话术
--text-base界面正文、输入框16px手机 16px
行高 1.6查一句解释，拿一句话术
--text-sm次要说明、按钮14px手机 14px
行高 1.6查一句解释，拿一句话术
--text-xs标签（最小字号）13px手机 13px
行高 1.5查一句解释，拿一句话术
组件
全站只有这几种按钮、卡片和提示块，每一页都从这里取，不另起一套。
按钮：三种，两档高度
纸卡与标签
No.15
API
API 是一个程序对外提供的调用约定，写明怎么发请求、要带什么、会返回什么。
提示块：三档强度
五个标志性瞬间
全站只有这五个时刻会明显地动，其余界面保持安静。点“重播”再看一次。
Git 把项目在某个时间点的样子存成快照。
1荧光一划
第一次看到首页主标题和词页“一句话”时，荧光笔从左到右划过。每次访问只播一次。
先用API取数据，再部署到线上，别忘了配好环境变量。
2自动划词
首页扫描演示进入视口时，示例回复里的词被依次划出来。
- No.15API
3翻到下一张
在首页点常查词，右边的样张像翻笔记一样换成那个词。
- 已用过
4盖一枚章
在词页点“用过了”，一枚墨水蓝小章落下、轻轻回弹，导航里的计数加一。
5点亮
名词地图里出现新用过的词时，那一格墨水晕开一次。
最小设计宪法模板
按学员版 UX 指南的模板结构，填的是本站的真实数值。复制下来，改成你自己项目的版本，再交给 AI 严格遵守。
# 造物笔记 设计规范（最小版） ## 配色 - 页面底色：#fbfaf7（点阵纸）；卡片：#ffffff - 正文文字：#1f1d1a（对比度 16.1）；辅助文字：#6b665e（5.5，不能再浅） - 强调色：#2d4bb0 墨水蓝，只用于链接、主按钮、焦点 - 荧光笔：rgba(255,214,10,.38)，只标“要记住的那句话” - 分类色：准确聊 #6a3d9a、做好看 #b0412e、不怕错 #8a5a00、稳定做 #256b4a（不用于按钮） ## 字体 - 标题：思源宋体 SemiBold 子集，词名 44px、分区标题 30px - 正文：系统黑体，阅读正文 17px，行高 1.75，每行不超过 36 个字 - 批注：霞鹜文楷 20px，只用于大白话和页边小注 - 最小字号 13px；字重只用 400 和 600；中文不用斜体 ## 间距 - 档位：4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128 - 页面两侧：手机 16px，桌面 40px；首页分区之间 128px - 标题上方留白是下方的两倍 ## 组件规则 - 按钮三种：主按钮（墨水蓝实底白字）、次按钮（浅底深字）、工具按钮（细边）；高 44 或 36，圆角 8 - 纸卡：白底 + 1px 暖灰边，圆角 12 - 输入框：高 44-52，圆角 8，标签在上方，聚焦时边框变墨水蓝 - 每个区块只有一个主按钮；按钮文字写“动词 + 对象” ## 图标 - 一套线性图标（Phosphor Regular），16 或 20px - 不用 emoji，不用字符冒充图标
怎样让 AI 按宪法改页面，看 做好看 · 方法十：设计规范