create-yss-spec 1.0.0

package/template/.claude/skills/beautiful-article/theme-profiles/andy.md

@@ -0,0 +1,57 @@
+# Theme Profile · andy（Headspace 静谧 / 温柔）
+
+> 这是给 **AI 写作时读** 的 authoring profile，不是 CSS。CSS token 由组件库
+> 运行时主题持有（`data-theme="andy"`）。本文件是"如何选择和使用这个主题"。
+> 详尽版本见组件库 canonical md：`src/theme/themes/andy/andy.md`（写代码 /
+> 公式 / 媒体 / Raw 前请读它）。
+
+- **runtime theme id**：`andy`（`<ThemeProvider theme="andy">`）
+- **气质**：温暖人文派（Headspace）。暖奶油纸、友好南瓜橙、暖灰墨（非纯黑）、通体
+  圆体无衬线（Quicksand + Nunito）。**七套里唯一同时用大圆角 + 柔和暖阴影**的主题。
+  柔软、平静、治愈，重在让人安心。完整继承语义化组件契约。
+
+## 适合 / 不适合的文章类型
+
+- **适合**：健康 / 心理 / 生活方式、引导式 `tutorial`、温柔的上手与安抚、产品价值观叙事、
+  需要"柔软 UI"质感与亲和力的 `explainer`。面向普通人、降低压力感。
+- **不适合**：学术论文（`knuth`）；冷调规格（`vignelli`）；暗底工程（`shannon`）；
+  密集数据报告（`tufte`）；俏皮黄黑（`freddie`）；需要锋利严肃感的内容；幻灯片。
+
+## 排版气质
+
+- 标题 / 标签用 Quicksand（几何圆体），正文用 Nunito（人文圆体）；呼应 Headspace 微笑曲线。
+- 正文 ~17px，行距 1.7（舒展）；标题 `display: 700`，圆体偏粗最 friendly。强调不用斜体（协议级禁用）。
+- **亮橙作填充、加深橙作文字**：圆圈章节号 / pill 用亮南瓜橙；链接 / 结构用加深烧橙保证可读。
+
+## Raw 风格
+
+像一页柔软、圆润、令人放松的插图。
+
+- 约束的是**气质**（暖橙系、大圆角、柔阴影、大留白、平静），不是**媒介**。
+- 典型：圆角步骤卡、柔和进度 / 呼吸动画、圆形数据图、温柔问答、blob / imperfect-circle 装饰。
+- 构图：大留白、大圆角、柔阴影；颜色只用 `--ra-*`（橙用 `--hs-orange`）。
+- 动效：平缓顺滑、可有舒缓循环（如呼吸引导），但不喧闹。
+
+## 媒体（图片 / 视频 / 音频）风格
+
+- 适合：圆润吉祥物 / blob 插画、暖色生活摄影、暖橙柔和渐变背景、友好圆角图标。
+- 构图留白充足、圆角裁切、主体平静；caption 温柔；必须配 alt。
+- 色彩暖橙为主，辅柔蓝 / 柔绿情绪色，低饱和柔和。
+
+## 代码 / 公式风格
+
+- `CodeBlock` 像友好 App 文档里的代码卡片：暖桃 surface + 大圆角 + 可有极轻阴影，不用暗色终端。
+- Prism token：标签 / 函数用加深橙 accent（克制），关键字用 risk 红，字符串用绿，其余走暖墨 / muted。
+- `Formula` 像温柔标注：克制、对齐，可有圆角 surface。
+
+## 禁止项
+
+- 纯黑墨、硬直角、冷色——立刻破坏"柔软治愈"识别。
+- 亮南瓜橙作正文 / 小字（对比不足，用加深 accent）。
+- 柔阴影 + 大圆角滥用成浮夸卡片堆叠；紫粉霓虹、Tailwind 默认味；用斜体强调。
+
+## 不同信息密度下的表现建议（建议，非限制）
+
+- `100% explainer / tutorial`：柔软长文 + 圆角步骤卡 + 枕头 callout，正文为主体。
+- `60-80% 引导内容`：保留关键步骤 + 温柔插画，圆圈章节号点睛。
+- `40% briefing`：Raw 偏柔和图解 / 呼吸动画，文字更短，仍是治愈形态。

package/template/.claude/skills/beautiful-article/theme-profiles/bayer.md

