Wechat Typesetting Cy
- 183 installs
- 56 repo stars
- Updated July 28, 2026
- cy-chenyue/wechat-typesetting-cy
Turn WeChat Official Account drafts from plain text or Markdown into paste-ready, styled HTML using blue magazine or dark tech templates.
About
wechat-typesetting-cy is an agent skill for solo builders and creators who publish on WeChat Official Accounts and want professional layout without hand-coding inline styles. It ingests plain text or Markdown, infers whether the piece is analytical essay or product-and-data reporting, and applies either the blue-minimal or dark-tech design system. The workflow selects a template, reads bundled reference specs and HTML patterns, decomposes the article into structural elements such as headlines, chapters, pull quotes, metrics, and lists, then maps each block to template-specific components with correct typography and colors. Operators can also submit existing HTML for a checklist-style review. It matters because WeChat’s editor rewards consistent, mobile-friendly markup; this skill standardizes that output while keeping creative control over template choice.
- Two visual templates: blue-minimal (magazine serif) and dark-tech (card-based tech)
- Auto template pick from content signals or explicit user choice, with fallback prompt
- Dual modes: generate styled HTML from source or audit existing HTML for layout fixes
- Component maps for titles, chapter watermarks, quote blocks, timelines, and END markers
- Loads references/{template}.md, assets/templates/{template}.html, and shared guidelines.md
Wechat Typesetting Cy by the numbers
- 183 all-time installs (skills.sh)
- Ranked #958 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 29, 2026 (Skillselion catalog sync)
npx skills add https://github.com/cy-chenyue/wechat-typesetting-cy --skill wechat-typesetting-cyAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 183 |
|---|---|
| repo stars | ★ 56 |
| Security audit | 3 / 3 scanners passed |
| Last updated | July 28, 2026 |
| Repository | cy-chenyue/wechat-typesetting-cy ↗ |
What it does
Turn WeChat Official Account drafts from plain text or Markdown into paste-ready, styled HTML using blue magazine or dark tech templates.
Files
微信公众号智能排版
没有模板。 每篇文章现场设计：版面结构、阅读节奏、风格气质、配色字体，全部从这一篇的内容推导出来——两篇不同的文章不应该得到同一套排版。唯一不变的是底线：微信公众号编辑器里粘贴后必须正常显示。
流程：读懂文章 → 现场设计（产出设计方案 + 备选气质）→ 用微信安全手法实现 → 一键复制进编辑器。
资源分两类——硬约束必读，参考仅启发：
| 文件 | 作用 | 何时读 |
|---|---|---|
references/wechat-compat.md | 微信编辑器兼容硬约束 + 自检清单（底线） | 每次生成/检查前必读 |
references/design-craft.md | 设计感手艺库：记忆点 / 字号对比 / 装饰 / 色彩 / 留白（上限） | 每次设计与生成时必读 |
references/components.md | 微信安全实现手法（DOM 结构已验证；视觉样式由设计方案决定） | 生成 HTML 时 |
references/guidelines.md | 排版审美纪律（层级/节奏/色彩） | 设计与质检时 |
references/style-directions.md | 参考案例集：八种已验证的气质组合（只供启发，禁止整套照搬） | 需要灵感或用户点名某风格时 |
assets/examples/*.html | 两套完整成品示例（看手艺，不是抄答案） | 可选 |
任务类型
1. 生成排版 —— 用户给文章（纯文本/Markdown），输出可粘贴的排版 HTML（下方主流程） 2. 检查排版 —— 用户给已有 HTML，对照 compat 硬约束 + 质量规范出问题清单，确认后修复 3. 换风格重排 —— 用户对结果说"换成 XX 风"，内容结构不动，换 token 重新生成
核心原则
先分清两类规则——这是整个技能的骨架：
- 硬规则（只有两类，与文章无关，永不可违反）：① 微信兼容（
wechat-compat.md，违反就崩）；② 内容零改动（违反就是改了用户的文章）。这两类是非黑即白的红线，自检必须 100% 通过。 - 设计判断（其余全部，因文而异，没有红线）：风格、字号、对比、构图、配色、留白、节奏、装饰……
design-craft.md/guidelines.md里的所有数字都是"多数文章的好起点"，不是必须达标的尺。判断"这篇文章要什么"永远高于"规范说几"——极简要弱对比、对称要居中、短文不要重音时，就该违背默认值，服从内容。
两条硬规则展开：
- 内容零改动（第一铁律）：排版不是编辑。给到的文章必须完整展示——一句不删、一字不改、不改写不润色、不调整叙述顺序、不复制重复。金句等组件是把原句"原位升格"呈现（换个版式，不是摘抄一份）。允许转化的只有三类结构记号：Markdown 语法、枚举词（"步骤一：" → 设计编号）、媒体标记（→ 占位块）；超长段落可以按句拆分（一个字都不动）。版式自身元素（编号 / 分隔 / END / 占位块 / 作者卡占位）不得携带任何新的文字内容——不自拟小标题；副题 / 摘要只有原文自带时才有，没有就不造
- 兼容是底线：浏览器里再好看，粘贴后崩了就是零分——所有输出必须过 wechat-compat 自检
- 风格服务内容、内容大于样式：先读懂气质再决定穿什么衣服；卡片装饰是调味料，正文呼吸感优先
生成排版主流程
Step 1 · 内容画像
通读全文，提取：
- 题材域：科技 / 商业财经 / 观点评论 / 情感文学 / 生活方式 / 健康育儿 / 教程方法论 / 盘点清单……
- 气质坐标：理性 ↔ 感性；严肃 ↔ 轻松；锐利 ↔ 温和
- 结构素材：有没有数据点、时间线、步骤、清单、金句、引用、案例、代码、外链
- 媒体标记：识别所有图片/视频位置——
、裸图片链接、【图：…】、【视频：…】、（此处放图）等写法都算；区分"有 https 地址的图"和"本地图/只标了位置的图/视频" - 篇幅密度：字数、章节数，决定版面松紧
文章太短（< 300 字）或气质严重混杂时，可以问用户一个问题确认定位；其余情况直接判断。
Step 2 · 现场设计（核心步骤）
不查模板、不选方向——基于 Step 1 的画像，像设计师一样回答五个问题，答案合起来就是这一篇的设计方案：
1. 读者读完该带走什么感觉？ → 气质定位，一句话（如"安静的深夜电台" / "发布会现场" / "周末厨房"） 2. 文章的信息是什么形状的？（线性叙事 / 并列论点 / 步骤教程 / 数据论证 / 时间线 / 混合）→ 版面策略：让哪种内容形态当视觉主角、章节怎么组织、版面密度多大 3. 阅读节奏该多快？（沉浸长读 / 快扫跳读）→ 字号层级、行距、留白量、强调密度 4. 这篇文章的世界是什么颜色和质感的？ 从内容意象/行业/品牌取色（咖啡=棕、微信=绿、深夜=暖黄）→ 配色体系（页底色/正文色/主强调/浅底，附取色理由）+ 字体倾向（衬线的文气 / 无衬线的利落 / 等宽的代码感） 5. 形态语言用什么？（直角细线的严谨 / 圆角色块的轻快 / 无框留白的安静 / 深底卡片的密度感）→ 标题、强调、分隔、卡片的具体做法
产出一份 6-9 行的设计方案（气质 / 版面策略 / 节奏 / 配色及理由 / 形态语言 / 视觉记忆点），外加 2 个备选气质方向（各一句话+主色）。交付时原样报告给用户，一句话即可切换重排。
视觉记忆点是必填项：读者截图最可能截哪一屏？标题区封面构图 / 贯穿全文的装饰语言 / 一处大胆的金句版面，三选一（手法见 design-craft.md）——没有记忆点的设计方案是不完整的。
反平庸三个着力点（design-craft.md 详述，是倾向不是硬线，跟着文章气质用）：① 字号对比敢拉开——别无意识全压在 15/16/17（但极简的弱对比是有意选择）；② 警惕无脑居中——构图随气质选（但对称/极简文章居中可能正是对的）；③ 主色克制、大色面少、有情绪高点的文章给留白重音。装饰尽量从本篇内容意象长出来，少用通用符号库默认项。这些帮你避开平庸，但这篇文章需要别的时，服从文章。
设计自由，纪律不自由：三色纪律、字号 ≤ 4 档、组件种类 ≤ 5、guidelines.md 全部审美规则照守。
- 用户指定风格 / 品牌色 / 要和上一篇保持一致 → 作为设计输入，优先满足
- 没把握时可翻
style-directions.md的参考案例找灵感——看某种质感是怎么做出来的，禁止整套照搬任何案例的配色与组合；好设计经得起一个检验：换一篇文章，这套设计就不再是最优解
Step 3 · 读规范
生成前读齐：wechat-compat.md（硬约束）→ design-craft.md（设计感手艺）→ components.md（安全实现手法）→ guidelines.md（审美纪律）。
Step 4 · 结构映射
把文章元素映射到实现手法。组件库给的只是微信安全的 DOM 结构（多列必须 table、列表必须 p+span、深色页必须 table 骨架……）；每个组件的视觉样式——颜色、圆角、边框、装饰、间距——按本篇设计方案重新定，示例里的具体数值只是演示，不是答案：
| 文章元素 | 实现手法（形态按设计方案定） |
|---|---|
| 标题 + 副题 | 头部标题区（杂志式 / 居中式 / 极简式，或自创安全形态） |
| 章节 | 章节标题（水印编号 / 序号色块 / 左色条 / 居中细线，或自创） |
| 核心观点 / 金句 | 金句卡（色底 / 边框 / 留白居中，或自创） |
| 数据点 ≥ 2 个 | 数据栏（table 多列） |
| 并列要点 | 清单（p + 序号 span，绝不用 ul/li） |
| 操作步骤 | 步骤块（STEP 标签） |
| 时间顺序事件 | 时间线（table 左点右文） |
| 他人观点 / 引文 | 引用卡（标注来源） |
| 多方案对比 | 对比表 |
| 代码 | 代码块（pre-wrap，不用 pre 标签） |
| 图片（https 外链） | <img> + 图注（粘贴时编辑器自动转存） |
| 本地图 / 只标位置的图 | 图片占位块（可视虚线框 + 编号 + 建议内容） |
| 视频 | 视频占位块（视频无法随粘贴带入，编辑器内插入；禁止 video/iframe 标签） |
| 外链 | 正文上标 [n] + 文末参考资料（外链不可点） |
| 结尾 | 文末区（END / 互动引导 / 递进式） |
组装节奏：每章节 = 标题 + 正文（主体）+ 至多 1-2 个组件；卡片不连发；全文组件种类 ≤ 5 种。
Step 5 · 生成 HTML
1. 按设计方案给实现手法上样式，全部内联 2. 内容最顶部加风格注释（机器可读，便于复查与换风格）： <!-- 风格方向: 自定义·周末厨房暖棕（按本文设计）| 备选: 清新薄荷 / 极简黑白 --> 3. 读 assets/preview-shell.html 作外壳，替换 {{文章标题}}、{{内容底色}}、{{风格说明}}（一行：方向名 + 备选），把排版内容插入 #wechat-content 内 4. 保存为 output/{文章主题 slug}.html（换风格重排时存 output/{slug}-{方向}.html 便于对比）
Step 6 · 发布前自检
自检分两类——硬规则必须 100% 过，设计判断是反思不是验收：
A. 硬规则（不过不许交付）
1. 内容完整性（脚本校验）：运行 python3 {技能目录}/scripts/verify-completeness.py <原文文件> <输出.html> ——原文每个子句都必须在输出里找得到，未命中即有删改，修复后重跑直到通过。原文是用户口头粘贴的，先存成临时文件再校验。反向也人工核对：输出里除版式元素（编号/分隔/END/占位/作者卡占位）外，不得出现原文没有的文字 2. 微信兼容（脚本校验）：运行 python3 {技能目录}/scripts/verify-wechat-compat.py <输出.html> ——自动扫复制内容区的硬规则（flex/渐变/rgba 背景/裸 ul/h 标签/video/iframe/纯白底/深色页 table 骨架等），未通过必须修复后重跑。脚本覆盖不到的（固定 px 宽度、占位块形态）再对照 wechat-compat.md"生成后自检清单"人工过一遍
B. 设计反思（发现"哪里偷懒选了最安全刻度"，不是 pass/fail 红线）
3. 过一遍 design-craft.md"设计感自检"——字号对比够不够、封面是不是随手居中、主色滥不滥、有情绪高点的话留白够不够、装饰是不是通用符号。某项"不对"如果是这篇文章的有意选择（极简弱对比、刻意居中、短文不要重音），那就是对的，在设计方案里说明理由即可；怕的是无意识的平庸 4. 微距（接近硬规则，基本任何文章都该过）：半角标点混进中文 / 孤儿大引号 / 标题行高过松 / 数字空格不一致——改原文字符的只识别报告写进交付建议，版式层面（行高等）直接修 5. guidelines.md"质量自查"——段落节奏与可读性（同样是判断，结合文章）
另加一条忠实度检查：逐个组件核对内容是否都来自原文——排版只重组呈现，不新增数据、引语、徽章文案或修辞（"战火点燃"这类原文没有的演绎是常见溢出点）。需要补充的信息（如公众号名称）用占位注释标出让用户替换，不要代写。
Step 7 · 交付
1. open output/{slug}.html 在浏览器打开预览 2. 告诉用户怎么用：点预览页顶部 "一键复制到公众号" → 到公众号编辑器 ⌘V 粘贴；顶栏可切换手机宽度预览 3. 报告风格决策：设计方案 + 两个备选各一句话；说明"想换风格说一声，内容不动 30 秒重排" 4. 有媒体占位时，附占位清单（图 1 / 图 2 / 视频 1……各自位置与建议内容）和替换流程：粘贴后逐个"三击占位行全选 → 删除（留空框再按一次退格）→ 原位插入媒体"；视频用工具栏「视频」按钮（视频号 / 腾讯视频 / 上传素材库） 5. 润饰只建议、不动手：发现原文有可改进处（标点不统一 / 中英文之间缺空格 / 段落过长），只写进交付说明作为建议，用户点头后才改原文重排——默认交付的版本与原文一字不差 6. 提醒：粘贴后检查外链图是否自动转存成功（裂图需手动传素材库）；发布前用编辑器"预览"到手机看一遍
检查排版流程
用户给已有 HTML 时：
1. 对照 wechat-compat.md 自检清单找硬伤（粘贴后会崩的） 2. 对照 guidelines.md 找质量问题（层级、节奏、色彩纪律） 3. 输出问题清单：每条标【硬伤】/【建议】+ 位置 + 修法 4. 用户确认后修复，重新走 Step 6-7
换风格重排流程
内容画像不变，按用户点名的气质重做 Step 2 设计（或在原方案上微调），换样式重排，重走自检。 输出存 output/{slug}-{气质}.html，和原版本并存方便对比。
沉淀参考案例
某篇文章的设计特别成功，或看到好的公众号风格想收进来：在 style-directions.md 加一张案例卡（气质 / 适合内容 / 配色 / 手法要点）。记住案例永远是启发，不是模板——下一篇文章照样从内容现场设计。
output/
.DS_Store
<!--
成品示例 — 蓝调杂志方向（blue-magazine，原 blue-minimal）
白底蓝色杂志风格，主题色 #0044FF
用途: 展示该方向的组件组装方式，生成时参考模式而非整体套用
发布方式: 浏览器打开 → 选中内容复制 → 粘贴进公众号编辑器（新版预览外壳见 assets/preview-shell.html）
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>微信公众号排版预览</title>
<style>
/* 预览用外框，实际发布时不需要 */
body { margin: 0; padding: 40px; background: #f5f5f5; }
.preview-wrapper {
max-width: 677px;
margin: 0 auto;
background: #fff;
box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}
</style>
</head>
<body>
<div class="preview-wrapper">
<!-- ========== 正文开始：以下内容复制到微信编辑器 ========== -->
<!-- [组件] 头部 Banner（两列用 table，微信不支持 flex） -->
<section style="background-color: #0044FF; padding: 16px 24px; margin-bottom: 32px;">
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border: none;">
<tr>
<td style="border: none; text-align: left; vertical-align: middle;"><span style="color: #fefefe; font-size: 16px; font-weight: 700; font-family: 'Times New Roman', serif; letter-spacing: 1px;">2026</span></td>
<td style="border: none; text-align: right; vertical-align: middle;"><span style="color: #fefefe; font-size: 11px; font-weight: 400; font-family: 'Times New Roman', serif; letter-spacing: 3px; text-transform: uppercase;">YOUR ENGLISH SUBTITLE HERE</span></td>
</tr>
</table>
</section>
<!-- [组件] 标签 + 大标题 + 副标题 -->
<section style="padding: 0 24px; margin-bottom: 16px;">
<!-- 标签 -->
<p style="margin: 0 0 12px 0; padding: 0;">
<span style="font-size: 14px; color: #0044FF; font-weight: 600; letter-spacing: 2px; font-family: 'Times New Roman', serif;">标签文字</span>
</p>
<!-- 大标题 -->
<p style="margin: 0 0 12px 0; padding: 0;">
<span style="font-size: 32px; font-weight: 900; color: #000000; letter-spacing: -1px; line-height: 38.4px; font-family: 'Times New Roman', serif;">文章大标题，<br>可以换行显示</span>
</p>
<!-- 副标题 -->
<p style="margin: 0; padding: 0;">
<span style="font-size: 14px; color: #888888; font-weight: 400; letter-spacing: 0.5px;">副标题或一句话摘要写在这里</span>
</p>
</section>
<!-- [组件] 蓝色分割线 -->
<section style="height: 4px; background-color: #0044FF; margin: 24px 24px;"></section>
<!-- [组件] 正文段落区块 -->
<section style="padding: 32px 24px 28px; margin: 0 0 24px 0; line-height: 24px; font-size: 15px; letter-spacing: 0.5px;">
<p style="margin: 0 0 16px 0; padding: 0; text-align: justify; line-height: 1.75; font-size: 15px; color: #1A1A1A; letter-spacing: 0.5px; font-family: 'Times New Roman', serif;">
这里是正文段落。正文使用 15px 字号，1.75 倍行高，两端对齐，字间距 0.5px。颜色为深灰 #1A1A1A 而非纯黑，阅读更舒适。每段之间留 16px 间距。
</p>
<p style="margin: 0 0 16px 0; padding: 0; text-align: justify; line-height: 1.75; font-size: 15px; color: #1A1A1A; letter-spacing: 0.5px; font-family: 'Times New Roman', serif;">
第二段正文。可以包含<strong style="color: #0044FF;">蓝色加粗强调</strong>，也可以用<strong style="color: #1A1A1A;">普通加粗</strong>来突出关键信息。还可以加<span style="text-decoration: underline; text-decoration-color: #0044FF; text-underline-offset: 4px;">蓝色下划线强调</span>。
</p>
</section>
<!-- [组件] 蓝色分割线 -->
<section style="height: 4px; background-color: #0044FF; margin: 0 24px 24px;"></section>
<!-- [组件] 章节标题（带水印编号） -->
<section style="padding: 40px 24px 0;">
<!-- 水印编号 -->
<p style="margin: 0; padding: 0;">
<span style="font-size: 56px; font-weight: 900; color: rgba(0, 68, 255, 0.1); font-family: 'Times New Roman', serif; line-height: 1;">01</span>
</p>
<!-- 章节标题 -->
<p style="margin: 0 0 24px 0; padding: 0;">
<span style="font-size: 22px; font-weight: 800; color: #000000; letter-spacing: -0.5px; line-height: 1.4; font-family: 'Times New Roman', serif;">这是一级章节标题，<br>可以分行显示</span>
</p>
</section>
<!-- [组件] 正文段落 -->
<section style="padding: 0 24px 28px; line-height: 24px;">
<p style="margin: 0 0 16px 0; padding: 0; text-align: justify; line-height: 1.75; font-size: 15px; color: #1A1A1A; letter-spacing: 0.5px; font-family: 'Times New Roman', serif;">
章节正文内容。保持和全文一致的排版参数。
</p>
</section>
<!-- [组件] 二级标题（蓝色） -->
<section style="padding: 8px 24px 12px;">
<p style="margin: 0; padding: 0;">
<span style="font-size: 16px; font-weight: 800; color: #0044FF; font-family: 'Times New Roman', serif;">二级小标题</span>
</p>
</section>
<!-- [组件] 正文段落 -->
<section style="padding: 0 24px 28px; line-height: 24px;">
<p style="margin: 0 0 16px 0; padding: 0; text-align: justify; line-height: 1.75; font-size: 15px; color: #1A1A1A; letter-spacing: 0.5px; font-family: 'Times New Roman', serif;">
二级标题下的正文内容。
</p>
</section>
<!-- [组件] 蓝色金句区块 -->
<section style="background-color: #0044FF; padding: 28px 24px; margin: 24px 0;">
<p style="margin: 0 0 8px 0; padding: 0; text-align: center;">
<span style="font-size: 18px; font-weight: 700; color: #FFFFFF; letter-spacing: 1px; font-family: 'Times New Roman', serif;">这里放核心金句观点</span>
</p>
<p style="margin: 0; padding: 0; text-align: center;">
<span style="font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.7); letter-spacing: 0.5px; font-family: 'Times New Roman', serif;">金句的补充说明或解释，字号更小、透明度更低。</span>
</p>
</section>
<!-- [组件] 三栏信息卡片（多列用 table，微信不支持 flex） -->
<section style="margin: 24px 24px;">
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border: 1px solid #E8E8E8;">
<tr>
<td width="33%" style="border: none; border-right: 1px solid #E8E8E8; padding: 20px 16px; text-align: center; vertical-align: top;">
<p style="margin: 0 0 4px 0; padding: 0;">
<span style="font-size: 11px; font-weight: 600; color: #888888; letter-spacing: 2px; text-transform: uppercase; font-family: 'Times New Roman', serif;">KEYWORD</span>
</p>
<p style="margin: 0 0 6px 0; padding: 0;">
<span style="font-size: 18px; font-weight: 700; color: #000000; font-family: 'Times New Roman', serif;">关键词一</span>
</p>
<p style="margin: 0; padding: 0;">
<span style="font-size: 12px; color: #888888; font-family: 'Times New Roman', serif;">简要说明文字</span>
</p>
</td>
<td width="33%" style="border: none; border-right: 1px solid #E8E8E8; padding: 20px 16px; text-align: center; vertical-align: top;">
<p style="margin: 0 0 4px 0; padding: 0;">
<span style="font-size: 11px; font-weight: 600; color: #888888; letter-spacing: 2px; text-transform: uppercase; font-family: 'Times New Roman', serif;">KEYWORD</span>
</p>
<p style="margin: 0 0 6px 0; padding: 0;">
<span style="font-size: 18px; font-weight: 700; color: #000000; font-family: 'Times New Roman', serif;">关键词二</span>
</p>
<p style="margin: 0; padding: 0;">
<span style="font-size: 12px; color: #888888; font-family: 'Times New Roman', serif;">简要说明文字</span>
</p>
</td>
<td width="34%" style="border: none; padding: 20px 16px; text-align: center; vertical-align: top;">
<p style="margin: 0 0 4px 0; padding: 0;">
<span style="font-size: 11px; font-weight: 600; color: #888888; letter-spacing: 2px; text-transform: uppercase; font-family: 'Times New Roman', serif;">KEYWORD</span>
</p>
<p style="margin: 0 0 6px 0; padding: 0;">
<span style="font-size: 18px; font-weight: 700; color: #000000; font-family: 'Times New Roman', serif;">关键词三</span>
</p>
<p style="margin: 0; padding: 0;">
<span style="font-size: 12px; color: #888888; font-family: 'Times New Roman', serif;">简要说明文字</span>
</p>
</td>
</tr>
</table>
</section>
<!-- [组件] 目录/问题列表卡片 -->
<section style="background-color: #F7F7F7; padding: 24px; margin: 24px 24px;">
<!-- 目录标题 -->
<p style="margin: 0 0 16px 0; padding: 0;">
<span style="font-size: 12px; font-weight: 600; color: #0044FF; letter-spacing: 3px; text-transform: uppercase; font-family: 'Times New Roman', serif;">CONTENTS</span>
</p>
<!-- 目录两列布局（table 实现，微信不支持 flex） -->
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border: none;">
<tr>
<td width="50%" style="border: none; padding: 0 12px 0 0; vertical-align: top;">
<p style="margin: 0 0 12px 0; padding: 0; font-size: 13px; color: #333333; line-height: 1.6; font-family: 'Times New Roman', serif;">
<span style="color: #0044FF; font-weight: 700;">01</span> 第一章标题写在这里
</p>
<p style="margin: 0 0 12px 0; padding: 0; font-size: 13px; color: #333333; line-height: 1.6; font-family: 'Times New Roman', serif;">
<span style="color: #0044FF; font-weight: 700;">02</span> 第二章标题写在这里
</p>
<p style="margin: 0 0 12px 0; padding: 0; font-size: 13px; color: #333333; line-height: 1.6; font-family: 'Times New Roman', serif;">
<span style="color: #0044FF; font-weight: 700;">03</span> 第三章标题写在这里
</p>
</td>
<td width="50%" style="border: none; padding: 0 0 0 12px; vertical-align: top;">
<p style="margin: 0 0 12px 0; padding: 0; font-size: 13px; color: #333333; line-height: 1.6; font-family: 'Times New Roman', serif;">
<span style="color: #0044FF; font-weight: 700;">04</span> 第四章标题写在这里
</p>
<p style="margin: 0 0 12px 0; padding: 0; font-size: 13px; color: #333333; line-height: 1.6; font-family: 'Times New Roman', serif;">
<span style="color: #0044FF; font-weight: 700;">05</span> 第五章标题写在这里
</p>
<p style="margin: 0 0 12px 0; padding: 0; font-size: 13px; color: #333333; line-height: 1.6; font-family: 'Times New Roman', serif;">
<span style="color: #0044FF; font-weight: 700;">06</span> 第六章标题写在这里
</p>
</td>
</tr>
</table>
</section>
<!-- [组件] 蓝色分割线 -->
<section style="height: 4px; background-color: #0044FF; margin: 24px 24px;"></section>
<!-- [组件] 第二个章节示例 -->
<section style="padding: 40px 24px 0;">
<p style="margin: 0; padding: 0;">
<span style="font-size: 56px; font-weight: 900; color: rgba(0, 68, 255, 0.1); font-family: 'Times New Roman', serif; line-height: 1;">02</span>
</p>
<p style="margin: 0 0 24px 0; padding: 0;">
<span style="font-size: 22px; font-weight: 800; color: #000000; letter-spacing: -0.5px; line-height: 1.4; font-family: 'Times New Roman', serif;">第二章标题示例</span>
</p>
</section>
<section style="padding: 0 24px 28px; line-height: 24px;">
<p style="margin: 0 0 16px 0; padding: 0; text-align: justify; line-height: 1.75; font-size: 15px; color: #1A1A1A; letter-spacing: 0.5px; font-family: 'Times New Roman', serif;">
第二章正文内容。模板中每个组件都是独立的 section，可以按需组合、增删。
</p>
</section>
<!-- [组件] 结尾分割线 -->
<section style="height: 4px; background-color: #0044FF; margin: 24px 24px;"></section>
<!-- [组件] 尾部留白 -->
<section style="padding: 40px 24px; text-align: center;">
<p style="margin: 0; padding: 0;">
<span style="font-size: 12px; color: #BBBBBB; letter-spacing: 1px;">- END -</span>
</p>
</section>
<!-- ========== 正文结束 ========== -->
</div>
</body>
</html>
<!--
成品示例 — 暗夜科技方向（dark-tech）
黑底橙红科技风格
主色: #FF4500 (OrangeRed) / #FFB300 (Amber)
背景: #080808 (近纯黑)
用途: 展示整页深色 table 骨架的组装方式，生成时参考模式而非整体套用
发布方式: 浏览器打开 → 选中内容复制 → 粘贴进公众号编辑器（新版预览外壳见 assets/preview-shell.html）
微信适配注意事项：
1. 主布局用 <table border-collapse:collapse> 消除 section 间隙
2. 所有背景色用实色 hex，不用 rgba()（微信不渲染 rgba 背景）
3. 所有 <td> 加 border: none 消除白色细线
4. 不用 display:flex / gap / linear-gradient（微信不支持）
5. 文字颜色的 rgba() 可以正常使用
6. 章节内部的 <section> 卡片在同一个 <td> 内，不会产生间隙
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>微信公众号排版预览 — 暗黑科技风</title>
<style>
body { margin: 0; padding: 40px; background: #222; }
.preview-wrapper {
max-width: 677px;
margin: 0 auto;
box-shadow: 0 2px 30px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div class="preview-wrapper">
<!-- ========== 正文开始：以下内容复制到微信编辑器 ========== -->
<section data-role="outer" style="background-color: #080808; color: rgb(240, 239, 235); padding: 0;">
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0; background-color: #080808; border: none; border-width: 0;">
<!-- ==================== [组件] 封面 Banner ==================== -->
<tr><td style="background-color: #080808; padding: 24px 24px 32px; text-align: center; border: none;">
<!-- 顶部标签行 -->
<p style="margin: 0 0 24px 0; padding: 0;"><span style="font-size: 11px; color: #FF4500; letter-spacing: 4px; font-family: -apple-system, sans-serif;">► 深度调研 · 2026.03</span></p>
<!-- 主标题 -->
<p style="margin: 0 0 8px 0; padding: 0;"><span style="font-size: 36px; font-weight: 900; color: #F0EFEB; letter-spacing: 2px; font-family: -apple-system, 'Helvetica Neue', sans-serif;">OPEN</span></p>
<p style="margin: 0 0 16px 0; padding: 0;"><span style="font-size: 36px; font-weight: 900; color: #F0EFEB; letter-spacing: 2px; font-family: -apple-system, 'Helvetica Neue', sans-serif;">CLAW</span></p>
<!-- 副标题 -->
<p style="margin: 0 0 4px 0; padding: 0;"><span style="font-size: 14px; color: rgba(240,239,235,0.6);">一句话描述产品定位</span></p>
<p style="margin: 0 0 32px 0; padding: 0;"><span style="font-size: 12px; color: rgba(240,239,235,0.4);">补充说明文字写在这里</span></p>
<!-- [组件] 三列数据栏（用嵌套 table 实现，不用 flex） -->
<table width="100%" cellspacing="0" cellpadding="0" style="border-collapse: collapse; border: 1px solid #1a1a1a; border-radius: 14px; overflow: hidden;">
<tr>
<td width="33%" style="background-color: #0f0f0f; padding: 20px 12px; text-align: center; border-right: 1px solid #1a1a1a;">
<p style="margin: 0 0 4px 0; padding: 0;"><span style="font-size: 28px; font-weight: 900; color: #FF4500;">160K</span></p>
<p style="margin: 0; padding: 0;"><span style="font-size: 10px; color: rgb(84,110,122);">GitHub Stars</span></p>
</td>
<td width="33%" style="background-color: #0f0f0f; padding: 20px 12px; text-align: center; border-right: 1px solid #1a1a1a;">
<p style="margin: 0 0 4px 0; padding: 0;"><span style="font-size: 28px; font-weight: 900; color: #FF4500;">150万</span></p>
<p style="margin: 0; padding: 0;"><span style="font-size: 10px; color: rgb(84,110,122);">Agent注册</span></p>
</td>
<td width="34%" style="background-color: #0f0f0f; padding: 20px 12px; text-align: center;">
<p style="margin: 0 0 4px 0; padding: 0;"><span style="font-size: 28px; font-weight: 900; color: #FF4500;">50+</span></p>
<p style="margin: 0; padding: 0;"><span style="font-size: 10px; color: rgb(84,110,122);">平台集成</span></p>
</td>
</tr>
</table>
</td></tr>
<!-- [组件] 章节分隔带 -->
<tr><td style="background-color: #0d0d0d; height: 16px; font-size: 0; line-height: 0; border: none; border-width: 0;"> </td></tr>
<!-- ==================== [组件] 章节头 + 能力卡片 ==================== -->
<tr><td style="background-color: #080808; padding: 40px 24px 32px; border: none;">
<!-- 章节标签（不用 ——，用空格分隔） -->
<p style="margin: 0 0 12px 0; padding: 0;"><span style="font-size: 10px; color: #FF4500; letter-spacing: 4px;">核 心 定 义</span></p>
<!-- 双色标题 -->
<p style="margin: 0 0 4px 0; padding: 0;"><span style="font-size: 24px; font-weight: 900; color: #F0EFEB; line-height: 1.4;">它不是聊天机器人</span></p>
<p style="margin: 0 0 12px 0; padding: 0;"><span style="font-size: 24px; font-weight: 900; color: #F0EFEB; line-height: 1.4;">它是你电脑里的</span><span style="font-size: 24px; font-weight: 900; color: #FF4500; line-height: 1.4;">AI员工</span></p>
<!-- 副文字 -->
<p style="margin: 0 0 4px 0; padding: 0;"><span style="font-size: 13px; color: rgba(240,239,235,0.5);">一句定义说明</span></p>
<p style="margin: 0 0 24px 0; padding: 0;"><span style="font-size: 13px; color: rgba(240,239,235,0.4);">补充说明文字</span></p>
<!-- [组件] 能力卡片（绿色左边框）— 背景用实色 #0a0d0a，边框用实色 #1a3a1a -->
<section style="margin: 0 0 12px 0; border: 1px solid #1a3a1a; border-left: 3px solid #4CAF50; border-radius: 8px; padding: 20px; background-color: #0a0d0a;">
<p style="margin: 0 0 8px 0; padding: 0;"><span style="font-size: 10px; color: #FF4500; letter-spacing: 2px;">CAPABILITY · 01</span></p>
<p style="margin: 0 0 8px 0; padding: 0;"><span style="font-size: 16px; font-weight: 700; color: #F0EFEB;">完整的电脑权限</span></p>
<p style="margin: 0 0 12px 0; padding: 0;"><span style="font-size: 13px; color: rgba(240,239,235,0.5);">执行命令 · 读写文件 · 控制浏览器 · 发消息 · 调用API</span></p>
<p style="margin: 0; padding: 0;"><span style="font-size: 14px; color: #F0EFEB; font-weight: 700;">不只「说」，更「做」。</span><span style="font-size: 14px; color: rgba(240,239,235,0.5);">这是它和所有聊天AI的本质区别。</span></p>
</section>
<!-- 能力卡片 2 -->
<section style="margin: 0; border: 1px solid #1a3a1a; border-left: 3px solid #4CAF50; border-radius: 8px; padding: 20px; background-color: #0a0d0a;">
<p style="margin: 0 0 8px 0; padding: 0;"><span style="font-size: 10px; color: #FF4500; letter-spacing: 2px;">CAPABILITY · 02</span></p>
<p style="margin: 0 0 8px 0; padding: 0;"><span style="font-size: 16px; font-weight: 700; color: #F0EFEB;">跨会话持久记忆</span></p>
<p style="margin: 0 0 12px 0; padding: 0;"><span style="font-size: 13px; color: rgba(240,239,235,0.5);">记住你的偏好、习惯、项目上下文，越用越懂你。</span></p>
<p style="margin: 0; padding: 0;"><span style="font-size: 14px; color: #F0EFEB; font-weight: 700;">不是每次都从零开始的陌生人。</span></p>
</section>
</td></tr>
<!-- [组件] 章节分隔带 -->
<tr><td style="background-color: #0d0d0d; height: 16px; font-size: 0; line-height: 0; border: none; border-width: 0;"> </td></tr>
<!-- ==================== [组件] 时间线章节 ==================== -->
<tr><td style="background-color: #080808; padding: 40px 24px 32px; border: none;">
<p style="margin: 0 0 12px 0; padding: 0;"><span style="font-size: 10px; color: #FF4500; letter-spacing: 4px;">关 键 时 间 线</span></p>
<p style="margin: 0 0 4px 0; padding: 0;"><span style="font-size: 24px; font-weight: 900; color: #F0EFEB;">90天</span></p>
<p style="margin: 0 0 24px 0; padding: 0;"><span style="font-size: 24px; font-weight: 900; color: #FF4500;">从一个想法到改变行业</span></p>
<!-- [组件] 时间线节点（绿色 = 正面） -->
<section style="padding: 0 0 24px 24px; border-left: 2px solid #1a3a1a; margin-left: 8px;">
<p style="margin: 0 0 4px 0; padding: 0;"><span style="font-size: 14px; color: #4CAF50;">●</span></p>
<p style="margin: 0 0 4px 0; padding: 0;"><span style="font-size: 11px; color: #4CAF50;">2025年11月</span></p>
<p style="margin: 0 0 6px 0; padding: 0;"><span style="font-size: 15px; font-weight: 700; color: #F0EFEB;">一小时从想法到原型</span></p>
<p style="margin: 0; padding: 0;"><span style="font-size: 13px; color: rgba(240,239,235,0.5);">创始人独自一人，把想法做成了原型。</span></p>
</section>
<!-- [组件] 时间线节点（红色 = 危机） -->
<section style="padding: 0 0 24px 24px; border-left: 2px solid #3a1a1a; margin-left: 8px;">
<p style="margin: 0 0 4px 0; padding: 0;"><span style="font-size: 14px; color: #F44336;">●</span></p>
<p style="margin: 0 0 4px 0; padding: 0;"><span style="font-size: 11px; color: #F44336;">01.27</span></p>
<p style="margin: 0 0 6px 0; padding: 0;"><span style="font-size: 15px; font-weight: 700; color: #F0EFEB;">商标投诉，凌晨改名</span></p>
<p style="margin: 0 0 8px 0; padding: 0;"><span style="font-size: 13px; color: rgba(240,239,235,0.5);">危机事件的描述文字。</span></p>
<!-- 标签徽章 — 背景用实色 -->
<section style="display: inline-block; background-color: #2a1212; border-radius: 4px; padding: 4px 10px;">
<span style="font-size: 11px; color: #F44336; font-weight: 600;">安全告警</span>
</section>
</section>
</td></tr>
<!-- [组件] 章节分隔带 -->
<tr><td style="background-color: #0d0d0d; height: 16px; font-size: 0; line-height: 0; border: none; border-width: 0;"> </td></tr>
<!-- ==================== [组件] 事件列表章节 ==================== -->
<tr><td style="background-color: #080808; padding: 40px 24px 32px; border: none;">
<p style="margin: 0 0 12px 0; padding: 0;"><span style="font-size: 10px; color: #FF4500; letter-spacing: 4px;">真 实 事 件</span></p>
<p style="margin: 0 0 4px 0; padding: 0;"><span style="font-size: 24px; font-weight: 900; color: #F0EFEB;">它做了这些事</span></p>
<p style="margin: 0 0 12px 0; padding: 0;"><span style="font-size: 24px; font-weight: 900; color: #FF4500;">没人让它做</span></p>
<p style="margin: 0 0 24px 0; padding: 0;"><span style="font-size: 13px; color: rgba(240,239,235,0.4);">这些不是功能演示。这是真实发生的事情。</span></p>
<!-- [组件] 事件卡片（左彩色边框）— 背景用实色 #0f0f0f -->
<section style="margin: 0 0 12px 0; border-left: 3px solid #29B6F6; border-radius: 8px; padding: 16px 20px; background-color: #0f0f0f;">
<p style="margin: 0 0 6px 0; padding: 0;"><span style="font-size: 15px; font-weight: 700; color: #F0EFEB;">AI给自己打了个电话</span></p>
<p style="margin: 0; padding: 0;"><span style="font-size: 13px; color: rgba(240,239,235,0.5);">在未收到任何指示的情况下，自行获取电话服务，拨打给本人。评价：</span><span style="font-size: 13px; font-weight: 700; color: #F0EFEB;">「科幻恐怖片」</span></p>
</section>
<section style="margin: 0; border-left: 3px solid #AB47BC; border-radius: 8px; padding: 16px 20px; background-color: #0f0f0f;">
<p style="margin: 0 0 6px 0; padding: 0;"><span style="font-size: 15px; font-weight: 700; color: #F0EFEB;">AI自己去相亲了</span></p>
<p style="margin: 0; padding: 0;"><span style="font-size: 13px; color: rgba(240,239,235,0.5);">Agent自行在约会平台创建档案，开始</span><span style="font-size: 13px; font-weight: 700; color: #F0EFEB;">筛选相亲对象</span><span style="font-size: 13px; color: rgba(240,239,235,0.5);">。</span></p>
</section>
</td></tr>
<!-- [组件] 章节分隔带 -->
<tr><td style="background-color: #0d0d0d; height: 16px; font-size: 0; line-height: 0; border: none; border-width: 0;"> </td></tr>
<!-- ==================== [组件] 引用观点章节 ==================== -->
<tr><td style="background-color: #080808; padding: 40px 24px 32px; border: none;">
<p style="margin: 0 0 12px 0; padding: 0;"><span style="font-size: 10px; color: rgba(240,239,235,0.4); letter-spacing: 4px;">各 方 观 点</span></p>
<p style="margin: 0 0 4px 0; padding: 0;"><span style="font-size: 24px; font-weight: 900; color: #F0EFEB;">聪明人们</span></p>
<p style="margin: 0 0 24px 0; padding: 0;"><span style="font-size: 24px; font-weight: 900; color: #F0EFEB;">吵起来了</span></p>
<!-- [组件] 引用卡片 — 背景用实色 #0f0f0f -->
<section style="margin: 0 0 12px 0; border-left: 3px solid #FF4500; border-radius: 8px; padding: 20px; background-color: #0f0f0f;">
<p style="margin: 0 0 12px 0; padding: 0;"><span style="font-size: 14px; color: #F0EFEB; line-height: 1.8;">「引用的观点文字放在这里，用书名号括起来。」</span></p>
<p style="margin: 0; padding: 0;"><span style="font-size: 11px; color: #FF4500; letter-spacing: 1px;">— 来源名称 · </span><span style="font-size: 11px; color: #4CAF50;">看多</span></p>
</section>
<section style="margin: 0; border-left: 3px solid #FF4500; border-radius: 8px; padding: 20px; background-color: #0f0f0f;">
<p style="margin: 0 0 12px 0; padding: 0;"><span style="font-size: 14px; color: #F0EFEB; line-height: 1.8;">「第二条引用观点放在这里。」</span></p>
<p style="margin: 0; padding: 0;"><span style="font-size: 11px; color: #FF4500; letter-spacing: 1px;">— 来源名称 · </span><span style="font-size: 11px; color: #FF9800;">中国视角</span></p>
</section>
</td></tr>
<!-- [组件] 章节分隔带 -->
<tr><td style="background-color: #0d0d0d; height: 16px; font-size: 0; line-height: 0; border: none; border-width: 0;"> </td></tr>
<!-- ==================== [组件] FEELS LIKE 类比卡 ==================== -->
<tr><td style="background-color: #080808; padding: 40px 24px 32px; border: none;">
<p style="margin: 0 0 12px 0; padding: 0;"><span style="font-size: 10px; color: #FF4500; letter-spacing: 4px;">看 懂 它 的 位 置</span></p>
<p style="margin: 0 0 4px 0; padding: 0;"><span style="font-size: 24px; font-weight: 900; color: #F0EFEB;">用你熟悉的事</span></p>
<p style="margin: 0 0 12px 0; padding: 0;"><span style="font-size: 24px; font-weight: 900; color: #FF4500;">理解它在哪里</span></p>
<p style="margin: 0 0 24px 0; padding: 0;"><span style="font-size: 13px; color: rgba(240,239,235,0.4);">三个你可能亲历过的时刻，帮你感受现在的处境</span></p>
<!-- FEELS LIKE 卡片 — 背景用实色 -->
<section style="margin: 0; border-radius: 8px; overflow: hidden;">
<!-- 卡片头 — rgba(255,179,0,0.08) 在 #080808 上 → #1a1200 -->
<section style="background-color: #1a1200; padding: 16px 20px;">
<p style="margin: 0 0 4px 0; padding: 0;"><span style="font-size: 9px; color: #FFB300; letter-spacing: 3px; text-transform: uppercase;">FEELS LIKE</span></p>
<p style="margin: 0; padding: 0;"><span style="font-size: 16px; font-weight: 700; color: #F0EFEB;">2008年的 App Store</span></p>
</section>
<!-- 卡片体 — rgba(255,255,255,0.03) → #0f0f0f -->
<section style="background-color: #0f0f0f; padding: 20px;">
<p style="margin: 0 0 16px 0; padding: 0; text-align: justify;"><span style="font-size: 14px; color: rgba(240,239,235,0.7); line-height: 1.8;">类比说明文字，解释为什么像这个历史时刻。可以有多段。</span></p>
<p style="margin: 0 0 16px 0; padding: 0; text-align: justify;"><span style="font-size: 14px; color: #F0EFEB; font-weight: 700;">加粗的关键判断。</span><span style="font-size: 14px; color: rgba(240,239,235,0.7);">后面跟着补充说明。</span></p>
<!-- [组件] "所以呢?" 提示框 — rgba(255,69,0,0.06) → #170c08 -->
<section style="background-color: #170c08; border-left: 3px solid #FF4500; border-radius: 4px; padding: 12px 16px; margin-top: 12px;">
<p style="margin: 0 0 6px 0; padding: 0;"><span style="font-size: 13px; color: #FF4500; font-weight: 700;">所以呢?</span></p>
<p style="margin: 0; padding: 0;"><span style="font-size: 13px; color: rgba(240,239,235,0.6); line-height: 1.7;">结论和行动建议放在这里。</span></p>
</section>
</section>
</section>
</td></tr>
<!-- [组件] 章节分隔带 -->
<tr><td style="background-color: #0d0d0d; height: 16px; font-size: 0; line-height: 0; border: none; border-width: 0;"> </td></tr>
<!-- ==================== [组件] 排名列表章节 ==================== -->
<tr><td style="background-color: #080808; padding: 40px 24px 32px; border: none;">
<p style="margin: 0 0 4px 0; padding: 0;"><span style="font-size: 24px; font-weight: 900; color: #F0EFEB;">谁能赢？</span></p>
<p style="margin: 0 0 12px 0; padding: 0;"><span style="font-size: 24px; font-weight: 900; color: #FF4500;">六个押注方向</span></p>
<p style="margin: 0 0 24px 0; padding: 0;"><span style="font-size: 13px; color: rgba(240,239,235,0.4);">竞争者的机会窗口，现在刚刚打开</span></p>
<!-- [组件] 排名卡片（用 table 代替 flex）— 背景用实色 #0f0f0f -->
<section style="margin: 0 0 12px 0; border-radius: 8px; padding: 20px; background-color: #0f0f0f;">
<table width="100%" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tr>
<td width="48" style="vertical-align: top; border: none; padding: 0 16px 0 0;"><span style="font-size: 36px; font-weight: 900; color: #FF4500; line-height: 1;">1</span></td>
<td style="vertical-align: top; border: none; padding: 0;">
<p style="margin: 0 0 6px 0; padding: 0;"><span style="font-size: 15px; font-weight: 700; color: #F0EFEB;">Agent安全基础设施 · 确定性最高</span></p>
<p style="margin: 0 0 2px 0; padding: 0;"><span style="font-size: 12px; color: rgba(240,239,235,0.4);">容器沙盒 · Skill安全审计 · 提示注入防御</span></p>
<p style="margin: 0; padding: 0;"><span style="font-size: 12px; color: rgba(240,239,235,0.4);">386恶意Skills = 巨大市场空白</span></p>
</td>
</tr>
</table>
</section>
<section style="margin: 0 0 12px 0; border-radius: 8px; padding: 20px; background-color: #0f0f0f;">
<table width="100%" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tr>
<td width="48" style="vertical-align: top; border: none; padding: 0 16px 0 0;"><span style="font-size: 36px; font-weight: 900; color: #FF9800; line-height: 1;">2</span></td>
<td style="vertical-align: top; border: none; padding: 0;">
<p style="margin: 0 0 6px 0; padding: 0;"><span style="font-size: 15px; font-weight: 700; color: #F0EFEB;">垂直行业Agent · 价值最大</span></p>
<p style="margin: 0 0 2px 0; padding: 0;"><span style="font-size: 12px; color: rgba(240,239,235,0.4);">AI承保 · AI销售代表 · AI合规员 · 医疗+教育</span></p>
<p style="margin: 0; padding: 0;"><span style="font-size: 12px; color: rgba(240,239,235,0.4);">编码Agent已成熟，下一个是企业流程</span></p>
</td>
</tr>
</table>
</section>
<section style="margin: 0; border-radius: 8px; padding: 20px; background-color: #0f0f0f;">
<table width="100%" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tr>
<td width="48" style="vertical-align: top; border: none; padding: 0 16px 0 0;"><span style="font-size: 36px; font-weight: 900; color: #4CAF50; line-height: 1;">3</span></td>
<td style="vertical-align: top; border: none; padding: 0;">
<p style="margin: 0 0 6px 0; padding: 0;"><span style="font-size: 15px; font-weight: 700; color: #F0EFEB;">硬件Agent生态 · 增长最快</span></p>
<p style="margin: 0; padding: 0;"><span style="font-size: 12px; color: rgba(240,239,235,0.4);">Agent一体机 · IoT+工业+零售</span></p>
</td>
</tr>
</table>
</section>
</td></tr>
<!-- [组件] 章节分隔带 -->
<tr><td style="background-color: #0d0d0d; height: 16px; font-size: 0; line-height: 0; border: none; border-width: 0;"> </td></tr>
<!-- ==================== [组件] 结尾区（居中递进）==================== -->
<!-- 不用 linear-gradient，用实色 #0e0600 -->
<tr><td style="padding: 48px 24px; text-align: center; background-color: #0e0600; border: none;">
<p style="margin: 0 0 4px 0; padding: 0;"><span style="font-size: 28px; font-weight: 900; color: #FF4500;">核心判断</span></p>
<p style="margin: 24px 0 0 0; padding: 0;"><span style="font-size: 14px; color: rgba(240,239,235,0.5);">它本身离大众产品还有距离</span></p>
<p style="margin: 16px 0 0 0; padding: 0;"><span style="font-size: 14px; color: rgba(240,239,235,0.6);">安全、部署、Token消耗都是待解的问题。</span></p>
<p style="margin: 16px 0 0 0; padding: 0;"><span style="font-size: 14px; color: rgba(240,239,235,0.7);">但它做到了一件极其重要的事：</span></p>
<p style="margin: 16px 0 0 0; padding: 0;"><span style="font-size: 16px; font-weight: 700; color: #F0EFEB;">它给了所有人一次能力的预览。</span></p>
<p style="margin: 24px 0 0 0; padding: 0;"><span style="font-size: 10px; color: #FF4500; letter-spacing: 3px;">- - - - - - - - - - - - - - - - - - - - - - - - - - - - -</span></p>
<p style="margin: 16px 0 0 0; padding: 0;"><span style="font-size: 16px; font-weight: 700; color: #F0EFEB;">最好的学习</span></p>
<p style="margin: 4px 0 0 0; padding: 0;"><span style="font-size: 16px; font-weight: 700; color: #FF4500;">就是打开浏览器自己跑一遍</span></p>
</td></tr>
<!-- [组件] 尾部公众号信息 -->
<tr><td style="background-color: #111111; padding: 32px 24px; text-align: center; border: none;">
<p style="margin: 0 0 8px 0; padding: 0;"><span style="font-size: 16px; font-weight: 700; color: #F0EFEB;">公众号名称</span></p>
<p style="margin: 0 0 4px 0; padding: 0;"><span style="font-size: 12px; color: rgba(240,239,235,0.4);">一句话介绍</span></p>
<p style="margin: 0 0 16px 0; padding: 0;"><span style="font-size: 12px; color: rgba(240,239,235,0.3);">补充说明</span></p>
<p style="margin: 0; padding: 0;"><span style="font-size: 11px; color: rgba(240,239,235,0.3);">扫码关注 · 持续更新</span></p>
</td></tr>
</table>
</section>
<!-- ========== 正文结束 ========== -->
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{文章标题}} — 公众号排版预览</title>
<!--
预览外壳（不会被复制进公众号）
占位符：{{文章标题}} {{内容底色}} {{风格说明}}，内容插入到 #wechat-content 内
-->
<style>
* { box-sizing: border-box; }
body { margin: 0; padding: 24px 16px 80px; background: #EDEDED; font-family: -apple-system, 'PingFang SC', sans-serif; }
.toolbar {
position: sticky; top: 12px; z-index: 10;
max-width: 677px; margin: 0 auto 8px;
background: #fff; border-radius: 12px; padding: 12px 16px;
box-shadow: 0 4px 16px rgba(0,0,0,.10);
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.toolbar button {
border: none; border-radius: 8px; padding: 9px 16px;
font-size: 14px; font-weight: 600; cursor: pointer;
}
#copy-btn { background: #07C160; color: #fff; }
#copy-btn.done { background: #06AD56; }
#width-btn { background: #F2F2F2; color: #333; }
.hint { font-size: 12px; color: #888; }
.meta { max-width: 677px; margin: 0 auto 16px; font-size: 12px; color: #999; padding: 0 4px; }
.wrapper {
max-width: 677px; margin: 0 auto;
background: {{内容底色}};
box-shadow: 0 2px 24px rgba(0,0,0,.08);
transition: max-width .25s ease;
}
body.phone .wrapper { max-width: 375px; }
</style>
</head>
<body>
<div class="toolbar">
<button id="copy-btn" onclick="copyContent()">一键复制到公众号</button>
<button id="width-btn" onclick="document.body.classList.toggle('phone'); this.textContent = document.body.classList.contains('phone') ? '电脑宽度' : '手机宽度';">手机宽度</button>
<span class="hint">复制后到公众号编辑器直接粘贴（⌘V）；粘贴后检查图片是否转存成功</span>
</div>
<div class="meta">{{风格说明}}</div>
<div class="wrapper">
<div id="wechat-content">
<!-- 排版内容插入这里 -->
</div>
</div>
<script>
async function copyContent() {
const el = document.getElementById('wechat-content');
const btn = document.getElementById('copy-btn');
let ok = false;
// 首选 Clipboard API：同时写入 text/html 与 text/plain
try {
const item = new ClipboardItem({
'text/html': new Blob([el.innerHTML], { type: 'text/html' }),
'text/plain': new Blob([el.innerText], { type: 'text/plain' })
});
await navigator.clipboard.write([item]);
ok = true;
} catch (e) { /* 走兜底 */ }
// 兜底：选区复制（与手动全选复制等效）
if (!ok) {
const range = document.createRange();
range.selectNodeContents(el);
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
ok = document.execCommand('copy');
sel.removeAllRanges();
}
if (ok) {
btn.classList.add('done');
btn.textContent = '✓ 已复制，去编辑器粘贴';
setTimeout(() => { btn.classList.remove('done'); btn.textContent = '一键复制到公众号'; }, 3000);
} else {
alert('自动复制失败：请手动选中下方全部内容后复制');
}
}
</script>
</body>
</html>
巷子尽头的那家手冲店
写字楼后面那条巷子走到底，有家只有六个座位的手冲店。
【图：店门口的木质招牌，下午的光斜着打过来】
老板以前是程序员，三年前辞职开了这家店。菜单只有五款豆子，他说多了照顾不过来。
我点了一杯埃塞俄比亚的日晒豆。他称豆、磨粉、温杯，动作不快，但没有一个是多余的。
【视频：手冲注水的 30 秒，水流很稳，几乎没有声音】
豆子的果香在第二口之后才上来，凉下来反而更清楚。
【图：吧台上那杯琥珀色的咖啡，逆光】
离开的时候我问他，从写代码到冲咖啡，最大的区别是什么。
他想了想说：代码写完要上线，咖啡冲完就结束了。"结束"这件事，本身就很治愈。
这家店没有名字，门牌是巷 17 号。别导航，走过去。
为什么我劝你少开会
上周和一位创业的朋友吃饭，他说自己一天最多开过 11 个会，从早上九点排到晚上八点。我问他：那你什么时候干活？他愣了几秒，说：开会不就是干活吗？
这可能是当代职场最大的错觉。
会议的本质是同步信息，而不是生产价值。一份报告、一行代码、一个方案，这些是产出；而会议本身不产出任何东西，它只是让产出流动起来的管道。管道修得太多，水反而流不动了。
我观察过很多团队，发现一个规律：会越多的团队，往往越焦虑。因为每个人都在用"参加会议"来证明自己很忙，用"被需要"来缓解不安全感。开会成了一种表演，议题反而是其次。
亚马逊有一条著名的"两个披萨原则"：如果两个披萨喂不饱一场会议的参与者，这个会就不该开。贝索斯还要求高管会议先安静读六页备忘录再讨论。这背后的逻辑很简单——把同步信息的成本压到最低，把思考的密度提到最高。
那不开会，事情怎么推进？我的经验是三条：
能用一段文字说清楚的，就不要拉会。文字会逼你把逻辑想清楚，而口头表达会纵容含糊。
必须开的会，先写议程，没有议程的会一律拒绝。议程是会议的合同，没有合同的交易最容易扯皮。
会议必须以决策结尾。讨论了什么不重要，决定了什么才重要。散会前问一句：我们刚才决定了什么？谁来做？什么时候完成？
少开会不是目的，把时间还给真正的工作才是。下次有人拉你开会，不妨先问一句：这个会，能不能用一条消息代替？
你今天开了几个会？
周末两小时，在家做出一壶好冷萃
天热起来了，又到了一年里最适合喝冷萃的季节。
很多人以为冷萃是什么高门槛的东西，需要专业设备、需要手艺。其实恰恰相反——冷萃可能是所有咖啡做法里最宽容的一种，它不挑技术，只挑耐心。
你需要准备的东西：
- 咖啡豆 60 克（中浅烘焙最佳，果香更明显）
- 凉白开或矿泉水 600 毫升
- 一个能密封的玻璃罐
- 滤纸或纱布
- 一个冰箱，和一个晚上
步骤一：磨豆。粗研磨，颗粒像粗砂糖。太细会萃取过度，泡出来又苦又浑。没有磨豆机就请咖啡店帮忙磨，记得说"做冷萃用"。
步骤二：混合。豆粉倒进玻璃罐，按 1:10 的比例加水，轻轻搅拌十几下，让所有粉都浸湿。别用力搅，我们要的是温柔的萃取。
步骤三：冷藏等待。盖上盖子放进冰箱，等 12 到 16 个小时。睡前放进去，第二天午饭后就能喝，时间刚刚好。
步骤四：过滤。用滤纸慢慢滤掉咖啡渣。滤出来的原液浓度比较高，可以按 1:1 兑水或牛奶。
几个常见的翻车点：水别用刚烧开的，高温会让冷萃失去意义；冷藏别超过 24 小时，会出涩味；滤完的原液最多放三天，别囤。
第一次做，推荐试试耶加雪菲，做出来有明显的柠檬茶感，很多不喝咖啡的人也会喜欢。
做冷萃最迷人的地方，是它把"等待"变成了风味的一部分。你什么都不用做，时间会替你完成一切。
这个周末试试吧。
大模型价格战一年后：谁还在牌桌上
2025 年 5 月那场突如其来的降价潮，到今天刚好一年。回头看，这场价格战改写了整个行业的格局。
先看几个数字：主流大模型 API 的平均价格一年内下降了 92%；国内日均 token 调用量增长了 14 倍；但同期，提供大模型 API 服务的公司从 47 家缩减到 19 家。
价格降了，市场大了，玩家却少了一半多。这就是价格战最真实的样子。
时间线：战火是怎么烧起来的
- 2025 年 5 月，某大厂率先把旗舰模型价格砍到原来的 1%，行业哗然
- 2025 年 6 月，三家头部公司跟进降价，部分轻量模型宣布免费
- 2025 年 9 月，第一批中小服务商退场，两家公司宣布停止 API 服务
- 2026 年 1 月，行业进入"免费 + 订阅"双轨制，价格战表面熄火
- 2026 年 4 月，幸存者开始悄悄涨价，旗舰模型价格回升约 15%
三种幸存者逻辑
复盘这一年，活下来的公司有三种：
第一种是有云业务托底的。模型亏钱没关系，客户用模型时顺便买了算力、存储和数据库，羊毛出在猪身上。
第二种是有终端入口的。模型免费，但十亿级的 App 日活让它们能把成本摊到广告和会员上。
第三种是做深垂直行业的。金融、医疗、法律，这些领域的客户要的不是便宜，是合规和准确，价格战根本烧不到它们。
某头部公司 CEO 在内部信里写过一句话："价格战没有赢家，只有活着的人。"
接下来看什么
行业共识是，2026 下半年有三个看点：推理成本能不能再降一个数量级、Agent 调用会不会成为新的计费单位、开源模型的商业化路径。
价格战烧掉的是利润，烧出来的是基础设施。便宜到接近免费的智能，才是这一年留给所有人的真正遗产。
{
"skill_name": "wechat-typesetting-cy",
"evals": [
{
"id": 1,
"eval_name": "essay-opinion-piece",
"prompt": "这是我明天要发公众号的文章，帮我排个版，排好我要直接贴进公众号编辑器。文章在 /Users/cychenyue/Documents/cc-skills/wechat-typesetting-cy/evals/articles/essay-meetings.md",
"expected_output": "排版后的公众号 HTML 预览页：自动选择适合观点随笔的风格（蓝调杂志/极简黑白/商务蓝灰之一），全内联样式无 flex/渐变，含一键复制按钮、风格注释与备选风格说明",
"files": [
"/Users/cychenyue/Documents/cc-skills/wechat-typesetting-cy/evals/articles/essay-meetings.md"
],
"assertions": [
"输出了排版 HTML 文件且包含中文内容",
"正文区全内联样式（style= ≥ 20 处）",
"正文区无 flex/grid 布局（微信粘贴后会塌）",
"正文区无 position/float",
"正文区无渐变（微信不渲染）",
"正文区背景色未使用 rgba()（微信不渲染 rgba 背景）",
"正文区无纯白 #ffffff/#fff 背景（会被过滤，应为 #fefefe）",
"正文区未使用裸 ul/ol/li（部分端样式丢失）",
"正文区无 h1-h6 标签",
"复制内容区无 <script>",
"含机器可读风格注释且带备选方向（<!-- 风格方向: X | 备选: ... -->）",
"预览页含一键复制按钮",
"排版风格与文章内容气质匹配（观点随笔应得到杂志/极简类风格而非科技风）",
"组件使用克制、版面有呼吸感（卡片不连发、强调不过密、段落短）",
"交付说明包含粘贴流程指引与备选风格参考",
"版面有设计感（标题区可当封面、相邻字号档位差≥1.5倍、有且只有一个视觉记忆点、装饰语言统一）",
"内容零改动：原文逐句完整保留（verify-completeness 脚本通过），无删改/改写/重复，无自拟小标题与代写副题，版式元素外无新增文字"
]
},
{
"id": 2,
"eval_name": "tech-data-report",
"prompt": "帮我把这篇文章排成微信公众号的格式，要有设计感一点。文章在 /Users/cychenyue/Documents/cc-skills/wechat-typesetting-cy/evals/articles/tech-price-war.md",
"expected_output": "排版后的公众号 HTML 预览页：识别出数据点与时间线并用对应组件呈现（数据栏/时间线 table），风格匹配科技报道气质（暗夜科技/商务蓝灰），深色整页时用 table 骨架，含一键复制按钮与风格注释",
"files": [
"/Users/cychenyue/Documents/cc-skills/wechat-typesetting-cy/evals/articles/tech-price-war.md"
],
"assertions": [
"输出了排版 HTML 文件且包含中文内容",
"正文区全内联样式（style= ≥ 20 处）",
"正文区无 flex/grid 布局（微信粘贴后会塌）",
"正文区无 position/float",
"正文区无渐变（微信不渲染）",
"正文区背景色未使用 rgba()（微信不渲染 rgba 背景）",
"正文区无纯白 #ffffff/#fff 背景（会被过滤，应为 #fefefe）",
"正文区未使用裸 ul/ol/li（部分端样式丢失）",
"正文区无 h1-h6 标签",
"复制内容区无 <script>",
"含机器可读风格注释且带备选方向（<!-- 风格方向: X | 备选: ... -->）",
"预览页含一键复制按钮",
"数据/时间线用 table 组件呈现（多列不用 flex）",
"排版风格与文章内容气质匹配（数据驱动的科技报道应得到科技/商务类风格）",
"组件使用克制、版面有呼吸感（卡片不连发、强调不过密、段落短）",
"交付说明包含粘贴流程指引与备选风格参考",
"版面有设计感（标题区可当封面、相邻字号档位差≥1.5倍、有且只有一个视觉记忆点、装饰语言统一）",
"内容零改动：原文逐句完整保留（verify-completeness 脚本通过），无删改/改写/重复，无自拟小标题与代写副题，版式元素外无新增文字"
]
},
{
"id": 3,
"eval_name": "lifestyle-tutorial",
"prompt": "这篇生活方式的文章要发我的公众号，帮我排版，风格跟内容气质搭一点。文章在 /Users/cychenyue/Documents/cc-skills/wechat-typesetting-cy/evals/articles/lifestyle-coldbrew.md",
"expected_output": "排版后的公众号 HTML 预览页：风格匹配温暖生活气质（暖纸阅读/清新治愈，而非仅有的旧两套模板），步骤用步骤块、准备清单用清单卡，含一键复制按钮与风格注释",
"files": [
"/Users/cychenyue/Documents/cc-skills/wechat-typesetting-cy/evals/articles/lifestyle-coldbrew.md"
],
"assertions": [
"输出了排版 HTML 文件且包含中文内容",
"正文区全内联样式（style= ≥ 20 处）",
"正文区无 flex/grid 布局（微信粘贴后会塌）",
"正文区无 position/float",
"正文区无渐变（微信不渲染）",
"正文区背景色未使用 rgba()（微信不渲染 rgba 背景）",
"正文区无纯白 #ffffff/#fff 背景（会被过滤，应为 #fefefe）",
"正文区未使用裸 ul/ol/li（部分端样式丢失）",
"正文区无 h1-h6 标签",
"复制内容区无 <script>",
"含机器可读风格注释且带备选方向（<!-- 风格方向: X | 备选: ... -->）",
"预览页含一键复制按钮",
"风格方向超出旧两套模板（验证风格库扩展生效）",
"排版风格与文章内容气质匹配（温暖生活教程应得到暖色/治愈类风格，而非黑底科技或冷蓝杂志）",
"组件使用克制、版面有呼吸感（步骤块/清单卡用对地方，卡片不连发）",
"交付说明包含粘贴流程指引与备选风格参考",
"版面有设计感（标题区可当封面、相邻字号档位差≥1.5倍、有且只有一个视觉记忆点、装饰语言统一）",
"内容零改动：原文逐句完整保留（verify-completeness 脚本通过），无删改/改写/重复，无自拟小标题与代写副题，版式元素外无新增文字"
]
},
{
"id": 4,
"eval_name": "media-placeholders",
"prompt": "这篇探店的文章要发公众号，里面标了图片和视频的位置，帮我排版。文章在 /Users/cychenyue/Documents/cc-skills/wechat-typesetting-cy/evals/articles/alley-pourover.md",
"expected_output": "排版后的公众号 HTML 预览页：两处【图：…】生成带编号的可视图片占位块、一处【视频：…】生成视频占位块（含编辑器插入指引），无 video/iframe 标签，附占位清单；风格按探店内容现场设计",
"files": [
"/Users/cychenyue/Documents/cc-skills/wechat-typesetting-cy/evals/articles/alley-pourover.md"
],
"assertions": [
"输出了排版 HTML 文件且包含中文内容",
"正文区全内联样式（style= ≥ 20 处）",
"正文区无 flex/grid 布局（微信粘贴后会塌）",
"正文区无 position/float",
"正文区无渐变（微信不渲染）",
"正文区背景色未使用 rgba()（微信不渲染 rgba 背景）",
"正文区无纯白 #ffffff/#fff 背景（会被过滤，应为 #fefefe）",
"正文区未使用裸 ul/ol/li（部分端样式丢失）",
"正文区无 h1-h6 标签",
"复制内容区无 <script>",
"含机器可读风格注释且带备选方向（<!-- 风格方向: X | 备选: ... -->）",
"预览页含一键复制按钮",
"复制内容区无 video/iframe/audio（粘贴会被剥掉，视频用占位块）",
"两处图片标记生成可视占位块（单个 p 元素的虚线框+编号+建议内容，三击可删，非 HTML 注释）",
"视频标记生成视频占位块且含编辑器「视频」按钮插入指引",
"交付说明附媒体占位清单与替换流程",
"排版风格与探店随笔气质匹配（现场设计，非套用案例默认配色）",
"版面有设计感（标题区可当封面、相邻字号档位差≥1.5倍、有且只有一个视觉记忆点、装饰语言统一）",
"内容零改动：原文逐句完整保留（verify-completeness 脚本通过），无删改/改写/重复，无自拟小标题与代写副题，版式元素外无新增文字"
]
}
]
}✍️ wechat-typesetting-cy — 微信公众号智能排版技能
没有模板。 读懂文章后为每一篇现场设计排版——版面结构、阅读节奏、风格气质、配色字体全部从内容推导，每篇都不同；唯一不变的是底线：粘贴进公众号编辑器后必须正常显示。
流程：读懂文章 → 现场设计（产出设计方案 + 备选气质）→ 微信安全手法实现 → 预览页一键复制 → 粘贴发布。
功能特性
- 内容零改动 — 排版不是编辑：原文一句不删、一字不改、顺序不动，金句组件是原句"原位升格"而非摘抄复制；内置完整性校验脚本（
scripts/verify-completeness.py），原文逐句核验在场才交付，润饰类修改只建议、经同意才动 - 每篇现场设计 — 像设计师一样回答五个问题（读者带走什么感觉 / 信息什么形状 / 节奏多快 / 内容世界什么颜色 / 形态语言用什么），产出本篇专属设计方案；两篇不同的文章不会得到同一套排版
- 经营版面而非装饰文字 — 设计感的命门：不是给文字"染个色加个块"，而是把关键句"提案"成视觉版块、标题造型化、段落错落疏密、贯穿母题统一全文——让版面"看得出被经营过"，而不是内容倒进均匀的段落流；先对标该内容方向（美食/财经/情感/科技…）里优秀号的水准再设计
- 备选风格参考 — 每次交付报告设计方案 + 2 个备选气质方向，一句话即可切换重排；也可指定风格、品牌色或要求与上一篇保持一致
- 一键复制进编辑器 — 预览页内置"一键复制到公众号"按钮（富文本复制），到公众号编辑器直接 ⌘V 粘贴；附手机宽度预览切换
- 媒体占位 — 识别文中的图片/视频标记（
、【图：…】、【视频：…】等）：https 图直接带入（粘贴自动转存），本地图与视频生成带编号的可视占位块 + 占位清单，粘贴后在编辑器里逐个替换（视频必须经编辑器「视频」按钮插入，粘贴带不进去） - 微信兼容硬约束 — 全内联样式、无 flex/渐变/rgba 背景、无 video/iframe、列表 p+span、深色页 table 骨架……所有踩坑经验沉淀为生成前必读规则 + 生成后自检清单，违规不交付
- 排版检查与重排 — 检查已有公众号 HTML 的兼容性与质量；同一篇文章可换风格重排对比
参考案例集（仅供启发，不是可选模板）
技能内置八种已验证的气质组合，记录"某种质感怎么做出来"，设计时找灵感用；禁止整套照搬：
| 案例 | 气质 | 常见于 |
|---|---|---|
| 蓝调杂志 | 理性、杂志编辑感 | 深度观点、评论、行业观察 |
| 暗夜科技 | 发布会现场感、数据驱动 | 产品发布、科技报道、竞品对比 |
| 极简黑白 | 安静、文学 | 情感文、演讲、严肃长文 |
| 暖纸阅读 | 温暖、手工感 | 美食、旅行、生活方式、人物故事 |
| 清新治愈 | 轻盈、放松 | 健康、心理、育儿、轻知识 |
| 商务蓝灰 | 专业、可信 | 财经、行业分析、职场方法 |
| 活力橙黄 | 明快、年轻 | 盘点、清单体、活动宣传 |
| 学术线框 | 严谨、工具书感 | 教程、方法论、技术科普、含代码 |
使用流程
1. 给 Claude 你的文章（纯文本或 Markdown），说"帮我排版发公众号" 2. 技能读懂内容 → 现场设计排版方案并报告（也可指定风格或品牌色）→ 生成排版 3. 浏览器自动打开预览页，点 "一键复制到公众号" 4. 到公众号编辑器粘贴，检查图片转存，手机预览后发布 5. 想换风格？一句话点名想要的气质，内容不动重新设计重排
目录结构
wechat-typesetting-cy/
├── SKILL.md # 技能定义：内容画像 → 风格决策 → 生成 → 自检 → 交付
├── README.md
├── assets/
│ ├── preview-shell.html # 预览外壳（一键复制按钮 + 手机宽度切换）
│ ├── examples/ # 成品示例（学习组装方式，不是套用模板）
│ │ ├── blue-minimal.html # 蓝调杂志方向示例
│ │ └── dark-tech.html # 暗夜科技方向示例（深色 table 骨架）
│ └── wechat-qr.jpg # 联系二维码
├── references/
│ ├── wechat-compat.md # 微信兼容【硬规则】×35 条 + 自检清单（违反就崩，永不可破）
│ ├── design-craft.md # 设计感手艺库【因文而异的判断，非硬规则】记忆点/对比/装饰/色彩/留白
│ ├── components.md # 微信安全实现手法 ×16 类（DOM 结构验证过，样式由设计方案定）
│ ├── guidelines.md # 排版审美与阅读体验【判断，非硬规则】层级/节奏/移动端完读率
│ └── style-directions.md # 参考案例集 ×8（仅供启发，禁止整套照搬）
└── output/ # 排版输出目录（不纳入版本控制）设计理念
模板会过时，体系不会。 这个技能不维护模板，维护的是三样东西：
1. 设计流程（SKILL.md Step 2）— 五个设计问题，把"这篇文章该长什么样"想清楚再动手，每篇产出自己的设计方案 2. 安全手法（components.md）— 微信编辑器里验证过的 DOM 结构，设计再自由也不踩兼容的坑 3. 底线与纪律（wechat-compat.md / guidelines.md）— 兼容硬约束逐条自检、三色与层级纪律保住下限
参考案例（style-directions.md）只负责启发手艺，不参与决策——所以新文章永远得到新设计。
沉淀参考案例
某篇文章的设计特别成功，在 references/style-directions.md 加一张案例卡（气质 / 适合内容 / 配色 / 手法要点）即可；案例只启发，不复用。
许可证
MIT License
---
<div align="center"> <h3>联系作者</h3> <p>扫码加微信，交流反馈</p> <img src="assets/wechat-qr.jpg" alt="WeChat QR Code" width="200"> </div>
微信安全实现手法库
这里的价值是 DOM 结构：每种手法都按 wechat-compat.md 硬规则验证过（全内联、无 flex、无渐变、列表用 p+span、多列用 table）。
使用方法：保留结构，样式自己设计——把 {{token}} 占位符和示例里的具体数值（颜色、圆角、边框、间距、装饰符号）全部换成本篇设计方案定下的值；示例值只是演示，不是默认值。设计方案需要库里没有的形态时可以自创结构，守住 compat 硬规则即可。
占位符约定：{{主色}} {{正文色}} {{标题色}} {{辅助灰}} {{浅底}} {{边色}} {{字体}} {{页底色}}（取值全部来自本篇设计方案）
目录
- 0. 页面骨架
- 1. 头部标题区（3 变体）
- 2. 章节标题（4 变体）
- 3. 正文段落与行内强调
- 4. 金句卡（3 变体）
- 5. 数据栏
- 6. 清单 / 要点
- 7. 步骤块
- 8. 时间线
- 9. 引用 / 出处卡
- 10. 对比表
- 11. 代码块
- 12. 图片与图注
- 13. 分隔
- 14. 文末区
- 15. 参考资料（外链处理）
- 16. 文末关注 / 作者卡
---
0. 页面骨架
白底页面（蓝调杂志 / 极简黑白 / 清新治愈 / 商务蓝灰 / 活力橙黄 / 学术线框）——顺序 section 流：
<section style="background-color: #fefefe; padding: 0 0 40px 0;">
<!-- 依次放各组件，正文区统一左右 padding 24px -->
</section>整页有底色（暗夜科技的深底、暖纸阅读的米白底）——table 骨架，规则见 wechat-compat.md 第 19-22 条：
<section data-role="outer" style="background-color: {{页底色}}; padding: 0;">
<table width="100%" cellspacing="0" cellpadding="0" border="0"
style="border-collapse: collapse; border-spacing: 0; background-color: {{页底色}}; border: none;">
<tr><td style="background-color: {{页底色}}; padding: 24px; border: none;">
<!-- 一个章节的全部内容（内部可以放 section 卡片，安全） -->
</td></tr>
<!-- 章节分隔带 -->
<tr><td style="background-color: {{分隔带色}}; height: 16px; font-size: 0; line-height: 0; border: none;"> </td></tr>
</table>
</section>1. 头部标题区
变体 A · 杂志式（蓝调杂志/商务蓝灰）——色底横幅 + 标签 + 大标题 + 副题：
<section style="background-color: {{主色}}; padding: 14px 24px;">
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border: none;">
<tr>
<td style="border: none; text-align: left;"><span style="color: #fefefe; font-size: 15px; font-weight: 700; font-family: {{字体}}; letter-spacing: 1px;">2026</span></td>
<td style="border: none; text-align: right;"><span style="color: #fefefe; font-size: 11px; letter-spacing: 3px; font-family: {{字体}};">ENGLISH TAG</span></td>
</tr>
</table>
</section>
<section style="padding: 28px 24px 8px;">
<p style="margin: 0 0 12px 0;"><span style="font-size: 14px; color: {{主色}}; font-weight: 600; letter-spacing: 2px; font-family: {{字体}};">栏目标签</span></p>
<p style="margin: 0 0 12px 0;"><span style="font-size: 30px; font-weight: 900; color: {{标题色}}; letter-spacing: -0.5px; line-height: 1.25; font-family: {{字体}};">文章主标题<br>可以换行</span></p>
<p style="margin: 0;"><span style="font-size: 14px; color: {{辅助灰}};">一句话副标题或核心摘要</span></p>
</section>变体 B · 居中式（清新治愈/活力橙黄/暖纸阅读）：
<section style="padding: 36px 24px 8px; text-align: center;">
<p style="margin: 0 0 14px 0;"><span style="font-size: 12px; color: {{主色}}; letter-spacing: 4px;">栏 目 标 签</span></p>
<p style="margin: 0 0 12px 0;"><span style="font-size: 27px; font-weight: 800; color: {{标题色}}; line-height: 1.35; font-family: {{字体}};">文章主标题</span></p>
<p style="margin: 0 0 18px 0;"><span style="font-size: 14px; color: {{辅助灰}};">一句话副标题</span></p>
<section style="width: 36px; height: 3px; background-color: {{主色}}; margin: 0 auto;"></section>
</section>变体 C · 极简式（极简黑白/严肃长文）——只有标题与日期，靠留白：
<section style="padding: 44px 24px 8px;">
<p style="margin: 0 0 16px 0;"><span style="font-size: 26px; font-weight: 800; color: {{标题色}}; line-height: 1.4; font-family: {{字体}};">文章主标题</span></p>
<p style="margin: 0; border-top: 1px solid {{边色}}; padding-top: 12px;"><span style="font-size: 13px; color: {{辅助灰}};">作者 · 2026.06</span></p>
</section>2. 章节标题
变体 A · 水印编号（蓝调杂志）：
<section style="padding: 40px 24px 0;">
<p style="margin: 0; line-height: 1;"><span style="font-size: 56px; font-weight: 900; color: {{水印色}}; font-family: {{字体}};">01</span></p>
<p style="margin: 0 0 20px 0;"><span style="font-size: 22px; font-weight: 800; color: {{标题色}}; line-height: 1.4; font-family: {{字体}};">章节标题</span></p>
</section>变体 B · 序号色块（清新治愈/活力橙黄/学术线框）：
<section style="padding: 36px 24px 16px;">
<p style="margin: 0;">
<span style="display: inline-block; background-color: {{主色}}; color: #fefefe; font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 4px; margin-right: 10px;">01</span>
<span style="font-size: 18px; font-weight: 800; color: {{标题色}};">章节标题</span>
</p>
</section>变体 C · 左色条（商务蓝灰/引用感强的方向）：
<section style="padding: 36px 24px 16px;">
<section style="border-left: 4px solid {{主色}}; padding-left: 12px;">
<p style="margin: 0;"><span style="font-size: 18px; font-weight: 800; color: {{标题色}};">章节标题</span></p>
</section>
</section>变体 D · 居中细线（极简黑白/暖纸阅读）：
<section style="padding: 40px 24px 16px; text-align: center;">
<p style="margin: 0 0 8px 0;"><span style="font-size: 12px; color: {{辅助灰}}; letter-spacing: 3px;">— 01 —</span></p>
<p style="margin: 0;"><span style="font-size: 18px; font-weight: 700; color: {{标题色}}; font-family: {{字体}};">章节标题</span></p>
</section>深色页面的章节头（暗夜科技）：空格字距标签 + 双色标题，写在 td 内：
<p style="margin: 0 0 10px 0;"><span style="font-size: 10px; color: {{主色}}; letter-spacing: 4px;">核 心 定 义</span></p>
<p style="margin: 0 0 16px 0;"><span style="font-size: 24px; font-weight: 900; color: {{标题色}};">章节标题的<span style="color: {{主色}};">强调部分</span></span></p>3. 正文段落与行内强调
标准段落（所有方向通用，替换字号/行距/颜色 token）：
<section style="padding: 0 24px;">
<p style="margin: 0 0 16px 0; text-align: justify; line-height: 1.75; font-size: 15px; color: {{正文色}}; letter-spacing: 0.5px; font-family: {{字体}};">
正文内容。每段 3-4 行一个意思，关键句可以独立成段。
</p>
</section>行内强调（一篇文章选 1-2 种，不混用太多）：
<strong style="color: {{主色}};">彩色加粗</strong>
<strong style="color: {{正文色}};">普通加粗</strong>
<span style="text-decoration: underline; text-decoration-color: {{主色}}; text-underline-offset: 4px;">色彩下划线</span>
<span style="background-color: {{高亮底}}; padding: 0 2px;">荧光笔（活力橙黄）</span>4. 金句卡
变体 A · 色底（蓝调杂志/暗夜科技）：
<section style="margin: 28px 24px; background-color: {{主色}}; padding: 24px 20px; text-align: center;">
<p style="margin: 0 0 8px 0;"><span style="font-size: 17px; font-weight: 700; color: #fefefe; line-height: 1.6; font-family: {{字体}};">金句主句</span></p>
<p style="margin: 0;"><span style="font-size: 13px; color: rgba(254,254,254,0.75);">补充副句</span></p>
</section>变体 B · 边框（商务蓝灰/学术线框/暖纸阅读）：
<section style="margin: 28px 24px; border: 1px solid {{边色}}; border-left: 4px solid {{主色}}; background-color: {{浅底}}; padding: 18px 20px;">
<p style="margin: 0;"><span style="font-size: 15px; font-weight: 600; color: {{标题色}}; line-height: 1.7;">结论或金句内容</span></p>
</section>变体 C · 留白居中（极简黑白）——无底色，靠留白与字重：
<section style="margin: 36px 24px; text-align: center;">
<p style="margin: 0;"><span style="font-size: 16px; font-weight: 700; color: {{标题色}}; line-height: 1.8;">金句内容</span></p>
</section>5. 数据栏
三列数据（嵌套 table，不用 flex）；两列就删一个 td 并调宽度。 注意两件兼容事：① 圆角 + `overflow:hidden` 必须放在外层 `<section>` 上（放在 table 上 iOS 不裁切，td 直角会戳出圆角）；② table 加 table-layout: fixed，否则某列文字一长就把 width:33% 顶破、三列不等宽；td 内补 word-break 防长串英文/数字撑破列。
<section style="margin: 24px 24px; border: 1px solid {{边色}}; border-radius: 12px; overflow: hidden;">
<table width="100%" cellspacing="0" cellpadding="0" border="0"
style="border-collapse: collapse; table-layout: fixed; border: none;">
<tr>
<td width="33%" style="background-color: {{浅底}}; padding: 18px 10px; text-align: center; word-break: break-all; border: none; border-right: 1px solid {{边色}};">
<p style="margin: 0 0 4px 0;"><span style="font-size: 26px; font-weight: 900; color: {{主色}};">87%</span></p>
<p style="margin: 0;"><span style="font-size: 12px; color: {{辅助灰}};">指标名称</span></p>
</td>
<td width="33%" style="background-color: {{浅底}}; padding: 18px 10px; text-align: center; word-break: break-all; border: none; border-right: 1px solid {{边色}};">
<p style="margin: 0 0 4px 0;"><span style="font-size: 26px; font-weight: 900; color: {{主色}};">3.2亿</span></p>
<p style="margin: 0;"><span style="font-size: 12px; color: {{辅助灰}};">指标名称</span></p>
</td>
<td width="34%" style="background-color: {{浅底}}; padding: 18px 10px; text-align: center; word-break: break-all; border: none;">
<p style="margin: 0 0 4px 0;"><span style="font-size: 26px; font-weight: 900; color: {{主色}};">No.1</span></p>
<p style="margin: 0;"><span style="font-size: 12px; color: {{辅助灰}};">指标名称</span></p>
</td>
</tr>
</table>
</section>6. 清单 / 要点
不用 ul/li，p + 序号 span。普通版：
<section style="padding: 0 24px; margin-bottom: 16px;">
<p style="margin: 0 0 10px 0; line-height: 1.7; font-size: 15px; color: {{正文色}};">
<span style="color: {{主色}}; font-weight: 700; margin-right: 8px;">1.</span>要点内容写在这里
</p>
<p style="margin: 0 0 10px 0; line-height: 1.7; font-size: 15px; color: {{正文色}};">
<span style="color: {{主色}}; font-weight: 700; margin-right: 8px;">2.</span>要点内容写在这里
</p>
</section>圆底序号版（清新治愈/活力橙黄）：
<p style="margin: 0 0 12px 0; line-height: 1.7; font-size: 15px; color: {{正文色}};">
<span style="display: inline-block; width: 20px; height: 20px; line-height: 20px; text-align: center; background-color: {{主色}}; color: #fefefe; border-radius: 50%; font-size: 12px; font-weight: 700; margin-right: 8px;">1</span>要点内容
</p>清单卡（整组要点放进浅底卡，适合"食材/工具/前提条件"）：
<section style="margin: 20px 24px; background-color: {{浅底}}; border: 1px solid {{边色}}; border-radius: 10px; padding: 16px 18px;">
<p style="margin: 0 0 10px 0;"><span style="font-size: 13px; font-weight: 700; color: {{主色}}; letter-spacing: 1px;">你需要准备</span></p>
<!-- 此处放上面的 p+序号 行 -->
</section>7. 步骤块
<section style="margin: 24px 24px 0;">
<p style="margin: 0 0 6px 0;">
<span style="display: inline-block; background-color: {{主色}}; color: #fefefe; font-size: 11px; font-weight: 700; letter-spacing: 2px; padding: 3px 8px; border-radius: 3px;">STEP 01</span>
</p>
<p style="margin: 0 0 8px 0;"><span style="font-size: 16px; font-weight: 700; color: {{标题色}};">步骤标题</span></p>
<p style="margin: 0 0 8px 0; line-height: 1.75; font-size: 15px; color: {{正文色}}; text-align: justify;">步骤说明文字。</p>
<p style="margin: 0;"><span style="font-size: 13px; color: {{辅助灰}};">⚠︎ 这一步的注意事项（可选）</span></p>
</section>8. 时间线
table 实现左点右文（深浅色页面通用，换色即可）：
<section style="margin: 20px 24px;">
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border: none;">
<tr>
<td width="20" valign="top" style="border: none; padding: 2px 10px 0 0;">
<span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: {{主色}};"></span>
</td>
<td style="border: none; border-left: 1px solid {{边色}}; padding: 0 0 20px 14px;">
<p style="margin: 0 0 4px 0;"><span style="font-size: 12px; color: {{辅助灰}}; letter-spacing: 1px;">2026.03</span></p>
<p style="margin: 0 0 4px 0;"><span style="font-size: 15px; font-weight: 700; color: {{标题色}};">事件标题</span></p>
<p style="margin: 0; font-size: 14px; line-height: 1.7; color: {{正文色}};">事件说明。</p>
</td>
</tr>
<!-- 更多事件复制 <tr> ；正面/危机事件换圆点颜色（语义色） -->
</table>
</section>9. 引用 / 出处卡
<section style="margin: 24px 24px; border-left: 4px solid {{主色}}; background-color: {{浅底}}; padding: 14px 16px;">
<p style="margin: 0 0 8px 0; font-size: 14px; line-height: 1.75; color: {{正文色}};">"引用的原话内容。"</p>
<p style="margin: 0;"><span style="font-size: 12px; color: {{辅助灰}};">—— 来源人物 · 身份/场合</span></p>
</section>10. 对比表
第一行做表头（td 加粗加底色，不用 th）。多列等宽稳定要靠 table-layout: fixed（给每个 td 配 width），td 内补 word-break: break-all 防长内容撑破列：
<section style="margin: 24px 24px;">
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; table-layout: fixed; word-break: break-all; border: 1px solid {{边色}}; font-size: 13px;">
<tr>
<td style="background-color: {{浅底}}; padding: 10px 12px; border: 1px solid {{边色}}; font-weight: 700; color: {{标题色}};">维度</td>
<td style="background-color: {{浅底}}; padding: 10px 12px; border: 1px solid {{边色}}; font-weight: 700; color: {{标题色}};">方案 A</td>
<td style="background-color: {{浅底}}; padding: 10px 12px; border: 1px solid {{边色}}; font-weight: 700; color: {{标题色}};">方案 B</td>
</tr>
<tr>
<td style="padding: 10px 12px; border: 1px solid {{边色}}; color: {{辅助灰}};">价格</td>
<td style="padding: 10px 12px; border: 1px solid {{边色}}; color: {{正文色}};">内容</td>
<td style="padding: 10px 12px; border: 1px solid {{边色}}; color: {{正文色}};">内容</td>
</tr>
</table>
</section>11. 代码块
不用 <pre>，section + pre-wrap；行数多时控制在关键片段：
<section style="margin: 20px 24px; background-color: #1F2329; border-radius: 8px; padding: 14px 16px;">
<p style="margin: 0; font-family: Menlo, Consolas, monospace; font-size: 12px; line-height: 1.8; color: #E6E6E6; white-space: pre-wrap; word-break: break-all;">const answer = 42;
console.log(answer);</p>
</section>12. 图片 / 视频与占位块
真图（https 外链，粘贴时编辑器自动转存）：
<section style="margin: 24px 24px;">
<img src="https://example.com/image.jpg" style="width: 100%; height: auto; display: block; border-radius: 8px;">
<p style="margin: 8px 0 0 0; text-align: center;"><span style="font-size: 12px; color: {{辅助灰}};">▲ 图注说明文字</span></p>
</section>图片占位块（本地图 / 只标位置没给地址的图；HTML 注释粘贴后会消失，必须用可视元素）：
<p style="margin: 24px 24px; border: 1px dashed {{边色}}; border-radius: 8px; background-color: {{浅底}}; padding: 26px 14px; text-align: center; font-size: 13px; line-height: 1.7; color: {{辅助灰}};"><strong style="color: {{主色}};">▢ 图 1</strong> 店门口的木质招牌，下午的光</p>视频占位块（视频无法随粘贴带入，必须在编辑器内用「视频」按钮插入——这句关键提示集中放在占位清单和交付说明里，块内只留一句短的）：
<p style="margin: 24px 24px; border: 1px dashed {{边色}}; border-radius: 8px; background-color: {{浅底}}; padding: 34px 14px; text-align: center; font-size: 13px; line-height: 1.7; color: {{辅助灰}};"><strong style="color: {{主色}};">▶ 视频 1</strong> 手冲注水的 30 秒（编辑器工具栏「视频」插入）</p>占位块为什么必须是单个 `<p>`（删除体验）：粘贴进编辑器后，删除动作 = 三击占位行（整段全选）→ Delete，若留下空框再按一次退格——两步删完。做成"容器套多个段落"的话，用户要跨段拖选、容易剩半个空壳。同理块内不堆操作说明（保持单行），说明集中进文末占位清单。
占位清单（放正文末尾，同样单段落好删；带删除方法提示）：
<p style="margin: 30px 24px 0; border-top: 1px solid {{边色}}; padding: 12px 0 24px; font-size: 12px; line-height: 1.9; color: {{辅助灰}};"><strong>媒体占位清单</strong> 图 1 店门口木招牌 ／ 视频 1 注水 30 秒（视频粘贴带不进，必须用工具栏「视频」插入）<br>替换方法：三击占位行全选 → 删除（留空框再按一次退格）→ 原位插入媒体 ｜ 全部替换后把本行也删掉</p>占位块外观跟随本篇设计（虚线框 + 浅底是默认形态，颜色全用设计 token）；全文占位统一编号。
13. 分隔
<!-- 细线（极简/商务） -->
<section style="border-top: 1px solid {{边色}}; margin: 32px 24px;"></section>
<!-- 色块短线（杂志） -->
<section style="width: 100%; height: 4px; background-color: {{主色}}; margin: 28px 0;"></section>
<!-- 居中点（极简/暖纸） -->
<section style="margin: 32px 0; text-align: center;"><span style="color: {{辅助灰}}; font-size: 14px; letter-spacing: 8px;">· · ·</span></section>深色页分隔带用骨架里的 <tr><td> 形式（见 0 节）。
14. 文末区
END 标记 + 互动引导（按方向调整语气）：
<section style="margin: 40px 24px 0; text-align: center;">
<p style="margin: 0 0 24px 0;"><span style="font-size: 12px; color: {{辅助灰}}; letter-spacing: 6px;">— END —</span></p>
<p style="margin: 0; font-size: 14px; color: {{正文色}}; line-height: 1.8;">你怎么看？评论区聊聊 👇</p>
</section>递进式结尾（暗夜科技专属）：连续几行文字颜色透明度递增，最后一句用主色。
15. 参考资料（外链处理）
外链不可点（未认证号），统一收到文末；正文中对应位置加上标 <span style="font-size: 11px; color: {{主色}};">[1]</span>：
<section style="margin: 28px 24px 0; border-top: 1px solid {{边色}}; padding-top: 14px;">
<p style="margin: 0 0 8px 0;"><span style="font-size: 13px; font-weight: 700; color: {{辅助灰}};">参考资料</span></p>
<p style="margin: 0 0 6px 0; font-size: 12px; line-height: 1.7; color: {{辅助灰}}; word-break: break-all;">[1] 文章标题 — example.com/path</p>
</section>16. 文末关注 / 作者卡
公众号文末刚需组件。账号信息（名称 / 简介 / 引导语 / 往期标题）一律用【占位文字】并加注释让用户替换，不可代写：
<section style="margin: 32px 24px 0; border-top: 1px solid {{边色}}; padding-top: 22px; text-align: center;">
<!-- 以下账号信息为占位，发布前替换 -->
<p style="margin: 0 0 6px 0;"><span style="font-size: 14px; font-weight: 700; color: {{标题色}}; letter-spacing: 1px;">【公众号名称】</span></p>
<p style="margin: 0 0 14px 0;"><span style="font-size: 12px; color: {{辅助灰}};">【一句话账号简介】</span></p>
<p style="margin: 0;"><span style="font-size: 12px; color: {{主色}};">【关注引导语，按文章气质改写】</span></p>
</section>往期推荐列表同理（标题用占位；只有公众号文章链接 mp.weixin.qq.com 可保留为可点链接）。样式形态跟随本篇设计方案。
---
组装节奏（重要）
组件是调味料，正文才是主菜。组装时遵守：
- 每个章节 = 章节标题 + 若干正文段（主体）+ 至多 1-2 个组件
- 两个卡片组件不要紧挨着连发，中间隔正文段
- 全文组件种类 ≤ 5 种（不含正文/标题/分隔），重复使用同种组件保持版面统一
- 数据、金句、引用——只有内容里真有这些素材时才用对应组件，不要为了好看编造
设计感手艺库（让版面"看起来被设计过"）
wechat-compat.md 保证不崩，guidelines.md 保证不乱——这份文件保证好看。 所有手法都已通过微信兼容硬约束（无 flex/渐变/定位，rgba 只用于文字色）。
先分清两类规则——这关系到整个技能的灵魂：
- 硬规则只有两处：wechat-compat.md（微信兼容，违反就崩）和 SKILL 的内容零改动（改了原文就是错）。它们与文章无关，任何文章都不可违反。- 这份文件里没有一条是硬规则。 全是设计判断的"默认倾向"——多数文章的好起点。这里的每个数字（34px、1.4、≤5 次、72px……）都是"拿不准时这样不容易错"，不是必须达标的红线。
>
它的用途是对抗一个具体的惰性：模型默认会"每个能冒险的地方都选最安全的刻度"（hero 取最小、对比压到刚够、构图无脑居中、装饰用通用符号），结果干净但平庸。用这些倾向把自己从惰性里拽出来。
>
但判断"这篇文章要什么"永远在"规范说什么"之上。 极简小品要弱对比和大留白、对称美学要居中、资讯短文不需要金句重音——这时就该违背下面的数字，服从文章。下面凡标"≥""≤"的，读成"通常往这个方向走"，不是"低于此判不合格"。
目录
0. 总纲：经营版面，不要装饰文字 ← 先读这条，它统领下面所有手法 1. 反平庸三个着力点 2. 廉价感的五个来源 3. 一篇一个视觉记忆点 4. 标题区构图（警惕无脑居中） 5. 字号系统：让对比够狠 6. 留白节奏 7. 色彩：主色要克制 8. 装饰系统：从内容长出来 9. 纯文字文章的版面变奏 10. 对齐与轴线 11. 版面构成进阶 12. 字体进阶（iOS 渐进增强） 13. 媒体与数据的设计化 14. 微距精致度（一放大就露怯的地方） 15. 设计感自检
---
总纲：经营版面，不要装饰文字
这是设计感的命门，也是下面所有手法的脊梁。 排版做得平庸，几乎都是同一个病：把版面做成了「均质流式 + 局部装饰」——文字一段段从上往下流，每段处理一模一样，只在某个词上染个色、加个块、放大个字号。这叫"给文字穿衣服"，衣服再花，骨架还是一根直筒。
真正有设计感的排版，是把文字当造型材料摆进版面去经营——版面有疏密、有错落、有大小对比、有被单独"拎出来"的视觉版块。一句话：
平庸 = 模板填进去的均匀；设计 = 版面被经营过的痕迹。
经营版面有五个着力点（每个的具体做法见对应小节，这里是统领）：
1. 关键句"提案化"——把金句 / 题眼句从段落里拎出来，给它一整块版面（放大、错落断行、大留白、配大标点），让它成为一个"视觉版块"，而不是段落里一行被染色的字。〔详见「一篇一个视觉记忆点」「纯文字文章的版面变奏」〕 2. 标题"造型化"——不默认居中两行同字号：关键字超大其余小、多行错落、可不对称（左对齐 + 单侧大留白）。〔详见「标题区构图」「字号系统」〕 3. 入口"特殊化"——首段 / 引言不和正文一样处理，做成"被设计的入口"（首字放大、大号、缩进、竖线、不同字重）。〔详见「版面构成进阶」首段 lede / 首字放大〕 4. 段落错落与疏密——不全是通栏顶格：关键句缩进 / 变窄 / 偏置，注释小字成块；密处密、疏处一句占大半屏。〔详见「纯文字文章的版面变奏」「留白节奏」〕 5. 贯穿母题——一个讲究的、从本篇内容长出来的编号 / 符号 / 线条语言统一全文，形成"这是被设计的整体"的识别。〔详见「装饰系统：从内容长出来」〕
怎么落实，看这篇文章要什么（这五条全是判断不是硬规则）：散文靠提案化和疏密、资讯靠层级和数据视觉化、教程靠步骤造型——但无论哪种，都要让版面"看得出被经营过"，而不是把内容倒进一个均匀的段落流。下面所有小节，都是在为这五个着力点提供具体弹药。
反平庸三个着力点（倾向，非硬规则）
平庸 ≠ 难看。平庸 = 安全、正确、但没有记忆点、可替换。多数平庸出在这三处，但怎么落实由这篇文章定：
1. 该用足的自由别用一半：字号对比、留白、大字——这些不消耗兼容预算。模型天性是"都设成 15/16/17 最安全"，结果对比全无。倾向是敢拉开；但弱对比、满版克制本身是某些极简/性冷淡风格的有意选择，那种文章就别硬拉。 2. 结构每篇不同，不只是换色：换个主色不叫现场设计。封面构图、节奏、装饰逻辑都该随内容变。检验：这套设计（连构图骨架，不只配色）挪到另一篇主题不同的文章，应该明显不对劲。 3. 微距决定精致度：半角逗号、孤儿引号、过松的标题行高、不统一的数字空格——读者说不出哪不对，但"差一口气"全来自这里。这是少数接近硬规则的细节（基本任何文章都成立），见微距小节。
廉价感的五个来源
生成后先对照这五条排查，命中任何一条都说明"还没设计完"：
1. 字号对比太弱——标题 18px 配正文 15px 等于没有对比；对比要狠（见字号系统） 2. 处处等距、处处居中——所有间距一个值、所有元素都居中，版面就没有张力 3. 颜色不敢用 / 用太滥——全文只有一处 12px 彩色小字像忘了设计；或强调色到处标记像墙漆。要么大胆一处，要么彻底克制 4. 组件长得太"功能"——默认圆角 + 默认浅底 + 默认边框堆一起 = 后台管理系统脸。每个组件形态都该重新设计 5. 挤——留白不足是廉价感头号来源，间距给足比任何装饰都管用
一篇一个视觉记忆点
设计方案必须回答：读者如果截图分享，最可能截哪一屏？ 那一屏就是记忆点，三选一：
- 标题区当封面设计（最常用）：第一屏做成杂志封面，手法见下节
- 一套贯穿全文的装饰语言：独特的序号 / 分隔符 / 标签，让人翻三屏就认出这个号
- 一处大胆的金句版面：大引号 + 大留白 + 大字，情绪锚点
只选一个，其余克制——两个记忆点等于没有记忆点。
标题区构图
封面是读者在信息流里 0.3 秒决定划不划走的唯一一屏，要携带"这篇不一样"的信号。警惕无脑居中——居中三件套（居中 kicker + 居中标题 + 居中短线）是信息熵最低、最容易被随手做出来的构图，连续几篇都这样就成了套路。下面几种构图换着用、跟着文章气质选；但居中本身没有错：对称美学、极简、仪式感强的文章，居中可能正是最优解——别把"别总居中"误读成"禁止居中"：
1. 左轴杂志式（默认首选）：kicker 与大标题全 text-align: left，标题区 padding: 64px 28px 48px，标题占左 2/3、右侧用 table 空列 <td width="33%"> 留白——立刻从"菜单"变"刊物封面" 2. 超大字暴力对比：主标题敢上 34-44px，配 10-11px 英文 kicker，同屏最大 ÷ 最小 ≥ 3.5。30px 在 677 版心里只是中标题，撑不起封面 3. 大色面满铺：整块主色底（padding: 56px 24px 起步），色块延伸到开篇第一段之后（开篇段反白压在色块里），形成"封面→内文"的明度坠落，而不是色块戛然而止；底部加一条 1px 文字色细线当"地平线" 4. 中英混排：中文大标题 + 大写英文小字（letter-spacing: 3-5px，可配 text-transform: uppercase）——最容易出杂志感；英文用栏目名/译名/拼音，别硬造 5. 双线框 / 错位：border: 3px double 双线框（纸质邀请函感）；或色块 section 内嵌白底 section、padding 四边不对称做"探出"错位（不用负 margin）
字号系统：让对比够狠（但看文章）
字号对比是版面戏剧性第一来源，且完全不消耗兼容预算——最该用尽、却最常被做胆小的自由。下面是常见有效区间，不是必须达标的尺：
| 档 | 常见区间 | 说明 |
|---|---|---|
| hero | 34-44（深色文学可更大） | 想要封面冲击时往大走；但极简/安静的文章，26-28 配大留白也对 |
| 章节 / 步骤标题 | 20-22 | 和正文够区分即可 |
| 正文 | 15-16 | 甜点位 |
| 注释 / 标签 | 11-13（英文装饰 9-11） | 敢小，配宽字距 |
对比的判断（不是硬阈值）：相邻主干档（hero / 章节 / 正文）差太小就等于没设计——18/15、22/16 这种要警惕，多半是没敢拉开。经验起点是相邻拉到 1.4 倍以上，但这是参考不是红线：弱对比的高级感（如极简、文学）是有意为之，那种情况别为了"达标"硬拉。判断标准永远是"这篇要冲击还是要克制"，不是某个比值。
- 金句区通常不放和正文同档的副句——大字独占留白，比"大字 + 中字"双行更有力（除非那句副句确实重要）
- 数字 / 英文 / 序号用衬线（Georgia）或等宽（Menlo），比中文默认精致一档；要当视觉锚点的大数字、大序号往大走（数据 28px 起、水印序号 48-56px）
- 字重也是档位：400 / 700 / 900 三档，大字号标题配 800-900 才压得住
留白节奏：要有重音
留白不是"安全的均匀缓冲垫"，是控制读者呼吸频率的乐器。匀速的留白 = 一条没起伏的平路。
- 留白重音：有情绪起伏的文章（散文、观点、品牌故事）值得在最高潮处（如金句屏）给一处大留白，上下 padding 72-96px，前后各空出大半屏——情绪才拉得开。但资讯、清单、工具类短文不需要刻意制造重音，那会显得空、拖节奏。看文章有没有"情绪高点"再决定
- 段间距分两级：同一意思群内的段落用小段距（18-20px），意思群切换处用大段距（36-40px）——读者要能感到"这里是段落、那里是章节"的呼吸分组，而不是全程 22px 匀速
- 章节之间 ≥ 48px；标题区上下 ≥ 40px；卡片内边距 ≥ 18px、与正文间 ≥ 24px
- 正文行距 1.75-2.0（但标题要收紧，见微距）
- 拿不准就把所有间距 ×1.5 再往回删——宁可空，不可挤
色彩：主色有出现预算
"用对颜色"是 60 分，"用得克制到位"才 90 分。新手把强调色当荧光笔到处划，高手把它当印章只盖在最关键处。
三个不会错的策略（设计方案写明用哪个）：
1. 低饱和大底 + 高饱和一点：大面积底色饱和度压到 10% 以下（手动换算实色 hex），点缀色饱和拉满 2. 全灰阶 + 唯一主色：黑白灰做足骨架，主色只出现在 2-3 个关键位置——出现越少越贵 3. 同色系三档：主色深/中/浅（深=标题、中=强调、浅=底色），天然和谐
通用纪律：
- 主色用得越克制越贵（手感，不是计数）：到处都是饱和主色，读者就脱敏了，它从"点睛"变"墙漆"。如果一篇里主色出现近十处（kicker、每个序号、每处加粗都用主色），就把次要处改用辅助灰或"正文色加粗"，把饱和主色留给最关键的两三处。"≤5 次"只是个提醒量级，不是要去数
- 大色面 ≤ 2 处（标题区 / 金句区），但出现就足量——半屏色块比一条色边有设计感
- 文字不用纯黑
#000（用 #1A1A1A~#333）；深底不用纯白（用 #F0EBE2 类米白）。深色页拉开明度三档（亮标题 #F5F0E6 / 中正文 / 暗注释），高级感来自明度精确分层 - 敢留一个面积极小的"破口色"（同色系外的一点对比色，≤ 一个角标大小），让和谐的版面活过来
- 浅底卡片底色"几乎看不见才刚好"（和页底差 3-5 个灰度）
装饰系统：从内容长出来
· · ·、大引号、短色线、❋——这是所有"文艺向排版"的公共词汇表，谁都在用，挪到任何文章都成立 = 没有记忆点。装饰元素必须从这一篇的内容意象里长出来：
- 咖啡手冲文 → 分隔符用滴滤水线意象（居中
● · ·递减点、中间断开的点线）；kicker 用POUR/BLOOM而非泛泛的栏目名 - 凌晨对话文 → 用文中本就有的时间点（
01:00/04:00）当贯穿全文的段落群记号（时间来自原文，不违反内容零改动） - 教程文 → 步骤数字做成 48-56px 水印大数字，大到几乎当背景纹理
通用装饰库（每篇选一套，混用即廉价；具体形态仍要往内容上靠）：
- 大引号：Georgia 的
"放大 64-80px，主色低透明文字色（rgba 文字安全）压在金句上方。注意成对——开引号压顶就要有句末小闭引号收尾，禁止孤儿开引号：
<p style="margin: 0; line-height: 0.7;"><span style="font-family: Georgia, serif; font-size: 72px; font-weight: 700; color: rgba(62,92,69,0.18);">“</span></p>- text-shadow 微光/描边（三端安全，深色页高级感利器，模糊 ≤12px）：
<span style="color: #F0EBE2; text-shadow: 0 0 12px rgba(216,163,91,0.35);">深底标题发微光</span>
<span style="color: #3E5C45; text-shadow: 2px 2px 0 #C9D6CC;">浅底标题印刷错位感</span>- box-shadow inset 做色条/内描边（一个属性顶一个额外元素，三端安全）：
<section style="box-shadow: inset 0 -3px 0 {{主色}}, 0 2px 10px rgba(0,0,0,0.05); padding: 18px;">底部主色条 + 浮起</section>- 实色拼阶梯渐变（渐变禁用下的过渡感补偿，纯实色三端安全）：多个相邻实色 td 拼出由深到浅的色带
- text-stroke 空心字（渐进增强，超大 hero 数字用，必须配 color 兜底）：
<span style="font-size: 64px; font-weight: 900; color: #16202E; -webkit-text-stroke: 1.5px #D8A35B;">2026</span>- 断行色块标题：行内 span 加背景与 padding，断行自动形成错落色块
- 序号系统（一篇一种）：56px 衬线水印数字 / 圈号 ① / 「05 /」斜杠 / 罗马数字 Ⅰ Ⅱ Ⅲ
- 安全字符库（纯文本三端安全，避开带变体符 ⚠︎▶︎）：线框
─ │ ╱ ╲、装饰✦ ❋ ◈ ◇、几何▲ ● ◆ ■ ▢、引号「」『』 — ‖ - 页脚署名：全文统一小字页脚（11px 大写英文 +
letter-spacing: 3px+ 辅助灰），一眼"正规军"
纯文字文章的版面变奏
纯文字不等于纯段落。散文/观点文最考验功力——"段落 + 偶尔一个组件"是最典型的平庸。以下全在硬约束内，用来给纯文字流切出节奏（只动版式不动字）：
- 首字放大不止用一次：每个意思群的首段都可首字放大（24-28px、主色、衬线），形成贯穿全文的书卷气节拍
- 窄段旁白：关键短句独立成段并左右多给 padding（如
padding: 0 64px）缩窄——窄段天然显得重要、像旁白 - 对话/声音差异化：若文中有两个声音（如人机对话、引述他人），给其中一个统一的差异化样式（斜体 + 左色条 + 略小 + 主色），用排版讲叙事
- 提问句当小金句：散文里的关键追问拎出来放大居中，做成小型停顿屏；长文要多个这样的视觉停顿点，不是只在结尾放一个金句
- 段落群记号：每 3-4 段用一行居中极小装饰（来自内容的记号，如时间戳）+ 上下 48px 空白做"换气"
对齐与轴线
- 一篇只有一种主轴：通栏居左（杂志感、信息文）或关键节点居中（文艺、叙事），别来回跳
- 装饰也守轴线：居左轴的文章，分隔线、标签、序号都居左
- 两端对齐（justify）只给整段中文正文；标题、短句、含英文多的段落用 left，避免大空洞
版面构成进阶
- 三层标题结构（kicker / title / dek）：栏目眉（11-12px 宽字距）+ 大标题 + 摘要句。dek 只有原文自带副题/摘要时才有（原句照排）；没有就退回两层，不代写、不从正文拼接（内容零改动铁律）
- 不对称构图：居中是安全牌，居左大标题 + 右侧留白才是杂志牌（table 做 1/3 + 2/3）
- 首段 lede：第一段比正文大 1-2px、行距略松——读者"走进文章"的缓坡
- 半框：只留
border-left + border-bottom（或 top+right）的不完整边框，比四边框轻、比无框有结构 - 一屏一情绪：hero（低密度大色面）→ 正文（中密度）→ 卡片/数据（高密度）→ 金句（极低密度留白）交替；连续两屏同密度就单调，按"屏"规划而非按"段"
字体进阶（iOS 渐进增强）
font-family 写不存在的字体会自动回退——iOS 出彩、Android 兜底：
| 气质 | 字体栈 | 效果 |
|---|---|---|
| 文学衬线 | Baskerville, Georgia, 'Songti SC', serif | iOS 出 Baskerville，Android 回退宋体 |
| 人文无衬线 | Optima, 'PingFang SC', sans-serif | Optima 喇叭笔画有人文气 |
| 现代利落 | 'Avenir Next', 'PingFang SC', sans-serif | 几何无衬线，科技/商务 |
| 编辑部混搭 | 标题衬线 + 正文无衬线 | 杂志编辑部感，全文只许两种 |
| 数字专用 | Georgia, serif 或 Menlo, monospace | 数据、日期、序号单独指定 |
纪律：一篇 ≤2 个字体族；中文字重 400/700/900 三档。
媒体与数据的设计化
- 宝丽来图框：图片外包白底 padding + 细边 + 底部图注，"打印照片"质感（图片占位块也套同样的框）：
<section style="margin: 28px 24px; background-color: #fefefe; border: 1px solid {{边色}}; padding: 10px 10px 12px;">
<img src="https://…" style="width: 100%; height: auto; display: block;">
<p style="margin: 10px 0 0 0; text-align: center;"><span style="font-size: 12px; color: {{辅助灰}}; letter-spacing: 1px;">图注文字</span></p>
</section>- 字符数据条：等宽字符画比例，绕开"百分比宽度不可靠"，100% 安全：
<p style="margin: 0 0 10px 0; font-family: Menlo, monospace; font-size: 13px; color: {{正文色}};">A 方案 <span style="color: {{主色}};">▓▓▓▓▓▓▓▓</span><span style="color: {{边色}};">░░</span> 80%</p>- 卡片去"功能脸"：默认圆角 + 满底 + 边框 = 后台表单。文学/生活类优先用"细线 + 留白成组"或半框，少用满底圆角块；同一篇里两张不同用途的卡（如清单 vs 警示）形态必须不一样，别都是浅底圆角
- 大数字永远再大一号：数据是天然视觉锚点，28px 起步，配 11px 标签
微距精致度
这是"一放大就露怯"的地方，普通读者说不出但能感到"差一口气"。生成后必查（涉及改原文字符的，只识别报告、写进交付建议，不擅自改——见内容零改动铁律）：
- 中文语境里的半角标点：正则扫
,.?!是否混进中文句子（应是，。？！）→ 列入交付建议 - 孤儿大引号：开引号
"必须有闭引号收尾，或做成首尾对称——禁止只放一个开引号悬着 - 标题行高过松：大标题
line-height收紧到 1.2-1.3（现在常错设成 1.6，两行标题空一个字高），正文 1.75-2.0——标题紧、正文松，二者必须拉开，反了层次就被磨平 - 数字/英文与中文空格策略全文一致：要么全加空格、要么全不加，不能这句"3 个"那句"3个"
- 首字放大对齐：放大首字加
display: inline-block+ 锁line-height，别把首行行高顶高与第二行错位
设计感自检
这些不是验收红线，是帮你发现"哪里偷懒选了最安全刻度"的反思题。某项答"否"如果是这篇文章的有意选择（极简的弱对比、刻意的居中、短文不要重音），那就是对的——只需在设计方案里说清为什么。怕的不是违背某条，是"无意识地默认成最平庸的那档"：
- [ ] （最重要）版面是"被经营过"的还是"均质流式"的？ 通篇是不是"段落 + 偶尔染个色"？有没有至少一处把关键句"提案"成视觉版块、有没有疏密错落，还是从头到尾匀速段落流？
- [ ] 标题区单独截图，配得上当这篇的"封面"吗？居中是有意为之、还是随手就居中了？
- [ ] 字号对比够不够（同屏最大/最小、相邻主干档）？如果对比弱，是极简的有意选择，还是没敢拉开？
- [ ] hero 是不是太小了？（除非有意走极简小标题路线）
- [ ] 有且只有一个视觉记忆点吗？装饰是从这篇内容长出来的、还是随手用了通用符号（
···/大引号/短线）？ - [ ] 主色是不是滥了（到处饱和主色）？大色面是不是太多？
- [ ] 该有情绪重音的地方留白够吗（如果这篇有情绪高点）？灰度有没有节奏，还是匀速的灰？
- [ ] 标题行高收紧了吗（别和正文一样松）？
- [ ] 微距：半角标点混进中文 / 孤儿引号 / 数字空格不一致——这几条基本任何文章都该过
排版质量规范（文字与节奏）
三份规范的分工：wechat-compat.md 管"崩不崩"（硬规则）、design-craft.md 管"有没有设计感 / 版面经营"、这份文件管"读不读得下去"——阅读节奏、移动端完读率、中文细节、层级纪律。三者都服从 SKILL 的"判断高于规范"原则（兼容除外）。 核心理念：呼吸感 > 结构感，内容 > 样式，简洁 > 花哨。头部大号（槽边往事、三联、GQ 实验室）全是克制的赢家。
参数速查
| 元素 | 推荐值 |
|---|---|
| 正文字号 | 14-16px（15px 是大多数方向的甜点位） |
| 注释/图注 | 12-13px |
| 行间距 | 正文 1.6-1.9 倍（深色长文别同时 16px+2.0，会散）；2.0 留给金句屏 |
| 字间距 | 0.5-1px（标题可负，标签可 2-4px） |
| 正文颜色 | 深灰系（#262626 / #333 / #3D3429），避免纯黑 #000 大面积使用 |
| 两侧留白 | 24px 左右 padding |
| 段落长度 | 3-4 行一段，一段一个意思 |
层级纪律
- 全文字号层级 ≤ 4 档（大标题 / 章节标题 / 正文 / 注释），档内严格一致
- 全文颜色 ≤ 3 种（正文色 + 主强调 + 至多一个辅助），同一用途永远同一颜色
- 章节标题样式全文统一用一种变体，不混搭
段落节奏
- 关键句独立成段，制造停顿
- 连续 3 段以上纯文字后，安排一次"换气"：金句、小标题、图片或留白分隔
- 每 2-3 段把"题眼句"原位升格加粗（跳读测试要过：只看加粗能拼出主线），但全文加粗占比 < 10%、单屏强调不超过 1 处——既不能多到等于没有，也不能少到跳读者抓不到主线
- 开头 3 行内必须给读者一个继续读的理由（钩子：问题、冲突、数据、场景）
移动端阅读工程（完读率命门）
设计感解决"愿不愿意点开"，这一节解决"点开后读不读得下去"。以下都是提升完读率的默认倾向，不是硬性指标——资讯、工具、极简、长篇散文各有取舍，数字（padding、字号、行距、加粗密度）都按这篇文章的文体判断，下面给的是"拿不准时这样不容易错"。唯一接近硬性的只有"深色正文用实色 hex"（那是 compat 第 18 条的兼容问题，不是审美）。
前 3 屏留住人（跳出最陡的地方）：
- 标题区顶部 padding 别奢侈：散文/随笔类收到 36-40px（满屏大色面封面例外，但也别超 56px）；标题到正文的间距收到 28-30px
- 目标：第一屏结束前露出 2-3 行真正的正文，让读者第一次滑动前就尝到内容钩子——别让首屏只有"标题 + 一句话 + 大留白"
- 媒体占位框别过早过密：开头连续 2-3 句正文再上第一个图/视频占位，不要正文每 1-2 句就撞一个灰框，把开头剁碎；占位框 padding 收到 18-22px、底色和页底反差压小，让它"安静等媒体"而非抢戏
长文要有进度感（中段是弃读高发区）：
- 每 3-4 段安排一个呼吸节点，把长文切成 3-4 个"段落群"，读者才知道"读到哪了、还剩多少"
- 单线叙事不能自拟小标题（铁律），就用纯装饰节点制造进度：分隔符多放 1-2 处放在情绪转折点；或用
Ⅰ Ⅱ Ⅲ罗马数字 / 来自原文的时间戳（01:00）做水印记号——无文字内容、不违反内容零改动，但给了"翻篇了"的方位感
可扫读（多数读者是扫读者）：
- 跳读测试必须过：只看加粗和节点，能拼出文章主线。做法是每 2-3 段把那一段的"题眼句"原位升格加粗（不是无脑加粗，是把关键句标出来）——成品常见毛病是 800 字全文才 2 处加粗，跳读者抓不到主线
- 教程/清单类：把动作关键词（"粗研磨""1:10""别超过 24 小时"）加粗或上色，扫读者顺着就能复述全套流程
深色长文护眼（呼应 compat 第 18 条）：
- 正文用实色 hex，不用 rgba 半透明（Android 可能丢 alpha 偏色，且大面积低对比正文连读几屏眼睛会累）
- 深色底正文对比度宁可略高：把想要的"柔和灰"再往亮提一档（如 0.82 透明的效果，实色化后取更亮一档），护眼优先于"高级的灰"；rgba 半透明只留给装饰文字
字号与单屏信息量：
- 正文 15px、行距 1.85-1.9、字间距 0.5px 是手机耐读甜点位；深色长文别同时上 16px + 2.0 行距 + 0.8 字间距——三个都顶上去，窄列里每行只剩 17-18 字，单屏信息太少、滑动翻倍、显得拖
- 教程的清单/避坑信息字号不小于正文（它们是正文级信息不是图注）——扫读优先级最高的内容做最小字，是优先级倒挂
互动出口（完读后 3 秒是转发黄金窗）：
- 结尾别只给"句号式收束"（END/署名）。在情绪顶点处预留一行互动引导的版式位——文案需用户填（不自拟文字，交付时作为建议项给出位置和示例），排版先把位置和样式做好
- 文末统一补关注引导占位卡（见 components 第 16 节），别只有部分文章有
中文排版细节
纯排版动作（不动原文字符，正常应用）：
- 首行不缩进（移动端缩进显得不齐），用段距分段
- 大段中文用
text-align: justify两端对齐；含较多英文/数字的段落可保持左对齐避免大空隙
润饰动作（会修改原文字符——默认不做，只写进交付说明作为建议，用户同意后才应用）：
- 中英文之间、数字与中文之间加空格（如：用 3 个步骤搞定 GPT 排版）
- 统一全角中文标点；统一引号风格（「」或 ""）
- 省略号用 ……、破折号用 ——
组件使用纪律
- 卡片、色块是调味料：每章节至多 1-2 个组件，两个卡片之间隔正文
- 只为真实素材用组件——文中真有数据才上数据栏，真有金句才上金句卡
- 列表超过 7 条要重新组织（分组或删减），没人读完 12 条要点
图文搭配
- 长文每 3-5 段配一张图；短文一张头图即可
- 图片必须配图注（12-13px 辅助灰，居中）
- 图片风格全文统一（实拍/插画/截图别混搭）
结尾设计
- 收尾要有"结束感"：END 标记、总结金句或行动号召三选一
- 互动引导放最后（提问、投票、留言话题），一篇只放一个
发布前的质量自查
- [ ] 手机宽度预览过一遍（预览页有切换按钮）：没有超长段落、没有孤行标题
- [ ] 第一屏结束前露出 2-3 行正文了吗（标题区 padding 没把首屏占满）？
- [ ] 跳读测试：只看加粗和节点，能否抓住文章主线（每 2-3 段一处题眼加粗）
- [ ] 长文（>8 段）有 3-4 个进度节点吗？深色正文用的是实色 hex 不是 rgba 吗？
- [ ] 色彩数一遍 ≤ 3 种；字号档位数一遍 ≤ 4 档
- [ ] 开头 3 行有钩子；结尾有互动引导位 + 关注卡占位
#!/usr/bin/env python3
"""完整性校验：原文内容必须完整出现在排版输出里（排版不是编辑）。
用法: python3 verify-completeness.py <原文.md/.txt> <输出.html>
通过: 退出码 0
失败: 退出码 1，并列出输出里找不到的原文子句（说明被删改/改写）
校验粒度是"子句"（按 。！？；：换行 切分）：
- 对排版重组（拆段、枚举句拆成多行、标签去尾冒号）天然鲁棒
- 对删句、改字、换词、改句内标点零容忍
被跳过的内容（属于排版转化，不算正文）：媒体标记行（【图/【视频/![]()）、
Markdown 语法记号（#、-、>、**、`）、枚举词前缀（"步骤一："）、长度 < 4 的碎片。
"""
import html as html_mod
import re
import sys
from pathlib import Path
def normalize(text):
"""去掉所有空白——排版会任意重排空格与换行。"""
return re.sub(r'\s+', '', text)
def is_media_line(line):
s = line.strip()
if re.match(r'^!\[[^\]]*\]\([^)]*\)\s*$', s):
return True
if re.match(r'^[【\[（(]\s*(图|视频|音频|配图|封面)\s*[\d一二三四五六七八九十]*\s*[：:、]', s):
return True
if re.match(r'^（?此处(放|配|插)(图|视频)', s):
return True
if re.match(r'^https?://\S+$', s):
return True
return False
def strip_markdown(line):
s = line.strip()
s = re.sub(r'^#{1,6}\s*', '', s) # 标题记号
s = re.sub(r'^>\s*', '', s) # 引用记号
s = re.sub(r'^[-*+]\s+', '', s) # 无序列表
s = re.sub(r'^\d+[.、)]\s*', '', s) # 有序列表
s = re.sub(r'\*\*([^*]+)\*\*', r'\1', s) # 粗体
s = re.sub(r'\*([^*]+)\*', r'\1', s) # 斜体
s = re.sub(r'`([^`]+)`', r'\1', s) # 行内代码
s = re.sub(r'!\[[^\]]*\]\([^)]*\)', '', s) # 行内图片
s = re.sub(r'\[([^\]]+)\]\([^)]*\)', r'\1', s) # 链接 → 链接文字
# 枚举词前缀（转为版式编号属于排版）
s = re.sub(r'^(步骤|第)\s*[\d一二三四五六七八九十]+\s*[步章节条款]?\s*[：:.、]\s*', '', s)
return s
def source_clauses(text):
"""原文 → 需逐一核验的子句列表 [(行号, 子句)]。"""
clauses = []
for idx, raw in enumerate(text.splitlines(), 1):
if not raw.strip() or is_media_line(raw):
continue
line = strip_markdown(raw)
for piece in re.split(r'[。！？；：!?;\n]', line):
piece = piece.strip().strip('"""\'「」『』')
if len(normalize(piece)) >= 4:
clauses.append((idx, piece))
return clauses
def output_text(html):
"""输出 HTML → 纯文本（去注释/脚本/样式/标签，解实体）。"""
s = re.sub(r'<!--.*?-->', '', html, flags=re.S)
s = re.sub(r'<script.*?</script>', '', s, flags=re.S | re.I)
s = re.sub(r'<style.*?</style>', '', s, flags=re.S | re.I)
s = re.sub(r'<[^>]+>', '', s)
return normalize(html_mod.unescape(s))
def main():
if len(sys.argv) != 3:
print(__doc__)
sys.exit(2)
src = Path(sys.argv[1]).read_text(encoding='utf-8', errors='replace')
out = output_text(Path(sys.argv[2]).read_text(encoding='utf-8', errors='replace'))
clauses = source_clauses(src)
missing = [(ln, c) for ln, c in clauses if normalize(c) not in out]
print(f'完整性校验：原文子句 {len(clauses)} 条，命中 {len(clauses) - len(missing)} 条')
if missing:
print(f'\n✗ 未通过：{len(missing)} 条原文内容在输出中找不到（被删改/改写）——')
for ln, c in missing:
print(f' 原文第 {ln} 行: {c[:60]}')
sys.exit(1)
print('✓ 通过：原文内容完整在场，未发现删改')
sys.exit(0)
if __name__ == '__main__':
main()
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112kFAQ
Is Wechat Typesetting Cy safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.