{title}
+{desc}
+{children}
+
+
+ {showGif ? (
+ chapter.gifUrl ? (
+ 
+ ) : (
+
+ ▶ {chapter.target.expectation}
+
+ )
+ ) : (
+
+ {chapter.target.goal}
+
+ )}
+
+ 预期结果{showGif ? ' · GIF' : ''}
+
+
+ {/* 卡头：▲ 目标 + 标题 + ● 积木点列 */}
+
+
+
+ )
+}
diff --git a/apps/design-lab/src/components/RouteLine.tsx b/apps/design-lab/src/components/RouteLine.tsx
new file mode 100644
index 0000000..f1a0734
--- /dev/null
+++ b/apps/design-lab/src/components/RouteLine.tsx
@@ -0,0 +1,82 @@
+/** RouteLine —— 关系线：线形即含义（实=先后 虚=相关 点=同族）
+ * 拓扑：横平竖直 + R8 直角步进；并行不合并(4px)；站点 r6 半嵌卡边
+ * （左贴描边、右骑硬投影外缘）；同口多线自动聚合胶囊（线止于胶囊边界）。 */
+import type { ChapterId, Edge } from '../lib/types'
+
+const STATION_COLORS = ['var(--color-clash2a)', 'var(--color-clash1b)', 'var(--color-clash3a)', 'var(--color-clash1a)']
+
+export interface LaneNode {
+ id: ChapterId
+ borderLeft: number // 左描边 x（无影侧，入口贴这里）
+ right: number // 右侧黑影外缘 x（描边 + 7，出口从这里出发）
+ y: number // 卡中线 y
+}
+
+/** 水平出发 → R8 双弯直角步进 → 水平到达；同 y 时直线 */
+function stepPath(x0: number, y0: number, x1: number, y1: number, r = 8): string {
+ if (Math.abs(y1 - y0) < 1) return `M ${x0} ${y0} H ${x1}`
+ const down = y1 > y0
+ const sweep1 = down ? 1 : 0
+ const sweep2 = down ? 0 : 1
+ const cornerX = Math.max(x0 + r, x1 - 2 * r)
+ return `M ${x0} ${y0} H ${cornerX} A ${r} ${r} 0 0 ${sweep1} ${cornerX + r} ${y0 + (down ? r : -r)} V ${y1 - (down ? r : -r)} A ${r} ${r} 0 0 ${sweep2} ${cornerX + 2 * r} ${y1} H ${x1}`
+}
+
+export function RouteLine({
+ edges,
+ nodes,
+ width,
+ height,
+}: {
+ edges: Edge[]
+ nodes: Partial
+ {/* 头部媒体块：章节色纯填充，无独立边框（由票体裁切） */}
+
+ )
+}
+
+/** 指派学习块 —— 普通内容块（非票据）：＋ 位置/预期/场景三样 + 脱靶标记 */
+export function AssignBlock({
+ title,
+ pos,
+ expect,
+ scenes,
+ miss,
+}: {
+ title: string
+ pos: string
+ expect: string
+ scenes: string[]
+ miss: { how: string; looks: string }
+}) {
+ return (
+ {chapter.emoji}
+
+ {chapter.title}
+
+
+ No. {String(chapter.id).padStart(3, '0')} · {done ? '已完成（打孔）' : '未开始（无孔）'}
+
+
+ №{String(chapter.id).padStart(2, '0')}
+
+
+
+
+ )
+}
diff --git a/apps/design-lab/src/components/shapes.tsx b/apps/design-lab/src/components/shapes.tsx
new file mode 100644
index 0000000..ec9bf64
--- /dev/null
+++ b/apps/design-lab/src/components/shapes.tsx
@@ -0,0 +1,79 @@
+/** 七个语义形状——装饰即语义（取自 ai-era-tutorial 词汇表） */
+import type { CSSProperties } from 'react'
+
+interface ShapeProps {
+ size?: number
+ className?: string
+ style?: CSSProperties
+}
+
+/** ▲ 靶子：目标，卡头打头 */
+export const Tri = ({ size = 24, className, style }: ShapeProps) => (
+
+)
+
+/** ● 积木：清单点列，实心=已学 */
+export const BrickDot = ({ size = 14, on = false, className, style }: ShapeProps & { on?: boolean }) => (
+
+)
+
+/** ○ 预期：可核对的结果 */
+export const Ring = ({ size = 24, className, style }: ShapeProps) => (
+
+)
+
+/** ～ 代理区：横波，交给 agent */
+export const Wave = ({ size = 40, className, style }: ShapeProps) => (
+
+)
+
+/** ▬ 价值区：实心条，过程就地写清 */
+export const Bar = ({ size = 34, className, style }: ShapeProps) => (
+
+)
+
+/** ⌇ 脱靶：竖立颤抖——图形入口，读者追随图形进入阅读 */
+export const Tremble = ({ size = 24, className, style }: ShapeProps) => (
+
+)
+
+/** ＋ 指派学习：位置/预期/场景三样 */
+export const Cross = ({ size = 18, className, style }: ShapeProps) => (
+
+)
+
+/** 脱靶标记：图形 + 文字，无容器（图形是第一视觉） */
+export function MissMark({ how, looks }: { how: string; looks: string }) {
+ return (
+
+
+ {title}
+
+
+
+
+ 位置：{pos}
+
+
+ 预期：{expect}
+
+
+ 场景：{scenes.join(' / ')}
+
+
+
+
+
+
+
+ 脱靶 · {miss.how}
+
+ {miss.looks}
+
+
+ )
+}
diff --git a/apps/design-lab/src/lib/chapters.ts b/apps/design-lab/src/lib/chapters.ts
new file mode 100644
index 0000000..c02842f
--- /dev/null
+++ b/apps/design-lab/src/lib/chapters.ts
@@ -0,0 +1,125 @@
+import type { Assignment, Chapter, ChapterId, Edge, Profile } from './types'
+
+export const CHAPTERS: Record
+ 脱靶 · {how}
+
+ {looks}
++ {label} + {note && {note}} +
+ {children} +
+
+
+ )
+}
+
+function DoDont({ bad, children, text }: { bad?: boolean; children: React.ReactNode; text: string }) {
+ return (
+ {n}
+ {h}
+
+
+ {bad ? '✗' : '✓'}
+
+ {children}
+
+ )
+}
+
+export function App() {
+ return (
+ {text}
+
+ {PAIRS.map((p) => (
+
+
+
+ ))}
+
+
+
+
+ {p.name}
+ {p.use}
+ {NEUTRALS.map((x) =>
+ {CHAPTERS6.map((x) =>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
大底鲜艳
+ 纸底安放正文
+
+
+
+
+
+
+ design-lab · 孟菲斯 × 拟物卡
+Vite MPA：一页一入口（src/pages/xxx/main.tsx）。设计系统四册的可运行版。
+
+ {PAGES.map((p) => (
+
+ {p.name}
+
+ {p.desc}
+ + ))} +
+
+ {s.el}
+ ))}
+
+
+ 代理区：安装交给 agent，只验收产物
++ 形状散落于空白，每个都有含义：▲ 靶子 · ● 积木 · ○ 预期 · ～ 代理区 · ▬ 价值区 · ⌇ 脱靶 · ＋ 指派；线：实＝先后 · 虚＝相关 · 点＝同族 +
+
+ {SHAPES.map((s) => (
+
+
+
+ ))}
+ {s.el}
+ {s.n}
+ {s.m}
+ {s.s}
+ | 父词 | +图形 · 子词 | +释义（skill 口径） | +
|---|---|---|
| {g.p} | } +{sub} | +{def} | +
+ {LINES.map((l) => (
+
+
+
+
+ ))}
+ {l.n}
+ {l.m}
+
+
+
+ 波浪带 ＝ 代理交接
+ agent 边界 · 区域标记，不连线
+
+
+ + 完成＝沿撕线打双孔（半圆缺口）；未开始撕线为实线、无孔。头部色块无独立描边，由票体 overflow-hidden 裁出单一描边圆角。票号＝章程序号。 +
+