zixun-ppt-gongchang — 咨询风商业提案 PPT 工厂
This skill builds agency-style marketing decks as HTML slides (960×540, 16:9) that
render to PDF + PNG with headless Chrome. The visual language is a classic
consulting/agency proposal style: header bar + slash mark, gradient pills, dark boxes,
photo-wall covers, formal tables.
Core idea: every slide is one of a small set of page types. Each page type has a
fixed generation recipe in references/pages/<type>.md — a structure contract + an
HTML template + the rules for filling it. You (the agent) act as the orchestrator: map
the user's content onto page types, then run each page through its recipe. The brand
(logo, colors, fonts) is a swappable layer in theme.json — change it once, re-skin the
whole deck.
When to use
The user wants to produce a multi-page marketing proposal / case-study / campaign
deck. If they just want one generic slide or a non-marketing document, this is overkill —
say so and suggest a lighter tool.
Page-type catalog (the taxonomy)
| Page type | Recipe | Fixity | Use it for |
|---|---|---|---|
| Cover / Closing | cover.md |
🔒 fixed | Title page + thank-you page (shared photo-wall template) |
| Company intro | company-intro.md |
🔒 fixed | Who we are + capability/tool logo walls |
| Timeline | timeline.md |
🔶 semi | Year-by-year history / roadmap (N columns) |
| Section divider | section-divider.md |
🔒 fixed | Case/chapter opener (big title + product image) |
| Concept diagram | concept-diagram.md |
🌀 flexible | Two-entity mechanism (A ↔ B data/flow loop) |
| Process flow | process-flow.md |
🔶 semi | Horizontal step pipeline + callouts + footnotes |
| Data analysis | data-analysis.md |
🔒 fixed | Header + title + 2 charts + conclusion |
| Two-column | two-column.md |
🔶 semi | Strategy/method page; 2 pill sections + widget library (table / circles / matching-diagram / phone mockups / formula) |
| Results | results.md |
🔒 fixed | Effectiveness: metric labels + highlighted numbers |
| Schedule matrix | schedule-matrix.md |
🔒 fixed | Project timeline as row-labels × phase-columns grid |
| Quotation table | quotation-table.md |
🔒 fixed | Formal cost/quotation table |
🔒 fixed = fill the template, no freelancing. 🔶 semi = fixed skeleton + a small choice of
content widgets. 🌀 flexible = fixed component kit + layout rules, you compose the diagram.
A typical full deck order: Cover → Company intro → Timeline → Concept diagram →
Process flow → Section divider → Data analysis → Two-column (strategy) → Two-column
(method) → Results → Schedule matrix → Quotation → Closing. Drop/duplicate page types
to fit the actual content.
Workflow (follow in order)
- Read the design system once. Read
references/design-system.mdso you reuse the
shared components (header bar, pill, photo-wall, tables, boxes) and theme variables
instead of inventing styles. - Gather the brief. Brand (name, logo, colors), the campaign story, the data, any
real photos/logos. Ask only for what's missing. If the user has no assets, the
templates degrade gracefully to clean placeholders. - Configure the theme. Copy
theme.jsoninto the project and edit brand/colors/
fonts/logo. (Keep the bundled defaults if the user has no brand requirements.) - Outline the deck. Produce an ordered list mapping each piece of content → a page
type from the catalog. Confirm the outline with the user before building. - Build each slide. For every slide, open its
references/pages/<type>.md, follow
the recipe, and write<project>/slides/NN-<type>.html(NN = 2-digit order). Use the
exact file scaffold the recipe shows (links../assets/..., slide wrapped in
<!--SLIDE-->…<!--/SLIDE-->). - Render. Run the build (see below). Then read the PNGs in
dist/png/and QA
each page: nothing overflows 960×540, hierarchy matches the recipe, colors on-theme.
Fix and re-render until clean.
Build / render
python3 <skill_dir>/assets/build.py <project_dir> --png
<skill_dir> = the directory this skill is installed in (the folder containing this
SKILL.md). The script is self-contained — no dependencies beyond Python 3 stdlib.
This copies assets/ into the project, generates assets/_theme.css from theme.json,
assembles <project>/deck.html, and renders <project>/dist/deck.pdf +
<project>/dist/png/NN.png. Requires Google Chrome (override path with $CHROME).
Drop --png for PDF only; add --no-pdf for PNG only.
See references/workflow.md for the project layout, the deck.json content manifest
convention, supplying real images, and re-skinning for a new brand.
Hard rules
- The canvas is exactly 960×540 px. Everything lives inside one
.slide. Never let
content overflow — QA the PNGs. - Reuse components from
assets/components.css; only add page-local<style>for
unique positioning. Pull every color from theme variables (var(--ink),var(--accent),
…) so re-skinning works. - Match the recipe's structure and hierarchy. Fixed pages are fill-in-the-blank.
- One slide per file in
slides/, namedNN-<type>.html, in display order.
Templates
Every recipe in references/pages/ embeds its complete, verified HTML template inline —
copy the scaffold from the recipe, fill the slots, and stay faithful to its class names
and structure.
