Wechat Article Blueprint · 公众号科技蓝排版
Overview
把任意文章排版成公众号可直接粘贴、样式不丢失的科技蓝（Tailwind Blue/Slate）深度报告风 HTML。核心铁律：全内联样式——公众号编辑器粘贴时会剥掉 <style> 块和外部 CSS，只有元素上的 style="" 会跟随。
风格一句话
蓝主色 + slate 灰正文 + 金句引用框 + 块状列表 + 对比表格 + 红线/橙框警示 + 深色代码块 + 一句话总结收尾。参考范本：医疗科技类深度文章《医疗Agent平台》的排版观感。
工作流程
- 读源内容：接收 Markdown / 纯文本 / 现有 HTML，梳理文章章节结构与序号/子条目。
- 读规范与模板：读三份素材——
references/style-guide.md（色板与设计原则）、assets/template.html（抽象组件骨架）、assets/example-medical-kb.html（完整成品样板，即《医疗 AI 要落地，先建好知识库这个底座》成品，含真实内容与组件组合，最推荐"照此文件改"）。 - 搭建骨架：优先以
assets/example-medical-kb.html为底复制改写（组件组合完整、含正文内容可对照）；从零搭新结构时用assets/template.html。 - 内容→组件映射：
- 大段落 → 正文段落（关键句<strong style="color:#1E293B;">）
- 步骤/序号/坑-填法 → 块状列表（数字徽章 + 标题行 + 说明行，背景#F8FAFC/#FFFFFF交替）
- 对比/选型/清单 → 表格（蓝表头 + 斑马纹）
- 结论/定义 → 金句引用框（#F3F6FF底 + 蓝左条）
- 医疗安全/不可越过 → 红线警示框（红底 + 🚫）
- "最需谨慎" → 谨慎橙框
- 代码/问答演示 → 深色代码块（#0F172A底）
- 三层/并列对象 → 卡片（彩色左条 + 右上状态徽章）
- 收尾 → 结语深蓝块 + 一句话总结框 - 补发布元素：头部标签条/日期、底部作者条（公众号名/简介/二维码占位）、合规声明（医疗类必加"不构成医疗或用药建议"）。
- 校验（见下方检查清单）。
- 交付：
present_files打开预览；告知用户 Ctrl+A → 复制 → 公众号编辑器粘贴。
校验清单（交付前逐项过）
- [ ] 全内联：无
<style>块、无 class、无外链 CSS（grep "<style>" 文件应为空） - [ ] 标签平衡：
<section与</section>计数相等（node 一行校验） - [ ] 色值全部来自 style-guide.md 色板，无自造颜色
- [ ] 序号/子条目已块状化，非纯文本 "1. 2. 3."
- [ ] 核心结论有金句框或深蓝块
- [ ] 作者条/二维码/日期占位已标记，提醒用户发布前替换
- [ ] 医疗/金融/法律类有底部合规声明
公众号粘贴方法（交付时告知用户）
浏览器打开成品 → Ctrl+A 全选 → 复制 → 公众号编辑器直接粘贴，样式全保留。发布前替换作者条占位与合规声明文案。
Resources
assets/example-medical-kb.html— 完整成品样板（55KB，即已发布的《医疗 AI 要落地，先建好知识库这个底座》全文）。含八章正文 + 全部组件组合的真实写法：头部/章节标题/三层卡片/块状列表/表格/金句框/红线框/深色代码块/结语深蓝块/一句话总结/作者条。写新文章时优先复制此文件改写——替换各章节内容、按需增删组件即可，排版风格零成本继承。assets/template.html— 抽象组件骨架（占位符版），从零搭新结构或需要单组件复制时用。references/style-guide.md— 色板（唯一配色来源）、设计原则、组件速查、粘贴方法、检查清单。
