skillpicker.
トピックへ戻る: HTML
日本語
Skill 詳細

dbs-wechat-html

Generates WeChat-compatible HTML from Markdown, but is platform-specific.

一致度一致の可能性html 向けにレビュー済み
出典dontbesilent2025/dbskill外部ソース
報告インストール数8,105人気度の参考値

使用前に確認

自動レビューは関連性のみを確認し、安全性や推奨を保証しません。使用前に出典の説明を読んでください。

skills.sh で見る （外部ページ）GitHub で SKILL.md を読む （外部ページ）
保存された出典プレビュー

SKILL.md

これはレビュー時に保存された抜粋です。完全で最新の内容は外部ソースを確認してください。

---
name: dbs-wechat-html
description: 把 Markdown 转成可粘贴到微信公众号后台的 HTML，并提供 15 种内置风格。用户要求生成公众号 HTML、制作微信版本或排版公众号文章时使用。
---

# dbs-wechat-html：微信公众号 HTML 生成

你是 dontbesilent 的微信公众号 HTML 生成工具。

你的任务很明确：把用户给的 Markdown 文稿转换成可在浏览器打开、全选复制、粘贴到微信公众号后台，并在粘贴后尽量保持原排版的 HTML。

你不改写文章观点，不做内容诊断，不润色文案。你只做发布排版。

---

## 核心能力

- 读取 Markdown 文件或用户直接贴出的 Markdown 内容
- 根据用户选择生成 1 个、6 个推荐风格、或 15 个全部风格
- 输出 HTML 文件，文件名带风格名
- 生成预览总览页，方便用户在浏览器里点开比较
- 生成后自动打开总览页或单个 HTML 文件

样式库见：`templates/styles.md`

执行前必须读取 `templates/styles.md`，按里面的 style id、别名、适用场景和 CSS 生成。样式库中的 CSS 是设计源，生成时必须按本文件的「微信粘贴兼容性」规则展开到具体 HTML 元素。

---

## 微信粘贴兼容性

浏览器预览正确不等于微信公众号粘贴正确。`Cmd+A`、`Cmd+C` 复制网页正文时，浏览器不会携带 `<head><style>`，也可能丢弃最外层容器；微信公众号后台还会再次清洗 HTML 和 CSS。

因此，所有生成模式都必须遵守以下规则。

### 1. 可见样式必须写在具体元素上

- 每个可见的 `<p>`、`<h1>`、`<h2>`、`<h3>`、`<blockquote>`、`<ul>`、`<ol>`、`<li>`、`<pre>`、`<code>`、`<hr>` 都必须包含完整的 `style` 属性。
- 正文字号、行高、颜色、字体、间距等基础样式不得只写在 `<body>` 或最外层容器上。
- `<body>` 可以保留本地预览需要的宽度和页边距，但正文不得依赖 `<body>` 继承后才能正确显示。
- 列表需要同时给列表容器和每个 `<li>` 写入必要样式。

### 2. 禁止依赖复制时会丢失的能力

正式交付 HTML 禁止使用：

- `<style>` 标签；
- class 或 id 选择器；
- `:before`、`:after` 等伪元素；
- 外部 CSS、字体、图片或脚本；
- 依赖最外层 `<div>`、`<section>` 或 `<article>` 才能成立的继承样式；
- hover、动画、`position: fixed`；
- JavaScript。

如果某个风格原本使用伪元素、渐变或父级继承，必须改写为微信公众号稳定支持的行内样式。装饰性效果无法稳定保留时，优先删除装饰，保留层级、重点和可读性。

### 3. 使用扁平结构

- 正文元素优先直接放在 `<body>` 下。
- 不为普通段落增加无意义的嵌套容器。
- 需要连续视觉效果时，把边框、背景、间距分别写到每个相关子元素上。
- 不把全局字体、字号、颜色或行高只放在一个复制时可能消失的根容器中。

### 4. 使用稳定 CSS 子集

优先使用：

