gzh-design-skill is an agent skill for Claude Code, Codex, Cursor, and similar agents that typesets a Markdown article into HTML you can paste directly into the WeChat Official Accounts (公众号) editor. You supply the finished Markdown, choose one of six themes (or let the skill recommend one by article type), and it assembles the article from that theme's component library: numbered sections, per-paragraph keyword underlines, a pull-quote card and table of contents derived from the body, code blocks, images and GIFs, and a merged author signature. It does not write articles; it only formats them.
The output is built to survive the WeChat editor's filtering. All styles are inline, every text node is wrapped in , and the generated HTML avoids `
A theme generator workflow produces a new theme from a one-sentence description or a reference image: it gathers preferences in a single prompt, generates a block library of 45–75 HTML components for review in the browser, converts it into a standard theme file with variables, components, skeleton, recipe table, and mapping table, and registers it alongside the built-in themes. Each theme's palette follows a fixed role structure (primary, light background and border, highlight, neutral gray scale, underline color) so a generated palette stays coherent. Because the layout logic lives in the component libraries and scripts rather than in a specific model, results are intended to be consistent across Claude, GPT, Gemini, and Chinese models.
Features
- Six themes: 摸鱼绿 (default), 红白, 石墨极简, 留白禅意, 摸鱼票据, and 橄榄手记, each with design variables, components, a visual hierarchy table, and per-article-type recipes
- Theme generator: creates and registers a new theme from a text description or reference image
- Content coverage: dark and light code blocks with no wrapping, images, GIFs with an animated badge, inline code, quotes, lists, and product badges
- Automatic structure: section numbering, 1–3 keyword underlines per paragraph, extracted pull-quote card and table of contents, deduplicated author signature
- Platform-safe HTML: inline styles and wrapping that avoid tags and CSS the WeChat editor strips
- Two-stage validation: component_lint.py for component sources and validate_gzh_html.py for output, both required to report zero errors
- Full-width punctuation: body text normalized to Chinese punctuation, code preserved verbatim
- One-click copy: a preview page with a copy button places the rich text on the clipboard for pasting into the editor
- Format normalization: guidance for converting Word, PDF, and plain-text drafts to Markdown before typesetting
- Article-type recipes: suggested theme and component combinations for opinion pieces, tutorials, reviews, reports, essays, and case studies
