diff --git a/design-refs/mockup/build.sh b/design-refs/mockup/build.sh index 0f9b30d..b0c7ce1 100755 --- a/design-refs/mockup/build.sh +++ b/design-refs/mockup/build.sh @@ -1,7 +1,7 @@ #!/usr/bin/env bash -# 设计稿构建：把整页 HTML 按顶层 .page 拆成单页 → html2poster 逐页渲染 → 合并为同名 PDF -# 用法：bash build.sh [stem ...] # stem 为 design-refs/mockup 下的 html 文件名（不含扩展名） -# 默认构建 course-shelf 与 components 两个目标 +# 设计稿构建：把整页 HTML 按顶层 .page 拆成单页 → html2poster 逐页渲染 → 合并为 PDF +# 用法：bash build.sh [src ...] # src 为相对 mockup 的 html 路径（如 components.html 或 design-system/01-colors.html） +# 默认：历史 mockup（course-shelf/components/color-system）+ design-system 四部分文档 set -euo pipefail cd "$(dirname "$0")" @@ -15,16 +15,12 @@ export HTML2POSTER H2P_CHROMIUM mkdir -p "$HOME/.cache/h2p-tmp" export TMPDIR="$HOME/.cache/h2p-tmp" -STEMS=("$@") -if [ ${#STEMS[@]} -eq 0 ]; then - STEMS=(course-shelf components color-system design-system) -fi - -for STEM in "${STEMS[@]}"; do - SRC="${STEM}.html" - [ -f "$SRC" ] || { echo "!! 缺少 $SRC，跳过"; continue; } - OUT_DIR="single-${STEM}" - mkdir -p "$OUT_DIR" +# build_one +build_one() { + local SRC="$1" PDF_OUT="$2" + local STEM; STEM=$(basename "${SRC%.html}") + local OUT_DIR="single-${STEM}" + mkdir -p "$OUT_DIR" "$(dirname "$PDF_OUT")" # 1. 按顶层 .page 拆单页（固定布局必须走 html2poster，不能用 html2pdf-next） python3 - "$SRC" "$OUT_DIR" <<'EOF' @@ -56,21 +52,30 @@ for p in pages: print(f"[{out_dir}] rendered {len(pages)} pages") EOF - # 4. 合并 + 元数据 - python3 - "$OUT_DIR" "${STEM}" <<'EOF' + # 4. 合并 + 元数据（只取第 1 页：Chromium 打印偶发产生一个空白尾页） + python3 - "$OUT_DIR" "$PDF_OUT" <<'EOF' import glob, os, re, sys from pypdf import PdfWriter -out_dir, stem = sys.argv[1], sys.argv[2] +out_dir, pdf_out = sys.argv[1], sys.argv[2] pdfs = sorted(glob.glob(f"{out_dir}/page-*.pdf"), key=lambda p: int(re.search(r"(\d+)", os.path.basename(p)).group(1))) w = PdfWriter() for p in pdfs: - # 只取第 1 页：Chromium 打印偶发产生一个空白尾页（几何已验证无溢出） w.append(p, pages=(0, 1)) -w.add_metadata({"/Title": f"课程书架设计稿 · {stem} · stack idealjs", "/Author": "Z.ai", "/Creator": "Z.ai"}) -with open(f"{stem}.pdf", "wb") as f: +w.add_metadata({"/Title": f"设计系统 · {os.path.splitext(os.path.basename(pdf_out))[0]} · stack idealjs", "/Author": "Z.ai", "/Creator": "Z.ai"}) +with open(pdf_out, "wb") as f: w.write(f) -print(f"merged {len(pdfs)} pages -> {stem}.pdf") +print(f"merged {len(pdfs)} pages -> {pdf_out}") EOF - echo "done: ${STEM}.pdf" + echo "done: $PDF_OUT" +} + +SRCS=("$@") +if [ ${#SRCS[@]} -eq 0 ]; then + SRCS=(course-shelf.html components.html color-system.html design-system/01-colors.html design-system/02-symbols.html design-system/03-components.html design-system/04-examples.html) +fi + +for SRC in "${SRCS[@]}"; do + [ -f "$SRC" ] || { echo "!! 缺少 $SRC，跳过"; continue; } + build_one "$SRC" "${SRC%.html}.pdf" done diff --git a/design-refs/mockup/color-system.pdf b/design-refs/mockup/color-system.pdf index 7f4044d..8e88e6e 100644 Binary files a/design-refs/mockup/color-system.pdf and b/design-refs/mockup/color-system.pdf differ diff --git a/design-refs/mockup/components.pdf b/design-refs/mockup/components.pdf index 1305245..924b987 100644 Binary files a/design-refs/mockup/components.pdf and b/design-refs/mockup/components.pdf differ diff --git a/design-refs/mockup/course-shelf.pdf b/design-refs/mockup/course-shelf.pdf index 1e7308a..a71d197 100644 Binary files a/design-refs/mockup/course-shelf.pdf and b/design-refs/mockup/course-shelf.pdf differ diff --git a/design-refs/mockup/design-system.html b/design-refs/mockup/design-system.html deleted file mode 100644 index f65a6fa..0000000 --- a/design-refs/mockup/design-system.html +++ /dev/null @@ -1,523 +0,0 @@ - - - - -设计系统 · 孟菲斯 × 拟物卡 · stack idealjs - - - - - -
-
- <DesignSystem /> 01 -

