+
+
<DesignSystem />
+
设计系统 · 孟菲斯 × 拟物卡 · v1.0
+
定稿：鲜艳碰撞的孟菲斯骨架，拟物纸质课程卡为入口载体；线条是关系；形状承载语义、散落空白。一切扩展围绕 ai-era-tutorial：卡头即靶子，票券即指派。
+
+
+
+
支柱一 · 色彩 鲜艳、碰撞——三组撞色对，黑描边统一收束，大底永远是纸色
+
+
+
+
撞色对 1 · coral × teal
+
+
+
+
撞色对 2 · mustard × violet
+
+
+
+
撞色对 3 · pink × blue
+
+
+ 规则：相邻色块必须来自不同撞色对；ink #111 描边收束一切鲜艳；大面积底色只有纸色 #FFF9F0 与白。
+
+
+
+
支柱二 · 形状即语义 孟菲斯形状对内容下定义，散落于空白——装饰即语义
+
+
+
支柱三 · 卡片 核心：教程的入口载体——孟菲斯骨架 + 拟物纸感，卡头三件套即靶子
+
+
+
+ 🌐
+
+ 预期结果 · GIF
+
+
+
+ 快速开始
+
+
+
+
+
卡头三件套 = 靶子：▲ 目标（标题旁三角）＋ ○ 预期结果（16:9 相框 GIF）＋ ● 积木进度（四点，实心=已学）。
+
孟菲斯：2px 黑描边、7px 硬投影、章节撞色只进相框。
+
拟物：米白纸面 #FFF9F0、纸叠三层边、相框凹槽内阴影、标题压凹白影、完成=打孔票。
+
+
+
+
支柱四 · 线条 关系，不可缺——横平竖直 + R8 小圆角 + 站点半嵌卡边 + 并行不合并
+
+
黑 2.5px 实线；站点＝描边圆点四色轮换、半嵌卡边；多线入同一卡口 → 胶囊（端头半圆、线止于胶囊边）。
+
+
+
+
决策记录
+
1为什么孟菲斯：教程漫长，鲜艳与碰撞给持续的情绪燃料；形状体系天然可承载语义。
+
2为什么拟物卡：卡是拥有物——纸叠、相框与打孔票给学习以实体感。
+
3分工：孟菲斯管背景与情绪，拟物管卡片与票券，黑描边统一两者。
+
+
+
全局规则
+
1鲜艳预算：彩色只上形状、描边内与相框；大底纸色。
+
2装饰即语义：每个散落形状都必须有含义（见支柱二）。
+
3无锁：状态是推荐不是门槛——完成=打孔，未开始=无孔，卡片永远可入（死原则）。
+
4不用色彩渐变：立体感靠描边、硬投影与内阴影。
+
+
+
+
01 / 02
+
+
+
<DesignSystem />
+
系统 × ai-era-tutorial · 概念到组件的映射
+
教程结构的每个概念都有对应的视觉组件：靶子落在卡头三件套，代理区是波浪，脱靶是之字注，指派学习是三行票——组合样张见左。
+
+
+
+
+
+
+
①
+
🌐
+ 预期结果 · GIF
+
+
快速开始
+
+
+
+
+
+
+
+
＋ 指派学习 · 认知基础
+
位置包管理家族：npm 的坐标与邻居
+
预期能说清 lockfile 锁住了什么
+
场景加一个依赖 / 换源重装
+
+
+
+
+
常见脱靶：装了但没跑。脱靶的样子——命令成功、页面空白；此时缺的是"真机验收"这块积木。
+
+
+
+
+
代理区：安装交给 agent，只验收产物
+
+
+
+ 价值区：过程就地写清
+
+
+
形状散落于空白，每个都有含义：▲ 靶子 · ● 积木 · ○ 预期 · ～ 代理区 · ▬ 价值区 · ⌇ 脱靶 · ＋ 指派
+
+
+
+
概念 → 组件映射
+
+ | skill 概念 | 组件 |
|---|
+ | 靶子先行 | 卡头三件套：▲ 目标 ＋ ○ 16:9 预期区 ＋ ● 积木点列 |
+ | 步骤=目标+验收 | 卡内验收行（○ 空环待勾） |
+ | 代理区 | ～ 波浪带，标注"交给 agent" |
+ | 价值区 | ▬ 实心条，过程就地展开 |
+ | 指派学习 | ＋ 三行票：位置 / 预期 / 场景 |
+ | 脱靶提醒 | ⌇ 之字注，跟在指派后 |
+ | 认知基础 | 底座纹与"真机验收"章 |
+ | 死原则 | 无锁：状态=推荐，卡永远可入 |
+
+
+
+
组合规则
+
1入口徽章 ①②③：读者画像的推荐起点，非强制。
+
2撞色在框内：章节撞色只进 16:9 相框，卡面纸色。
+
3形状不压内容：散落形状只在空白，密度 ≤ 每屏 8 个。
+
+
+
+
02 / 02
+