+
线条形式 ×4 形式即含义；拓扑规则（横平竖直＋R8）全形式通用
+
-
拓扑全形式通用：横平竖直＋R8；站点只上先后线、半嵌卡边；并行不合并（4px）；多线卡口→胶囊（端头半圆、距外侧线 ≥ 2 线宽、线止于胶囊边）。
+
+
站点与胶囊 关系上的铆钉——只上先后线
+
+
+
+
圆点 r6 半嵌卡边：左侧贴描边；右侧骑硬投影外缘（描边会被黑影吞没）。线从卡边/影缘出发。
+
+
+
+
多线卡口＝胶囊：竖向 6×20 端头半圆；并行线间距 4px 不合并；线止于胶囊边界；端头距最外侧线 ≥ 2× 线宽。
+
+
+
+
票券 状态与指派的载体——完成即打孔
+
+
+
+
撕线＝4:2 点划（与虚线同节奏，语境不同：这是裁剪线不是关系线）。票号＝章程序号。
+
-
决策记录
-
1为什么孟菲斯：教程漫长，鲜艳与碰撞给持续的情绪燃料；形状体系天然可承载语义。
-
2为什么拟物卡：卡是拥有物——纸叠、相框与打孔票给学习以实体感。
-
3分工：孟菲斯管背景与情绪，拟物管卡片与票券，黑描边统一两者。
+
形状 → 语义
+
+ | 形状 | 语义 | 出处 |
|---|
+ | ▲ 三角 | 目标 | 靶子先行 |
+ | ● 实心圆 | 积木（已学） | 积木清单 |
+ | ○ 圆环 | 预期结果 | 可核对的样子 |
+ | ～ 横波 | 代理区 | 交给 agent |
+ | ▬ 实心条 | 价值区 | 就地写过程 |
+ | ⌇ 竖抖 | 脱靶警示 | 重点关注 |
+ | ＋ 十字 | 指派学习 | 位置/预期/场景 |
+
-
全局规则
-
1鲜艳预算：彩色只上形状、描边内与相框；大底纸色。
-
2装饰即语义：每个散落形状都必须有含义（见支柱二）。
-
3无锁：状态是推荐不是门槛——完成=打孔，未开始=无孔，卡片永远可入（死原则）。
-
4不用色彩渐变：立体感靠描边、硬投影与内阴影。
+
+
符号规则
+
1装饰即语义：散落形状必须有含义，无义不落。
+
2一横一竖对举：代理区横波（蓝）vs 脱靶竖抖（红）。
+
3形状不压内容：只在空白，永不压字与卡。
-
-
01 / 02
+
+
02 / 04
-
<DesignSystem />
-
系统 × ai-era-tutorial · 概念到组件的映射
-
教程结构的每个概念都有对应的视觉组件：靶子落在卡头三件套，代理区是波浪，脱靶是之字注，指派学习是三行票——组合样张见左。
+
<DesignSystem /> 03
+
组件 · 入口载体与关系
+
四个组件撑起教程：CourseCard（入口）、RouteLine（关系）、指派票（任务）、脱靶注（警示）。卡头三件套即靶子。
+
+
+
+
CourseCard 教程的入口载体——孟菲斯骨架 × 拟物纸感
+
+
+
①
+
+ 🌐
+
+ 预期结果 · GIF
+
+
+
+ 快速开始
+
+
+
+
+
结构：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 概念到组件的完整映射。
-
-
＋ 指派学习 · 认知基础
-
位置包管理家族：npm 的坐标与邻居
-
预期能说清 lockfile 锁住了什么
-
场景加一个依赖 / 换源重装
+
常见脱靶：装了但没跑。脱靶的样子——命令成功、页面空白；此时缺的是"真机验收"这块积木。
-
+
-
+
价值区：过程就地写清
@@ -295,27 +495,28 @@
概念 → 组件映射
-
+
| skill 概念 | 组件 |
|---|
- | 靶子先行 | 卡头三件套：▲ 目标 ＋ ○ 16:9 预期区 ＋ ● 积木点列 |
+ | 靶子先行 | 卡头三件套：▲＋○16:9＋●点列 |
| 步骤=目标+验收 | 卡内验收行（○ 空环待勾） |
- | 代理区 | ～ 波浪带，标注"交给 agent" |
+ | 代理区 | ～ 波浪带，"交给 agent" |
| 价值区 | ▬ 实心条，过程就地展开 |
- | 指派学习 | ＋ 三行票：位置 / 预期 / 场景 |
+ | 指派学习 | ＋ 三行票：位置/预期/场景 |
| 脱靶提醒 | ⌇ 竖抖注，跟在指派后 |
| 认知基础 | 底座纹与"真机验收"章 |
| 死原则 | 无锁：状态=推荐，卡永远可入 |
-
+
组合规则
-
1入口徽章 ①②③：读者画像的推荐起点，非强制。
-
2撞色在框内：章节撞色只进 16:9 相框，卡面纸色。
-
3形状不压内容：散落形状只在空白，密度 ≤ 每屏 8 个。
+
1撞色在框内：章节色只进 16:9 相框，卡面纸色。
+
2站点贴边：左贴描边、右骑硬投影外缘；虚线/点线无站点。
+
3入口徽章 ①②③：推荐起点，非强制。
+
4形状不压内容：只在空白，密度 ≤ 8/屏。
-
-
02 / 02
+
+
04 / 04