# Academic Courseware — 学术克制风课件 Skill（商业培训级）

> 用途：快速生成 Anthropic / 研究机构气质的高保真单页课件，支持多行业、多内容量、带商业转化模块。
> 适合：课程讲义、技术分享、方法论讲解、研究汇报、商业培训落地页、付费课宣传页、知识 IP 个人站。
> 产出：单文件自包含 HTML（内联 SVG + CSS + JS），可直接浏览器打开或部署为静态站。
> 参考实现：同目录 reference.html（已上线 https://native-ai-lab.pages.dev）

---

## 0. 什么时候用这个 Skill

当用户需要：
- 制作课程讲义 / 分享课件 / 方法论单页
- 输出带演讲叙事结构的长内容网页
- 研究机构 / 学术论文索引式呈现
- 温暖克制的 parchment 风格网页
- 深浅主题切换的单页滚动式课件
- 商业培训课程的招生落地页
- 知识 IP 的个人品牌站 / 作品集页
- 付费课、训练营的宣传与报名页

关键词触发：课件、讲义、分享、学术风、研究风、Anthropic 风格、parchment 风格、课程页面、方法论页面、培训落地页、招生页、训练营页面、课程宣传

---

## 1. 文件结构与全局骨架

### 1.1 HTML 骨架

```html
<!doctype html>
<html lang="zh-CN" data-theme="light">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{brand} — {author}</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600&family=Noto+Sans+SC:wght@300;400;500&display=swap" rel="stylesheet" />
<style>/* 全部 CSS 内联于此 */</style>
</head>
<body>
<div class="progress" id="progress" aria-hidden="true"></div>
<header class="nav" data-component="Top Navigation" data-od-id="nav">...</header>
<main id="top">
  <!-- 按需组合以下 section，详见 §8 选择矩阵 -->
</main>
<footer data-component="Footer" data-od-id="footer">...</footer>
<div class="toast" id="toast" role="status" aria-live="polite">...</div>
<script>/* 全部 JS 内联于此 */</script>
</body>
</html>
```

---

## 2. 完整设计系统 Token（必须逐字复制）

```css
/* ========== Seed tokens (theme-driving) ========== */
:root{
  --seed-bg:#f5f4ed;
  --seed-surface:#faf9f5;
  --seed-fg:#141413;
  --seed-primary:#c96442;
  --seed-accent:#d97757;
  --seed-border:#e8e6dc;
  --seed-radius:14px;

  /* Derived from seed */
  --bg:var(--seed-bg);
  --surface:var(--seed-surface);
  --surface-2:color-mix(in srgb, var(--seed-surface) 70%, var(--seed-bg));
  --ink:var(--seed-fg);
  --muted:color-mix(in srgb, var(--seed-fg) 62%, var(--seed-bg));
  --tertiary:color-mix(in srgb, var(--seed-fg) 44%, var(--seed-bg));
  --border:var(--seed-border);
  --border-soft:color-mix(in srgb, var(--seed-border) 55%, var(--seed-bg));
  --accent:var(--seed-primary);
  --accent-soft:var(--seed-accent);
  --accent-wash:color-mix(in srgb, var(--seed-primary) 12%, var(--seed-surface));
  --ring:color-mix(in srgb, var(--seed-fg) 12%, transparent);

  /* Fixed derived (theme-constant) */
  --pure:#ffffff;
  --on-accent:#faf9f5;
  --deep:#0e0e0d;
  --text-on-dark:color-mix(in srgb, var(--seed-bg) 90%, #ffffff);
  --text-on-dark-muted:color-mix(in srgb, var(--seed-bg) 62%, #ffffff);
  --text-on-dark-faint:color-mix(in srgb, var(--seed-bg) 56%, #ffffff);
  --hairline-on-dark:color-mix(in srgb, #ffffff 13%, transparent);

  /* Fonts */
  --font-display:'Noto Serif SC','Songti SC','STSong',Georgia,'Times New Roman',serif;
  --font-body:'Noto Sans SC',-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',Inter,system-ui,sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,monospace;

  /* Layout */
  --maxw:1180px;
  --pad:clamp(20px,5vw,64px);
}

/* ========== Dark theme overrides ========== */
[data-theme="dark"]{
  --seed-bg:#141413;
  --seed-surface:#1d1d1b;
  --seed-fg:#f3f1ea;
  --seed-primary:#dd7e5d;
  --seed-accent:#e8a184;
  --seed-border:#34332f;

  --surface-2:color-mix(in srgb, var(--seed-surface) 78%, var(--seed-bg));
  --muted:color-mix(in srgb, var(--seed-fg) 66%, var(--seed-bg));
  --tertiary:color-mix(in srgb, var(--seed-fg) 46%, var(--seed-bg));
  --border-soft:color-mix(in srgb, var(--seed-border) 70%, var(--seed-bg));
  --accent-wash:color-mix(in srgb, var(--seed-primary) 18%, var(--seed-surface));
  --ring:color-mix(in srgb, var(--seed-fg) 16%, transparent);
}
```

---

## 3. 完整 CSS 规则——核心组件

### 3.1 全局 Reset 与基础

```css
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;letter-spacing:.01em;
  transition:background .4s ease,color .4s ease;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.18;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
::selection{background:color-mix(in srgb,var(--accent) 28%,transparent)}
```

### 3.2 布局容器

```css
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
section{padding:clamp(64px,9vw,116px) 0;position:relative}
.section-head{max-width:62ch;margin-bottom:clamp(40px,5vw,64px)}
.section-head h2{font-size:clamp(30px,4vw,50px);letter-spacing:-.01em;margin-bottom:18px}
```

### 3.3 英文眉标 Kicker

```css
.kicker{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;
}
.kicker::before{content:"";width:26px;height:1px;background:var(--accent);display:inline-block}
```

### 3.4 辅助类

```css
.eyebrow-num{font-family:var(--font-mono);color:var(--tertiary)}
.lede{font-size:clamp(17px,1.4vw,20px);color:var(--muted);line-height:1.7;max-width:60ch}
```

### 3.5 进度条

```css
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:60;transition:width .08s linear}
```

### 3.6 导航栏

```css
header.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--border-soft);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:68px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand .mark{flex:none}
.brand .txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand .txt b{font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:.01em}
.brand .txt span{font-size:11.5px;color:var(--tertiary);letter-spacing:.04em;font-family:var(--font-mono)}
.navlinks{display:flex;gap:30px;align-items:center}
.navlinks a{font-size:14.5px;color:var(--muted);position:relative;padding:4px 0;transition:color .2s}
.navlinks a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--accent);transition:right .25s ease}
.navlinks a:hover,.navlinks a.active{color:var(--ink)}
.navlinks a.active::after,.navlinks a:hover::after{right:0}
.nav-actions{display:flex;align-items:center;gap:12px}
```

