Home / All Skills / Docs & Knowledge / dbs-wechat-html
English (EN)简体中文 (ZH)日本語 (JA)
Docs & Knowledge · dontbesilent2025/dbskill

dbs-wechat-html

Converts Markdown into WeChat Official Account-compatible HTML ready for pasting into the admin backend, offering 15 built-in styles. Used when users request generating Official Account HTML, creating a WeChat version, or formatting WeChat articles.

L2 Local · Restricted workspaceV1 Commit-PinnedWrite FileDual-pass Audit
Author dontbesilent2025GitHub dontbesilent2025/dbskill ↗Stars 10121License CC BY-NC 4.0（非商业授权）：仓库根 LICENSE 为 Attribution-NonCommercial 4.0 International (CC BY-NC 4.0)，Copyright (c) 2026 dontbesilent；GitHub API license.spdx_id = NOASSERTION （CC BY-NC 4.0 非 SPDX 标准文本，GitHub 无法自动识别），不得用于商业用途Commit 8b8e33f1ec
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

The entire skill is designed around 'model as transformer': writing no scripts, relying on an extremely detailed conversion rule set plus an external style library to turn Markdown into paste-ready HTML.

skills/dbs-wechat-html/SKILL.md
执行前必须读取 `templates/styles.md`，按里面的 style id、别名、适用场景和 CSS 生成。样式库中的 CSS 是设计源，生成时必须按本文件的「微信粘贴兼容性」规则展开到具体 HTML 元素。
The 197-line style library defines CSS for 15 styles; SKILL.md handles expanding CSS down to elements and enforces WeChat Official Account paste compatibility rules.

The design premise is that copying from a browser loses the <head>/outer containers and the WeChat backend performs secondary sanitization, so all visible styles must be inlined onto every single element.

skills/dbs-wechat-html/SKILL.md
正式交付 HTML 禁止使用：
Disallowed list: <style> tags, class/id selectors, :before/:after, external CSS/fonts/images/scripts, inherited styles relying on outer containers, hover/animations/position:fixed, and JavaScript.

Conversion consists of two stages: first mapping Markdown to HTML structure, then performing 'inline style expansion' and removing <style>/class/id/pseudo-elements.

skills/dbs-wechat-html/SKILL.md
2. 把选择器中的属性写到每个匹配的可见元素上。
The expansion stage also standardizes solid background color values into background-color and verifies element by element whether each possesses an 'independent, self-contained paste style'.

Eliminates duplicate titles in WeChat Official Accounts by default: the first level-1 heading goes only into <head><title> and is not rendered as an <h1> in the body.

skills/dbs-wechat-html/SKILL.md
- 不把这个一级标题渲染为 `<body>` 中的 `<h1>`；
Subsequent level-1 headings are downgraded to <h2> to prevent restarting the hierarchy from <h1> in the body; the first heading is rendered into the body only upon explicit user request.

Three entry points for style selection: a natural language mapping table (15 mappings), CLI arguments (--style/--recommend/--preview/--all), or a four-choice follow-up prompt if unspecified.

skills/dbs-wechat-html/SKILL.md
| `--preview` | 生成 6 个推荐风格 + 总览页 |
Arguments take top priority; the 6 default recommended styles are minimal/medium/stripe/wired/ft/course.

Deliberate trade-offs in Markdown conversion: tables convert to lists rather than <table> (due to poor WeChat compatibility), images become placeholders without inlining, hard breaks do not convert to <br>, and trailing Chinese periods in paragraphs are stripped.

skills/dbs-wechat-html/SKILL.md
8. 表格不直接生成 `<table>`，微信公众号兼容性差。优先转换为列表。
Other details: consecutive list items merge into a single <ul>, HTML special characters must be escaped, links remain plain text, and code blocks convert to <pre><code> with style-specific pre CSS applied.

Provides 9 pre-delivery static checks alongside executable validation commands (rg should yield no matches).

skills/dbs-wechat-html/SKILL.md
rg -n '<style|class=|id=|:before|:after|<script|https?://|@import' "输出文件.html"
Checks include: no <style>, no class/id, no pseudo-elements/scripts/external links/@import, style on every visible element, paragraphs independently carrying font-size/line-height/color, style on list items, HTML structure validation, and body containing no initial title under default mode.

Standardized output locations and naming: written to 公众号HTML输出/ alongside the source file, with filenames containing the style id and name; multi-style outputs include an overview page and a style directory.

skills/dbs-wechat-html/SKILL.md
文件名：`原文件名_style-id_风格名_微信公众号版.html`
When the user pastes Markdown directly, output falls back to the current working directory using default base name '公众号文章'; the overview page 00_公众号HTML风格总览.html allows <style>/class (strictly for local preview).

Clear branding and network boundaries: no network fetching of fonts/CSS/images/scripts, no replication of original source media branding assets, adopting only typographic paradigms.

skills/dbs-wechat-html/SKILL.md
- 不要把来源媒体的品牌资产、logo、专有视觉原样复制进 HTML。这里只借鉴排版范式。
Difference from 'card-based layout' tools: each style is decoupled into portable typographic paradigms here to avoid trademark and copyright issues.

2Core Capabilities