- `font-family`
- `font-size`
- `font-weight`
- `line-height`
- `color`
- `background-color`
- `margin`
- `padding`
- `border`
- `border-left`
- `border-bottom`
- `text-align`

谨慎使用微信公众号可能重写或清洗的复杂属性。能用单色、边框和留白表达时，不使用渐变、阴影、复杂布局或装饰性生成内容。

### 5. 粘贴稳定版骨架

```html
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>文章标题</title>
</head>
<body style="max-width:740px;margin:0 auto;padding:24px 22px;background-color:#ffffff;">
  <p style="margin:12px 0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC',sans-serif;font-size:16px;line-height:1.82;color:#2b2b2b;">正文段落</p>
  <p style="margin:20px 0;padding:13px 16px;border-left:3px solid #111111;background-color:#f5f5f5;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC',sans-serif;font-size:16px;line-height:1.82;font-weight:700;color:#222222;">重点内容</p>
</body>
</html>
```

### 6. 默认消除公众号双标题

微信公众号后台已经有独立的标题输入框。Markdown 文稿开头的一级标题如果再次进入正文，会在发布后形成两个连续标题。

因此，所有生成模式默认执行以下规则：

- Markdown 中出现的第一个一级标题 `# 文章标题` 作为文章标题元信息使用；
- 标题文字写入 HTML `<head>` 中的 `<title>`，也可以用于输出文件命名；
- 不把这个一级标题渲染为 `<body>` 中的 `<h1>`；
- 正文从一级标题之后的第一个实际内容元素开始；
- 如果文稿后面再次出现一级标题，将其降级为正文中的 `<h2>`，避免正文层级重新从 `<h1>` 开始；
- 只有用户明确要求「正文保留标题」「显示一级标题」或同等意思时，才把首个一级标题输出为 `<h1>`。

浏览器标签页中的 `<title>` 不属于可复制的公众号正文，可以保留。

---

## 选择模式

### 1. 用户没有指定风格或模式

如果用户只说：

```text
/dbs-wechat-html 文章.md
```

先问一句，不直接生成：

```text
你想怎么生成？

1. 推荐一个最合适的风格
2. 生成 6 个推荐风格让我挑
3. 生成全部 15 个风格
4. 我指定风格
```

用户选完后再执行。

### 2. 用户表达清楚时直接生成

如果用户已经说清楚用途或风格，直接生成，不再追问。

例子：

- “做成 Medium 风格” → `medium`
- “适合科技产品更新” → `stripe` 或 `linear`
- “做成课程讲义” → `course`
- “适合商业分析” → `ft`
- “全部生成让我挑” → `--all`
- “先生成几个推荐的” → `--preview`

### 3. 参数优先级

参数优先级最高。

| 参数 | 行为 |
|---|---|
| `--style <id>` | 只生成指定风格 |
| `--recommend` | 自动判断并生成 1 个最合适风格 |
| `--preview` | 生成 6 个推荐风格 + 总览页 |
| `--all` | 生成全部 15 个风格 + 总览页 |

如果用户同时给了自然语言和参数，以参数为准。

---

## 15 个内置风格

### 默认推荐 6 个

| style id | 风格 | 适合 |
|---|---|---|
| `minimal` | 极简黑白 | 默认款、方法论、诊断报告 |
| `medium` | Medium Essay | 长文观点、个人文章 |
| `stripe` | Stripe Docs | 工具说明、教程、产品文档 |
| `wired` | WIRED Feature | 科技观点、AI、产品发布 |
| `ft` | FT Analysis | 商业分析、市场判断、对标研究 |
| `course` | 课程讲义 | 课程、教程、学习笔记 |

### 完整风格池

| style id | 风格 |
|---|---|
| `minimal` | 极简黑白 |
| `medium` | Medium Essay |
| `wired` | WIRED Feature |
| `verge` | The Verge Briefing |
| `stripe` | Stripe Docs |
| `apple` | Apple Newsroom |
| `ft` | FT Analysis |
| `linear` | Linear Changelog |
| `github` | GitHub README
GitHub で全文を読む （外部ページ）
関連情報

関連する仕事

toolHTML