@@ -0,0 +1,57 @@
+# Theme Profile · bayer（包豪斯 / 三原色几何）
+
+> 这是给 **AI 写作时读** 的 authoring profile，不是 CSS。CSS token 由组件库
+> 运行时主题持有（`data-theme="bayer"`）。本文件是"如何选择和使用这个主题"。
+> 详尽版本见组件库 canonical md：`src/theme/themes/bayer/bayer.md`（写代码 /
+> 公式 / 媒体 / Raw 前请读它）。
+
+- **runtime theme id**：`bayer`（`<ThemeProvider theme="bayer">`）
+- **气质**：包豪斯 / 构成主义。暖纸、近黑墨，三原色（红 / 蓝 / 黄）当**结构色**而非装饰。
+  识别度来自几何：蓝色实心圆里的章节数字、红黄蓝三色刊头条、小写无衬线导语、硬边方块。
+  几何无衬线（Josefin / Poppins）。响亮但有纪律。
+
+## 适合 / 不适合的文章类型
+
+- **适合**：教学 / 科普解释、产品介绍、宣言、品牌叙事；"专业但有性格、彩色但不浮夸"，
+  适合配几何信息图 / 流程图 / 构成式插画。
+- **不适合**：学术论文（`knuth`）、黑白大刊（`bodoni`）、暗底工程（`shannon` / `fuller`）、
+  柔软治愈（`andy`）、极致中性规格（`vignelli`）、幻灯片。
+
+## 排版气质
+
+- 标题 / 标签用 Josefin Sans（几何），正文用 Poppins（几何人文）。
+- 正文 ~17px，行距 1.65；display 字重 700；强调不用斜体（协议级禁用）。
+- **蓝是结构、红是风险、黄是填充**：链接 / 章节圆用蓝，警示用红，黄只作色块（绝不作文字色）。
+- 导语 / kicker 走小写（Bauhaus 单一字母表；仅作用于拉丁字母）。
+
+## Raw 风格
+
+像一页构成主义信息图。
+
+- 约束的是**气质**（红蓝黄三色、强网格、硬边、圆形点睛），不是**媒介**。
+- 典型：几何流程图、圆 / 方 / 三角构成、原色柱状 / 比例图、网格示意、带蓝圆编号的步骤。
+- 构图：强网格、硬边、三色 + 黑白；无圆角矩形卡。
+- 动效：干脆位移 / 显隐，无回弹、无循环装饰。
+
+## 媒体（图片 / 视频 / 音频）风格
+
+- 适合：几何构成插画、原色海报、强对比黑白 / 原色摄影、网格 / 圆方三角示意。
+- 构图强网格、果断留白、原色块面；caption 简洁；必配 alt。
+- 色彩红 / 蓝 / 黄 + 黑白；不引入紫粉冷渐变。
+
+## 代码 / 公式风格
+
+- `CodeBlock` 像构成主义文档的代码块：暖浅 surface + 发丝线，无圆角、无暗窗。
+- Prism token：标签 / 函数走蓝 accent，关键字走红 risk，字符串走绿；**黄不作语法色**。
+- `Formula` 居中克制，可有极淡 surface。
+
+## 禁止项
+
+- 把包豪斯黄当文字 / 链接 / 语法色（对比不足）。
+- 圆角矩形卡 + 投影堆叠；紫粉渐变、霓虹、Tailwind 默认味、emoji 当装饰。用斜体强调（协议级禁用）。
+
+## 不同信息密度下的表现建议（建议，非限制）
+
+- `100% explainer / 教学`：长文 + 蓝圆编号 + 几何信息图 + 黄底原则块，正文为主体。
+- `60-80% 内容`：保留关键步骤 + 构成示意，三色条点睛。
+- `40% briefing`：Raw 偏几何图解 / 比例图，文字更短，仍是构成形态。

package/template/.claude/skills/beautiful-article/theme-profiles/bodoni.md