颜色 · 鲜艳与碰撞

-
三组撞色对轮转，黑描边收束一切鲜艳，大底永远是纸色。章节色只进相框，状态不用颜色表达——用形状。
-
- -
-
撞色对 相邻的鲜艳必须来自不同对；描边统一 ink
-
-
-
-
对 1 · coral × teal
-
-
-
-
对 2 · mustard × violet
-
-
-
-
对 3 · pink × blue
-
-
- 相邻色块必撞色（不同对取色）；ink #111 描边收束一切；鲜艳总面积一屏 ≤ 10%。 -
-
- -
中性阶 纸的世界——字、边、投影、底
-
-
ink
#111111 · 描边/字/硬投影
-
paper
#FFF9F0 · 卡面/大底
-
stack-1
#FFFFFF · 纸叠亮边
-
stack-2
#EADFC4 · 纸叠暗层
-
- -
章节色 六章六色，只进 16:9 相框与图标瓦
-
-
ch1 快速开始
#FF6B6B
-
ch2 React
#FF8FAB
-
ch3 更多示例
#FFD93D
-
ch4 更多
#4ECDC4
-
ch5 全栈基础
#5B8DEF
-
ch6 高级教程
#A78BFA
-
- -
站点轮换色 只上先后线（实线），沿线路四色轮换
-
- - - - - - - -
描边 2px ink；r=6；同色不相邻。虚线/点线（相关/同族）不带站点。
-
- -
收束示例 鲜艳 × 黑描边 × 纸底的合作
-
-
🌐
-
⚛️
-
相框内的章节色相邻即撞色（ch1 × ch2）；黑描边与内阴影把鲜艳压回纸面。禁色彩渐变——立体感只来自描边、硬投影与内阴影。
-
-
- -
-

用色规则

-
1鲜艳预算：彩色只上形状、描边内与相框；一屏 ≤ 10%。
-
2相邻必撞色：相邻鲜艳取不同撞色对；同色不相邻。
-
3黑描边收束：一切鲜艳以 2px ink 描边为界。
-
4大底纸色：背景只有 paper；白只作纸叠亮边。
-
-
-

状态即形状，不是颜色

-
1完成＝打孔：票券沿撕线打双孔；未开始无孔。
-
2进度＝积木点：卡头点列，实心=已学。
-
3无锁：状态是推荐不是门槛，卡片永远可入（死原则）。
-
- -
设计系统 · 01 颜色 · stack idealjs
-
01 / 04
-
- - -
-
- <DesignSystem /> 02 -

符号、形状 · 装饰即语义

-
孟菲斯形状对内容下定义、散落于空白；线条形式承载关系含义；站点与票券是关系上的铆钉。每个标记都有意思。
-
- -
-
语义形状 ×7 取自 ai-era-tutorial 概念；散落只在空白，密度 ≤ 8/屏
-
-
▲ 靶子
目标，卡头打头
-
● 积木
清单点列，实=已学
-
○ 预期
可核对的结果
-
～ 代理区
交给 agent
-
▬ 价值区
就地写过程
-
⌇ 脱靶
可能脱靶，重点关注
-
＋ 指派
位置/预期/场景
-
- -
线条形式 ×4 形式即含义；拓扑规则（横平竖直＋R8）全形式通用
-
-
- - - - - - -
实线 ＝ 先后
-
推荐顺序 · 主线，唯一带站点
-
-
- - - - -
虚线 ＝ 相关
-
内容互参 · 无顺序，无站点
-
-
- - - - -
点线 ＝ 同族
-
同一积木家族（教一块带一族）
-
-
- - - -
波浪带 ＝ 代理交接
-
agent 边界 · 区域标记，不连线
-
-
- -
站点与胶囊 关系上的铆钉——只上先后线
-
-
- - - - - - - -
圆点 r6 半嵌卡边：左侧贴描边；右侧骑硬投影外缘（描边会被黑影吞没）。线从卡边/影缘出发。
-
-
- - - - - - - -
多线卡口＝胶囊：竖向 6×20 端头半圆；并行线间距 4px 不合并；线止于胶囊边界；端头距最外侧线 ≥ 2× 线宽。
-
-
- -
票券 状态与指派的载体——完成即打孔
-
-
-
🌐
-
快速开始
No. 001 · 已完成（打孔）
-
№01
-
-
-
🔗
-
全栈基础
No. 005 · 未开始（无孔）
-
№05
-
-
撕线＝4:2 点划（与虚线同节奏，语境不同：这是裁剪线不是关系线）。票号＝章程序号。
-
-
- -
-

