| name | quiet-editorial |
| description | 小咪的「安静编辑 + 蓝图」工作流文档 HTML 风格——暖白底、衬线正文、电光蓝单焦点、像素标题、PART/FIG 命名、散文优先、把可视化结构画成蓝图线稿。 当小咪要把工作内容做成网页/HTML 文档时使用，尤其是：决策记录、调研结论、任务/项目进度、阶段或每日工作日志、方案对比/评审、复盘笔记。 触发词包括「安静编辑风 / quiet editorial / 蓝图风 / 工作流文档 / 工作笔记 / 决策记录 / 进度记录 / 用我的工作流风格 / makingsoftware 那种」。 只要小咪让你把一段工作内容整理成一个独立 HTML 页面、且不是要 cozy-clay 暖色黏土风，就用本 skill；不确定走哪种风格时先问一句。 本风格是 cozy-clay（暖色黏土、活泼、信息密）的反面：克制、安静、主次分明、低信息密度。 |
Quiet Editorial — 安静编辑 + 蓝图
小咪专属的工作流文档风格。灵感来自 anthropic.com 的字体语言与 makingsoftware.com 的技术手册/蓝图排版。
一句话气质：像一本排版考究的技术手册——暖白纸、衬线正文、巨量留白、近乎单色，只用一个电光蓝点在该点的地方。读起来是「一份会读的文档」，不是一叠幻灯片。
怎么用
- 复制
assets/template.html 作为底座，原样保留 <style> 的配色变量与组件系统——这是风格的本体，不要改色板，不要加卡片阴影，不要换成多色信息图。
- 把占位符（
__TITLE__、PART N 的主题词、FIG x.y 图、REF 条目等）换成真实内容。
- 按需增删 PART 段与 FIG 图；用不到的组件（重点句、图片、线稿图）整块删掉即可。
- 产出后在浏览器里看一眼，确认主次清楚、没有横向溢出、像素标题单行不换行。
什么时候不用
- 用户要的是 repo 级产品/设计系统源文档、UX 规划或前端决策依据：先走
$design，不要直接套这个 HTML 风格。
- 用户给了参考图、截图或 live URL，并要求实现到视觉相似：走
$visual-ralph 的参考图批准、截图和视觉 verdict 流程；本 skill 只可作为风格参考，不替代视觉验收。
- 用户要暖色、活泼、卡片化、信息密度更高的页面 / dashboard / 海报：用
cozy-clay，不要把黏土风组件混进本风格。
- 用户要产品官网、营销 landing、交互式应用或多页面站点：除非明确要求“工作流文档”，否则不要把它做成 quiet-editorial 长文。
和其它设计工作流的分工
$design 管设计契约：当 repo 还没有 DESIGN.md，或需要产品目标、组件边界、可访问性、响应式规范时，先写/刷新设计源文档。$visual-ralph 管视觉实现闭环：当有目标截图、生成参考图或 live URL 时，必须先确认参考，再用截图、verdict 和必要的 pixel diff 迭代。quiet-editorial 管单页文档成品：拿到一段工作内容后，负责把结构拆清楚、把机制画成蓝图线稿、输出一个可直接打开的静态 HTML。
三条不可破的底线（破了就不是这个风格）
- 散文优先，禁幻灯片。正文是连贯的段落，层次靠排版（首字下沉、页边章节标记、重点句、发丝线、脚注）做，不是把内容切成一格格带大横幅标题的卡片。卡片堆叠 = PPT 感 = 本风格最大的敌人。
- 一个焦点色。全页只有电光蓝
--accent 一个彩色，且只点在：像素标题、图（线稿描边/焦点节点、图片边框）、链接、PART/FIG/REF 标记。正文永远是黑/灰，背景永远是暖白。多一个彩色就破功。
- 文字克制。不是所有话都要写——能删的删，宁可留白。认知负担越低越好。
内容沉淀：先把结构讲清
- 定义句直接给产品定义：用「X 是 Y」开场，优先说明使用场景、用户动作、产品边界。少用「不是 A，也不是 B，而是 C」这类模板句。
- 机制页先拆链路：当主题包含两种机制、两类用户路径、两种生产模式时，先画成并列链路。每条链路写清
输入 → 处理 → 产物 → 为什么会被使用/传播。
- 图示承担第一眼理解：读者扫一眼图，就要知道核心路径和焦点。正文负责解释为什么成立，不要用排比文字替代结构图。
- 重点句只留真正的判断：
.pq 只放不可替代的结论或边界，避免口号化的「最终都回到……」。
- 样本图是证据板，不是装饰图：内部参考、竞品截图、meme 样本等，用
.sample-board 或 .imrow 展示，并写明它们验证了哪个机制。涉及外部素材时标注仅用于内部讨论，不作为产品或商用素材。
视觉提取三步法（这个风格的灵魂）
人是视觉动物。内容里凡有可转化的结构，不要用文字硬讲，也不要塞进卡片，而要：
- 识别可转化结构：管线 / 流程 / 前后对照 / 分解 / 层级 / 状态机 / 时间线。
- 把逻辑理通：真实的阶段、依赖、因果、焦点在哪——图承载的是逻辑，不能为画而画、不能画错。
- 画成精确线稿：蓝图风（细描边 + mono 标注 + 焦点节点填色），嵌进散文里。
分工记牢：图承载逻辑，散文承载叙事，二者配合。template 里的四阶段管线和双链路机制图都只是范例，按真实结构改节点数与连接。
命名规范（层次靠它说清）
PART 1 / 2 / 3… = 章节，标记落在左页边（mono + 蓝），下一行放主题词与元信息（日期等）。简洁的数字编号，不要用 § 或其它符号。FIG <part>.<n>（如 FIG 2.1、FIG 3.1、FIG 3.2）= 图，父子编号直接说明这张图属于哪个 PART。FIG 只标真正的图，绝不用在正文段上。- 图必须缩进在所属 PART 的内容栏（
grid-column:2，与正文左缘对齐），不要满幅越界到左页边——靠空间从属关系让人一眼看出「这图属于这个 PART」。
- 内容栏标题用
.ptitle。左页边的 PART 只做索引，主题标题放在内容栏，蓝色、短句、克制。不要让左侧栏承载大段信息。
REF · 参考 = 固定的页脚区，放出处、相关 issue/PR、文献、相关文档链接。每篇都以它结尾。
报头规范
- 左：大像素标题（
Cubic 11 像素中文字 + 电光蓝），6~8 全角字最佳，单行不换行（用 white-space:nowrap）。字号取 11 的整数倍（55/66）边缘最脆；font-smoothing:none 让像素更硬。
- 右下：两行小字，必须比标题矮、底对齐，且站在下方点划线上方留一道小隙（别重合也别浮太高）。
- 第 1 行：一句短描述（不折行）。
- 第 2 行：固定为 issue 代号，并做成超链接（如
ISSUE-123 · Epic ABC → 指向你的 issue tracker）。
- 下方：细密小方块点划线满幅收口。
排版底层（来自 Butterick《Practical Typography》/ Bringhurst《Elements of Typographic Style》）
- 行长 ≈ 66 字符；行距 1.75
1.85；正文 1819px。机制密度高的文档用 18px，纯长文用 19px。
- 左页边栏保持轻：默认
78px，只放 PART N 和一行短元信息。不要把左栏做成占空间的目录。
- 段落用左对齐（中文两端对齐易出字距不匀，已选左对齐）。
- 开篇用首字下沉，明示「这是要读的正文」。
- 副标题用行内嵌入式 mono 小标题（
.run），不用大横幅。
- 旧值/废弃用删除线；行内强调用斜体。
- 重点句：同正文字号 + 灰色 + 左侧蓝标，整篇至多 1~2 处，不放大成大引文（会突兀）。
字体与资源
- 正文：
Newsreader + 中文 Noto Serif SC；标注/图号/元信息：IBM Plex Mono；标题：Cubic 11（像素中文）。
Cubic 11 经 jsdelivr CDN 加载，TTF ≈ 2.77MB（全字库）。内部稿可直接用 CDN；正式对外发布请子集化只保留标题用到的字形（可降到几十 KB）。- 图片嵌入：实拍/截图/生成图用发丝边框 + mono 图注，与线稿同一套语言；多图对照用
.imrow.c3，机制样本对照用 .sample-board。图片务必压缩 / 转 webp，别让大图拖垮文档。
动效
入场轻柔上浮（.rise），尊重 prefers-reduced-motion。克制即可——心向往之 sutera.ch 那种重动效，但日常工作稿不强求。
交付前自检
参考样张
assets/template.html 本身就是完整范例：含报头、PART 章节、内容栏标题、FIG 线稿图、双链路机制解释、样本图板、重点句、REF 区一应俱全。直接复制它开工即可。