@@ -0,0 +1,57 @@
+# Theme Profile · bodoni（报刊 / Didone 高反差）
+
+> 这是给 **AI 写作时读** 的 authoring profile，不是 CSS。CSS token 由组件库
+> 运行时主题持有（`data-theme="bodoni"`）。本文件是"如何选择和使用这个主题"。
+> 详尽版本见组件库 canonical md：`src/theme/themes/bodoni/bodoni.md`（写代码 /
+> 公式 / 媒体 / Raw 前请读它）。
+
+- **runtime theme id**：`bodoni`（`<ThemeProvider theme="bodoni">`）
+- **气质**：印刷殿堂派（Didone broadsheet / 时装刊头）。纯白纸、真黑墨、发丝栏线，
+  极端粗细对比的 Playfair Display 刊头大字压在从容老式衬线正文上。识别度来自印刷惯例
+  ——刊头粗细双线、首字下沉、小型大写导语、栏线分节——颜色几乎只留给风险。
+
+## 适合 / 不适合的文章类型
+
+- **适合**：宣言、深度特稿、有分量的随笔与长评、文化 / 时政 / 时装报道；需要权威、
+  戏剧、仪式感的开篇与封面式长文。
+- **不适合**：暖调亲和（`press` / `freddie`）、柔软治愈（`andy`）、冷调规格（`vignelli`）、
+  暗底工程（`shannon` / `fuller`）、学术论文（`knuth`）、彩色活泼（`bayer` / `sottsass`）、幻灯片。
+
+## 排版气质
+
+- 标题 / 刊头用 Playfair Display（Didone 高反差），正文用 Source Serif 4 / Newsreader（可读老式衬线）。
+- 正文 ~17px，行距 1.62；display 字重 900、字号巨大，与发丝正文形成大报落差。
+- 导语 / 表头 / TOC 标题 / 结语标签统一走**小型大写 + 字距**；强调不用斜体（协议级禁用）。
+- **层级靠字号 / 字重 / 发丝线，不靠颜色**；整篇近黑白，红只在真正风险处出现。
+
+## Raw 风格
+
+像大报版面里亲手排的图版或抽言。
+
+- 约束的是**气质**（黑白、发丝线、Didone 大字、印刷克制），不是**媒介**。
+- 典型：黑白数据 / 折线图、版式抽言、时间线、对照栏、刊头式标题块、首字下沉开篇。
+- 构图：发丝线 + 黑白 + 大字标题；填色极少，红点睛；无圆角、无阴影。
+- 动效：克制、近静态；避免循环装饰与回弹。
+
+## 媒体（图片 / 视频 / 音频）风格
+
+- 适合：黑白 / 低饱和摄影、高质感人像 / 静物、纪实照片、单色信息图、版画质感。
+- 构图果断留白、可满版 / 裁切；caption 小型大写或衬线小字；必配 alt。
+- 色彩以黑白灰为主，慎用一抹编辑红点睛。
+
+## 代码 / 公式风格
+
+- `CodeBlock` 像书页里克制的代码清单：暖浅 surface + 发丝线，无圆角、无暗窗。
+- Prism token：墨色 / 暖编辑红 / 低饱和绿；不彩虹。
+- `Formula` 居中克制、衬线数字。
+
+## 禁止项
+
+- 引入除编辑红以外的颜色作装饰；圆角 / 阴影 / 卡片化 / 渐变 / 霓虹。
+- 把 Didone 当正文长段（正文用老式衬线）。用斜体强调（协议级禁用）。
+
+## 不同信息密度下的表现建议（建议，非限制）
+
+- `100% longform / 特稿`：首字下沉开篇 + 栏线分节 + 居中铅字抽言，正文为主体。
+- `60-80% 评论`：保留关键抽言与小型大写导语，黑白图版点睛。
+- `40% briefing`：Raw 偏黑白数据图 / 时间线，文字更短，仍是大报形态。

package/template/.claude/skills/beautiful-article/theme-profiles/freddie.md

@@ -0,0 +1,57 @@
+# Theme Profile · freddie（Mailchimp 暖黄 / 友善）
+
+> 这是给 **AI 写作时读** 的 authoring profile，不是 CSS。CSS token 由组件库
+> 运行时主题持有（`data-theme="freddie"`）。本文件是"如何选择和使用这个主题"。
+> 详尽版本见组件库 canonical md：`src/theme/themes/freddie/freddie.md`（写代码 /
+> 公式 / 媒体 / Raw 前请读它）。
+
+- **runtime theme id**：`freddie`（`<ThemeProvider theme="freddie">`）
+- **气质**：温暖人文派（Mailchimp）。纯白纸、近黑 Peppercorn 墨、Cavendish 明黄
+  只作**荧光笔 / 色块**（绝不作文字色）。俏皮柔和的衬线标题（Fraunces）压在干净
+  grotesque 正文（Hanken）之上。机灵、亲切、有人味，但仍专业。完整继承结构纪律。
+
+## 适合 / 不适合的文章类型
+
+- **适合**：产品介绍、`tutorial` / 上手指南、changelog 叙事、功能 `explainer`、FAQ、
+  亲和力强的营销味长文。面向普通用户、需要温度与幽默的内容。
+- **不适合**：学术论文（`knuth`）；冷调系统规格（`vignelli`）；暗底工程现场（`shannon`）；
+  极密集数据报告（`tufte`）；柔软治愈向（`andy`）；幻灯片。
+
+## 排版气质
+
+- 标题用 Fraunces（仿 Cooper / Means 的柔软俏皮），正文 / 标签用 Hanken Grotesk（仿 Graphik）。
+- 正文 ~17px，行距 1.65；标题靠 `display: 600` + 柔轴，不靠超粗。强调不用斜体（协议级禁用）。
+- **黄是荧光不是墨**：链接 = 黑字 + 黄 highlight（hover 填满）；章节号 = 黑字 + 黄贴纸（略旋转）。
+
+## Raw 风格
+
+像一页友好、带手作感的产品说明插图。
+
+- 约束的是**气质**（黑 / 白 / 黄、适度圆角、舒展留白、一点人情味），不是**媒介**。
+- 典型：步骤 / 流程图、对比示意、带黄色 highlight 的标注、友好小数据图、可点开 FAQ。
+- 构图：留白舒展、黄只作强调、适度圆角；颜色只用 `--ra-*`（黄用 `--mc-yellow`）。
+- 动效：允许短促、带一丝回弹的过渡；避免无限循环装饰。
+
+## 媒体（图片 / 视频 / 音频）风格
+
+- 适合：精修产品截图、温暖摄影、scruffy / 手绘风插画、流程示意、带人物的友好配图。
+- 构图留白舒展、主体清楚、可有一点不规整的人味；caption 简洁；必须配 alt。
+- 色彩贴近黑 / 白 / 黄，强调用黄色块承载，不引入紫粉冷渐变。
+
+## 代码 / 公式风格
+
+- `CodeBlock` 像友好的代码片段：暖浅 surface + 发丝线 + 适度圆角，不用暗色编辑器窗口。
+- Prism token：标签 / 函数走墨色或暖红，关键字用 risk 红，字符串用绿；**黄不作语法色**。
+- `Formula` 像正文里的友好标注：克制、对齐，可有极淡圆角 surface。
+
+## 禁止项
+
+- 把 Cavendish 黄当文字 / 链接 / 语法色（不可读，破坏识别）。
+- 紫粉渐变、霓虹、Tailwind 默认味、把 emoji / 图标当装饰。
+- 大圆角 + 大投影的卡片堆叠（那是 `andy` 的柔软领域）；用斜体强调。
+
+## 不同信息密度下的表现建议（建议，非限制）
+
+- `100% explainer / tutorial`：友好长文 + 步骤图 + 黄色 callout，正文为主体。
+- `60-80% 产品介绍`：保留关键步骤 + 截图，黄色强调点睛。
+- `40% briefing`：Raw 偏友好图解，文字更短，仍是亲切产品形态。