形状 → 语义

- - - - - - - - - -
形状语义出处
▲ 三角目标靶子先行
● 实心圆积木（已学）积木清单
○ 圆环预期结果可核对的样子
～ 横波代理区交给 agent
▬ 实心条价值区就地写过程
⌇ 竖抖脱靶警示重点关注
＋ 十字指派学习位置/预期/场景
-
-
-

符号规则

-
1装饰即语义：散落形状必须有含义，无义不落。
-
2一横一竖对举：代理区横波（蓝）vs 脱靶竖抖（红）。
-
3形状不压内容：只在空白，永不压字与卡。
-
- -
设计系统 · 02 符号形状 · stack idealjs
-
02 / 04
-
- - -
-
- <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
CourseCardgoal ▲ · gifUrl ○16:9 · dots ● · entry ①② · flipMs=8000
RouteLinepath 实线段 · rel 虚线 · family 点线 · stations · capsule
指派票pos 位置 · expect 预期 · scenes[] 场景
脱靶注how 怎么脱靶 · looks 什么样
-
入口徽章 ①②③＝读者画像推荐起点（EntryGuide），非强制排序。
-
-
-

组件原则

-
1卡不可缺：入口与预期永远以卡呈现。
-
2线不可缺：章节之间必有关系可读。
-
3无锁：任何状态不阻断进入（死原则）。
-
- -
设计系统 · 03 组件 · stack idealjs
-
03 / 04
-
- - -
-
- <DesignSystem /> 04 -

样例 · 组合场景与概念映射

-
全系统同台：拟物卡 ＋ 三种关系线 ＋ 指派票与脱靶注 ＋ 散落语义形状。右侧是 ai-era-tutorial 概念到组件的完整映射。
-
- -
- - - - - - - - - - - - - - - - - - - - - - -
- ① -
🌐 - 预期结果 · GIF -
-
快速开始
-
- -
- ② -
⚛️
-
React
-
- -
-
🔗
-
全栈基础
-
- -
-
＋
-
指派学习 · npm
位置 / 预期 / 场景
-
＋
-
- -
-
- - 脱靶提醒 -
-
常见脱靶：装了但没跑。脱靶的样子——命令成功、页面空白；此时缺的是"真机验收"这块积木。
-
- -
- - 代理区：安装交给 agent，只验收产物 -
-
- - 价值区：过程就地写清 -
- -
形状散落于空白，每个都有含义：▲ 靶子 · ● 积木 · ○ 预期 · ～ 代理区 · ▬ 价值区 · ⌇ 脱靶 · ＋ 指派；线：实＝先后 · 虚＝相关 · 点＝同族
-
- -
-

概念 → 组件映射

- - - - - - - - - - -
skill 概念组件
靶子先行卡头三件套：▲＋○16:9＋●点列
步骤=目标+验收卡内验收行（○ 空环待勾）
代理区～ 波浪带，"交给 agent"
价值区▬ 实心条，过程就地展开
指派学习＋ 三行票：位置/预期/场景
脱靶提醒⌇ 竖抖注，跟在指派后
认知基础底座纹与"真机验收"章
死原则无锁：状态=推荐，卡永远可入
-
-
-

组合规则

-
1撞色在框内：章节色只进 16:9 相框，卡面纸色。
-
2站点贴边：左贴描边、右骑硬投影外缘；虚线/点线无站点。
-
3入口徽章 ①②③：推荐起点，非强制。
-
4形状不压内容：只在空白，密度 ≤ 8/屏。
-
- -
设计系统 · 04 样例 · stack idealjs
-
04 / 04
-
- - - diff --git a/design-refs/mockup/design-system/01-colors.html b/design-refs/mockup/design-system/01-colors.html new file mode 100644 index 0000000..7881374 --- /dev/null +++ b/design-refs/mockup/design-system/01-colors.html @@ -0,0 +1,279 @@ + + + + +设计系统 · 01 颜色 · stack idealjs + + + + + +
+
+ <Colors /> 1/3 +

颜色 · 基础

