diff --git a/skills/localdev/wechat-article/SKILL.md b/skills/localdev/wechat-article/SKILL.md new file mode 100644 index 000000000..60be47f31 --- /dev/null +++ b/skills/localdev/wechat-article/SKILL.md @@ -0,0 +1,361 @@ +# Skill: Nexu 公众号文章排版与发布 + +> 基于 2026 年 4 月最新已发布文章（蒸馏 CEO + Claude 封号指南）提取的标准化排版流程。 + +## 触发词 + +公众号、微信文章、排版、排公众号、发布公众号、md 转公众号、公众号 HTML + +--- + +## 一、排版流水线（三步走） + +所有公众号文章统一使用以下流水线，不再手写 HTML。 + +### 第一步：Markdown → HTML + +使用 `baoyu-markdown-to-html` 的 **grace 主题 + black 配色**： + +```bash +bun ~/.claude/skills/baoyu-markdown-to-html/scripts/main.ts --theme grace --color black +``` + +首次使用先装依赖： + +```bash +cd ~/.claude/skills/baoyu-markdown-to-html/scripts && bun install +``` + +**注意：不要** 加 `--keep-title`，正文不含 H1 标题。标题通过发布参数传入。 + +### 第二步：颜色后处理 + +转换完成后，用 StrReplace（`replace_all: true`）做两轮全局替换： + +| 原始值 | 替换为 | 用途 | +|--------|--------|------| +| `color: #3f3f3f` | `color: #888888` | 正文灰色（阅读舒适） | +| `color: #333333` | `color: #1a1a1a` | 加粗近黑（强调清晰） | + +### 第三步：删除正文封面图 + +如果 Markdown 中第一张图是封面图，转换后会出现在 HTML 开头。**发布前必须删除 `

` 封面图标签**，封面图通过 `--thumb` 参数单独上传。 + +--- + +## 二、排版设计令牌（从已发布 HTML 逐属性提取） + +以下所有 CSS 值均从已发布文章（`distill-skill-guide-publish.html` + `claude-ban-survival-guide-publish.html`）的内联 `style=""` 中逐属性抄录，作为排版效果的 ground truth。 + +### 2.1 容器 + +```css +/* */ +body { + padding: 24px; + background: #ffffff; + max-width: 860px; + margin: 0 auto; + font-family: -apple-system-font, BlinkMacSystemFont, Helvetica Neue, + PingFang SC, Hiragino Sans GB, Microsoft YaHei UI, + Microsoft YaHei, Arial, sans-serif; + font-size: 16px; + line-height: 1.75; + text-align: left; +} + +/*
— 继承 body */ +section.container { + font-family: /* 同 body */; + font-size: 16px; + line-height: 1.75; + text-align: left; +} +``` + +### 2.2 段落 `

` + +```css +p { + margin: 1.5em 8px; + letter-spacing: 0.1em; + color: #888888; +} +``` + +### 2.3 加粗 `` + +```css +strong { + color: #1a1a1a; + font-weight: bold; + font-size: inherit; +} +``` + +视觉效果：在 `#888888` 灰色正文中，`#1a1a1a` 近黑加粗跳出来形成对比。 + +### 2.4 引用块 `

` + +```css +blockquote { + margin-top: 0; + margin-right: 0; + margin-left: 0; + background: #f7f7f7; + font-style: italic; + padding: 1em 1em 1em 2em; + border-left: 4px solid #333333; + border-radius: 6px; + color: rgba(0, 0, 0, 0.6); + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); + margin-bottom: 1em; +} + +/* 引用块内的段落 */ +blockquote p { + display: block; + font-size: 1em; + letter-spacing: 0.1em; + color: #888888; + margin: 0; +} +``` + +### 2.5 分隔线 `
` + +```css +hr { + border-style: solid; + border-width: 2px 0 0; + border-color: rgba(0, 0, 0, 0.1); + -webkit-transform-origin: 0 0; + -webkit-transform: scale(1, 0.5); + transform-origin: 0 0; + transform: scale(1, 0.5); + height: 1px; + border: none; + margin: 2em 0; + background: linear-gradient(to right, + rgba(0, 0, 0, 0), + rgba(0, 0, 0, 0.1), + rgba(0, 0, 0, 0)); +} +``` + +### 2.6 无序列表 `