### 3.7 按钮系统

```css
.btn{
  font-family:var(--font-body);font-size:14px;font-weight:500;cursor:pointer;border:none;
  border-radius:11px;padding:10px 18px;display:inline-flex;align-items:center;gap:8px;
  transition:transform .15s ease,box-shadow .2s ease,background .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:0 0 0 1px var(--accent)}
.btn-primary:hover{box-shadow:0 0 0 1px var(--accent),0 6px 20px color-mix(in srgb,var(--accent) 30%,transparent)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--border)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-lg{font-size:16px;padding:14px 28px;border-radius:13px}
```

### 3.8 主题切换按钮

```css
.theme-toggle{
  width:40px;height:40px;border-radius:11px;border:none;cursor:pointer;flex:none;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--border);
  display:inline-flex;align-items:center;justify-content:center;color:var(--ink);
  transition:background .2s,transform .2s;
}
.theme-toggle:hover{background:var(--surface-2)}
.theme-toggle .moon{display:none}
[data-theme="dark"] .theme-toggle .sun{display:none}
[data-theme="dark"] .theme-toggle .moon{display:block}
```

### 3.9 Hero 区

```css
.hero{padding-top:clamp(118px,16vh,168px);padding-bottom:clamp(56px,8vw,96px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{font-size:clamp(38px,6.2vw,72px);line-height:1.08;letter-spacing:-.015em;margin-bottom:26px}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lede{margin-bottom:34px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.hero-meta{display:flex;gap:26px;flex-wrap:wrap;font-size:13px;color:var(--tertiary);font-family:var(--font-mono)}
.hero-meta b{color:var(--ink);font-family:var(--font-display);font-weight:600;font-size:22px;display:block;margin-bottom:2px}
.hero-art{width:100%;height:auto;display:block}
```

### 3.10 高亮观点卡 + 逻辑阶梯

```css
.thesis-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,4vw,56px);align-items:start}
.quote-card{
  background:var(--accent-wash);border-radius:var(--seed-radius);padding:clamp(28px,3.5vw,40px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent);
}
.quote-card .q{font-family:var(--font-display);font-size:clamp(23px,2.6vw,32px);line-height:1.32;letter-spacing:-.01em}
.quote-card .q mark{background:transparent;color:var(--accent);font-weight:600}
.quote-card .q::before{content:"\201C";font-family:Georgia,serif;color:var(--accent);font-size:2.4em;line-height:0;vertical-align:-.35em;margin-right:.06em}
.quote-card p.sub{margin-top:22px;color:var(--muted);font-size:15.5px;line-height:1.7}
.ladder{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--border)}
.ladder .row{display:grid;grid-template-columns:84px 1fr;gap:18px;padding:20px 4px;border-bottom:1px solid var(--border);align-items:start}
.ladder .tag{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.12em;color:var(--accent);padding-top:3px}
.ladder h4{font-size:17px;margin-bottom:6px}
.ladder p{font-size:14.5px;color:var(--muted);line-height:1.65}
```

### 3.11 研究论文列表 / 成果索引

```css
.paper{
  display:grid;grid-template-columns:120px 1fr auto;gap:28px;align-items:start;
  padding:30px 8px;border-top:1px solid var(--border);transition:background .25s ease;
}
.paper:last-child{border-bottom:1px solid var(--border)}
.paper:hover{background:var(--surface)}
.paper .meta{font-family:var(--font-mono);font-size:12.5px;color:var(--tertiary);line-height:1.7}
.paper .meta .id{color:var(--accent);display:block;font-size:13.5px;letter-spacing:.06em}
.paper h3{font-size:clamp(20px,2vw,25px);margin-bottom:10px;letter-spacing:-.005em}
.paper p{font-size:15px;color:var(--muted);line-height:1.7;max-width:62ch}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tag-chip{font-size:12px;font-family:var(--font-mono);color:var(--muted);padding:4px 11px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--border)}
.paper .arrow{color:var(--tertiary);transition:transform .25s ease,color .25s ease;padding-top:4px}
.paper:hover .arrow{transform:translate(4px,-4px);color:var(--accent)}
```

### 3.12 能力展示网格

```css
.cap-intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center;margin-bottom:clamp(40px,5vw,64px)}
.cap-art{width:100%;height:auto}
.grouplabel{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--tertiary);margin:0 0 18px;display:flex;align-items:center;gap:10px}
.grouplabel::after{content:"";flex:1;height:1px;background:var(--border)}
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.flow .step{background:var(--surface);border-radius:var(--seed-radius);padding:22px 18px;box-shadow:inset 0 0 0 1px var(--border);position:relative}
.flow .step .n{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:var(--accent);margin-bottom:12px}
.flow .step h4{font-size:16px;margin-bottom:8px}
.flow .step p{font-size:13px;color:var(--muted);line-height:1.6}
.eng{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
.eng .cell{padding:20px;border-radius:var(--seed-radius);box-shadow:inset 0 0 0 1px var(--border);background:var(--surface-2)}
.eng .cell .k{font-family:var(--font-mono);font-size:14px;color:var(--accent);letter-spacing:.04em;margin-bottom:8px;font-weight:500}
.eng .cell p{font-size:13px;color:var(--muted);line-height:1.6}
```

### 3.13 深色哲学区块

```css
.philosophy{background:var(--seed-fg);color:var(--text-on-dark)}
[data-theme="dark"] .philosophy{background:var(--deep)}
.philosophy .kicker{color:var(--accent-soft)}
.philosophy .kicker::before{background:var(--accent-soft)}
.philosophy h2{color:var(--text-on-dark)}
.philosophy .lede{color:var(--text-on-dark-muted)}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:clamp(36px,4vw,52px) 0}
.compare .panel{padding:clamp(24px,3vw,34px);border-radius:var(--seed-radius)}
.compare .neg{box-shadow:inset 0 0 0 1px var(--hairline-on-dark)}
.compare .pos{background:color-mix(in srgb,var(--accent) 22%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent)}
.compare h4{font-size:19px;margin-bottom:14px;color:var(--on-accent)}
.compare .pos h4{color:var(--pure)}
.compare p{font-size:14.5px;line-height:1.7;color:var(--text-on-dark-muted);margin-bottom:10px}
.compare .pos p{color:color-mix(in srgb,var(--pure) 86%,var(--accent))}
.human{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.human .card{padding:clamp(24px,3vw,32px);border-radius:var(--seed-radius);box-shadow:inset 0 0 0 1px var(--hairline-on-dark)}
.human .card .ic{color:var(--accent-soft);margin-bottom:18px}
.human .card h4{font-size:19px;color:var(--on-accent);margin-bottom:10px}
.human .card p{font-size:14px;line-height:1.7;color:var(--text-on-dark-muted)}
```