+
鲜艳与碰撞是情绪燃料，黑描边是收束，纸色是阅读的安静。三个组成部分：撞色对、中性阶、分工。
+
+ +
+
撞色对 鲜艳的全部来源——共三对六色，相邻必撞
+
+
+
+
对 1 · coral × teal
+
#FF6B6B × #4ECDC4
+
主用对：课程相框与主图形。
+
+
+
+
对 2 · mustard × violet
+
#FFD93D × #A78BFA
+
辅助对：指派与脱靶等警示类。
+
+
+
+
对 3 · pink × blue
+
#FF8FAB × #5B8DEF
+
点缀对：代理区与散落形状。
+
+
+
+ 相邻必撞：任何相邻的两个鲜艳色块必须来自不同撞色对；同对两色只允许出现在同一物件的两端（如撞色对样票本身）。鲜艳总面积一屏 ≤ 10%。 +
+ +
中性阶 纸的世界——字、边、投影、底
+
+
ink
#111111
描边 2px / 标题正文 / 硬投影 / 站点描边
+
paper
#FFF9F0
卡面 / 页面大底 / 票券面
+
stack-1
#FFFFFF
纸叠亮边（卡片第一层 3px）
+
stack-2
#EADFC4
纸叠暗层（卡片第二层 5px）
+
+ +
色彩分工 三层各就各位
+ + + + + + + +
层用色承载
背景层paper 纯色整页与画布底，永不鲜艳
物件层paper 面＋ink 边＋纸叠边课程卡、票券、脱靶注
强调层撞色对六色（黑描边内）16:9 相框、语义形状、站点
+
+ +
+

色彩立场

+
1为什么鲜艳碰撞：教程漫长，撞色给持续的情绪燃料与章节识别度。
+
2为什么黑描边：无收束的鲜艳会散架；2px ink 让一切彩色变"印刷品"。
+
3为什么纸底：阅读区永远安静；鲜艳只出现在被框住的局部。
+
+
+

鲜艳预算

+
1一屏鲜艳面积 ≤ 10%（相框＋形状＋站点合计）。
+
2同一视口内每对至多两处主用，避免轮转失衡。
+
3禁色彩渐变：立体感只来自描边、硬投影、内阴影。
+
+ +
设计系统 · 01 颜色 · stack idealjs
+
01 / 03
+
+ + +
+
+ <Colors /> 2/3 +

颜色 · 章节色与轮换

+
六章六色是章节的身份，只进 16:9 相框与图标瓦；站点四色沿先后线轮换。身份不承载状态。
+
+ +
+
章节色 六章六色——相框底与图标瓦同源
+
+
+
🌐
+
ch1 快速开始
#FF6B6B · 对1
入门起点
+
+
+
⚛️
+
ch2 React
#FF8FAB · 对3
界面主线
+
+
+
🧱
+
ch3 更多示例
#FFD93D · 对2
拼装练习
+
+
+
📦
+
ch4 更多
#4ECDC4 · 对1
扩展集
+
+
+
🔗
+
ch5 全栈基础
#5B8DEF · 对3
连接与部署
+
+
+
🧠
+
ch6 高级教程
#A78BFA · 对2
进阶专题
+
+
+ +
站点轮换色 只上先后线（实线），四色沿线路轮换
+
+ + + + + + + +
描边 2px ink，r=6；同色不相邻；虚线（相关）与点线（同族）不带站点。
+
+ +
收束示例 鲜艳 × 黑描边 × 纸底的合作
+
+
🌐
+
⚛️
+
相邻相框取不同撞色对（ch1 coral × ch2 pink 跨对相邻）；黑描边与内阴影把鲜艳压回纸面。立体感来自描边＋内阴影，不来自渐变。
+
+
+ +
+

章节色规则

+
1只进相框：16:9 预期区底色与图标瓦；卡面永远纸色。
+
2身份非状态：章节色不表达 done / 进行中；状态用形状。
+
3相邻即撞色：并排卡片的相框色跨撞色对取色。
+
4新增章节：优先复用六色；超六章再扩第七色（新撞色对）。
+
+
+

状态即形状，不是颜色

+
1完成＝打孔：票券沿撕线打双孔；未开始无孔。
+
2进度＝积木点：卡头点列，实心=已学。
+
3无锁：状态是推荐不是门槛，卡片永远可入（死原则）。
+
+ +
设计系统 · 01 颜色 · stack idealjs
+
02 / 03
+
+ + +
+
+ <Colors /> 3/3 +

颜色 · 规则与反例

+
每条规则配一对正反示例：左边是禁止的，右边是正确的。审查时逐条对照即可。
+
+ +
+
+ +
+ ✗ +
+ vs + ✓ +
+
相邻必撞色：同色相邻失去碰撞（✗）；相邻鲜艳必须来自不同撞色对（✓）。
+
+ +
+ ✗ +
+ vs + ✓ +
+
黑描边收束：无描边的鲜艳漂浮刺眼（✗）；一切鲜艳以 2px ink 描边为界（✓）。
+
+ +
+ ✗ +
大底鲜艳，字被淹没
+ vs + ✓ +
纸底安放正文
+
大底纸色：背景与正文区永远 paper（✓）；鲜艳只出现在相框等局部（✗ 为反例）。
+
+ +
+ ✗ +
渐变按钮（本稿不渲染，示意）
+ vs + ✓ +
纯色＋硬投影
+
禁色彩渐变：任何色彩过渡都不用（✗）；立体感来自描边、硬投影与内阴影（✓）。
+
+ +
+ ✗ +
✓ 完成（绿色状态）
+ vs + ✓ +
● ● ● ○＋打孔票
+
状态即形状：不用颜色表达完成（✗ 绿 pill 是旧方案）；完成=打孔＋积木实心点（✓）。
+
+ +
+
+ +
+

