実際の出力・検証中実稼働サンプル · HTML

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>公众号排版样例</title></head>
<body style="margin:0; padding:24px 16px; background:#fff; font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','PingFang SC','Microsoft YaHei',sans-serif;">
<section style="max-width:578px; margin:0 auto;">

<h1 style="margin:0 0 12px; font-size:22px; line-height:1.4; font-weight:600; color:#1a1a1a; letter-spacing:0.5px;">为什么你的周报没人看</h1>
<p style="margin:0 0 20px; font-size:13px; color:#999;">阅读约 3 分钟 · 排版样例由 SkillCube 自测产出</p>

<p style="margin:0 0 20px; line-height:1.8; font-size:15px; color:#3f3f3f; letter-spacing:0.5px;">先说结论：<strong style="color:#07c160; font-weight:600;">周报不是记录你做了什么，是管理上级的注意力</strong>。大部分周报的问题不是写得少，是信息密度太低。</p>

<h2 style="margin:32px 0 16px; font-size:17px; font-weight:600; color:#1a1a1a; border-left:4px solid #07c160; padding-left:10px; line-height:1.5;">一、把动作翻译成结果</h2>
<p style="margin:0 0 20px; line-height:1.8; font-size:15px; color:#3f3f3f; letter-spacing:0.5px;">「修复登录 bug」是动作，「修复登录偶发失败，上线后相关工单清零」是结果。上级只对结果有反应——数字、状态、日期，三者必居其一。</p>

<blockquote style="background:#f7f7f7; border-left:3px solid #07c160; padding:12px 16px; margin:20px 0; color:#666; font-size:14px; line-height:1.8;">没有数字的时候，写「上线后观察中」。不编造，是周报复利的唯一来源。</blockquote>

<h2 style="margin:32px 0 16px; font-size:17px; font-weight:600; color:#1a1a1a; border-left:4px solid #07c160; padding-left:10px; line-height:1.5;">二、三条红线</h2>
<p style="margin:0 0 12px; line-height:1.8; font-size:15px; color:#3f3f3f; letter-spacing:0.5px;">1. 不写「持续推进」——无信息量等于没写；</p>
<p style="margin:0 0 12px; line-height:1.8; font-size:15px; color:#3f3f3f; letter-spacing:0.5px;">2. 风险区不许硬凑——没有就写「无阻塞」；</p>
<p style="margin:0 0 20px; line-height:1.8; font-size:15px; color:#3f3f3f; letter-spacing:0.5px;">3. 全文 300 字封顶——上级的注意力是稀缺资源，省着用。</p>

<hr style="border:none; border-top:1px dashed #ddd; margin:28px 0;">

<p style="margin:0 0 20px; line-height:1.8; font-size:15px; color:#3f3f3f; letter-spacing:0.5px;">本文由 <strong style="color:#07c160; font-weight:600;">weekly-report-studio</strong> 的方法论文稿生成，本页面由 <strong style="color:#07c160; font-weight:600;">wechat-article-polish</strong> 排版——你现在看到的，就是它粘贴进公众号后台的真实效果。</p>

<p style="margin:0; text-align:center; font-size:13px; color:#999;">SkillCube · 热点一出，当天就位</p>

</section>
</body>
</html>

出力そのままの状態で掲載（閲覧用レイアウトのみ調整）サンプルをダウンロード

動作環境 Codex ご自身のAgentで実行され、モデル利用料は各提供事業者に請求されます

newbieskill Studio 記事組版

WeChat記事推敲・組版v1.0.0

Markdownを入力すると、そのまま貼り付け可能なインラインCSS付きHTMLを出力

Studio Skill 導入前に必要条件を確認

記録された確認 · 1.0.0 · 検証範囲は記録を参照

$4.99$9.99

今すぐ購入

パッケージ内容 13 ファイル · 15 KB

ワークフロー規則SKILL.md · 86 lines
リファレンス集references/ · 2
実行できるスクリプトscripts/ · 2
入力サンプルinputs/ · 2
実際の出力サンプルdemo/output/ · 2

zip にはルール・リファレンス・スクリプト・実出力・デモが入っています。プロンプト一枚ではありません。