### 3.14 成长路线阶梯

```css
.approach-art{width:100%;height:auto;margin-top:8px}
.levels{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:clamp(34px,4vw,48px)}
.levels .lvl{padding:24px 20px;border-radius:var(--seed-radius);box-shadow:inset 0 0 0 1px var(--border);background:var(--surface);position:relative;overflow:hidden}
.levels .lvl::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:color-mix(in srgb,var(--accent) calc(var(--w,20) * 1%),var(--border))}
.levels .lvl .lab{font-family:var(--font-mono);font-size:13px;color:var(--accent);letter-spacing:.1em;margin-bottom:12px;font-weight:500}
.levels .lvl h4{font-size:16px;margin-bottom:8px}
.levels .lvl p{font-size:12.5px;color:var(--muted);line-height:1.6}
```

### 3.15 实践区（提示词复制卡）

```css
.lab-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(28px,4vw,48px);align-items:start}
.prompts{display:flex;flex-direction:column;gap:18px}
.prompt{background:var(--surface);border-radius:var(--seed-radius);box-shadow:inset 0 0 0 1px var(--border);overflow:hidden}
.prompt .top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;border-bottom:1px solid var(--border)}
.prompt .top .t{display:flex;flex-direction:column;gap:3px}
.prompt .top .t .n{font-family:var(--font-mono);font-size:11.5px;color:var(--accent);letter-spacing:.1em}
.prompt .top .t h4{font-size:16px}
.copy-btn{font-family:var(--font-body);font-size:13px;font-weight:500;cursor:pointer;border:none;background:var(--surface-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--border);border-radius:9px;padding:8px 14px;display:inline-flex;align-items:center;gap:7px;flex:none;transition:background .2s,color .2s}
.copy-btn:hover{background:var(--accent);color:var(--on-accent);box-shadow:inset 0 0 0 1px var(--accent)}
.prompt pre{margin:0;padding:20px 22px;font-family:var(--font-mono);font-size:13px;line-height:1.75;color:var(--muted);white-space:pre-wrap;word-break:break-word}
.order{background:var(--seed-fg);color:var(--text-on-dark);border-radius:var(--seed-radius);padding:clamp(26px,3vw,34px);position:sticky;top:96px}
[data-theme="dark"] .order{background:var(--deep)}
.order h4{color:var(--on-accent);font-size:20px;margin-bottom:8px}
.order p.intro{font-size:13.5px;color:var(--text-on-dark-faint);margin-bottom:22px;line-height:1.7}
.order ol{list-style:none;counter-reset:step;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.order li{counter-increment:step;display:grid;grid-template-columns:30px 1fr;gap:14px;font-size:14px;line-height:1.6;color:var(--text-on-dark)}
.order li::before{content:counter(step,decimal-leading-zero);font-family:var(--font-mono);font-size:12px;color:var(--accent-soft);padding-top:2px}
```

### 3.16 页脚

```css
footer{border-top:1px solid var(--border);padding:clamp(48px,6vw,72px) 0 40px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:end}
footer h3{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.01em;max-width:20ch;line-height:1.25}
.foot-note{font-size:13px;color:var(--tertiary);line-height:1.7;font-family:var(--font-mono)}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:48px;padding-top:24px;border-top:1px solid var(--border);font-size:12.5px;color:var(--tertiary);font-family:var(--font-mono)}
```

### 3.17 Toast

```css
.toast{
  position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(20px);
  background:var(--seed-fg);color:var(--on-accent);font-size:14px;padding:13px 22px;border-radius:12px;
  box-shadow:0 12px 36px rgba(0,0,0,.22);opacity:0;pointer-events:none;z-index:80;
  display:flex;align-items:center;gap:10px;transition:opacity .26s ease,transform .26s ease;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast svg{color:var(--accent-soft)}
```

### 3.18 SVG 主题绑定类

```css
.ill{color:var(--ink)}
.ill .node{fill:var(--surface);stroke:var(--ink);stroke-width:1.4}
.ill .node-accent{fill:var(--accent-wash);stroke:var(--accent);stroke-width:1.6}
.ill .link{stroke:var(--tertiary);stroke-width:1.4;fill:none}
.ill .link-accent{stroke:var(--accent);stroke-width:1.6;fill:none}
.ill .lbl{fill:var(--ink);font-family:var(--font-body);font-size:13px}
.ill .lbl-mono{fill:var(--muted);font-family:var(--font-mono);font-size:11px;letter-spacing:.08em}
.ill .dot{fill:var(--accent)}
```

### 3.19 响应式（完整规则）

```css
@media (max-width:1120px){
  .hero-grid,.thesis-grid,.cap-intro,.lab-grid,.foot-grid{grid-template-columns:1fr}
  .hero-art,.cap-art{max-width:560px;margin-top:8px}
  .flow{grid-template-columns:repeat(2,1fr)}
  .eng{grid-template-columns:repeat(2,1fr)}
  .levels{grid-template-columns:repeat(2,1fr)}
  .human{grid-template-columns:1fr}
  .compare{grid-template-columns:1fr}
  .order{position:static}
  .navlinks{display:none}
  .paper{grid-template-columns:96px 1fr}
  .paper .arrow{display:none}
  .pricing-grid{grid-template-columns:1fr}
  .instructor-grid{grid-template-columns:1fr}
  .testimonials{grid-template-columns:1fr}
  .curriculum .timeline{grid-template-columns:1fr}
}
@media (max-width:760px){
  .nav-inner{height:60px}
  .brand .txt span{display:none}
  .hero-cta .btn{flex:1 1 auto;justify-content:center}
  .flow{grid-template-columns:1fr}
  .eng{grid-template-columns:1fr}
  .levels{grid-template-columns:1fr}
  .paper{grid-template-columns:1fr;gap:10px}
  .ladder .row{grid-template-columns:64px 1fr;gap:12px}
  .foot-bottom{flex-direction:column}
  .hero-meta{gap:18px}
  .stats-bar{grid-template-columns:repeat(2,1fr)}
  .pricing-grid .plan{padding:24px 20px}
}
```

---

## 4. 完整 CSS 规则——商业转化组件（新增）