用色规则速查

+
1鲜艳预算 ≤ 10%/屏。
+
2相邻必撞色（跨对取色）。
+
3黑描边收束 2px ink。
+
4大底纸色，白只作纸叠亮边。
+
+
+

审查方法

+
1截图转灰度：层级仍可辨＝描边结构成立。
+
2数鲜艳面积：框选相框＋形状＋站点，估算占比。
+
3找同色相邻：任何两块同色鲜艳贴在一起即违规。
+
+ +
设计系统 · 01 颜色 · stack idealjs
+
03 / 03
+
+ + + diff --git a/design-refs/mockup/design-system/01-colors.pdf b/design-refs/mockup/design-system/01-colors.pdf new file mode 100644 index 0000000..ae4e34e Binary files /dev/null and b/design-refs/mockup/design-system/01-colors.pdf differ diff --git a/design-refs/mockup/design-system/02-symbols.html b/design-refs/mockup/design-system/02-symbols.html new file mode 100644 index 0000000..e6ca279 --- /dev/null +++ b/design-refs/mockup/design-system/02-symbols.html @@ -0,0 +1,337 @@ + + + + +设计系统 · 02 符号形状 · stack idealjs + + + + + +
+
+ <Symbols /> 1/3 +

符号、形状 · 语义形状

+
七个孟菲斯形状对内容下定义，全部取自 ai-era-tutorial 的概念。散落于空白——装饰即语义，无义不落。
+
+ +
+
+
+
+
▲ 靶子
+
目标——这一章要做成什么事
卡头打头，教程最前
+
skill · 靶子先行
+
+
+
+
● 积木
+
完成目标的零件；点列实心=已学
空心=未学
+
skill · 积木清单
+
+
+
+
○ 预期
+
做成之后可观察、可核对的样子
16:9 相框角标
+
skill · 预期结果
+
+
+
+
～ 代理区
+
无学习价值的过程，交给 agent
只给预期与验收
+
skill · 每步先分类
+
+
+
+
▬ 价值区
+
有学习价值，过程就地写清
露出认知基础
+
skill · 每步先分类
+
+
+
+
⌇ 脱靶
+
竖立颤抖——此处可能脱靶
要重点关注
+
skill · 脱靶提醒
+
+
+
+
＋ 指派
+
位置给坐标、预期当尺子、场景管巩固
三行票承载
+
skill · 指派学习
+
+
+
一横一竖对举
+
代理区＝横波（蓝），脱靶＝竖抖（红）。方向＋色相双重区分，永不混淆。
+
+
+ +
散落规则 形状如何落在空白里
+ + + + + + + + +
规则说明
密度 ≤ 8 / 屏散落形状总数控制，避免噪化。
只在空白永不压字、压卡、压线；与内容保持 ≥ 8px 间距。
语境相关页面里的散落形状应与附近内容语义呼应（脱靶注附近放 ⌇）。
尺寸阶梯主标记 28-44px；装饰散落 16-24px；线内标记跟随线规格。
+
+ +
+

形状 → 语义

+ + + + + + + + + +
形状语义出处
▲ 三角目标靶子先行
● 实心圆积木（已学）积木清单
○ 圆环预期结果可核对的样子
～ 横波代理区交给 agent
▬ 实心条价值区就地写过程
⌇ 竖抖脱靶警示重点关注
＋ 十字指派学习位置/预期/场景
+
+
+

符号规则

+
1装饰即语义：无含义的形状不落版面。
+
2形状即内容定义：读者看到形状即知内容类型。
+
3黑描边 2px：形状一律描边（细线装饰除外）。
+
+ +
设计系统 · 02 符号形状 · stack idealjs
+
01 / 03
+
+ + +
+
+ <Symbols /> 2/3 +

符号、形状 · 线条形式

+
形式即含义：实线=先后、虚线=相关、点线=同族、波浪带=代理交接。拓扑规则全形式通用。
+
+ +
+
+
+ + + + + + +
实线 ＝ 先后
+
推荐顺序，主线。2.5px ink。唯一带站点的线形；分流/并线用直角步进。
+
+
+ + + + +
虚线 ＝ 相关
+
内容互参，无顺序。2px，4:2 点划。无站点，两端直抵卡边。
+
+
+ + + + +
点线 ＝ 同族
+
同一积木家族的章节互连（教一块带一族）。圆点端帽 6px 间距。无站点。
+
+
+ + + +
波浪带 ＝ 代理交接
+
agent 边界的区域标记（蓝），不连线——是地带不是路径。与 ～ 形状同源。
+
+
+ +
拓扑规则 全形式通用——线的几何纪律
+ + + + + + + + + +
规则规格
横平竖直走向只有水平与垂直；无斜线、无大弧。
转角 R8转折用 R8 小圆角直角步进。
并行不合并多条并行线逐条渲染，间距 4px，不合成一条。
线止于卡边起止都落在卡边或站点/胶囊边界，不钻入、不悬空。
不共享线段分流的两线只在分岔点相触，随即分开（避免 T 形合流感）。
+
+ +
+