package/template/.claude/skills/beautiful-article/theme-profiles/fuller.md

@@ -0,0 +1,56 @@
+# Theme Profile · fuller(蓝图 / 工程制图)
+
+> 这是给 **AI 写作时读** 的 authoring profile，不是 CSS。CSS token 由组件库
+> 运行时主题持有（`data-theme="fuller"`）。本文件是"如何选择和使用这个主题"。
+> 详尽版本见组件库 canonical md：`src/theme/themes/fuller/fuller.md`（写代码 /
+> 公式 / 媒体 / Raw 前请读它）。
+
+- **runtime theme id**：`fuller`（`<ThemeProvider theme="fuller">`）
+- **气质**：工程制图 / 蓝图。深蓝图底 + 青白墨 + 一束制图青，外加淡方格网。识别度来自
+  绘图板：方格纸上的标题块 Hero、等宽尺寸标注、虚线标注分节、青色发丝线。是 `shannon`
+  （暖琥珀终端）的冷色对位——同为暗底，气质是制图桌而非命令行。
+
+## 适合 / 不适合的文章类型
+
+- **适合**：技术规格、系统 / 架构设计、协议 / 接口文档、RFC、硬件 / 机械说明；需要精密、
+  冷静、工程质感的暗底长文，配示意 / 标注 / 拓扑图。
+- **不适合**：需打印的文档（暗底费墨）、温暖叙事（`press` / `freddie`）、柔软治愈（`andy`）、
+  彩色活泼（`bayer` / `sottsass`）、学术论文（`knuth`）、黑白大刊（`bodoni`）、幻灯片。
+
+## 排版气质
+
+- 正文 / 标题用 IBM Plex Sans，标签 / 尺寸 / 章节号 / 元数据用 IBM Plex Mono（等宽承载标注）。
+- 正文 ~17px，行距 1.62；display 字重 600（工程克制）；强调不用斜体（协议级禁用）。
+- **青是唯一结构色，风险用暖橙**以便在满屏青中辨识；暗底，所有 soft 是深色面板。
+
+## Raw 风格
+
+像图纸上亲手画的标注示意。
+
+- 约束的是**气质**（青发丝线、等宽标注、方格网、暗面板、无发光），不是**媒介**。
+- 典型：线框 / 拓扑 / 时序图、带尺寸线的标注、方格纸坐标、等宽数据表、结构剖面。
+- 构图：青色发丝线 + 等宽标注 + 可叠方格；无圆角、无发光。
+- 动效：克制位移 / 描边动画；无霓虹循环。
+
+## 媒体（图片 / 视频 / 音频）风格
+
+- 适合：线框 / 结构 / 拓扑图、尺寸标注图、蓝晒图、CAD / 示意截图、暗底数据可视化。
+- 构图以线为主、青色描边、可叠网格；caption 等宽冷静；必配 alt。
+- 色彩蓝青为主，风险用暖橙点睛；低饱和。
+
+## 代码 / 公式风格
+
+- `CodeBlock` 是暗底第一公民但仍是工程文档：暗面板 + 暗青发丝线 + 退后 mono 行号，无圆角、无发光。
+- Prism token 从青 accent / 风险橙 / 薄荷绿派生；克制不彩虹。
+- `Formula` 像规格里的公式：等宽标注、对齐、克制。
+
+## 禁止项
+
+- 把暗底当"赛博朋克霓虹"——本主题是冷静蓝图，无发光、无故障风。
+- 圆角 / 阴影 / 亮底卡片 / 暖色生活化插画；风险用青色（风险固定暖橙）。用斜体强调（协议级禁用）。
+
+## 不同信息密度下的表现建议（建议，非限制）
+
+- `100% spec / 系统设计`：标题块 Hero + 虚线分节 + 规格表 + 拓扑示意，文字与图并重。
+- `60-80% 文档`：保留关键标注图，等宽元数据点睛。
+- `40% briefing`：Raw 偏线框 / 时序图，文字更短，仍是蓝图形态。

package/template/.claude/skills/beautiful-article/theme-profiles/index.json