### 4.1 讲师 / 作者介绍区

```css
.instructor{padding:clamp(64px,9vw,116px) 0}
.instructor-grid{display:grid;grid-template-columns:.4fr 1fr;gap:clamp(32px,5vw,56px);align-items:center}
.instructor .avatar{width:100%;max-width:280px;aspect-ratio:1;border-radius:var(--seed-radius);object-fit:cover;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border)}
.instructor .avatar-placeholder{
  width:100%;max-width:280px;aspect-ratio:1;border-radius:var(--seed-radius);background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--border);display:flex;align-items:center;justify-content:center;
}
.instructor .bio h3{font-size:clamp(24px,3vw,36px);margin-bottom:12px}
.instructor .bio .role{font-family:var(--font-mono);font-size:13px;color:var(--accent);letter-spacing:.08em;margin-bottom:20px;display:block}
.instructor .bio p{font-size:16px;color:var(--muted);line-height:1.75;margin-bottom:16px;max-width:60ch}
.instructor .credentials{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.instructor .credentials .badge{font-family:var(--font-mono);font-size:12px;padding:6px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--border);color:var(--tertiary)}
```

### 4.2 课程大纲 / 时间线

```css
.curriculum{padding:clamp(64px,9vw,116px) 0}
.timeline{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-top:clamp(32px,4vw,48px)}
.timeline .module{background:var(--surface);border-radius:var(--seed-radius);padding:24px 22px;box-shadow:inset 0 0 0 1px var(--border);position:relative;overflow:hidden}
.timeline .module::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:color-mix(in srgb,var(--accent) calc(var(--progress,0) * 1%),var(--border))}
.timeline .module .num{font-family:var(--font-mono);font-size:11px;color:var(--accent);letter-spacing:.14em;margin-bottom:12px}
.timeline .module h4{font-size:17px;margin-bottom:8px}
.timeline .module p{font-size:13.5px;color:var(--muted);line-height:1.65}
.timeline .module .duration{font-family:var(--font-mono);font-size:11.5px;color:var(--tertiary);margin-top:14px;letter-spacing:.04em}
```

### 4.3 定价表

```css
.pricing{padding:clamp(64px,9vw,116px) 0}
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:clamp(36px,4vw,52px)}
.pricing-grid .plan{background:var(--surface);border-radius:var(--seed-radius);padding:clamp(28px,3vw,38px);box-shadow:inset 0 0 0 1px var(--border);display:flex;flex-direction:column}
.pricing-grid .plan.featured{box-shadow:0 0 0 2px var(--accent);background:var(--accent-wash)}
.pricing-grid .plan .tier{font-family:var(--font-mono);font-size:12px;color:var(--accent);letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
.pricing-grid .plan .price{font-family:var(--font-display);font-size:clamp(32px,4vw,44px);font-weight:600;color:var(--ink);margin-bottom:4px}
.pricing-grid .plan .price small{font-size:.42em;color:var(--muted);font-weight:400;margin-left:4px}
.pricing-grid .plan .desc{font-size:14px;color:var(--muted);line-height:1.7;margin-bottom:24px}
.pricing-grid .plan ul{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-direction:column;gap:12px}
.pricing-grid .plan li{font-size:14px;color:var(--ink);display:flex;align-items:flex-start;gap:10px;line-height:1.5}
.pricing-grid .plan li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none;margin-top:7px}
.pricing-grid .plan .btn{margin-top:auto;width:100%;justify-content:center}
```

### 4.4 学员评价 / 社会证明

```css
.testimonials{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:clamp(36px,4vw,52px)}
.testimonial{background:var(--surface);border-radius:var(--seed-radius);padding:clamp(24px,3vw,32px);box-shadow:inset 0 0 0 1px var(--border)}
.testimonial .quote{font-family:var(--font-display);font-size:16px;line-height:1.65;color:var(--ink);margin-bottom:20px}
.testimonial .quote::before{content:"\201C";font-family:Georgia,serif;color:var(--accent);font-size:1.8em;line-height:0;vertical-align:-.25em;margin-right:.04em}
.testimonial .author-row{display:flex;align-items:center;gap:12px}
.testimonial .avatar-sm{width:36px;height:36px;border-radius:50%;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border)}
.testimonial .author-info{display:flex;flex-direction:column;gap:2px}
.testimonial .author-info .name{font-size:14px;font-weight:500;color:var(--ink)}
.testimonial .author-info .title{font-size:12px;color:var(--tertiary);font-family:var(--font-mono)}
```

### 4.5 数据统计横条

```css
.stats-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:clamp(36px,4vw,52px) 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:clamp(36px,4vw,52px) 0}
.stats-bar .stat{text-align:center}
.stats-bar .stat .num{font-family:var(--font-display);font-size:clamp(28px,3.5vw,42px);font-weight:600;color:var(--ink);display:block;margin-bottom:6px}
.stats-bar .stat .label{font-family:var(--font-mono);font-size:12px;color:var(--tertiary);letter-spacing:.08em;text-transform:uppercase}
```

### 4.6 报名 CTA 横幅（可用于页面中部插入）

```css
.cta-banner{background:var(--accent-wash);border-radius:var(--seed-radius);padding:clamp(32px,4vw,48px);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;margin:clamp(36px,4vw,52px) 0;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent)}
.cta-banner h3{font-size:clamp(22px,2.6vw,30px);max-width:22ch;line-height:1.25}
.cta-banner p{font-size:15px;color:var(--muted);line-height:1.7;max-width:50ch}
.cta-banner .btn{flex:none}
```

### 4.7 FAQ 手风琴

```css
.faq{padding:clamp(64px,9vw,116px) 0}
.faq-list{max-width:760px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item summary{font-family:var(--font-display);font-size:17px;font-weight:500;padding:22px 0;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none;color:var(--ink);transition:color .2s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--font-mono);font-size:20px;color:var(--tertiary);transition:transform .25s ease}
.faq-item[open] summary::after{content:"−";color:var(--accent)}
.faq-item summary:hover{color:var(--accent)}
.faq-item .answer{padding:0 0 22px;font-size:15px;color:var(--muted);line-height:1.75;max-width:60ch}
```

### 4.8 保障 / 信任条

```css
.trust-bar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:clamp(24px,4vw,48px);padding:clamp(24px,3vw,36px) 0;font-family:var(--font-mono);font-size:13px;color:var(--tertiary)}
.trust-bar .item{display:inline-flex;align-items:center;gap:8px}
.trust-bar .item svg{color:var(--accent);flex:none}
```

