<DesignSystem /> 01
颜色 · 鲜艳与碰撞
三组撞色对轮转，黑描边收束一切鲜艳，大底永远是纸色。章节色只进相框，状态不用颜色表达——用形状。
撞色对 相邻的鲜艳必须来自不同对；描边统一 ink
相邻色块必撞色（不同对取色）；ink #111 描边收束一切；鲜艳总面积一屏 ≤ 10%。
中性阶 纸的世界——字、边、投影、底
章节色 六章六色，只进 16:9 相框与图标瓦
站点轮换色 只上先后线（实线），沿线路四色轮换
描边 2px ink；r=6；同色不相邻。虚线/点线（相关/同族）不带站点。
收束示例 鲜艳 × 黑描边 × 纸底的合作
🌐
⚛️
相框内的章节色相邻即撞色（ch1 × ch2）；黑描边与内阴影把鲜艳压回纸面。禁色彩渐变——立体感只来自描边、硬投影与内阴影。
用色规则
1鲜艳预算：彩色只上形状、描边内与相框；一屏 ≤ 10%。
2相邻必撞色：相邻鲜艳取不同撞色对；同色不相邻。
3黑描边收束：一切鲜艳以 2px ink 描边为界。
4大底纸色：背景只有 paper；白只作纸叠亮边。
状态即形状，不是颜色
1完成＝打孔：票券沿撕线打双孔；未开始无孔。
2进度＝积木点：卡头点列，实心=已学。
3无锁：状态是推荐不是门槛，卡片永远可入（死原则）。
01 / 04
<DesignSystem /> 02
符号、形状 · 装饰即语义
孟菲斯形状对内容下定义、散落于空白；线条形式承载关系含义；站点与票券是关系上的铆钉。每个标记都有意思。
语义形状 ×7 取自 ai-era-tutorial 概念；散落只在空白，密度 ≤ 8/屏
线条形式 ×4 形式即含义；拓扑规则（横平竖直＋R8）全形式通用
波浪带 ＝ 代理交接
agent 边界 · 区域标记，不连线
站点与胶囊 关系上的铆钉——只上先后线
圆点 r6 半嵌卡边：左侧贴描边；右侧骑硬投影外缘（描边会被黑影吞没）。线从卡边/影缘出发。
多线卡口＝胶囊：竖向 6×20 端头半圆；并行线间距 4px 不合并；线止于胶囊边界；端头距最外侧线 ≥ 2× 线宽。
票券 状态与指派的载体——完成即打孔
撕线＝4:2 点划（与虚线同节奏，语境不同：这是裁剪线不是关系线）。票号＝章程序号。
形状 → 语义
| 形状 | 语义 | 出处 |
|---|
| ▲ 三角 | 目标 | 靶子先行 |
| ● 实心圆 | 积木（已学） | 积木清单 |
| ○ 圆环 | 预期结果 | 可核对的样子 |
| ～ 横波 | 代理区 | 交给 agent |
| ▬ 实心条 | 价值区 | 就地写过程 |
| ⌇ 竖抖 | 脱靶警示 | 重点关注 |
| ＋ 十字 | 指派学习 | 位置/预期/场景 |
符号规则
1装饰即语义：散落形状必须有含义，无义不落。
2一横一竖对举：代理区横波（蓝）vs 脱靶竖抖（红）。
3形状不压内容：只在空白，永不压字与卡。
02 / 04
<DesignSystem /> 03
组件 · 入口载体与关系
四个组件撑起教程：CourseCard（入口）、RouteLine（关系）、指派票（任务）、脱靶注（警示）。卡头三件套即靶子。
CourseCard 教程的入口载体——孟菲斯骨架 × 拟物纸感
结构：2px ink 描边 · 硬投影 7px 8px 0 · 纸叠三层边（白 3px / 暗层 5px）· 相框 3px 黑边 + 内阴影 · 标题压凹白影。
卡头三件套＝靶子：▲ 目标（三角＋标题）＋ ○ 预期结果（16:9 相框 GIF）＋ ● 积木点列（实心=已学）。
交互：hover 拿起（translateY -3px＋投影加深至 10px 11px）并播放 GIF；desc ⇄ GIF 每 8000ms 自动翻转，hover / Tab 聚焦锁定；触屏与 prefers-reduced-motion 不翻转。
RouteLine 关系——线形即含义，拓扑全形式通用
拓扑：横平竖直 ＋ R8 小圆角直角步进；并行不合并（4px）；分流/并线＝直角步进。线宽 2.5px ink。
站点：只上先后线，r6 半嵌卡边（左贴描边、右骑影缘），四色轮换。胶囊：多线卡口专用（见 02 页）。
指派票 ＆ 脱靶注 任务与警示——总在指派之后
＋
指派学习 · npm
位置：包管理家族坐标
预期：说清 lockfile 锁什么
场景：加依赖 / 换源重装
＋
写两样：可能怎么脱靶（装了但没跑）＋ 脱靶什么样子（命令成功、页面空白）——读者撞上时认得出缺哪块。
组件参数
| 组件 | 关键 prop |
|---|
| CourseCard | goal ▲ · gifUrl ○16:9 · dots ● · entry ①② · flipMs=8000 |
| RouteLine | path 实线段 · rel 虚线 · family 点线 · stations · capsule |
| 指派票 | pos 位置 · expect 预期 · scenes[] 场景 |
| 脱靶注 | how 怎么脱靶 · looks 什么样 |
入口徽章 ①②③＝读者画像推荐起点（EntryGuide），非强制排序。
组件原则
1卡不可缺：入口与预期永远以卡呈现。
2线不可缺：章节之间必有关系可读。
3无锁：任何状态不阻断进入（死原则）。
03 / 04
<DesignSystem /> 04
样例 · 组合场景与概念映射
全系统同台：拟物卡 ＋ 三种关系线 ＋ 指派票与脱靶注 ＋ 散落语义形状。右侧是 ai-era-tutorial 概念到组件的完整映射。
常见脱靶：装了但没跑。脱靶的样子——命令成功、页面空白；此时缺的是"真机验收"这块积木。
价值区：过程就地写清
形状散落于空白，每个都有含义：▲ 靶子 · ● 积木 · ○ 预期 · ～ 代理区 · ▬ 价值区 · ⌇ 脱靶 · ＋ 指派；线：实＝先后 · 虚＝相关 · 点＝同族
概念 → 组件映射
| skill 概念 | 组件 |
|---|
| 靶子先行 | 卡头三件套：▲＋○16:9＋●点列 |
| 步骤=目标+验收 | 卡内验收行（○ 空环待勾） |
| 代理区 | ～ 波浪带，"交给 agent" |
| 价值区 | ▬ 实心条，过程就地展开 |
| 指派学习 | ＋ 三行票：位置/预期/场景 |
| 脱靶提醒 | ⌇ 竖抖注，跟在指派后 |
| 认知基础 | 底座纹与"真机验收"章 |
| 死原则 | 无锁：状态=推荐，卡永远可入 |
组合规则
1撞色在框内：章节色只进 16:9 相框，卡面纸色。
2站点贴边：左贴描边、右骑硬投影外缘；虚线/点线无站点。
3入口徽章 ①②③：推荐起点，非强制。
4形状不压内容：只在空白，密度 ≤ 8/屏。
04 / 04