@@ -0,0 +1,112 @@
+[
+  {
+    "id": "tufte",
+    "runtimeTheme": "tufte",
+    "label": "Tufte · Data-Ink",
+    "mood": "证据、数据、克制、低装饰；让读者凑近去读",
+    "bestFor": ["longform", "full-report", "explainer", "review", "tutorial"],
+    "notFor": ["十米外观看的演示幻灯片", "移动端优先且需要大量边注的场景"],
+    "profile": "tufte.md",
+    "canonicalRuntimeMd": "src/theme/themes/tufte/tufte.md"
+  },
+  {
+    "id": "press",
+    "runtimeTheme": "press",
+    "label": "Press · 书卷 / 编辑",
+    "mood": "出版、叙事、温暖、编辑感；请你从一臂之外读一本书",
+    "bestFor": ["essay", "briefing", "visual-essay", "longform", "explainer"],
+    "notFor": ["极度密集、需大量边注的数据型报告（那是 tufte 主场）", "演示幻灯片"],
+    "profile": "press.md",
+    "canonicalRuntimeMd": "src/theme/themes/press/press.md"
+  },
+  {
+    "id": "shannon",
+    "runtimeTheme": "shannon",
+    "label": "Shannon · 暗色工程证据",
+    "mood": "暗底工程现场、仪表信号、克制、低装饰；在暗纸上读工程证据",
+    "bestFor": ["postmortem", "system-design", "benchmark", "explainer", "review", "tutorial"],
+    "notFor": ["需打印的正式文档（暗底费墨）", "温暖叙事 / 出版随笔", "演示幻灯片"],
+    "profile": "shannon.md",
+    "canonicalRuntimeMd": "src/theme/themes/shannon/shannon.md"
+  },
+  {
+    "id": "vignelli",
+    "runtimeTheme": "vignelli",
+    "label": "Vignelli · 瑞士国际主义文档",
+    "mood": "冷中性、sans、网格、系统化；清晰可扫读的中性文档",
+    "bestFor": ["docs", "spec", "changelog", "reference", "explainer", "tutorial"],
+    "notFor": ["温暖叙事（press）", "正式学术论文（knuth）", "暗底工程现场（shannon）", "演示幻灯片"],
+    "profile": "vignelli.md",
+    "canonicalRuntimeMd": "src/theme/themes/vignelli/vignelli.md"
+  },
+  {
+    "id": "knuth",
+    "runtimeTheme": "knuth",
+    "label": "Knuth · 学术预印本",
+    "mood": "正式、严谨、公式与编号优先；像读一篇 arXiv 论文",
+    "bestFor": ["paper", "preprint", "research", "literature-review", "explainer", "full-report"],
+    "notFor": ["温暖叙事（press）", "中性产品文档（vignelli）", "暗底工程现场（shannon）", "演示幻灯片"],
+    "profile": "knuth.md",
+    "canonicalRuntimeMd": "src/theme/themes/knuth/knuth.md"
+  },
+  {
+    "id": "freddie",
+    "runtimeTheme": "freddie",
+    "label": "Freddie · 暖黄 / 友善",
+    "mood": "暖白 + 明黄、机灵有人味；黑字荧光、俏皮衬线，专业但不端着",
+    "bestFor": ["explainer", "tutorial", "product-intro", "changelog", "faq"],
+    "notFor": ["正式学术论文（knuth）", "冷调系统规格（vignelli）", "暗底工程现场（shannon）", "柔软治愈向（andy）", "演示幻灯片"],
+    "profile": "freddie.md",
+    "canonicalRuntimeMd": "src/theme/themes/freddie/freddie.md"
+  },
+  {
+    "id": "andy",
+    "runtimeTheme": "andy",
+    "label": "Andy · 静谧 / 温柔",
+    "mood": "暖奶油 + 暖橙、柔软平静治愈；大圆角 + 柔阴影、通体圆体，让人安心",
+    "bestFor": ["explainer", "tutorial", "wellness", "onboarding", "lifestyle"],
+    "notFor": ["正式学术论文（knuth）", "冷调系统规格（vignelli）", "暗底工程现场（shannon）", "俏皮黄黑（freddie）", "需要锋利严肃感的内容", "演示幻灯片"],
+    "profile": "andy.md",
+    "canonicalRuntimeMd": "src/theme/themes/andy/andy.md"
+  },
+  {
+    "id": "bodoni",
+    "runtimeTheme": "bodoni",
+    "label": "Bodoni · 报刊 / Didone 高反差",
+    "mood": "极致黑白、戏剧高反差；像一份精心排过的大报 / 时装刊头",
+    "bestFor": ["longform", "essay", "manifesto", "feature", "review"],
+    "notFor": ["暖调亲和（press / freddie）", "柔软治愈（andy）", "冷调规格（vignelli）", "暗底工程（shannon / fuller）", "学术论文（knuth）", "彩色活泼（bayer / sottsass）", "演示幻灯片"],
+    "profile": "bodoni.md",
+    "canonicalRuntimeMd": "src/theme/themes/bodoni/bodoni.md"
+  },
+  {
+    "id": "bayer",
+    "runtimeTheme": "bayer",
+    "label": "Bayer · 包豪斯 / 三原色几何",
+    "mood": "响亮而理性；三原色当结构色、蓝圆章节号、三色刊头条、几何构成",
+    "bestFor": ["explainer", "tutorial", "manifesto", "product-intro", "brand"],
+    "notFor": ["学术论文（knuth）", "黑白大刊（bodoni）", "暗底工程（shannon / fuller）", "柔软治愈（andy）", "极致中性规格（vignelli）", "演示幻灯片"],
+    "profile": "bayer.md",
+    "canonicalRuntimeMd": "src/theme/themes/bayer/bayer.md"
+  },
+  {
+    "id": "fuller",
+    "runtimeTheme": "fuller",
+    "label": "Fuller · 蓝图 / 工程制图",
+    "mood": "冷峻技术暗色；蓝图底 + 制图青 + 方格纸标题块、等宽尺寸标注",
+    "bestFor": ["spec", "system-design", "rfc", "reference", "explainer"],
+    "notFor": ["需打印的文档（暗底费墨）", "温暖叙事（press / freddie）", "柔软治愈（andy）", "彩色活泼（bayer / sottsass）", "学术论文（knuth）", "黑白大刊（bodoni）", "演示幻灯片"],
+    "profile": "fuller.md",
+    "canonicalRuntimeMd": "src/theme/themes/fuller/fuller.md"
+  },
+  {
+    "id": "sottsass",
+    "runtimeTheme": "sottsass",
+    "label": "Sottsass · 孟菲斯 / 80s 撞色",
+    "mood": "最叛逆好玩；撞色粉彩 + 无模糊硬投影 + 旋转药丸 + 波浪下划线 + 彩屑",
+    "bestFor": ["explainer", "tutorial", "culture", "launch", "design-writing"],
+    "notFor": ["学术（knuth）", "黑白大刊（bodoni）", "冷调规格（vignelli）", "暗底工程（shannon / fuller）", "严肃克制内容", "安静治愈（andy）", "演示幻灯片"],
+    "profile": "sottsass.md",
+    "canonicalRuntimeMd": "src/theme/themes/sottsass/sottsass.md"
+  }
+]