ベータ期間中は完全なルールを無料で入手できます。内测期也可免费获取下方完整规则

パッケージをダウンロード（.zip）

ブログや管理画面のエディタで外部CSSが消去され、レイアウトが崩れてしまう。

こんな方におすすめ

WeChat公式アカウントやブログの執筆者、オウンドメディア運用チーム外部の複雑な装飾ツールの崩れや手間から解放されたい方無駄を削ぎ落とした洗練されたタイポグラフィを求めるクリエイター

検証環境：

Codex · Windows

Agent・モデル料金は提供元によります。追加サービスと必要条件は完全パッケージを参照。

メインクエストのどのステージで使うか

SkillはAIの武器。メインクエストと連動して実践・習得へ進めましょう。

1-4 · 実務の課題をSkillで3つ解決する → 2-4 · 複数のSkillをパイプラインに繋ぐ → 4-4 · Skillの公開・共有と収益化 →

この成果から次へ進む: 要件を正確に伝える：検収基準を先行させる →

✓ こんな方におすすめ

WeChat公式アカウントやブログの執筆者、オウンドメディア運用チーム
外部の複雑な装飾ツールの崩れや手間から解放されたい方
無駄を削ぎ落とした洗練されたタイポグラフィを求めるクリエイター

⊗ おすすめできない用途

派手な点滅アニメーションや装飾スタンプを多用したレイアウトを好む方
API経由の全自動無人投稿パイプラインを求める方

✦ 手に入るもの

全スタイルをインライン化。貼り付け時にデザインが崩れません
WeChatグリーンデザイン規約：引用枠・強調・見出しバー・区切り線
モバイル幅（375px）での最適化検証済み
ブランドカラーの一括差し替えに対応

提供物：完全な SKILL.md 仕様書 + 検証サンプル。各自のAI Agent上で実行します。

どう始める？

Skillとは、AIにタスクを教えるための作業規則です。

入手と導入 ↑

下書きを送信

執筆したMarkdown原稿をそのまま渡す

配色指定（任意）

ブランドカラーや好みのスタイルを指定

即座に入手

インラインCSSが適用されたHTMLをそのままコピー

Agentへ送信するプロンプト

用 wechat-article-polish 排版以下公众号文章。品牌主色使用微信绿，保留原文事实，输出适合粘贴进公众号编辑器的内联样式 HTML： [粘贴 Markdown 草稿]

利用前のご案内 WeChat公式アカウント向け組版に特化した設計です。エディタ貼り付け後に仕様による再調整が行われる場合があるため、公開前にプレビューでご確認ください。 Agent・モデル料金は提供元によります。追加サービスと必要条件は完全パッケージを参照。

ここから利用を開始

zip にはルール・リファレンス・スクリプト・実出力・デモが入っています。プロンプト一枚ではありません。

パッケージをダウンロード（.zip） SKILL.md をダウンロード

CodexまたはClaude Codeを開き、導入プロンプトを貼り付けます。
Agentにルール全文を読み込ませ、認識されたことを確認します。
上記のプロンプト例をコピーし、手元のメモに差し替えて実行します。

手動導入 · SKILL.md全文を確認（86行）

Codex：~/.agents/skills/wechat-article-polish/SKILL.md
Claude Code：~/.claude/skills/wechat-article-polish/SKILL.md

---
name: wechat-article-polish
description: 把 Markdown 文章转成可直接粘贴进公众号编辑器的内联样式 HTML——移动端自适应、引用块/重点/分隔线样式，零外部依赖。当用户提到公众号排版、推送格式化、文章转公众号时使用。
---

# 公众号排版打磨器

把一篇 Markdown 变成粘进公众号后台就能用的 HTML：所有样式内联（公众号编辑器会剥掉 `<style>` 标签，这是唯一可靠做法）。

## 触发条件

用户提到：公众号排版 / 推送排版 / 文章转公众号 / mp 排版。

## 工作流

