Skill Style Customizer

样式定制技能 (style-customizer)

为公众号文章生成自定义排版主题 CSS，支持从参考文章提取视觉参数或逐步问答两种方式。

前置条件

• Node.js >= 20
• wx-newspic CLI 已安装（npm install -g @packy-tang/wx-newspic）
• 模式 B（参考文章）需要目标文章可访问

工作流概览

输入（二选一）
  ├─ A: 逐步问答 → AI 逐步询问风格偏好
  └─ B: 参考文章 → 抓取 HTML → 提取视觉参数
          ↓
  AI 生成主题 CSS
          ↓
  质量门禁验证（最多 3 轮修正）
          ↓
  存盘 → 预览 → 发布复用

模式 A：逐步问答（高自由度）

AI 按顺序逐项询问风格偏好，每项确认后再进入下一项：

1. 风格名称
2. 正文样式（字号、行高、颜色）
3. H1 标题样式
4. H2 标题样式
5. 引用块样式
6. 行内代码样式
7. 代码块样式
8. 文首模块样式
9. 文尾模块样式

用户可跳过任意项（使用默认值）。

模式 B：参考文章（中自由度）

从现有公众号文章中提取视觉参数，AI 分析后生成风格相近的主题。

# 步骤 1：抓取参考文章 HTML
node skills/style-customizer/scripts/fetch-article.mjs <文章URL> > /tmp/article-data.json

# 步骤 2：提取视觉参数（字体、颜色、间距等）
node skills/style-customizer/scripts/extract-visual.mjs /tmp/article-data.json

输出参数包括：font-size、color、line-height、标题层级、引用风格、代码块样式等。

失败回退：

• fetch 失败（付费文章/已删除/反爬）→ 降级到模式 A
• extract 结果为空 → AI 按语义推断视觉层级

生成主题 CSS

AI 根据提取的视觉参数（或问答结果）生成符合微信兼容性要求的 CSS。

关键约束：

• 所有选择器必须以 #wenyan 为前缀
• 不能包含 <style>/<script>/<iframe> 标签
• 不能使用 position: absolute/fixed/relative
• 不能使用 @media 或 @keyframes
• 行内加粗：#wenyan strong；斜体：#wenyan em；链接：#wenyan a

质量门禁验证

生成的主题 CSS 会经过 13 项检查（4 个维度），不通过则自动修正（最多 3 轮）。

参见：质量门禁（13 项检查）

# 存盘同时自动验证
bash skills/style-customizer/scripts/save-theme.sh <主题名称> </path/to/theme.css>

# 或手动验证
bash skills/style-customizer/scripts/validate-theme.sh </path/to/theme.css>

# 修正循环
node skills/style-customizer/scripts/apply-correction.mjs <主题名称> </path/to/css>

预览与发布

⚠️ --theme-file 必须与 --theme <名称> 同时使用。

# 渲染预览
wx-newspic render \
  --theme-file ~/.wx-newspic/themes/<名称>.css \
  --theme <名称> \
  --md article.md \
  --open

# 预览服务中会自动出现
wx-newspic preview --port 3030

# 发布图文消息
wx-newspic publish \
  --type news \
  --title "标题" \
  --md article.md \
  --theme <名称>

产出物

~/.wx-newspic/themes/{名称}.css

添加后可通过以下方式复用：

• wx-newspic theme list — 查看所有可用主题
• preview 下拉列表 — 自动出现
• --theme <名称> — publish/render 命令中启用