线形速查

+ + + + + + +
形式含义站点
实线 2.5px先后有（四色轮换）
虚线 4:2相关无
点线 6 间距同族无
波浪带代理交接—（区域）
+
同两张卡可以同时存在实线（先后）与虚线（相关）——顺序与互参不互斥。
+
+
+

用线原则

+
1线不可缺：章节之间必有关系可读。
+
2先实后虚：主链走实线；相关/同族是补充。
+
3一屏一线形不超 3 类：实＋虚＋点已满，波浪带另算区域。
+
+ +
设计系统 · 02 符号形状 · stack idealjs
+
02 / 03
+
+ + +
+
+ <Symbols /> 3/3 +

符号、形状 · 站点、胶囊与票券

+
关系上的铆钉与凭证：站点半嵌卡边（左贴描边、右骑黑影外缘），多线卡口用胶囊，完成用打孔票。
+
+ +
+
站点 只上先后线——r6 描边圆点，四色轮换
+
+ + + + + + + + +
+ 半嵌卡边：圆心落在卡边上。
+ 左贴描边（图左卡右侧无投影）；右骑硬投影外缘（图右）——描边外有 7px 黑影带，站点放在描边会被吞没。
+ 线从卡边/影缘出发；同色不相邻。 +
+
+ +
胶囊 多线入同一卡口时的站点形态
+
+ + + + + + + +
+ 四条规则：① 竖向 6×20，端头半圆（rx=3，胶囊体非椭圆）；② 沿线束排列方向拉伸；③ 端头距最外侧线 ≥ 2× 线宽；④ 线止于胶囊边界——圆弧自最外侧线起弯，线沿半径抵达弧起点。 +
+
+ +
票券 状态与指派的载体——完成即打孔
+
+
+
🌐
+
快速开始
No. 001 · 已完成（打孔）
+
№01
+
+
+
🔗
+
全栈基础
No. 005 · 未开始（无孔）
+
№05
+
+
+ 完成＝沿撕线打双孔（上下半圆缺口）；未开始撕线为实线、无孔。
+ 撕线＝4:2 点划，与虚线同节奏但语境不同（裁剪线非关系线）。票号＝章程序号。指派票复用同一票体（见 03 组件）。 +
+
+
+ +
+

参数速查

+ + + + + + +
元素规格
站点r6 · 描边 2px · 四色轮换 · 半嵌卡边
胶囊6×20 · rx3 · 线止于边界 · 距线 ≥2× 线宽
并行线间距 4px · 逐条渲染
票券216×~70 · 撕线 4:2 · 打孔 ⌀13
+
+
+

为什么半嵌

+
1圆心骑卡边＝「到达」的物理感：像铆钉钉入卡片。
+
2黑影外缘规则是实测教训：描边上的右站点会被投影带吞没。
+
3虚线/点线无站点：相关与同族是「参考」不是「到达」。
+
+ +
设计系统 · 02 符号形状 · stack idealjs
+
03 / 03
+
+ + + diff --git a/design-refs/mockup/design-system/02-symbols.pdf b/design-refs/mockup/design-system/02-symbols.pdf new file mode 100644 index 0000000..d2472a4 Binary files /dev/null and b/design-refs/mockup/design-system/02-symbols.pdf differ diff --git a/design-refs/mockup/design-system/03-components.html b/design-refs/mockup/design-system/03-components.html new file mode 100644 index 0000000..5b16593 --- /dev/null +++ b/design-refs/mockup/design-system/03-components.html @@ -0,0 +1,378 @@ + + + + +设计系统 · 03 组件 · stack idealjs + + + + + +
+
+ <Components /> 1/4 +

组件 · CourseCard 结构

+
教程的入口载体：孟菲斯骨架（黑边＋硬投影）× 拟物纸感（纸叠边＋相框凹槽）。卡头三件套即靶子。
+
+ +
+
+
+ ① +
+ 🌐 + + 预期结果 · GIF +
+
+ + 快速开始 + +
+
+
+
① 黑描边：2px ink——孟菲斯的印刷感边界，一切鲜艳以此收束。
+
② 硬投影：7px 8px 0 ink——平面上的「厚」。
+
③ 纸叠边：白 3px＋暗层 5px 两层堆叠——纸的厚度（拟物）。
+
④ 相框凹槽：3px 黑边＋内阴影——16:9 预期区像装裱的画框，章节色为底。
+
⑤ 卡头三件套＝靶子：▲ 目标（三角＋标题）／ ○ 预期结果（相框 GIF，圆环角标）／ ● 积木点列（实心=已学）。
+
⑥ 入口徽章：①②③ 黑底黄字圆徽，读者画像的推荐起点（非强制）。
+
⑦ 压凹标题：暗字＋下白影——铅字压进纸面。
+
+
+
+ +
+