01Markdown → WeChat Official Account HTML conversion (structural mapping + inline style expansion)
0215 built-in styles (minimal/medium/wired/verge/stripe/apple/ft/linear/github/notion/magazine/editorial/newspaper/course/event)
03Three generation scopes: single style / 6 recommendations (--preview) / all 15 (--all)
04Natural language → style id mapping (15 entries, picking the more specific match on conflict)
05WeChat Official Account paste compatibility rules (disallowing style/class/pseudo-elements/JS/external links, enforcing inline styles)
06Default duplicate title elimination (first title into <title> only, subsequent h1 downgraded to h2)
07Pre-delivery static checks + executable validation commands (xmllint / rg)
08Multi-style overview page and style directory for user selection prior to copying
09Standardized output directory/naming and user instructions (Cmd+A/C/V paste workflow)

3External Dependencies

KindDependency / Endpoint
clixmllint（可选的 HTML 结构校验；缺失时用等价工具）
clirg（可选：扫描 style/class/伪元素/脚本/外链等违规项）

4Recommended Governance & Evidence

Suggested Controls for Safe Operation
For Agent Runtime
Restrict working directory
For Administrators
Retain operation logs
Evidence & Triggers (File Paths & Excerpts)
  • 本地工作目录: File I/O and artifact generation: generates HTML files in the 公众号HTML输出/ directory alongside the source Markdown (filenames include style id and style name)
Audit Notes: Grading basis is derived from self-verifiable behaviors within this skill's directory: no scripts, no outbound network requests (no external fonts/CSS/images/scripts loaded; all URL/font/CDN occurrences in the text appear within constraints like 'do not load via network' or 'forbidden' and in local validation commands, with no actual outbound network calls), and no credential reading. However, delivery unavoidably writes to the user's disk (公众号HTML输出/*.html, 00_公众号HTML风格总览.html, 风格目录.md) and opens previews. This falls under 'local scripts/CLI and local read/write only, no outbound network requests', classified as 🔵 rather than 🟢 according to Batch 4 final criteria and internal precedents (canvas-design / dbs-decision, etc.).

5Second-Pass Verification

  • [ok] 目录仅 3 个文件、无脚本可执行 — find skills/dbs-wechat-html -type f 返回 SKILL.md、agents/openai.yaml、templates/styles.md。
  • [ok] 无网络外发（不加载外部字体/CSS/图片/脚本） — 全文 URL/字体/CDN 相关命中均为禁止条款与本地校验示例；无 fetch/curl/http 请求指令。
  • [ok] 15 个风格 id 与样式库条目一一对应 — SKILL.md 风格表 15 项与 styles.md 的「01 minimal … 15 event」15 个小节完全对齐。
  • [ok] 粘贴兼容性规则与实际检查项一致 — "禁止 <style>/class/id/伪元素/JS/外链"与静态检查 1–3 条、rg 扫描表达式互相覆盖。
  • [ok] "执行前必须读取 templates/styles.md"确有对应资产 — 样式库文件存在（197 行），开头自述为样式权威来源。
  • [ok] 无凭证读取 / 无远程调用 — 全文无 env/API_KEY/token/keychain 类指令，也无任何外部服务调用。
  • [ok] 写盘范围是否被夸大或漏记 — SKILL.md 明确输出目录、文件名规则与总览页/风格目录三处产物，已如实记入 file_writes（含用户直接贴 Markdown 时改用当前工作目录）。
  • [ok] "不复制品牌资产"的边界声明 — 注意事项原文存在；属设计纪律，已在 traits/risks 中如实标注为"范式相似仍可能联想"。

6Verdict & Scenarios

  • Design reverse-engineered from real-world copying constraints: accounting for 'browsers dropping <head> and WeChat re-sanitizing' by enforcing element-by-element inline styles, significantly boosting paste fidelity.
  • 15 styles extracted into an auditable external style library; style selection supports arguments and natural language mapping, prompting the user rather than guessing when unspecified.
  • Delivery includes mechanically verifiable checklists and commands, preventing 'looks great in preview, breaks upon pasting' issues.
  • Pragmatic detail choices: tables to lists, placeholder images, default duplicate title removal, keeping link text—all tailored for WeChat backend compatibility.
  • Zero network access, purely local artifacts: loads no external resources; single-file inline-styled HTML allows offline preview and copying.
    • Best for: Ideal for WeChat Official Account creators who need to quickly turn finished Markdown drafts into paste-ready HTML and choose among multiple visual styles (single-style delivery, 6 recommended comparisons, or generating all 15 at once); suitable for creators with no specialized layout tools, having only Markdown and a browser.
    Not for: Not suitable for teams needing to maintain a unified design system or component library (produces one-off inline-styled HTML, not a reusable stylesheet engineering framework); not suitable for tasks requiring pixel-perfect reproduction of specific media brand layouts (deliberately borrows typographic paradigms without copying brand assets); not suitable for native publishing on non-WeChat platforms (rules are specifically tailored for WeChat backend sanitization); not suitable for workflows expecting automated screenshotting or direct publishing to WeChat Official Accounts (skill only generates and opens files).
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload dbs-wechat-html.tar.gz
    sha256: ab53f46d3e3f4706…
    Option B · Copy Guide for Agent
    install.json
    Agents automatically download and verify mirrors from this JSON guide.
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 8b8e33f1ec.