1. **读入 Markdown**，识别结构：标题层级、引用、列表、代码块、加粗、图片。
2. **映射到内联样式**（用下方设计令牌），逐节点生成带 `style` 属性的 HTML。
3. **正文样式规则**：
   - 段落：`margin:0 0 20px 0; line-height:1.8; font-size:15px; color:#3f3f3f; letter-spacing:0.5px;`
   - 二级标题：`margin:32px 0 16px; font-size:17px; font-weight:600; color:#1a1a1a;` 前加 4px 圆角色块（`border-left:4px solid #07c160; padding-left:10px;`）
   - 引用块：浅灰底 + 左侧线（`background:#f7f7f7; border-left:3px solid #07c160; padding:12px 16px; margin:20px 0; color:#666; font-size:14px;`）
   - 加粗重点：`color:#07c160; font-weight:600;`
   - 分隔线：`border:none; border-top:1px dashed #ddd; margin:28px 0;`
   - 图片说明：居中灰字 13px
   - 代码：等宽字体 + 浅底块
4. **输出完整 HTML 文档**（内联样式、无 `<style>`、无外链 CSS/JS），并附一句粘贴指引（公众号后台 → 粘贴为富文本）。
5. **主色调默认微信绿 #07c160**；用户给品牌色则全局替换。

## 质量红线

- 任何样式出现在 `<style>` 标签或 class 里 = 失败（粘贴后必然丢样式）。
- 不引入外部字体、图片 base64 之外的任何外部资源。
- 移动端检查：正文宽度 100%，不出现横向滚动。

## 自测任务（出厂前必须全过）

1. 输入一篇含标题/引用/列表/加粗/代码的测试 Markdown，产出 HTML 用无 `<style>`、无 class、无外链，样式全部内联。
2. 产出的 HTML 在 375px 宽视口渲染无横向滚动、段落间距一致。

## 常见错误

| 错误 | 现象 | 修法 |
|---|---|---|
| 用 CSS 类做样式 | 粘进去样式全丢 | 全部改成 inline style |
| 代码块用 `<p>` 冒充 | 缩进丢失，命令不能复制 | 用 `<pre><code>` 并给浅底 |
| 引用块写成长段落 | 手机上分不清引文还是正文 | 浅底 + 左侧绿线，字号降 1px |
| 图片宽 800px | 手机上横向滚动 | `max-width:100%` |
| 行内代码自配色 | 和正文撞色看不清 | 用 `style-tokens.md` 的令牌 |
| 列表未闭合 | 整篇被包进一个 `<ul>` | 遇到非列表行立刻 `</ul>` |

## 工作流细节

1. 逐行判断块类型：标题 / 段落 / 列表 / 引用 / 代码 / 分隔线。
2. 行内转换顺序固定：代码 → 加粗 → 斜体 → 图片 → 链接。顺序错了会把 `**` 里的 `*` 吃掉。
3. 代码块内部只做 HTML 转义，禁止任何行内替换。
4. 输出完整 `<!doctype html>` 文档，方便本地缩到 390px 宽验收。
5. 一级标题直接丢弃，从 `##` 开始重新编号。

## 验收步骤

```bash
python3 scripts/md2wx.py inputs/example/article.md > demo/output/article.html
python3 scripts/check_html.py demo/output/article.html
```

判据：`<style>` 数量 0、`class=` 数量 0、块级元素 style 覆盖率 100%、无 `<h1>`、无写死 px 宽度。全过才算交付。

## 与其他 skill 的衔接

- 上游写作 / 润色先做完，本 skill 只负责排版与样式令牌。
- 配图仍走外部工具生成，本 skill 不生成图片。
- 需要小红书排版（非公众号）时切到 `xiaohongshu-note`，两者的输出格式不通用。

## 交付清单

- [ ] `demo/output/` 至少 2 份真实 HTML（纯文字 / 含代码）
- [ ] `demo/qa.txt` 有可复跑的命令与结果
- [ ] `references/` 覆盖样式令牌与结构守则
- [ ] `scripts/` 同时具备转换器与校验器

## 输入要求

- 接受标准 Markdown（含 `#`–`####` 标题、`>` 引用、`-`/`1.` 列表、围栏代码块、图片、链接）。
- 不接受富文本粘贴：从 Word / 网页复制的样式化内容先转成纯 Markdown。
- 单篇建议 ≤5000 字；超过时按小标题拆成多篇推送，编辑器粘贴会卡。