WeChat Official Account Layout Theme Studio (Doubaoya)

Layout is a declarative themeJson
(palette + inline-style template for each tag), and the renderer deterministically converts Markdown into WeChat inline-style HTML according to it. Generate / modify a valid themeJson based on the description, run local self-check + preview, then save it back to the server as the default; when publishing with

--theme

config.mdTheme

pinned, also write a local file. Rendering / saving themes is free, no credits deducted.

⚠️ Four Hard Red Lines (Read First, Hold Throughout)

Red Line 1 · WeChat Compatibility: Title decorations must be attached to the element with text itself

The WeChat editor strips empty
<section>
/
<span>
elements that have no text and rely purely on inline-block width/height + background color blocks. Title guide bars / emphasis vertical bars / underlines must be written directly as inline styles on the title element itself, never as separate empty decoration blocks.

✅ Correct: write

border-left:4px solid {{accent}};border-bottom:1px solid {{border}};padding:0 0 8px 11px;

directly in

elements.h2.style

❌ Wrong: use
```
wrapBefore
```
to inject an empty
```
<section style='width:32px;height:4px;background:…'>
```
as a color bar (no text → stripped).

Red Line 2 · WeChat Compatibility: Don't wrap the whole article in a

decorations.articleWrap

outer frame

decorations.articleWrap

, which wraps the entire article body in a light rounded card, will turn into a jarring border in the WeChat editor. Leave

articleWrap.before

after

as empty strings; achieve "breathing room" using paragraph spacing (

margin

line-height

) and local cards (e.g., blockquote rounded cards).

Red Line 3 · Safety: themeJson will be inlined into WeChat drafts, and the server will reject invalid themes

The server's

POST

PUT

render

all call

validateTheme

, returning 400 if invalid. After generating, first run

scripts/validate-theme.mjs

for self-check — the specific validation rules (top-level keys, required fields in palette/page, forbidden style list, size limits) follow that script, and we don't keep a separate drifting list here.

WeChat editor's official spec also has eight "not rejected but will look wrong" patterns (

position

text-align:start

, fixed pixel widths, custom font stacks, gradients under text…). The list and readability baseline are at the end of

references/theme-schema.md

; the validator warns on four of them.

Red Line 4 · Data Safety: Must back up to disk before modifying; no backup, no modification

Changing a theme is an in-place overwrite (

PUT

POST + isDefault:true

). The server does not keep history versions, and if you break it, there is no second place to recover. The GET command in Step 1 already includes disk backup in the command itself — copy it as-is, don't delete. Note the backup file path; if you break it, PUT it back according to the "Rollback" section of

references/deploy-scope.md

Contract: Server-side Theme CRUD + Rendering (as per doubaoya.com main repo render-routes.ts)

⚠️ Read

dby-gateway/references/protocol.md

first before making requests (auth, how to get the key, envelope and error codes are all in that one file). For this skill's six theme routes (

GET/POST /api/wechat/theme

GET /api/wechat/themes

POST /api/wechat/render

PUT

DELETE /api/wechat/theme/:id

), the request bodies and responses are in

references/crud.md

; don't read unless needed.

bash

export DOUBAOYA_API_KEY="dyh_你的密钥"
BASE="${DOUBAOYA_BASE_URL:-https://doubaoya.com}"
AUTH="Authorization: Bearer $DOUBAOYA_API_KEY"

Theme resolution priority for render:

themeJson

(if passed, use this) >

themeId

> my default theme > fallback

benya-clean

. So pass
themeJson
when previewing a theme being edited; one default per user, when

isDefault:true

the server transaction resets

isDefault

on other themes of mine.

Closed-loop Steps