package/template/.claude/skills/beautiful-article/theme-profiles/knuth.md

@@ -0,0 +1,60 @@
+# Theme Profile · knuth（学术预印本）
+
+> 这是给 **AI 写作时读** 的 authoring profile，不是 CSS。CSS token 由组件库
+> 运行时主题持有（`data-theme="knuth"`）。本文件是"如何选择和使用这个主题"。
+> 详尽版本见组件库 canonical md：`src/theme/themes/knuth/knuth.md`（写代码 /
+> 公式 / 媒体 / Raw 前请读它）。
+
+- **runtime theme id**：`knuth`（`<ThemeProvider theme="knuth">`）
+- **气质**：学术 / 科学排版。给报告穿上期刊 / arXiv 预印本的外衣：Computer Modern
+  衬线、编号小节、图 / 表 / 公式编号、两端对齐正文、引用密集、公式优先。完整继承
+  data-ink 纪律。与 `tufte` 的随笔式边注分明：`knuth` 是"读一篇正式论文"。
+
+## 适合 / 不适合的文章类型
+
+- **适合**：`paper` / `preprint`、`research` / 科研调研、`literature-review` / 文献综述、
+  技术白皮书、形式化分析、公式 / 定理 / 引用密集的 `explainer` / `full-report`。
+- **不适合**：温暖叙事（`press`）；中性产品文档（`vignelli`）；暗底工程现场（`shannon`）；幻灯片。
+
+## 排版气质
+
+- 正文与标题用 Computer Modern / Latin Modern 衬线（→ Source Serif 4 / Georgia / 宋体回退）。
+- 标签 / 图注 / 表头用 CMU Sans 一脉小字号；数学用 KaTeX（`Formula`）。
+- 正文 ~16.5px，行距 1.58；标题用粗衬线（weight 700）取论文标题分量。强调不用斜体（协议级禁用）。
+- **倾向两端对齐**（justify），营造印刷论文的整齐块面。
+
+## Raw 风格
+
+像论文中作者亲手排的一张 Figure。
+
+- 约束的是**气质**（正式、克制、公式 / 编号优先、可核查），不是**媒介**。
+- 典型：内联 SVG 图表、坐标轴 / 函数曲线 / 推导示意、可交互参数演示、定理 / 证明结构图、
+  带 "Figure N." 题注的图版。
+- 构图：克制留白、清晰坐标与标注、学术蓝作结构线索；每条线有含义。颜色只用 `--ra-*`。
+- 动效：默认无；必须交互只用即时响应轻过渡，不用循环装饰。
+
+## 媒体（图片 / 视频 / 音频）风格
+
+- 适合：数据图 / 实验结果图、示意图 / 流程图 / 架构图、论文截图、表格、低饱和摄影、手稿 / 推导。
+- 每张图配 "Figure N." 式 caption / source / alt；构图留白充足、主体清楚。
+- 色彩低饱和贴近纸墨，强调只用学术蓝或警示红承载信息。
+
+## 代码 / 公式风格
+
+- `CodeBlock` 像专著里的代码清单：浅纸 surface + 发丝线，不用暗色编辑器窗口。行号退后、从容。
+- Prism token 从主题派生：标签 / 函数用学术蓝 accent，关键字 / 风险用 risk 红，字符串用绿，
+  注释用 muted。
+- `Formula` 是本主题主角：块级公式从容上下留白、编号靠右（(1)(2)(3)），行内与正文无缝。
+
+## 禁止项
+
+- 卡片、面板、填色块、投影、圆角；比 `#C7C6BB` 更深的网格线。
+- 把学术蓝当装饰；第二个红色用于"警示"以外；emoji / 图标当装饰。
+- 库存 hero 图、3D 插画、渐变背景、装饰光斑、霓虹、高对比终端黑底代码。
+- Raw / 媒体变成营销素材或 SaaS 首页，而非论文图版。
+
+## 不同信息密度下的表现建议（建议，非限制）
+
+- `100% paper / full-report`：正式长文 + 编号小节 + 公式 / 图表编号，引用密集。
+- `60-80% research / review`：保留核心推导 + 关键图表，正文为主体。
+- `40% explainer`：Raw 偏公式 / 函数图解，文字更短，仍保持论文气质。