### 4.9 视频占位（内联 SVG 播放按钮）

```css
.video-placeholder{
  aspect-ratio:16/9;max-width:640px;border-radius:var(--seed-radius);background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--border);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .2s;position:relative;overflow:hidden;
}
.video-placeholder:hover{background:var(--surface-2)}
.video-placeholder .play{width:56px;height:56px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 24px color-mix(in srgb,var(--accent) 35%,transparent)}
.video-placeholder .play svg{color:var(--on-accent);margin-left:3px}
```

### 4.10 案例研究卡（Before / After）

```css
.case-study{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:clamp(36px,4vw,52px) 0}
.case-study .before,.case-study .after{padding:clamp(24px,3vw,32px);border-radius:var(--seed-radius)}
.case-study .before{background:var(--surface);box-shadow:inset 0 0 0 1px var(--border)}
.case-study .after{background:var(--accent-wash);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent)}
.case-study .label{font-family:var(--font-mono);font-size:11.5px;color:var(--tertiary);letter-spacing:.12em;margin-bottom:14px;text-transform:uppercase}
.case-study .after .label{color:var(--accent)}
.case-study h4{font-size:18px;margin-bottom:10px}
.case-study p{font-size:14px;color:var(--muted);line-height:1.7}
```

---

## 5. SVG 图标库（精确 path）

### 5.1 品牌 Logo（导航左侧）

```html
<svg class="mark" width="30" height="30" viewBox="0 0 30 30" role="img" aria-label="研究室标识">
  <circle cx="15" cy="15" r="13.2" fill="none" stroke="var(--ink)" stroke-width="1.4"/>
  <circle cx="15" cy="15" r="3.1" fill="var(--accent)"/>
  <circle cx="15" cy="4.3" r="1.7" fill="var(--ink)"/>
  <circle cx="24.3" cy="20.3" r="1.7" fill="var(--ink)"/>
  <circle cx="5.7" cy="20.3" r="1.7" fill="var(--ink)"/>
  <path d="M15 7.4 V11.9 M17.6 16.6 21.8 19" stroke="var(--accent)" stroke-width="1.4"/>
  <path d="M12.4 16.6 8.2 19" stroke="var(--ink)" stroke-width="1.3"/>
</svg>
```

### 5.2 太阳图标（浅色态显示）

```html
<svg class="sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round">
  <circle cx="12" cy="12" r="4.2"/>
  <path d="M12 2.5v2.4M12 19.1v2.4M4.6 4.6l1.7 1.7M17.7 17.7l1.7 1.7M2.5 12h2.4M19.1 12h2.4M4.6 19.4l1.7-1.7M17.7 6.3l1.7-1.7"/>
</svg>
```

### 5.3 月亮图标（深色态显示）

```html
<svg class="moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 13.5A8 8 0 1 1 10.5 4a6.3 6.3 0 0 0 9.5 9.5z"/>
</svg>
```

### 5.4 复制图标

```html
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
  <rect x="9" y="9" width="11" height="11" rx="2"/>
  <path d="M5 15V5a2 2 0 0 1 2-2h10"/>
</svg>
```

### 5.5 箭头图标（论文列表右侧）

```html
<svg class="arrow" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
  <path d="M7 17 17 7M9 7h8v8"/>
</svg>
```

### 5.6 Toast 成功图标

```html
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
  <path d="M20 6 9 17l-5-5"/>
</svg>
```

### 5.7 哲学区语义图标

```html
<!-- 信任（心形） -->
<svg class="ic" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
  <path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 5.5-7 10-7 10z"/>
</svg>
<!-- 控制感（盾牌） -->
<svg class="ic" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
  <path d="M12 3 4 6.5V12c0 5 3.4 7.8 8 9 4.6-1.2 8-4 8-9V6.5L12 3z"/>
  <path d="M9 12l2 2 4-4"/>
</svg>
<!-- 责任（定位/时钟） -->
<svg class="ic" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
  <path d="M12 3v3M12 21v-3M3 12h3M21 12h-3"/>
  <circle cx="12" cy="12" r="5"/>
  <path d="M12 9.5v3l2 1"/>
</svg>
```

### 5.8 SVG Marker 定义（流水线箭头）

```html
<defs>
  <marker id="ah" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto">
    <path d="M1 1 6 4 1 7" fill="none" stroke="var(--tertiary)" stroke-width="1.3"/>
  </marker>
  <marker id="aha" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto">
    <path d="M1 1 6 4 1 7" fill="none" stroke="var(--accent)" stroke-width="1.4"/>
  </marker>
</defs>
```

### 5.9 播放按钮图标（视频占位用）

```html
<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
  <path d="M8 5.14v14l11-7-11-7z"/>
</svg>
```

### 5.10 保障图标（对勾/盾牌/退款）

```html
<!-- 对勾圆 -->
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M9 12l2 2 4-4"/></svg>
<!-- 退款保证 -->
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 7 7 0 0 0-5 2"/><path d="M3 3v4h4"/><path d="M12 7v5l3 3"/></svg>
```

---

## 6. 完整 JavaScript 模板

```javascript
(function(){
  // === Theme toggle ===
  var root = document.documentElement;
  var toggle = document.getElementById('themeToggle');
  toggle.addEventListener('click', function(){
    var dark = root.getAttribute('data-theme') === 'dark';
    root.setAttribute('data-theme', dark ? 'light' : 'dark');
    toggle.setAttribute('aria-pressed', String(!dark));
  });

  // === Scroll progress bar ===
  var bar = document.getElementById('progress');
  function onScroll(){
    var h = document.documentElement;
    var max = h.scrollHeight - h.clientHeight;
    var p = max > 0 ? (h.scrollTop / max) * 100 : 0;
    bar.style.width = p + '%';
  }
  window.addEventListener('scroll', onScroll, {passive: true});
  onScroll();

  // === Active nav via IntersectionObserver ===
  var links = Array.prototype.slice.call(document.querySelectorAll('.navlinks a'));
  var map = {};
  links.forEach(function(a){ map[a.getAttribute('href').slice(1)] = a; });
  // 动态收集所有带 id 且在 navlinks 中有锚点的 section
  var sectionIds = links.map(function(a){ return a.getAttribute('href').slice(1); });
  var sections = sectionIds.map(function(id){ return document.getElementById(id); }).filter(Boolean);
  if ('IntersectionObserver' in window) {
    var io = new IntersectionObserver(function(entries){
      entries.forEach(function(e){
        if (e.isIntersecting) {
          links.forEach(function(a){ a.classList.remove('active'); });
          var cur = map[e.target.id];
          if (cur) cur.classList.add('active');
        }
      });
    }, {rootMargin: '-45% 0px -50% 0px'});
    sections.forEach(function(s){ io.observe(s); });
  }

  // === Copy prompts + Toast ===
  var toast = document.getElementById('toast');
  var toastTimer;
  function showToast(){
    toast.classList.add('show');
    clearTimeout(toastTimer);
    toastTimer = setTimeout(function(){ toast.classList.remove('show'); }, 2000);
  }
  function copyText(text){
    if (navigator.clipboard && navigator.clipboard.writeText) {
      return navigator.clipboard.writeText(text);
    }
    return new Promise(function(resolve, reject){
      try {
        var ta = document.createElement('textarea');
        ta.value = text; ta.style.position = 'fixed'; ta.style.opacity = '0';
        document.body.appendChild(ta); ta.select();
        document.execCommand('copy'); document.body.removeChild(ta); resolve();
      } catch(err){ reject(err); }
    });
  }
  document.querySelectorAll('.copy-btn').forEach(function(btn){
    btn.addEventListener('click', function(){
      var card = btn.closest('.prompt');
      var pre = card ? card.querySelector('pre') : null;
      if (pre) copyText(pre.innerText).then(showToast).catch(function(){});
    });
  });

  // === FAQ accordion (details/summary, no extra JS needed, but track for analytics) ===
  // Already handled by native <details> element
})();
```