1. Read starting theme and back up to disk (Red Line 4, copy as-is don't delete)

bash

# a) Read my current default theme (modify on top of it if exists) and force disk backup — theme body is in data.theme.themeJson
BACKUP="/tmp/dby-theme-backup-$(date +%s).json"
curl -s -H "$AUTH" "$BASE/api/wechat/theme" | tee "$BACKUP"
echo "已备份到 $BACKUP —— 改坏了见 references/deploy-scope.md「回滚」一节"

# b) Or list built-in themes, pick one to copy as a starting point (benya-clean recommended — already adapted per Red Lines 1 / 2)
curl -s -H "$AUTH" "$BASE/api/wechat/themes"

This skill also includes a WeChat-safe starting template
themes/theme.example.json
(warm orange editing style; just copy and change the palette).

2. Modify themeJson according to the user's spoken description

Translate "make it warm orange / titles need a vertical bar / quotes as cards / make text bigger / layout looks like XXX account" into a valid themeJson. Field overview in

references/theme-schema.md

; hold the four red lines above. The easiest way to change colors: only touch the eight
palette
keys.

3. Local self-check first

Write the generated theme to a local file and run this skill's zero-dependency validator:

bash

node scripts/validate-theme.mjs /tmp/my-theme.json   # follow hints for hard errors; exit 0 = valid

4. Preview (preview after each change)

API render → save local .html and open:

bash

# Render sample article with the themeJson being edited, get HTML back, save locally and open visually
curl -s -H "$AUTH" -H 'Content-Type: application/json' \
  -d "$(jq -n --arg md "$(cat sample.md)" --slurpfile t /tmp/my-theme.json \
        '{markdown:$md, title:"预览", themeJson:$t[0]}')" \
  "$BASE/api/wechat/render" | jq -r '.data.html' > /tmp/preview.html
open /tmp/preview.html    # macOS; use browser on other platforms

Don't include a
#
first-level heading in
sample.md
: the
title
will be inserted as h1, and having one in the body would show two big headings. The HTML returned by render is character-for-character identical to the final draft body. Check
data.warnings
(e.g., unknown
{{token}}
) if present.

→ If local

dby-publish

is installed and you want to preview by "modifying file then re-run to switch skins", read

references/live-preview.md

; don't read unless needed. For modifying themeJson itself, the API rendering path above is authoritative.

5. ⚠️ Scope of effect (theme source for the two rendering paths)

→ Read

references/deploy-scope.md

when the theme is tuned and ready to save back — it answers "after saving, which path changes and which doesn't", and gives complete commands for saving to server / local file / rollback if broken.

Saving back to server as default is the main path (

POST

PUT

isDefault:true

): doubaoya.com web layout studio,

POST /api/wechat/render

, and dby-publish
publishing that does not pin a local theme all read from it. A local theme file is only needed in three cases: publishing with

--theme

config.mdTheme

pinned, offline or fetch failure fallback, or older pipeline without auto-fetch. When reporting to the user, truthfully clarify the scope for each, don't mix them up.

themeJson Structure (Quick Reference)

→ Read

references/theme-schema.md

when actually writing/modifying themeJson fields (top-level keys, supported tags in

elements

{{token}}

interpolation, positions like

li.marker

img.figureStyle

hr.html

); don't read unless needed. For just changing colors, editing the eight
palette
keys is enough, the rest follows automatically via

{{token}}

The theme contract is based on this package's
scripts/validate-theme.mjs
(run it, don't memorize the docs); this skill's
references/theme-schema.md
+
themes/theme.example.json
are sufficient to independently complete a theme modification.

Next Steps (First Determine the User's Desired End State)

Don't default to pushing further — stop at the tier where the user's desired end state lies:

User's Desired End State	Is This Step Enough?	Next Step
Only need to change the default layout to what I want	✅ Enough, stop here (takes effect automatically for every render from now on)	—
Also want to layout a specific article with this theme and save it to my WeChat draft box	Not enough	`dby-publish` (it auto-fetches the server-side default layout; point local theme file via `--theme` )
Already have typeset content, just want it into the draft box	Not enough	`dby-publish`
Content not written yet	Not enough	`dby-api` (pull same-topic viral samples then write content, via api.gzh.hotArticle)
Content hasn't passed banned-word check	Not enough	`dby-banned-words` (cross-check three platforms, produce safe rewrite)
Unclear about the next step	—	`dby` (hop-by-hop navigation for the WeChat flywheel)

dby-theme

NPX Install

Tags

SKILL.md Content (Chinese)

WeChat Official Account Layout Theme Studio (Doubaoya)

⚠️ Four Hard Red Lines (Read First, Hold Throughout)

Red Line 1 · WeChat Compatibility: Title decorations must be attached to the element with text itself

Red Line 2 · WeChat Compatibility: Don't wrap the whole article in a
`decorations.articleWrap`
outer frame

Red Line 3 · Safety: themeJson will be inlined into WeChat drafts, and the server will reject invalid themes

Red Line 4 · Data Safety: Must back up to disk before modifying; no backup, no modification

Contract: Server-side Theme CRUD + Rendering (as per doubaoya.com main repo render-routes.ts)

Closed-loop Steps

1. Read starting theme and back up to disk (Red Line 4, copy as-is don't delete)

2. Modify themeJson according to the user's spoken description

3. Local self-check first

4. Preview (preview after each change)

5. ⚠️ Scope of effect (theme source for the two rendering paths)

themeJson Structure (Quick Reference)

Next Steps (First Determine the User's Desired End State)