尺寸规格

+ + + + + + + + + +
项规格
卡宽书架 250 · 解剖 360 · 紧凑 140
相框16:9（aspect-ratio）· 3px 黑边
描边2px ink
投影7px 8px 0 ink（hover 10px 11px）
纸叠白 3px / 暗层 5px
圆角卡 14 · 相框 8
积木点⌀7 · 描边 1.5 · 间距 4
+
+
+

卡片原则

+
1卡不可缺：入口与预期永远以卡呈现。
+
2撞色在框内：章节色只进相框，卡面纸色。
+
3卡头即靶子：▲○● 三件套缺一不可（skill · 靶子先行）。
+
+ +
设计系统 · 03 组件 · stack idealjs
+
01 / 04
+
+ + +
+
+ <Components /> 2/4 +

组件 · CourseCard 交互

+
hover 把卡「拿起来」并播放 GIF；desc 与 GIF 每 8000ms 自动翻转；聚焦锁定；触屏与减弱动效不翻转。
+
+ +
+
三态 静置 → 拿起（hover）→ 翻转周期
+
+
+
+
🌐
+
快速开始
+
+
① 静置
+
7px 8px 硬投影；相框显 desc 摘要或章节色。
+
+
+
+
+ 🌐 + ▶ GIF 播放中 +
+
快速开始
+
+
② 拿起（hover / 聚焦）
+
translateY -3px＋投影加深至 10px 11px；GIF 开始循环播放。
+
+
+
+
+
这一章做成什么：
本地跑起一个可交互的页面，理解请求-渲染循环。
（desc 态 · 每 8s 与 GIF 轮换）
+
+
快速开始
+
+
③ 翻转（desc ⇄ GIF）
+
相框内容每 8000ms 在「文字摘要 / GIF 预期」间轮换。
+
+
+ +
翻转时间轴 flipMs = 8000
+
+
desc · 8s
+
GIF · 8s
+
desc · 8s
+
GIF · 8s
+
…
+
+
周期起点：进入视口（IntersectionObserver）；hover / Tab 聚焦即暂停在该态，离开后恢复。
+
+ +
+

交互参数

+ + + + + + + +
参数值
flipMs8000（desc ⇄ GIF）
lockOnhover · Tab 聚焦
noFlip触屏 · prefers-reduced-motion
lifttranslateY -3px ＋ 投影 10px 11px
startOn进入视口
+
+
+

可访问性

+
1卡片是链接（<a>），键盘可 Tab 到达，聚焦态＝拿起态。
+
2GIF 无声；alt ＝ 预期结果一句话。
+
3动效减弱时相框固定显示 desc 态。
+
+ +
设计系统 · 03 组件 · stack idealjs
+
02 / 04
+
+ + +
+
+ <Components /> 3/4 +

组件 · RouteLine

+
关系线：线形即含义（见 02 符号），本页是组件级实现——路径、站点、胶囊、分流的完整拓扑。
+
+ +
+
综合拓扑 分流 → 并行 → 胶囊汇入
+ + + + + + + + + + + + + + +
灰竖线＝卡边示意；上行支线与下行支线在左侧分流点只相触不共线，右侧四线两两并行（4px）汇入胶囊卡口。
+ +
实现要点
+ + + + + + + + + +
要点说明
路径数据驱动由 courses.ts 的关系数据自动生成（先后/相关/同族三类边）。
自动布线卡位网格化；直角步进由起终点 lanes 差决定；R8 圆角固定。
站点渲染层SVG 双层：线在下、站点在上（卡片 DOM 之后），保证半嵌可见。
胶囊触发同一卡口入线 ≥ 2 自动聚合为胶囊，线止于胶囊边界。
响应式窄屏（<768）退化为纵向书架：线收起，改章节 chips 序列。
+
+ +
+

RouteLine 参数

+ + + + + + + +
prop说明
path先后边（实线）段序列
rel相关边（虚线 4:2）
family同族边（点线）
stations站点（四色轮换，半嵌）
capsule多线卡口（自动聚合）
+
+
+

用线原则

+
1线不可缺：章节之间必有关系可读。
+
2先实后虚：主链实线；相关/同族补充。
+
3线只管顺序与关系：状态交给卡片（积木点/打孔）。
+
+ +
设计系统 · 03 组件 · stack idealjs
+
03 / 04
+
+ + +
+
+ <Components /> 4/4 +

组件 · 指派票、脱靶注与入口梳理