package/template/.claude/skills/beautiful-article/theme-profiles/press.md

@@ -0,0 +1,61 @@
+# Theme Profile · press(书卷 / 编辑)
+
+> 这是给 **AI 写作时读** 的 authoring profile，不是 CSS。CSS token 由组件库
+> 运行时主题持有（`data-theme="press"`）。详尽版本见组件库 canonical md：
+> `src/theme/themes/press/press.md`（写代码 / 公式 / 媒体 / Raw 前请读它）。
+
+- **runtime theme id**：`press`（`<ThemeProvider theme="press">`）
+- **气质**：出版物级长读物（参照 Stripe Press）。与 tufte 同宗、共享 Data-Ink 的
+  结构纪律（以线代框、内联注、去垃圾表格，绝不用卡片与投影），但人格更外放：把报告
+  当成一本被认真设计过的书来排。tufte 让你"凑近读"，press 请你"从一臂之外读一本书"。
+
+## 适合 / 不适合的文章类型
+
+- **适合**：`essay`、`briefing`、`visual-essay`、`longform`（叙事 / 出版型）、
+  `explainer`（偏人文）。需要从容阅读的长文、随笔、白皮书、产品手记。
+- **不适合**：极度密集、需大量边注的数据型报告（那是 tufte 主场）；演示幻灯片。
+
+## 排版气质
+
+- 正文与标题用当代过渡式衬线（Newsreader → Source Serif 4 / Spectral / Georgia / 宋体），
+  气质比 tufte 更现代、更"成书"。
+- 正文偏大（~17px），行距 1.7；标题字号拉开（h1≈3rem），靠体量而非黑体取得分量。
+- 一个浓郁主色（氧化血红）串起全篇：章节号、强调线、Hero、目录高亮。禁用斜体。
+
+## Raw 风格
+
+可以比 tufte 更有版式感，但仍像为文章专门设计的一页内插图。
+
+- 首选：出版物式分栏示意、暖色信息图、小型交互标尺、章节间节奏图、带精细 caption 的
+  SVG、可轻微展开 / 切换的解释控件。
+- 构图：更大留白、更强标题层级，氧化血红作识别线索；填色可比 tufte 多一点但克制。
+- 动效：允许短促、柔和、一次性过渡；避免无限循环装饰动画。
+- 自定义 CSS / SVG / React 仍必须用 `--ra-*` token，不引入新品牌色或冷色渐变。
+
+## 媒体（图片 / 视频 / 音频）风格
+
+- 适合：暖色真实摄影、书籍 / 纸张 / 工作台细节、产品界面截图、低饱和 editorial 插图、
+  精修信息图、手稿 / 笔记 / 版面草图。
+- 构图主体清楚、留白充足、色温偏暖；可比 tufte 更完整保留产品上下文，但要裁掉噪声。
+- 图注像出版物 caption，简洁说明来源与上下文，不写营销口号。
+
+## 代码 / 公式风格
+
+- `CodeBlock` 像一本技术书里的代码页：温暖、清晰、有精修感，但不变成 IDE 截图。
+  奶油纸上的浅 code surface + 线边界，行号比 tufte 更从容。
+- Prism token 色从 press token 派生：标签 / 函数用氧化血红 accent，字符串用低饱和绿，
+  关键字 / 风险用更热的 risk。
+- `Formula` 像书页里的排版公式，块级公式允许更从容留白，caption 像出版物题注。
+
+## 禁止项
+
+- 卡片、面板、填色块、投影、圆角。
+- 把主色当装饰滥用（它只承载结构与品牌识别）；第二个红色用于"警示"以外的用途。
+- emoji / 图标当装饰。
+- 图片或 Raw 变成营销落地页 / SaaS 首页 / 仪表盘大屏，而非出版物里的图版。
+- 冷蓝紫 SaaS stock 图、3D 渲染图标、廉价渐变背景、无信息量 hero 氛围图。
+
+## 不同信息密度下的表现建议（建议，非限制）
+
+- `100% longform`：深度出版文章，体量即层级，Raw 作精修插图。
+- `40-60% briefing / visual-essay`：更强编辑节奏与图文留白，视觉块占比更高，仍是文章。