---

## 7. 内联 SVG 插图绘制规范

### 7.1 通用规则

- 所有概念插图使用 `class="ill"` 包裹，配合 §3.18 的主题 class
- 每个 SVG 必须有 `role="img"` + `aria-labelledby="titleId descId"` + 内部 `<title>` 和 `<desc>`
- viewBox 尺寸推荐 540×320~540×440（横向概念图）或 540×150（矮条形图）
- 节点：圆角矩形 `rx="11"` 或 `rx="12"`，配 `.node` 或 `.node-accent`
- 连线：贝塞尔曲线 `<path>` 配 `.link` 或 `.link-accent`
- 虚线回流：`stroke-dasharray="5 6"` 表示反馈循环
- 箭头：使用 §5.8 的 marker 定义
- 文字标注：`.lbl`（正文字体 13px）或 `.lbl-mono`（等宽 11px）
- 强调点：`.dot`（小圆 r="4~5"）

### 7.2 行业 SVG 适配矩阵

| 行业/主题 | 推荐图式 | 节点示例 | 连线含义 |
|---|---|---|---|
| 技术/AI/产品 | 网络关系图 | 录音纪要→智能体→PRD初稿 | 数据/上下文流 |
| 管理/流程 | 流水线图 | 目标→分解→执行→检查→复盘 | 流程步骤 |
| 成长/职业/教育 | 阶梯图 | L0→L1→L2→L3→L4 | 能力递进 |
| 商业/营销 | 漏斗图 | 触达→兴趣→考虑→购买→复购 | 转化路径 |
| 设计/创意 | 双钻石图 | 发散→收敛→发散→收敛 | 思维过程 |
| 金融/数据 | 仪表盘图 | 输入→计算→输出→对比 | 数值关系 |

### 7.3 SVG 绘制模板

**网络关系图模板（viewBox 540×440）：**
```
左侧 2-4 个 .node rect(20,y,76,44,rx11) → 中心 circle .node-accent(266,214,r42) → 右侧 2-4 个 .node rect(414,y,100,44,rx11)
底部回流弧：stroke-dasharray="5 6" + .lbl-mono 标注
```

**流水线图模板（viewBox 540×320）：**
```
横向 3-5 个 .node/.node-accent rect(x,120,86,56,rx12) + 间距 110px
上方连线 marker-end="url(#ah)"
底部回流弧 marker-end="url(#aha)" + .lbl-mono 标注
```

**阶梯图模板（viewBox 540×150）：**
```
底部基线 line(20,132,520,132) .link
每步 rect 高度递增：24→46→68→90→112
贯穿趋势虚线 stroke-dasharray="4 6" + 端点 .dot
```

---

## 8. Section 选择矩阵与内容密度弹性

### 8.1 可用 Section 全表（含商业模块）

| Section 类型 | CSS class | 适合内容 | 商业属性 |
|---|---|---|---|
| Hero | `.hero`, `.hero-grid` | 核心一句话、主视觉 | 转化入口 |
| Thesis | `.thesis-grid`, `.quote-card`, `.ladder` | 核心主张 + 逻辑展开 | 建立认知 |
| Research Index | `.paper`, `.tags` | 项目/论文/案例列表 | 专业背书 |
| Capabilities | `.flow`, `.eng`, `.cap-intro` | 能力体系/流程/工具 | 价值证明 |
| Philosophy | `.philosophy`, `.compare`, `.human` | 深层价值观/原则/对比 | 差异化 |
| Approach | `.levels`, `.lvl` | 路径/等级/阶梯/成长 | 学习路径 |
| Practice | `.lab-grid`, `.prompt`, `.order` | 实操提示词/步骤 | 体验样品 |
| **Instructor** | `.instructor`, `.instructor-grid` | 讲师/作者介绍 | 信任建设 |
| **Curriculum** | `.curriculum`, `.timeline` | 课程大纲/模块时间线 | 内容预览 |
| **Pricing** | `.pricing`, `.pricing-grid` | 价格方案/套餐对比 | 直接转化 |
| **Testimonials** | `.testimonials`, `.testimonial` | 学员评价/用户证言 | 社会证明 |
| **Stats Bar** | `.stats-bar` | 关键数据指标 | 规模证明 |
| **CTA Banner** | `.cta-banner` | 行动号召横幅 | 中间转化 |
| **FAQ** | `.faq`, `.faq-list`, `.faq-item` | 常见问题解答 | 消除犹豫 |
| **Trust Bar** | `.trust-bar` | 保障/退款/认证 | 降低风险 |
| **Case Study** | `.case-study` | 前后对比/案例研究 | 效果证明 |
| **Video** | `.video-placeholder` | 试看/介绍视频 | 沉浸体验 |
| Footer | `.foot-grid`, `.foot-bottom` | 总结 + 版权 | — |

### 8.2 场景推荐结构

**免费知识分享课件（原版）：**
```
Nav → Hero → Thesis → Research → Capabilities → Philosophy → Approach → Practice → Footer
```

**付费课程招生页：**
```
Nav → Hero → Stats Bar → Instructor → Curriculum → Capabilities → Case Study → Testimonials → Pricing → FAQ → Trust Bar → CTA Banner → Footer
```