+
三个配套组件：＋指派票（位置/预期/场景）、⌇脱靶注（跟在指派后）、入口徽章与读者画像路径。
+
+ +
+
指派票 ＆ 脱靶注 总在指派之后成对出现
+
+
+
＋
+
+ 指派学习 · npm +
位置：包管理家族——npm 的坐标与邻居
预期：能说清 lockfile 锁住了什么
场景：加一个依赖 / 换源重装
+
+
＋
+
+
+
+ + 脱靶提醒 · 跟在指派后 +
+
写两样：可能怎么脱靶（装了但没跑）＋ 脱靶什么样子（命令成功、页面空白）——读者撞上时认得出缺哪块。
+
+
+ +
入口梳理 三类读者三条推荐路径——是推荐不是强制（无锁）
+
+
+
🌱零基础入门
+
+ ① 快速开始→React→更多示例→全栈基础 +
+
完整链按序走；每步先核对预期再前进。
+
+
+
⚡写过页面的人
+
+ ② React→更多示例→高级教程 +
+
跳过装环境；从组件拼接进入。
+
+
+
🧠重度 AI 依赖
+
+ ③ 高级教程→全栈基础 +
+
从「指挥 agent 做整件事」切入，回头补认知基础。
+
+
+
入口徽章 ①②③ 与画像卡对应；路径 chips 可点击直达章节；无锁——任何读者可进任何章（死原则）。
+
+ +
+

组件参数

+ + + + + +
组件关键 prop
指派票pos · expect · scenes[]
脱靶注how 怎么脱靶 · looks 什么样
画像卡icon · entry · path[] · note
+
指派票三样缺一即退化为「AI 说啥信啥」（skill 原文）。
+
+
+

原则

+
1无锁：状态是推荐不是门槛。
+
2指派后必有脱靶注：成对出现。
+
3位置给坐标，预期当尺子，场景管巩固。
+
+ +
设计系统 · 03 组件 · stack idealjs
+
04 / 04
+
+ + + diff --git a/design-refs/mockup/design-system.pdf b/design-refs/mockup/design-system/03-components.pdf similarity index 56% rename from design-refs/mockup/design-system.pdf rename to design-refs/mockup/design-system/03-components.pdf index b073715..378b089 100644 Binary files a/design-refs/mockup/design-system.pdf and b/design-refs/mockup/design-system/03-components.pdf differ diff --git a/design-refs/mockup/design-system/04-examples.html b/design-refs/mockup/design-system/04-examples.html new file mode 100644 index 0000000..1bf8f90 --- /dev/null +++ b/design-refs/mockup/design-system/04-examples.html @@ -0,0 +1,246 @@ + + + + +设计系统 · 04 样例 · stack idealjs + + + + + +
+
+ <Examples /> 1/2 +

样例 · 组合场景

+
全系统同台：拟物卡＋三种关系线＋指派票与脱靶注＋散落语义形状。这一页可直接当实现验收的对照图。
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + +
+ ① +
🌐 + 预期结果 · GIF +
+
快速开始
+
+ +
+ ② +
⚛️
+
React
+
+ +
+
🔗
+
全栈基础
+
+ +
+
＋
+
指派学习 · npm
位置 / 预期 / 场景
+
＋
+
+ +
+
+ + 脱靶提醒 +
+
常见脱靶：装了但没跑。脱靶的样子——命令成功、页面空白；此时缺的是"真机验收"这块积木。
+
+ +
+ + 代理区：安装交给 agent，只验收产物 +
+
+ + 价值区：过程就地写清 +
+ +
形状散落于空白，每个都有含义：▲ 靶子 · ● 积木 · ○ 预期 · ～ 代理区 · ▬ 价值区 · ⌇ 脱靶 · ＋ 指派；线：实＝先后 · 虚＝相关 · 点＝同族
+
+ +
+

场景读法

+
1主线：快速开始 →（直角步进）→ React →（直线）→ 全栈基础；四枚站点半嵌卡边。
+
2虚线：React 底边 → 指派票顶边（相关：票属于该章扩展）。
+
3点线：React → 全栈基础（同族：工程基础一族）。
+
4指派票打孔＝已完成过一次；脱靶注跟在其叙事之后。
+
+
+

对照检查

+
1三卡相框色：coral / pink / blue——相邻跨对 ✓。
+
2散落形状 8 枚，全部在空白 ✓。
+
3右站点骑黑影外缘（快速开始右、React 右），左站点贴描边 ✓。
+
+ +
设计系统 · 04 样例 · stack idealjs
+
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，无声循环）。
+
+ +
设计系统 · 04 样例 · stack idealjs
+
02 / 02
+
+ + + diff --git a/design-refs/mockup/design-system/04-examples.pdf b/design-refs/mockup/design-system/04-examples.pdf new file mode 100644 index 0000000..86b2224 Binary files /dev/null and b/design-refs/mockup/design-system/04-examples.pdf differ