Overview
One-stop image generation pipeline: provide a writing topic and content outline → automatically generate polished HTML pages (with 4 built-in design styles) → automatically capture screenshots as PNG images.
用户: "帮我做配图，主题「XXX」，要点：A / B / C"
↓
Phase 1: 解析内容 → 提取标题、sections、关键信息
↓
Phase 2: 生成 HTML → 内置 CSS 变量，4 套主题可一键切换
↓
Phase 3: 自动截图 → 4 主题 × N 个 section → PNG
↓
输出目录: screenshots/{linear,apple,stripe,muji}/
4 Design Styles
By default, all are generated; the user only needs to pick their favorite.
| Style | Folder | Color Scheme | Suitable Scenarios |
|---|---|---|---|
| Dark | linear/ |
Deep black #08090A + purple |
Tech, SaaS, developers |
| Bright | apple/ |
Pure white + blue | Product launches, brand promotion |
| Humanities | stripe/ |
Cream + ochre + Georgia serif | In-depth long-form articles, humanities content |
| Wabi-sabi | muji/ |
Paper white + minimalist desaturation | Lifestyle, design aesthetics |
Style selection rules:
- Unspecified → generate all 4
- "Only dark" → output only the dark style
- "Want bright and humanities" → output only these two
How to Use
Trigger keywords:
- "Help me make images" / "WeChat Official Account images" / "generate screenshots" / "generate infographics"
- Also provide the writing topic and content outline/key points
Workflow
Phase 1 — Content Parsing
Extract from user input:
- Title (title) — the article's main headline
- Subtitle (subtitle) — a one-sentence description
- Brand name (brand) — used for nav and footer
- Sections — structured content for each section
- Key data — numbers/metrics (optional)
Phase 2 — HTML Generation
Generate a single-file HTML based on the content:
- 4 built-in CSS theme variable sets (
theme-recipes.jsonis the single source of truth) - Page structure: Hero → Pain Points → Core Points → Process → Demo → Scenarios → Data → CTA → Footer
- Floating theme switcher button in the bottom-right corner (4 dots)
- At least 3-5 screens of content to ensure sufficient screenshot volume
Phase 3 — Automatic Screenshots
By wechat-full.js calling Playwright to complete multi-page screenshots.
screenshots/
├── linear/ (暗黑)
├── apple/ (明亮)
├── stripe/ (人文)
└── muji/ (侘寂)
Screenshot parameters: 750×1334 mobile portrait, 2x Retina, full-page long screenshot.
File Description
| File | Purpose |
|---|---|
SKILL.md |
Workflow definition |
theme-recipes.json |
4 theme CSS token definitions (single source of truth) |
generate-garden-page.js |
Content-driven HTML page generator |
Technical Notes
- Dependency: playwright (
npx playwright install chromium） - Output format: PNG, 2x Retina, 750×1334
- Theme system: pure CSS
:root+[data-theme]variables, no framework dependency - Design recipes are independent and complete, with no dependency on other skills
Use in conjunction with other skills
- First analyze the topic (swot-analysis / first-principles / prompt-enhancer), then use this skill to generate accompanying images
- First write the article (wechat-article-writer), then use this skill to generate accompanying images