<Examples /> 1/2
样例 · 组合场景
全系统同台：拟物卡＋三种关系线＋指派学习块与脱靶注＋散落语义形状。这一页可直接当实现验收的对照图。
常见脱靶：装了但没跑。脱靶的样子——命令成功、页面空白；此时缺的是"真机验收"这块积木。
价值区：过程就地写清
形状散落于空白，每个都有含义：▲ 靶子 · ● 积木 · ○ 预期 · ～ 代理区 · ▬ 价值区 · ⌇ 脱靶 · ＋ 指派；线：实＝先后 · 虚＝相关 · 点＝同族
场景读法
1主线：快速开始 →（直角步进）→ React →（直线）→ 全栈基础；四枚站点半嵌卡边。
2虚线：React 底边 → 指派学习块顶边（相关：块属于该章扩展）。
3点线：React 顶边 → 全栈基础顶边（同族：工程基础一族）。
4指派学习块：React 的相关扩展（虚线相连）；脱靶注跟在其叙事之后。
对照检查
1三卡相框色：coral / pink / blue——相邻跨对 ✓。
2散落形状 8 枚，全部在空白 ✓。
3右站点骑黑影外缘（快速开始右、React 右），左站点贴描边 ✓。
01 / 02
<Examples /> 2/2
样例 · 概念映射与落地
ai-era-tutorial 的每个概念都有对应组件；落地清单指出三个页面各自用哪些件。
概念 → 组件映射 skill 八概念的视觉落点
| skill 概念 | 组件落点 |
|---|
| 靶子先行 | 卡头三件套：▲ 目标 ＋ ○ 16:9 预期区 ＋ ● 积木点列 |
| 步骤 = 目标 ＋ 验收产物 | 卡内验收行（○ 空环待勾，不写键位） |
| 代理区 / 价值区 | ～ 横波带（交给 agent）／ ▬ 实心条（过程就地展开） |
| 指派学习 | ＋ 指派块：位置（坐标）/ 预期（尺子）/ 场景（巩固） |
| 脱靶提醒 | ⌇ 竖抖注，永远跟在指派后 |
| 认知基础 | 底座纹与「真机验收」章（env / 运行环境就地露出） |
| 入口梳理 | ①②③ 徽章 ＋ 读者画像路径 chips |
| 死原则 | 无锁：状态 = 推荐，卡永远可入；不写死 AI 规则 |
落地清单 三个页面各用哪些件
| 页面 | 组件组合 |
| 首页 · 书架 | CourseCard 网格 ＋ RouteLine（实线主链＋虚线相关）＋ 入口画像卡；散落形状 ≤ 8。 |
| 教程页 · 正文 | 卡头三件套置顶；正文中 ～ 代理带与 ▬ 价值条分节；指派块＋脱靶注成对；○ 验收行收尾。 |
| 工具页 / 实践页 | 轻量用形状语言（无卡无线）；实践经历可用拼贴式纸片——单独风格层，不混入主线。 |
组合规则
1撞色在框内：章节色只进 16:9 相框，卡面纸色。
2站点贴边：左贴描边、右骑硬投影外缘；虚/点线无站点。
3入口徽章 ①②③：推荐起点，非强制。
4形状不压内容：只在空白，密度 ≤ 8/屏。
实现顺序建议
1CourseCard（含翻转交互）→ 首页书架。
2RouteLine（数据驱动布线）→ 关系可读。
3指派学习块＋脱靶注 → 教程正文改造。
4GIF 素材逐章录制（16:9，无声循环）。
02 / 02