---
name: wechat-article-deck-style
description: Use when creating, rewriting, or auditing "公众号风格PPT", "公众号配图风格课件", "文章改课件", "微信长文转HTML演示", "James/詹老师/路人社风格", or any publish-ready HTML slide deck that needs structured WeChat article visuals, chapter navigation, fullscreen presentation, and self-scored quality checks.
---

# 公众号配图风格 HTML PPT

Version: 1.0.0

Use this skill to turn a topic, article draft, transcript, course outline, or consulting argument into a publish-ready HTML slide deck. The deck should feel like a structured WeChat public-account article expanded into PPT: sharp judgment, strong narrative spine, information graphics in every major section, and a courseware shell that can be navigated, enlarged, printed, and published online.

The visual identity comes from the user's public-account article graphics. The interaction shell borrows only the 0531 courseware behavior: chapters, slide cards, fullscreen/presentation mode, keyboard navigation, responsive layout, and deployment-ready HTML.

## Default Output

Create a self-contained HTML file unless the user asks for another format.

The HTML should include:

- Sticky top header with title, author/context, and fullscreen control.
- Chapter navigation with 5-8 sections.
- Slide-card stage with previous/next controls and keyboard navigation.
- Each slide as one strong idea plus one visual structure.
- Print CSS that reveals all slides as PPT-like pages.
- Mobile layout that preserves reading order and visual hierarchy.
- Optional resource modal for long prompts, templates, cases, or source notes.
- A final quality self-check returned in the assistant's completion note, not as noisy in-page instruction text unless requested.

## Use This For

- Public-account article ideas that need to become a PPT-like HTML deck.
- Courseware that should retain the user's article writing style and infographic composition.
- Consulting, AI, process management, organization, skill, agent, HR, product, or transformation topics.
- "Make it like my公众号配图" requests.
- Decks that need to be deployed to Vercel, Netlify, Cloudflare Pages, or a static file host.

## Do Not Use This For

- Generic marketing landing pages.
- App dashboards or admin systems.
- Pure PPTX export when HTML interaction is not needed.
- Dense research reports that should remain long-form articles.
- Requests to copy the 0531 blue visual skin. Use only its presentation mechanics.

## Workflow

1. Extract the core judgment  
   Identify the one sentence the whole deck proves. Prefer a sentence with tension: "不是 X，而是 Y", "真正的问题不是 A", or "第一步不是工具".

2. Build the article-to-deck spine  
   Use this order by default:
   - Cover with the core judgment.
   - Anti-common-sense opening or practical conflict.
   - Boundary statement: what this deck is and is not claiming.
   - Layered diagnosis or method map.
   - Case, workflow, matrix, ladder, or table.
   - Operating sequence and checks.
   - Action plan, quiz, or three-sentence summary.

3. Convert into chapters  
   Use 5-8 chapters. Each chapter should have 2-5 slides. Each chapter needs one visual structure: matrix, process strip, ladder, contrast table, radar, scorecard, operating loop, or quote card.

4. Write in the user's voice  
   Read `references/writing_style.md`. Keep sentences direct, concrete, judgment-led, and business-facing. Use oral rhythm and repeated contrast, but avoid turning every title into the same "不是...而是..." pattern.

5. Apply the public-account visual system  
   Read `references/visual_system.md`. Use the article-derived palette and composition: white/cream base, deep navy or dark green blocks, bright blue primary marks, teal/green action marks, gold quote cards, crisp black text, and sparse red warnings.

6. Choose layouts  
   Read `references/layout_patterns.md`. Reuse proven patterns: gold quote slide, process map, "old/new" contrast, capability matrix, project portfolio grid, ladder, radar, numbered action strips, CTA/resource card.

7. Implement HTML  
   Follow `references/html_contract.md`. Keep the file portable: inline CSS/JS, no external framework unless integrating into an existing app, no network dependency for core viewing.

8. Self-check level  
   Use `references/self_check_rubric.md`. Score narrative, visual structure, presentation mechanics, publish readiness, and voice fidelity. Fix anything below L3 before delivery.

## Hard Rules

- One slide, one main idea.
- Every important claim should become a structure, not only a paragraph.
- Use visuals as thinking tools: charts, matrices, ladders, loops, tables, and quote cards.
- Keep slide text teachable out loud.
- Do not use decorative blobs, random stock photos, purple AI gradients, or generic SaaS hero layouts.
- Do not overfill slides. Split instead of shrinking text.
- Do not paste the article unchanged into slides.
- Do not explain UI usage inside the deck body unless the deck is a training artifact.

## Reference Map

- `references/source_style_inventory.md`: scanned source files and extracted style signals.
- `references/writing_style.md`: language, narrative, title, and ending patterns.
- `references/visual_system.md`: colors, typography, canvas rules, and graphic grammar.
- `references/layout_patterns.md`: slide and infographic patterns.
- `references/html_contract.md`: required HTML/CSS/JS behavior.
- `references/self_check_rubric.md`: L1-L5 quality scoring.
- `examples/sample_prompts.md`: realistic user prompts and expected response behavior.
- `templates/courseware_outline.schema.json`: optional planning schema before implementation.

## Output Note Template

After creating or revising a deck, report briefly:

```markdown
已完成：<file path or URL>
自检等级：L<1-5>，<score>/100
主要依据：叙事骨架 <score>/20，视觉结构 <score>/20，课件交互 <score>/20，发布就绪 <score>/20，风格贴合 <score>/20
未验证项：<none or specific item>
```