**企业内训讲义：**
```
Nav → Hero → Thesis → Capabilities → Philosophy → Approach → Practice → Footer
```

**知识 IP 个人品牌站：**
```
Nav → Hero → Instructor → Research → Capabilities → Testimonials → CTA Banner → Footer
```

**训练营宣传页：**
```
Nav → Hero → Video → Stats Bar → Curriculum → Instructor → Case Study → Practice → Pricing → Testimonials → FAQ → Trust Bar → Footer
```

**方法论白皮书/研报风：**
```
Nav → Hero → Thesis → Research → Capabilities → Philosophy → Approach → Footer
```

### 8.3 内容密度自适应规则

| 情况 | 自适应策略 |
|---|---|
| 模块/步骤为 **3 个** | `.flow` 改为 `grid-template-columns:repeat(3,1fr)` |
| 模块/步骤为 **4 个** | `.flow` 改为 `repeat(4,1fr)`，或用 `.eng`（4列网格） |
| 模块/步骤为 **5 个** | `.flow` 保持 `repeat(5,1fr)` |
| 模块/步骤为 **6–8 个** | 用 `.eng`（4×2 或 3×N），或拆成两个 grouplabel 子组 |
| 模块/步骤为 **9–12 个** | 用 `.eng` + 多个 grouplabel 子组 |
| 项目/案例为 **2–3 个** | `.paper` 正常显示 |
| 项目/案例为 **4–6 个** | `.paper` 正常显示，可折叠多余 |
| 等级/层级为 **3 个** | `.levels` 改为 `repeat(3,1fr)` |
| 等级/层级为 **4 个** | `.levels` 改为 `repeat(4,1fr)` |
| 等级/层级为 **5+ 个** | `.levels` 保持 `repeat(5,1fr)` |
| 定价方案为 **2 个** | `.pricing-grid` 用 `repeat(2,1fr)` + `max-width:680px; margin:0 auto` |
| 定价方案为 **3 个** | `.pricing-grid` 正常 auto-fit |
| 评价为 **1–2 条** | `.testimonials` 用 `repeat(2,1fr)` |
| 评价为 **3+ 条** | `.testimonials` 正常 auto-fit |
| 课程大纲 **3–6 模块** | `.timeline` 正常 auto-fill |
| 课程大纲 **7–12 模块** | 按阶段分组，每组加 grouplabel |
| 课程大纲 **12+ 模块** | 只展示核心模块，其余折叠或用 details |

---

## 9. 多行业语态适配指南

### 9.1 改写原则

所有行业共享同一设计系统（token + 组件），区别在于：语态（学术/实践/商业）、Kicker 词汇、内容映射、SVG 概念选择。

### 9.2 行业适配表

| 行业 | 语态基调 | Kicker 示例 | 内容映射 | SVG 类型 |
|---|---|---|---|---|
| **技术 / AI** | 研究机构 | RESEARCH · SYSTEMS · VERIFICATION | 项目→研究成果, 技巧→能力体系 | 网络关系图 |
| **商业管理** | 咨询机构 | STRATEGY · EXECUTION · GROWTH | 案例→管理实践, 工具→决策模型 | 流水线图 |
| **设计方法论** | 工作室 | CRAFT · PROCESS · TASTE | 作品→设计研究, 原则→设计信条 | 双钻石图 |
| **个人成长 / 职场** | 导师 | PRACTICE · JOURNEY · MASTERY | 经验→成长路径, 技巧→核心能力 | 阶梯图 |
| **金融 / 投资** | 研究所 | ANALYSIS · RISK · RETURN | 策略→投资逻辑, 模型→分析框架 | 仪表盘图 |
| **营销 / 增长** | 实验室 | GROWTH · CHANNEL · CONVERSION | 打法→增长引擎, 数据→效果验证 | 漏斗图 |
| **健康 / 生活方式** | 研究员 | SCIENCE · HABIT · WELLBEING | 方法→循证实践, 数据→健康指标 | 阶梯图 |

### 9.3 Kicker 词库

按模块类型提供英文大写 Kicker 备选：

| 模块功能 | 通用 | 技术 | 商业 | 设计 | 教育 |
|---|---|---|---|---|---|
| 引言/核心 | CORE THESIS | HYPOTHESIS | VALUE PROPOSITION | DESIGN INTENT | LEARNING GOAL |
| 案例/成果 | EVIDENCE | RESEARCH | CASE STUDY | PORTFOLIO | CURRICULUM |
| 能力/方法 | CAPABILITIES | SYSTEMS | FRAMEWORK | PROCESS | MODULES |
| 价值观 | PHILOSOPHY | PRINCIPLES | BELIEFS | CRAFT VALUES | PEDAGOGY |
| 路线/阶段 | APPROACH | ARCHITECTURE | ROADMAP | JOURNEY | PROGRESSION |
| 实践 | PRACTICE | LAB | PLAYBOOK | WORKSHOP | EXERCISE |
| 转化 | GET STARTED | DEPLOY | PRICING | COLLABORATE | ENROLL |

### 9.4 CTA 文案库

| 场景 | 主 CTA | 辅助 CTA |
|---|---|---|
| 免费分享 | 阅读研究档案 / 进入实践 | 查看能力体系 / 了解方法论 |
| 付费课程 | 立即报名 / 加入训练营 | 查看课程大纲 / 免费试看 |
| 企业服务 | 预约咨询 / 获取方案 | 查看客户案例 / 下载白皮书 |
| 知识 IP | 关注更新 / 获取资料包 | 查看完整作品 / 了解更多 |
| 社群 | 加入社群 / 申请席位 | 查看往期回顾 / 免费试听 |

---

## 10. 可访问性规范

| 元素 | 要求 |
|------|------|
| `<html>` | `lang="zh-CN"` + `data-theme="light"` |
| 主题切换按钮 | `aria-label="切换深浅色主题"` + `aria-pressed="false/true"` 动态更新 |
| 导航 | `<nav aria-label="主导航">` |
| 研究列表容器 | `role="list"` |
| 研究列表每行 | `role="listitem"` |
| 逻辑阶梯容器 | `role="list"` |
| 逻辑阶梯每行 | `role="listitem"` |
| Toast | `role="status"` + `aria-live="polite"` |
| 所有内联 SVG 插图 | `role="img"` + `aria-labelledby` 引用 `<title>` 和 `<desc>` |
| 装饰性 SVG 图标 | `aria-hidden="true"` |
| 复制按钮 | `aria-label="复制第 N 条提示词"` |
| 进度条 | `aria-hidden="true"`（纯装饰） |
| 品牌链接 | `aria-label="{brand} 首页"` |
| FAQ | `<details>` + `<summary>` 原生可折叠 |
| 定价方案 featured | `aria-current="true"` 标记推荐项 |

