SuperAPI AI Directory
Partner中文AI newsFavorites
Skillshailaobao-gzh-design

hailaobao-gzh-design

Writing & research

View repository

Updated 10-17 15:13

About this skill

WeChat Official Account typesetting (hailaobao-gzh-design)

Typeset any Markdown article into HTML that can be pasted directly into the WeChat Official Account editor.

This skill is not picky about agents. Claude Code will read the YAML frontmatter above and mount it automatically; other agents (Codex / WorkBuddy / Cursor / Windsurf / Cline / manual Prompt) do not have the same auto-discovery mechanism, but as long as the entire .claude/skills/hailaobao-gzh-design/ directory is handed to them and they are told to follow the workflow below, the output is exactly the same — the only dependency is Node.js. The AGENTS.md in the same directory is the peer entry point for these agents.

When to use this skill

Use it when the user says any of the following:

  • "Help me typeset this article" (there is a Markdown file in the current context)
  • "Official account formatting" / "WeChat formatting"
  • "Typeset xxx.md into a style that can be pasted into the WeChat Official Account"
  • /gzh-typeset <file> or a similar explicit invocation

Not applicable:

  • The user only wants to change the text and not the formatting → just edit the Markdown directly
  • The user wants to generate a Xiaohongshu image-text post → please use /xhs-planner(if it exists) or the image export center

Workflow

Five steps.Do not skip any step.

Step 1: Read the article + determine the type

Read the Markdown file specified by the user (or the body text from stdin/the clipboard). Classify it as one of the following:

  • Methodology / in-depth analysis: dense with viewpoints, clear structure, has section headings
  • Tutorial / workflow: step-by-step, code blocks, command line
  • Product review / tool comparison: side-by-side comparison of multiple items, pros and cons
  • Reflections / retrospective / story: first person, timeline, emotional ups and downs
  • News / quick commentary: short, can be read in 1-2 screens

Step 2: Confirm the layout style (mandatory, unless the user has already specified one or authorized automatic decision-making)

Style is a subjective editorial decision;by default you should ask the user, even if you already have a recommendation.

Two cases where you can skip:

  • The user already named a scheme when triggering ("use the jade business style", "run a version with midnight-report") → use it directly, do not ask
  • The user explicitly said when triggering "you decide / pick automatically / up to you / auto" → choose one based on the content type, do not ask

In all other cases: first read references/style-schemes.md, and based on the classification from Step 1 come up with:

  • Primary scheme (clearly state why it matches this article)
  • Alternative scheme (the second most suitable under the same type)
  • Contrast scheme (noticeably different in character, used to let the user break out of your type judgment at a glance, e.g., when recommending jade-business , give the contrast option as midnight-report）

Then usethe user Q&A mechanism provided by your agent environmentto ask the user:

  • In Claude Code → use AskUserQuestion, make the three schemes into options, and add (推荐) suffix to the first choice
  • In Codex / command line / other environments → just list three options in the text and ask the user to reply with the number or name

Question template:

This article looks like <type>. Which of the three styles would you like?

  1. Jade Business (recommended) — restrained and clear, the top choice for methodology
  2. Haze Notes — blue-toned grid, reads like practical notes
  3. Midnight Research Report — dark inverted colors, a data-analysis feel

**After asking, wait for the user's answer before proceeding.** Use whichever one the user picks, and don't second-guess it.

Step 3: AI formatting — rewrite the Markdown

Read references/formatting-rules.md and references/typesetting-syntax.md, thenyourself(do not call an external LLM again) rewrite the original Markdown. If the article is of the "tool tutorial / case demo" genre (the whole piece revolves around a tool experience, interspersed with prompts sent to the Agent, installation and export steps, and case results), first also read references/demo-article-patterns.md— the complete pattern of purely numeric kickers, prompts in code blocks, pull-quote citations, and an ending SummaryCard is all in there; you can cross-check against examples/remotion-demo.md to see the finished result. The dark green title bar (#255E4A / #F1F4F3) of this sample source article corresponds to scheme forest-demo, don't mistakenly pick jade-business。

  • Add sequence numbers to headings + vertical-bar subtitles (# 01 | 主标题 | 小字副标题）
  • the kicker must match the paragraph semantics: for sequential actions use STEP, for parallel points use plain numbers 01/02, for cases use CASE, for sections use PART A, for Q&A use Q1, for pitfalls use AVOID, for principles use RULE, for tips use TIP, for data use FACT。don't use STEPfor everything (unless it really is "do A first, then B"). If unsure, use plain numbers. See formatting-rules.md for the full table.
  • Add **加粗**
  • Split key judgment sentences into > 引用
  • Insert --- divider lines between paragraphs to control the visual breathing room
  • Insert <SummaryCard title="...">...</SummaryCard>
  • Insert <InfoCard title="...">...</InfoCard>
  • Do not change the article's original meaning, and do not add facts not present in the original text

Write the rewritten Markdown to a temporary file (e.g. .hailaobao-gzh-design/rewritten.md), leaving the original file untouched.

Step 4: Render HTML

Call the rendering script with the rewritten Markdown:

node <skill-dir>/scripts/typeset.mjs \
  --input <rewritten.md> \
  --scheme <scheme-id> \
  --title "<文章标题>" \
  --out <目标文件>.html

<skill-dir> is the installation directory of this skill:

  • WorkBuddy / Codex / Cursor etc. → ~/.workbuddy/skills/hailaobao-gzh-design/
  • Claude Code project-level installation → .claude/skills/hailaobao-gzh-design/

If unsure, first ls the skill directory; don't guess the path.

Parameters:

  • --input: path of the rewritten Markdown
  • --scheme: the scheme id the user confirmed (or authorized auto-selection for) in step 2
  • --title: the article name displayed in the top bar of the HTML page (optional)
  • --out: output HTML path; by default placed in the same directory as <input>.html Same directory

The script output is an HTML file that can be opened directly in a browser:

  • At the top there is a [ Copy to Official Account ] button
  • In the middle is a complete, fully formatted body preview
  • After clicking the button, the styled HTML is written to the clipboard (text/html), can be pasted directly into the WeChat official account editor

Step 5: Deliver

Give the user three pieces of information:

  1. Which scheme was chosen (one sentence explaining why it was chosen)
  2. Which parts of the original text were changed (title restructuring / bolding / inserting cards, etc., briefly list 3-5 items)
  3. The absolute path of the output HTML + one sentence "open it in a browser and click copy to the official account"

Do not expand and list everything that was changed in every paragraph. If the user wants a diff, they will look themselves.

Common mistakes

  • Do notgenerate HTML directly and hand it to the user — you must go through the script, otherwise you will not get the "copy button" page
  • Do notmodify the original Markdown file — write the rewritten output to a temporary file
  • Do notintroduce custom components not listed in typesetting-syntax.md (anything other than SummaryCard/InfoCard is not recognized)
  • Do notinsert viewpoints or facts that are not in the original text when rewriting