package/template/.claude/skills/beautiful-article/theme-profiles/shannon.md

@@ -0,0 +1,64 @@
+# Theme Profile · shannon（暗色工程证据）
+
+> 这是给 **AI 写作时读** 的 authoring profile，不是 CSS。CSS token 由组件库
+> 运行时主题持有（`data-theme="shannon"`）。本文件是"如何选择和使用这个主题"。
+> 详尽版本见组件库 canonical md：`src/theme/themes/shannon/shannon.md`（写代码 /
+> 公式 / 媒体 / Raw 前请读它）。
+
+- **runtime theme id**：`shannon`（`<ThemeProvider theme="shannon">`）
+- **气质**：`tufte` 的"夜间工程版"。温暖石墨暗底、暖白墨、唯一一束琥珀信号色。
+  完整继承 data-ink 纪律（以线代框、内联注、去垃圾表格、色彩承载含义），只是把
+  场景搬到暗底的工程现场。**非纯黑、非 #0D1117 赛博暗、无霓虹、无发光。**
+
+## 适合 / 不适合的文章类型
+
+- **适合**：`postmortem` / 故障复盘、`system-design` / 架构决策、`benchmark` / 性能分析、
+  技术 / AI / 算法 `explainer`、`review`、`tutorial`。`CodeBlock` `DiffReview`
+  `Incident` `RiskList` `Decision` 密集的内容尤其契合。
+- **不适合**：需打印的正式文档（暗底费墨，打印会被强制白底）；温暖叙事 / 出版随笔
+  （`press` / `knuth`）；10 米外观看的幻灯片。
+
+## 排版气质
+
+- 正文与标题用技术人文 sans（IBM Plex Sans → Söhne → system-ui），字重 400，靠字号取分量。
+- **等宽体被刻意抬升**（IBM Plex Mono / Berkeley Mono）：章节号、时间戳、指标、键值
+  一律 mono，营造工程日志感。
+- 正文 ~16px，行距 1.6；强调靠字重 / 颜色 / 间距，不用斜体（协议级禁用），不用厚黑体。
+
+## Raw 风格
+
+像作者在暗底为当前段落手绘的一张仪表小图。
+
+- 约束的是**气质**（暗底、线条化、信号克制、工程证据），不是**媒介**。
+- 典型：暗底内联 SVG、细线折线 / 散点 / 火焰图 / 时序图、可拖动阈值线、mono 标注、
+  微型 sparkline、终端式状态条。
+- 构图：少填充、多线条；每条线都有含义。颜色只用 `--ra-*`，强调用琥珀 accent 或警示红。
+- 动效：默认无；必须交互只用即时响应或极轻过渡（≤120ms），不用循环装饰。
+
+## 媒体（图片 / 视频 / 音频）风格
+
+- 适合：真实监控图 / 火焰图 / trace、终端截图、架构 / 时序 / 拓扑细线图、暗底数据可视化、
+  低饱和产品界面局部。
+- 构图暗底留白充足、主体清楚；必须配清晰 caption / source / alt；截图裁掉无关 chrome。
+- 色彩贴近暗纸，强调只用琥珀或警示红承载信息。
+
+## 代码 / 公式风格
+
+- `CodeBlock` 是暗底第一公民但仍是工程证据：暗纸轻 surface + 暗发丝线，不用发光边框 /
+  彩色标题栏 / 玻璃拟态。行号可见但退后。
+- Prism token 从主题派生：结构 / 标签 / 函数用琥珀 accent，关键字 / 风险用 risk 红橙，
+  字符串 / 成功路径用低饱和绿。
+- `Formula` 像仪表标注，块级只用发丝线与留白承载。
+
+## 禁止项
+
+- 卡片、面板、填色块、投影、圆角、发光边框；比 `#45423A` 更亮的网格线。
+- 纯黑 / `#0D1117` 赛博暗、霓虹高亮、彩虹语法、过饱和科技蓝紫。
+- 把琥珀信号色当装饰；第二个红色用于"警示"以外；emoji / 图标当装饰。
+- 媒体 / Raw 变成赛博朋克氛围视觉而非工程证据（仪表盘大屏拟物、粒子背景、玻璃拟态）。
+
+## 不同信息密度下的表现建议（建议，非限制）
+
+- `100% longform / postmortem`：克制长文 + 工程证据，Raw 点亮关键信号 / 时序。
+- `60-80% system-design / explainer`：保留核心架构图 + 代码证据，正文仍是主体。
+- `40% briefing`：Raw 偏暗底图解 / 指标，文字更短，仍是文章形态。