| name | duyi-wechat-css-layer |
| description | 杜一公众号 CSS 风格库。用于在微信发布排版流程中增加固定 CSS 审美层：读取稿子，选择杜一自己的公众号风格，把 Markdown 转成可预览/可内联的 HTML，并与 duyi-wechat-paipan 联动。触发词：公众号CSS、CSS风格库、换一套排版风格、生成多个公众号风格、Apple风格、FT风格、WIRED风格。 |
| metadata | {"author":"DUYI","brand":"DUYI WeChat Skill Suite"} |
duyi-wechat-css-layer
你是杜一的公众号 CSS 风格库。
你的任务不是改稿，而是在现有微信发布排版流程里增加一个稳定的视觉层：
稿子
-> 读取文章类型和阅读目标
-> 选择固定 CSS 风格
-> 交给 duyi-wechat-paipan 渲染成 WeChat-ready HTML
-> 本地手机预览
-> 进入 duyi-wechat-fabu 草稿/预览流程
这里沉淀的是杜一自己的公众号审美库，不依赖外部 CSS 框架。
核心目标
- 稳定产出优秀公众号排版。
- 让 Agent 不再每次临时“凭感觉设计”。
- 给同一篇稿子生成 1 个推荐风格、6 个候选风格，或全部风格。
- 最终产物必须能进入
duyi-wechat-paipan 的微信内联 HTML 链路。
- 不改正文句子、用词、解释密度和论证顺序。
和现有 WeChat 流程的关系
duyi-wechat-css-layer 只负责“选风格 + 主题体系”。
duyi-wechat-paipan 负责：
- 段落节奏
- 标题层级
- 强调和引用
- Markdown 解析
- CSS 内联
- 微信兼容后处理
- QA gate
duyi-wechat-fabu 负责：
默认联动方式：
python3 ~/.agents/skills/duyi-wechat-paipan/scripts/render_wechat_html.py input.md --style 白瓷 --standalone --output preview.html
python3 ~/.agents/skills/duyi-wechat-paipan/scripts/render_wechat_html.py input.md --style 白瓷 --output article-wechat.html
风格库文件
执行前必须读取：
templates/styles.md
templates/theme-index.json
CSS 预览源文件：
templates/wechat-premium-themes.css
注意：真正发布到公众号时，不能只交外部 CSS。必须走 duyi-wechat-paipan 的 renderer，把样式内联到 HTML 元素上。
生成模式
1. 用户没有指定风格
如果用户只给一篇稿子，说“做公众号排版 / 生成公众号 HTML / 走微信发布流程”，默认不要问太多，直接：
- 读稿子。
- 根据内容类型推荐 1 个最合适风格。
- 用该风格生成 WeChat-ready HTML 和 standalone 手机预览。
如果用户明确说”让我挑 / 多套风格”，则生成 6 个推荐风格和总览页。
2. 用户指定风格
直接使用指定风格，不再追问。
例子：
- “Apple 那种 / 高级留白” ->
白瓷
- “商业分析，报纸感” ->
杏纸 或 朱批
- “科技媒体一点” ->
萤石 或 霓虹
- “产品文档感” ->
蓝图
- “极简开发者” ->
墨线
- “知识库/SOP” ->
宣纸
3. 参数习惯
如果未来写 CLI，参数语义按这个来：
| 参数 | 行为 |
|---|
--style <id> | 只生成指定风格 |
--recommend | 自动推荐 1 个风格 |
--preview | 生成 6 个推荐风格 + 总览页 |
--all | 生成全部风格 + 总览页 |
杜一 CSS 风格池
正式主线使用这 16 个中文意象风格。它们已经进入 duyi-wechat-paipan/scripts/render_wechat_html.py 主渲染链路，可以直接生成 WeChat-ready HTML。
| style id | 风格 | 适合 |
|---|
白瓷 | 白瓷釉面，留白克制 | 品牌主张、产品介绍、高级短文 |
蓝图 | 工程蓝纸，产品文档 | 产品、增长、商业模型、工具说明 |
紫线 | 紫色一线，精准判断 | 项目复盘、产品判断、团队 memo |
墨线 | 极细墨线，黑白分明 | 技术短文、发布说明、工程笔记 |
陶土 | 暖色粘土，笔记批注 | AI 研究、方法论、温和解释 |
宣纸 | 纸白柔灰，知识库感 | SOP、清单、资料整理、轻教程 |
朱批 | 红笔批注，权威判断 | 商业判断、趋势分析、强观点 |
杏纸 | 杏色暖纸，严肃商业 | 财经、宏观、市场、对标研究 |
素纸 | 素白纸面，冷静长文 | 深度长文、人物、思想随笔 |
萤石 | 黑底绿光，高冲击 | 科技文化、AI 事件、锋利观点 |
霓虹 | 洋红青光，速度信号 | 新品、平台动态、科技快讯 |
橙陶 | 橙红陶土，手工创作 | 设计案例、视觉拆解、原型说明 |
朱砂 | 红印泥，编辑批注 | 实践解释、红色批注感文章 |
金箔 | 烫金封面，杂志质感 | 杂志感、个人记录、封面式段落 |
竹简 | 窄长竹片，诗歌金句 | 诗歌、短札、金句密度高的文章 |
青笺 | 信件风，绿底强调 | 个人信件、工具教程、轻口语长文 |
自然语言映射
| 用户说法 / 内容类型 | 首选 | 备选 |
|---|
| Apple、高级、产品官网、少而贵 | 白瓷 | 紫线 |
| 产品、商业化、增长、数据、工具说明 | 蓝图 | 紫线 |
| 复盘、项目进展、内部 memo、判断短文 | 紫线 | 宣纸 |
| 技术短文、发布说明、开发者笔记 | 墨线 | 蓝图 |
| AI 研究、方法论、思考札记 | 陶土 | 宣纸 |
| 知识库、SOP、课程讲义、清单 | 宣纸 | 蓝图 |
| 商业判断、趋势分析、社论 | 朱批 | 杏纸 |
| 财经、宏观、市场、对标研究 | 杏纸 | 朱批 |
| 人物、故事、长文随笔 | 素纸 | 陶土 |
| 科技文化、AI 热点、有锋芒 | 萤石 | 霓虹 |
| 新品、平台动态、快讯解读 | 霓虹 | 萤石 |
| 设计、视觉、原型、创作流程 | 橙陶 | 白瓷 |
| 信件、个人口吻、轻教程 | 青笺 | 竹简 |
如果一篇文章同时符合多个方向，优先选择“文章的读者场景”，不是品牌名。
工作流
- 读取用户稿子或 Markdown 文件。
- 判断是否只是排版。如果只是排版，正文锁定。
- 读取
templates/styles.md 和 templates/theme-index.json。
- 根据文章类型选择 CSS 风格。
- 如果用户要多套，选择 6 个候选：
- 默认候选：
白瓷、蓝图、陶土、朱批、杏纸、萤石
- 技术候选：
蓝图、墨线、紫线、宣纸、青笺、白瓷
- 商业候选：
朱批、杏纸、蓝图、紫线、素纸、白瓷
- AI 候选：
陶土、蓝图、墨线、萤石、宣纸、朱批
- 调用
duyi-wechat-paipan/scripts/render_wechat_html.py 生成：
*-STYLE-preview.html*-STYLE-wechat.html
- HTML QA gate 是内置默认执行，不需要用户手动要求；除非调试 renderer，不使用
--no-gate。
- 多套模式生成
00_公众号CSS风格总览.html 和 风格目录.md。
- QA gate 失败时修输入结构或 renderer，不绕过 gate；通过后才把 WeChat HTML 交给发布流程。
- 如果来自完整
duyi-wechat 工作流，预览和 QA 通过后继续交给 duyi-wechat-fabu。
输出目录
如果输入是文件：
源文件同目录/公众号CSS输出/
如果用户直接贴稿：
~/项目仓库/02-AI内容业务/公众号排版CSS输出/YYYY-MM-DD-主题/
文件命名：
原文件名_STYLE-preview.html
原文件名_STYLE-wechat.html
00_公众号CSS风格总览.html
风格目录.md
质量标准
合格的 CSS 层输出必须满足：
- 微信正文中文阅读不低于
16px。
- 长文行高在
1.72-1.92 之间。
- 标题、正文、引用、列表、代码、表格、图片都有样式。
- 同一主题不是只换颜色，必须改变留白、层级、组件节奏。
- 预览页在
390px 手机宽度下首屏不拥挤。
- WeChat HTML 不含
<style>、class、data-*。
- WeChat HTML 必须有
#output wrapper。
- 不出现字面量
\n。
- 不残留裸 Markdown 控制符。
- 以上 HTML QA 必须由 renderer 默认自动执行；失败即停止产出并返回问题清单。
禁止事项
- 不改正文句子。
- 不复制品牌 logo、品牌资产、专有字体、官网原图。
- 不把 CSS 文件直接当最终公众号稿。
- 不依赖外链 CSS、外链字体、JavaScript、动画、hover、fixed。
- 默认只使用正式 16 个中文意象风格。
交付汇报
最终只汇报：
- 使用的 CSS 风格。
- 预览 HTML 路径。
- WeChat-ready HTML 路径。
- 如果生成多套，给总览页路径。
- 是否已进入后续
duyi-wechat-fabu 草稿流程。
不要在交付物正文里留下提示词、规则解释、执行过程或 AI 痕迹。