---

## 11. 生成工作流

### Step 1：理解内容

- 阅读用户提供的课程/分享/培训材料
- 识别核心主张、分论点、证据/项目/案例、方法论、实操步骤
- 判断总信息量，规划分为多少个 section（建议 6–12 个）
- 判断商业属性：是纯分享还是付费转化？需要定价/报名/评价模块吗？

### Step 2：改写语态

- 根据 §9 行业适配表选择语态基调
- 将原始材料改写为对应语态：
  - 岗位履历 → 研究路径 / 咨询经历 / 创作历程
  - 项目经历 → 研究成果索引 / 案例库 / 作品集
  - 技巧清单 → 能力体系 / 方法框架 / 核心模块
  - 核心观点 → 研究信条 / 价值主张 / 设计原则
  - 实操步骤 → 实践方法 / 操作手册 / 练习
- 中文正文 + 英文大写眉标（从 §9.3 Kicker 词库选择）

### Step 3：选择 Section 组合

1. 从 §8.2 场景推荐中选择最接近的结构
2. 根据实际内容量增减 section
3. 商业转化页必须包含至少 1 个转化点（CTA Banner / Pricing / 报名按钮）
4. 每个页面不超过 12 个 section（过多则合并或折叠）

### Step 4：确定内容密度

- 按 §8.3 的自适应规则确定每个组件的 grid 列数
- 如果内容超过组件标准容量，拆成多个 grouplabel 子组
- 保持视觉节奏：每 2-3 个内容密集 section 后插入一个视觉呼吸（Stats Bar / CTA Banner / SVG 插图）

### Step 5：生成 HTML

1. 复制 §1 的骨架
2. 复制 §2 完整 token 块 + §3 + §4（按需）全部 CSS 规则拼接为一个 `<style>` 块
3. 根据用户内容填充 HTML 结构，使用 §5 的图标库
4. 根据内容绘制 1–3 幅内联 SVG 概念图（遵循 §7 规范 + §7.2 适配矩阵）
5. 复制 §6 的 JS 模板（修改 nav 锚点数组匹配实际 section）
6. 确保每个 section 有 `data-component` 和 `data-od-id`

### Step 6：自查清单

- [ ] CSS 完整复制了 §2 + §3（+ §4 商业组件如需要），未遗漏 dark theme 的派生覆盖
- [ ] 所有颜色通过 token / color-mix 引用，`:root` 外无超过 5 个原始 hex
- [ ] 文案真实有意义，无 lorem / placeholder
- [ ] 响应式三档（>1120 / ≤1120 / ≤760）无溢出
- [ ] 深浅主题切换后文字对比度达标
- [ ] SVG 插图有 title/desc，按钮有 aria-label
- [ ] 每个 section 有 `data-component`
- [ ] 提示词复制可用（如有 Practice 区），Toast 可弹出（2000ms 后消失）
- [ ] accent 色使用不超过 2 处 per viewport
- [ ] 无默认紫/靛 AI 配色，无 emoji 作图标
- [ ] JS 中 IntersectionObserver rootMargin 为 `-45% 0px -50% 0px`
- [ ] 主题切换更新 `aria-pressed` 属性
- [ ] 商业模块定价数字真实（用户提供或标 TBD），不编造价格
- [ ] FAQ 使用 `<details>` 原生元素，无额外 JS 依赖
- [ ] grid 列数与实际内容项数匹配（不出现大片空白或挤压）

---

## 12. 输入参数

| 参数 | 类型 | 必填 | 说明 |
|------|------|------|------|
| topic | string | 是 | 课件主题/标题 |
| author | string | 是 | 作者名（中文 + 英文） |
| brand | string | 否 | 品牌名称（默认用 topic 派生） |
| content | string/file | 是 | 课程内容材料（文稿/大纲/PRD） |
| industry | string | 否 | 行业（tech/business/design/growth/finance/wellness），默认 tech |
| purpose | string | 否 | 用途（share/sell/brand/internal），默认 share |
| sections | string[] | 否 | 需要的 section 类型列表，默认自动规划 |
| has_practice | boolean | 否 | 是否包含实践提示词区，默认 true |
| has_theme_toggle | boolean | 否 | 是否包含深浅主题切换，默认 true |
| has_pricing | boolean | 否 | 是否包含定价表，默认 false |
| pricing_data | object[] | 否 | 定价方案数据（tier/price/features） |
| instructor_info | object | 否 | 讲师信息（name/role/bio/credentials） |

---

## 13. 输出

- 单文件 `index.html`（约 700–2000 行，随内容量和商业模块数浮动）
- 可直接浏览器打开
- 可部署到任意静态托管（Cloudflare Pages / GitHub Pages / Vercel / Netlify）
- 部署命令：`npx wrangler pages deploy ./deploy --project-name {name}`

---

## 14. 变体方向

| 变体 | 调整 seed token | 适合场景 |
|------|----------------|----------|
| 默认温暖学术 | 如 §2 所定义 | 课程/分享/研究 |
| 更正式/企业 | `--seed-primary:#2c5545; --seed-accent:#3d7a5f` | 企业内训/B2B |
| 更温暖/编辑 | `--seed-bg:#efe7d6; --seed-surface:#f8f1e2` | 个人品牌/生活方式 |
| 更暗/技术 | 默认 `data-theme="dark"`，浅色为备选 | 开发者/技术深度 |
| 更简洁/演示 | 减少 section 数，Hero h1 改为 `clamp(48px,8vw,96px)` | 大屏演示/keynote |
| 更商业/高转化 | 增加 Stats + Testimonials + Pricing + Trust Bar | 付费课/训练营 |

---

## 15. 非功能规范

- 不使用任何外部 JS 库（纯 vanilla）
- 不使用外部图片（所有视觉用 CSS + 内联 SVG；讲师头像可用 SVG placeholder 或用户提供的 base64）
- Google Fonts 仅增强，去掉不影响可用性（本地 Songti/PingFang 回退）
- 文件编码 UTF-8，`lang="zh-CN"`
- HTML 语义化：header, main, section, footer, nav, aside, details
- `prefers-reduced-motion` 时禁用 scroll-behavior: smooth
- body 主题切换 transition 0.4s 确保无闪烁
- 定价数字必须由用户提供或明确标注「TBD」，不编造
- 评价文案必须由用户提供或明确标注为示意，不编造虚假证言
