Sync third-party marketplace plugins
Constraint: Public skills are published only by explicit administrator action unless they are tracked third-party market sources. Confidence: high Scope-risk: narrow Directive: Keep private/internal skills out of the public marketplace and preserve normal incremental market Git history. Tested: Marketplace validation passed.
This commit is contained in:
KeyInfo Bot
@@ -160,18 +160,6 @@
|
||||
},
|
||||
"category": "设计"
|
||||
},
|
||||
{
|
||||
"name": "frontend-slides",
|
||||
"source": {
|
||||
"source": "local",
|
||||
"path": "./plugins/codex/plugins/frontend-slides"
|
||||
},
|
||||
"policy": {
|
||||
"installation": "AVAILABLE",
|
||||
"authentication": "ON_INSTALL"
|
||||
},
|
||||
"category": "文档处理"
|
||||
},
|
||||
{
|
||||
"name": "guizang-ppt-skill",
|
||||
"source": {
|
||||
@@ -196,18 +184,6 @@
|
||||
},
|
||||
"category": "文档处理"
|
||||
},
|
||||
{
|
||||
"name": "ppt-master",
|
||||
"source": {
|
||||
"source": "local",
|
||||
"path": "./plugins/codex/plugins/ppt-master"
|
||||
},
|
||||
"policy": {
|
||||
"installation": "AVAILABLE",
|
||||
"authentication": "ON_INSTALL"
|
||||
},
|
||||
"category": "文档处理"
|
||||
},
|
||||
{
|
||||
"name": "oh-my-codex",
|
||||
"source": {
|
||||
@@ -267,6 +243,30 @@
|
||||
"authentication": "ON_INSTALL"
|
||||
},
|
||||
"category": "开发工具"
|
||||
},
|
||||
{
|
||||
"name": "frontend-slides",
|
||||
"source": {
|
||||
"source": "local",
|
||||
"path": "./plugins/codex/plugins/frontend-slides"
|
||||
},
|
||||
"policy": {
|
||||
"installation": "AVAILABLE",
|
||||
"authentication": "ON_INSTALL"
|
||||
},
|
||||
"category": "文档处理"
|
||||
},
|
||||
{
|
||||
"name": "ppt-master",
|
||||
"source": {
|
||||
"source": "local",
|
||||
"path": "./plugins/codex/plugins/ppt-master"
|
||||
},
|
||||
"policy": {
|
||||
"installation": "AVAILABLE",
|
||||
"authentication": "ON_INSTALL"
|
||||
},
|
||||
"category": "文档处理"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -42,8 +42,8 @@
|
||||
"repo": "https://github.com/zarazhangrui/frontend-slides.git",
|
||||
"ref": "main",
|
||||
"adapter": "claude-skill",
|
||||
"commit": "871ce4daa13599d6195fe0bb465eb0ed80b2fa44",
|
||||
"syncedAt": "2026-06-11T03:57:53Z"
|
||||
"commit": "c28690100a289d979e5e032b44771a7c28a86e40",
|
||||
"syncedAt": "2026-06-13T16:00:00Z"
|
||||
},
|
||||
{
|
||||
"id": "guizang-ppt-skill",
|
||||
@@ -69,8 +69,8 @@
|
||||
"repo": "https://github.com/hugohe3/ppt-master.git",
|
||||
"ref": "main",
|
||||
"adapter": "claude-skill",
|
||||
"commit": "2b337bec18c2cb1381fee2dfca2e6f6fed463ce6",
|
||||
"syncedAt": "2026-06-11T03:57:53Z"
|
||||
"commit": "a0d62437f12d4f913a45b3acaadd61bba914f52e",
|
||||
"syncedAt": "2026-06-13T16:00:00Z"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -160,18 +160,6 @@
|
||||
},
|
||||
"category": "设计"
|
||||
},
|
||||
{
|
||||
"name": "frontend-slides",
|
||||
"source": {
|
||||
"source": "local",
|
||||
"path": "./plugins/frontend-slides"
|
||||
},
|
||||
"policy": {
|
||||
"installation": "AVAILABLE",
|
||||
"authentication": "ON_INSTALL"
|
||||
},
|
||||
"category": "文档处理"
|
||||
},
|
||||
{
|
||||
"name": "guizang-ppt-skill",
|
||||
"source": {
|
||||
@@ -196,18 +184,6 @@
|
||||
},
|
||||
"category": "文档处理"
|
||||
},
|
||||
{
|
||||
"name": "ppt-master",
|
||||
"source": {
|
||||
"source": "local",
|
||||
"path": "./plugins/ppt-master"
|
||||
},
|
||||
"policy": {
|
||||
"installation": "AVAILABLE",
|
||||
"authentication": "ON_INSTALL"
|
||||
},
|
||||
"category": "文档处理"
|
||||
},
|
||||
{
|
||||
"name": "oh-my-codex",
|
||||
"source": {
|
||||
@@ -267,6 +243,30 @@
|
||||
"authentication": "ON_INSTALL"
|
||||
},
|
||||
"category": "开发工具"
|
||||
},
|
||||
{
|
||||
"name": "frontend-slides",
|
||||
"source": {
|
||||
"source": "local",
|
||||
"path": "./plugins/frontend-slides"
|
||||
},
|
||||
"policy": {
|
||||
"installation": "AVAILABLE",
|
||||
"authentication": "ON_INSTALL"
|
||||
},
|
||||
"category": "文档处理"
|
||||
},
|
||||
{
|
||||
"name": "ppt-master",
|
||||
"source": {
|
||||
"source": "local",
|
||||
"path": "./plugins/ppt-master"
|
||||
},
|
||||
"policy": {
|
||||
"installation": "AVAILABLE",
|
||||
"authentication": "ON_INSTALL"
|
||||
},
|
||||
"category": "文档处理"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -512,7 +512,7 @@ This skill uses **progressive disclosure** — the main `SKILL.md` is a workflow
|
||||
| ------------------------- | ------------------------------ | ------------------------- |
|
||||
| `SKILL.md` | Core workflow and rules | Always (skill invocation) |
|
||||
| `STYLE_PRESETS.md` | 12 curated visual presets | Phase 2 (style selection) |
|
||||
| `bold-template-pack/selection-index.json` | Compact bold template metadata | Phase 2 (candidate selection) |
|
||||
| `bold-template-pack/selection-index.json` | Compact bold template metadata for candidate selection | Phase 2 (style selection) |
|
||||
| `bold-template-pack/templates/*/preview.md` | Tiny style cards for shortlisted bold previews | Phase 2 after shortlisting |
|
||||
| `bold-template-pack/templates/*/design.md` | Full design system for the selected bold template | Phase 3 after user selection |
|
||||
| `viewport-base.css` | Mandatory fixed-stage CSS | Phase 3 (generation) |
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
"sourceId": "frontend-slides",
|
||||
"repo": "https://github.com/zarazhangrui/frontend-slides.git",
|
||||
"ref": "main",
|
||||
"commit": "871ce4daa13599d6195fe0bb465eb0ed80b2fa44",
|
||||
"commit": "c28690100a289d979e5e032b44771a7c28a86e40",
|
||||
"adapter": "claude-skill",
|
||||
"sourcePath": "plugins/frontend-slides/skills/frontend-slides",
|
||||
"syncedAt": "2026-06-11T03:57:53Z"
|
||||
"syncedAt": "2026-06-13T16:00:00Z"
|
||||
}
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
"sourceId": "ppt-master",
|
||||
"repo": "https://github.com/hugohe3/ppt-master.git",
|
||||
"ref": "main",
|
||||
"commit": "2b337bec18c2cb1381fee2dfca2e6f6fed463ce6",
|
||||
"commit": "a0d62437f12d4f913a45b3acaadd61bba914f52e",
|
||||
"adapter": "claude-skill",
|
||||
"sourcePath": "skills/ppt-master",
|
||||
"syncedAt": "2026-06-11T03:57:53Z"
|
||||
"syncedAt": "2026-06-13T16:00:00Z"
|
||||
}
|
||||
|
||||
@@ -393,16 +393,15 @@ Workflow:
|
||||
|
||||
🚧 **GATE**: Step 4 (and Step 5 if triggered) complete; all prerequisite deliverables are ready.
|
||||
|
||||
Read the role definition based on the selected style:
|
||||
Read the execution references for this deck's locked `mode` + `visual_style` (from `spec_lock.md`):
|
||||
```
|
||||
Read references/executor-base.md # REQUIRED: common guidelines
|
||||
Read references/shared-standards.md # REQUIRED: SVG/PPT technical constraints
|
||||
Read references/executor-general.md # General flexible style
|
||||
Read references/executor-consultant.md # Consulting style
|
||||
Read references/executor-consultant-top.md # Top consulting style (MBB level)
|
||||
Read references/executor-base.md # REQUIRED: common guidelines
|
||||
Read references/shared-standards.md # REQUIRED: SVG/PPT technical constraints
|
||||
Read references/modes/<locked-mode>.md # narrative skeleton (spec_lock.md `mode`)
|
||||
Read references/visual-styles/<locked-style>.md # aesthetic (spec_lock.md `visual_style`)
|
||||
```
|
||||
|
||||
> Only read executor-base + shared-standards + one style file.
|
||||
> Read executor-base + shared-standards + the one locked mode file + the one locked visual-style file. For `mode: custom` or `visual_style: custom`, skip that preset file and follow `mode_behavior` / `visual_style_behavior` from `spec_lock.md` instead. Never glob `modes/` or `visual-styles/`.
|
||||
|
||||
**Design Parameter Confirmation (Mandatory)**: before the first SVG, output key design parameters from the spec (canvas dimensions, color scheme, font plan, body font size). See executor-base.md §2.
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# Executor Common Guidelines
|
||||
|
||||
> Style-specific content is in the corresponding `executor-{style}.md`. Technical constraints are in shared-standards.md.
|
||||
> Narrative skeleton and visual aesthetic come from this deck's locked files under [`modes/`](./modes/_index.md) and [`visual-styles/`](./visual-styles/_index.md). Technical constraints are in shared-standards.md.
|
||||
|
||||
---
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
| Every distinct chart name in `spec_lock.md page_charts` | `templates/charts/<chart_name>.svg` |
|
||||
| Chart types in `design_spec.md §VII` not covered above | `templates/charts/<chart_name>.svg` |
|
||||
|
||||
**Forbidden — re-reading during generation**:
|
||||
**Default — read each template once; re-read only on the mid-deck exception below**:
|
||||
- Layout SVG already loaded in this batch
|
||||
- Chart SVG already loaded in this batch
|
||||
|
||||
@@ -89,10 +89,11 @@ Before the first SVG page, output a confirmation listing: canvas dimensions, bod
|
||||
|
||||
**Hard rule**: Before generating **each** SVG page, `read_file <project_path>/spec_lock.md`. Use only values from this file, not from memory. If context was auto-compacted, also `read_file <project_path>/design_spec.md` for the current page's §IX brief.
|
||||
|
||||
**Per-block expression**: render each `design_spec.md §IX Content` block in its written texture — a full-sentence block as wrapped prose, a fragment/label block as bullets/keywords. **Never split a full-sentence block into a bullet list** — not because a bullet lays out easier, and not because an inherited template slot is shaped as a list. If a block carries no clear texture, infer the mode from its wording and the page layout.
|
||||
**Per-block expression**: render each `design_spec.md §IX Content` block in its written texture — a full-sentence block as wrapped prose, a fragment/label block as bullets/keywords. **Never split a full-sentence block into a bullet list** — splitting loses the information that the block was continuous reasoning, not a set of parallel points; not because a bullet lays out easier, and not because an inherited template slot is shaped as a list. If a block carries no clear texture, infer the mode from its wording and the page layout.
|
||||
|
||||
- **Prose render recipe**: one `<text>` per paragraph; wrap lines with sibling `<tspan>` that reset `x` to the block's left edge and advance `dy` ≈ 1.4× the font size. Fit about width ÷ font-size CJK glyphs per line (Latin fits roughly twice that); the last line runs short. Use the body ramp size, not a new one.
|
||||
- **Prose render recipe**: one `<text>` per paragraph; wrap lines with sibling `<tspan>` that reset `x` to the block's left edge and advance `dy` by the font size × a line-height factor. **Default — line-height by density (may override per content fit)**: ~1.4–1.5× for dense / small-body blocks (CLReq comfortable minimum), 1.6–2.0× for large-type, sparse, or `breathing` blocks. Fit about width ÷ font-size CJK glyphs per line (Latin fits roughly twice that); the last line runs short. Use the body ramp size, not a new one.
|
||||
- **Template precedence**: when an inherited template slot is a bullet list but the §IX block is prose, the prose wins — widen or reflow the container to hold the paragraph, or drop that card; do not pour the sentence back into the list slot.
|
||||
- **Mode precedence**: the locked mode shapes voice / register, not §IX's authored titles or page order. When a `§IX` title is a user-authored topic label, keep it — do not upgrade it to an assertion just because the mode (e.g. `pyramid`) favors them; mode title-tendencies apply only to AI-drafted titles.
|
||||
|
||||
> Note: block-level phrasing, applied *within* the page's `page_rhythm` density (below), not against it.
|
||||
|
||||
@@ -123,7 +124,7 @@ Before drawing each page, look up its entry in `page_rhythm` (key format `P<NN>`
|
||||
|
||||
**Missing `page_rhythm` section** → emit `warning: spec_lock.md missing page_rhythm — defaulting all pages to dense` once, fall back to `dense` for all pages.
|
||||
|
||||
**Tag not found for current page** → fall back to `dense` silently. Do not invent a tag.
|
||||
**Tag not found for current page** → emit `warning: spec_lock.md page_rhythm tag not found for P<NN> — falling back to dense` once per deck (aggregate; do not repeat per page), fall back to `dense`. Do not invent a tag.
|
||||
|
||||
**Per-page template lookup — `page_layouts` section**:
|
||||
|
||||
@@ -161,7 +162,7 @@ Before drawing each page, look up its entry in `page_charts` to decide which cha
|
||||
|
||||
> The [`verify-charts`](../workflows/verify-charts.md) workflow enumerates chart pages from `design_spec.md §VII`, then reads each page's plot-area marker to feed `svg_position_calculator.py`. Missing marker → verify-charts has to re-derive the plot area from axis lines, paying the cost on every run.
|
||||
|
||||
Every SVG page that contains a data visualization chart MUST include a plot-area marker inside `<g id="chartArea">`, placed **after axis lines** and **before the first data element** (bar, line, area, point).
|
||||
**Hard rule**: every SVG page that contains a data visualization chart includes a plot-area marker inside `<g id="chartArea">`, placed **after axis lines** and **before the first data element** (bar, line, area, point).
|
||||
|
||||
**Rectangular plot area** (bar / horizontal_bar / grouped_bar / stacked_bar / line / area / stacked_area / scatter / waterfall / pareto / butterfly):
|
||||
|
||||
@@ -197,8 +198,8 @@ grep "chart-plot-area" <project_path>/svg_output/<current_page>.svg
|
||||
> All chart templates in `templates/charts/` include this marker as a reference. If you are drawing a chart and the marker is absent, you have a bug.
|
||||
- **Technical specs**: see [shared-standards.md](shared-standards.md) for SVG/PPT constraints
|
||||
- **Card containers — use the documented patterns**: when a content page needs section cards (4 quadrants, parallel aspects, capability blocks, info cards), use the patterns codified in [`templates/charts/CHART_STYLE_GUIDE.md`](../templates/charts/CHART_STYLE_GUIDE.md) §11 — half-rounded section tab (§11.1), nested card border without stroke (§11.2), card-grid skeletons (§11.3), diagonal dashed connector for cross-quadrant relationships (§11.5), ground-anchor ellipse as a non-filter depth marker (§11.6), bidirectional interaction arrows for paired protocols (§11.7). Do not reinvent the "tinted full-rounded rect + white cover-rect to hide the bottom corners" hack; it survives in older templates but breaks SVG→PPTX color editing. Reference templates: [`labeled_card.svg`](../templates/charts/labeled_card.svg), [`quadrant_text_bullets.svg`](../templates/charts/quadrant_text_bullets.svg), [`kpi_cards.svg`](../templates/charts/kpi_cards.svg), [`matrix_2x2.svg`](../templates/charts/matrix_2x2.svg), [`team_roster.svg`](../templates/charts/team_roster.svg), [`client_server_flow.svg`](../templates/charts/client_server_flow.svg).
|
||||
- **Semantic shapes over preset stacks**: when a slide needs to express "ascending / converging / breaking through / stacking" — i.e., a relationship that goes beyond a generic arrow — prefer a single custom `<polygon>` or `<path>` that encodes the semantics geometrically, rather than stacking multiple preset arrows. A converging-tip path or a podium polygon reads faster than three arrows pointing at a label. Examples of this technique appear in many imported corporate decks; see `projects/01_template_import/svg_output/slide_01.svg` shape-158 for a reference (gradient-filled inward-pointing arrow). Do not codify these as templates — they are page-specific; the rule is just "consider polygon before stacking presets."
|
||||
- **Visual depth — through restraint**: layered depth comes from rhythm (flat vs lifted, dense vs spacious), not from shadows everywhere. Apply shadow to at most 2-3 genuinely floating elements per page (cards on photos, primary CTA, overlays); keep peer-grid cards, dividers, body containers flat. Reach for typography weight, spacing, accent bars, subtle tints **before** shadow. Full rules in shared-standards.md §6.
|
||||
- **Reference — prefer semantic shapes over preset stacks (not a constraint)**: when a slide needs to express "ascending / converging / breaking through / stacking" — i.e., a relationship that goes beyond a generic arrow — prefer a single custom `<polygon>` or `<path>` that encodes the semantics geometrically, rather than stacking multiple preset arrows. A converging-tip path or a podium polygon reads faster than three arrows pointing at a label. Examples of this technique appear in many imported corporate decks; see `projects/01_template_import/svg_output/slide_01.svg` shape-158 for a reference (gradient-filled inward-pointing arrow). Do not codify these as templates — they are page-specific; the rule is just "consider polygon before stacking presets."
|
||||
- **Reference — visual depth through restraint (not a constraint)**: layered depth comes from rhythm (flat vs lifted, dense vs spacious), not from shadows everywhere. Shadow typically suits 2-3 genuinely floating elements per page (cards on photos, primary CTA, overlays); keep peer-grid cards, dividers, body containers flat. Reach for typography weight, spacing, accent bars, subtle tints **before** shadow. Full rules in shared-standards.md §6.
|
||||
|
||||
### SVG File Naming Convention
|
||||
|
||||
|
||||
-199
@@ -1,199 +0,0 @@
|
||||
# Executor Consultant Top — Top-tier Consulting Style (MBB Level)
|
||||
|
||||
> Common guidelines: executor-base.md. Technical constraints: shared-standards.md.
|
||||
|
||||
---
|
||||
|
||||
## Role Definition
|
||||
|
||||
An MBB-level (McKinsey / Bain / BCG) top-tier consulting style SVG design executor. Suitable for strategic planning, board presentations, investment roadshows, C-suite decision support, and other **premium consulting** scenarios. Core characteristics: data-driven insights, pyramid-structured narrative, extreme simplicity. Output targets C-level decision-makers.
|
||||
|
||||
---
|
||||
|
||||
## SCQA Framework (Narrative Structure)
|
||||
|
||||
Every MBB-level presentation follows the SCQA narrative structure:
|
||||
|
||||
| Element | Purpose | Typical Pages |
|
||||
|---------|---------|---------------|
|
||||
| **S - Situation** | Establish shared context | Cover / Pages 1-2 |
|
||||
| **C - Complication** | Introduce the problem / tension | Pages 2-3 |
|
||||
| **Q - Question** | The implicit or explicit question to solve | Transition page |
|
||||
| **A - Answer** | Core solution | All body pages |
|
||||
|
||||
**Page sequencing**: Cover embodies S+C → Executive Summary answers Q → Chapters develop A → Closing revisits S
|
||||
|
||||
**Title writing**:
|
||||
|
||||
| SCQA Element | Weak Title | MBB-level Title |
|
||||
|-------------|------------|-----------------|
|
||||
| S | "Industry Background" | "Digital penetration surpasses 60%, industry enters deep waters" |
|
||||
| C | "Challenges Faced" | "Yet three structural contradictions constrain scaled deployment" |
|
||||
| Q | "Strategic Question" | "How to move from pilot to full deployment within 18 months?" |
|
||||
| A | "Solution" | "Three-phase path: Focus, Expand, Scale" |
|
||||
|
||||
---
|
||||
|
||||
## Data Contextualization (Never Present Data in Isolation)
|
||||
|
||||
> **Golden Rule**: Never display a single data point in isolation. Every number needs context.
|
||||
|
||||
| Method | Pattern | Visual Implementation |
|
||||
|--------|---------|----------------------|
|
||||
| **Time comparison** | "From X to Y" | Line chart + arrow annotating magnitude of change |
|
||||
| **Benchmark** | "X vs industry average Y" | Bar chart with gray dashed baseline |
|
||||
| **Competitive comparison** | "Us X vs Competitor Y" | Side-by-side bar chart, highlight own data |
|
||||
| **Target gap** | "Actual X / Target Y" | Progress bar + gap annotation |
|
||||
| **Ranking** | "Ranked #N of M" | Horizontal bar chart + highlight marker |
|
||||
|
||||
**Data annotation three essentials**: Every data visualization must include (1) The value itself (large bold font) (2) Comparison reference (baseline / prior period / competitor) (3) Meaning interpretation ("So what?")
|
||||
|
||||
```xml
|
||||
<text x="160" y="280" text-anchor="middle" font-size="42" font-weight="bold" fill="#1E293B">97.3%</text>
|
||||
<text x="160" y="310" text-anchor="middle" font-size="13" fill="#64748B">Industry avg 82% | Competitor A 89%</text>
|
||||
<text x="160" y="335" text-anchor="middle" font-size="12" fill="#059669">Leading industry by 15.3 percentage points</text>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Pyramid Principle (Conclusion First)
|
||||
|
||||
> Executives don't care about your *process* — they care about *results*.
|
||||
|
||||
```
|
||||
┌─────────────────┐
|
||||
│ Core Conclusion │ ← Page title / Takeaway
|
||||
└────────┬────────┘
|
||||
┌───────────┼───────────┐
|
||||
┌───┴───┐ ┌───┴───┐ ┌───┴───┐
|
||||
│ Arg 1 │ │ Arg 2 │ │ Arg 3 │ ← Key supporting points
|
||||
└───────┘ └───────┘ └───────┘
|
||||
```
|
||||
|
||||
| Level | Position | Font Size (example @ body=14px dense baseline) |
|
||||
|-------|----------|-----------|
|
||||
| Core conclusion | Takeaway Box | 16-18px bold (~1.2x body) |
|
||||
| Arguments | Content area body | 14-16px (~1x body) |
|
||||
| Supporting data | Charts / cards | 12-14px (~0.85x body) |
|
||||
|
||||
> MBB decks typically run on a dense `body` baseline (14-18px) for information density. The px ranges above assume that; if a particular consulting deck declares a different body size in `spec_lock.md`, multiply by the ratios listed above rather than taking the px figures literally.
|
||||
|
||||
**Contrast**: Title "Market Research Results" (wrong) → "Metaverse needs 5-10 years to reach scale" (right); Body "We researched... and found..." (wrong) → "Three arguments: (1)... (2)... (3)..." (right)
|
||||
|
||||
---
|
||||
|
||||
## MBB-level Layout Patterns
|
||||
|
||||
### Content Page Standard Structure (1280x720)
|
||||
|
||||
```
|
||||
┌──────────────────────────────────┐
|
||||
│ Gradient top bar (0,0 → 1280,6) │
|
||||
├──────────────────────────────────┤
|
||||
│ Assertion title (x=40, y=50, 24px)│
|
||||
├──────────────────────────────────┤
|
||||
│ Takeaway Box (x=40, y=75, │ ← Dark background + white text, one-sentence conclusion
|
||||
│ w=1200, h=45) │
|
||||
├──────────────────────────────────┤
|
||||
│ Content area (x=40, y=140, │ ← Charts / data / analysis
|
||||
│ w=1200, h=520) │
|
||||
├──────────────────────────────────┤
|
||||
│ Source | CONFIDENTIAL | Page # │ ← y=700, 10px
|
||||
└──────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Strategic Roadmap
|
||||
|
||||
Three phases laid out horizontally, `<rect rx="8">` + title + action list, `<polygon>` arrows connecting:
|
||||
|
||||
```
|
||||
Focus Core (0-6mo) ──> Expand Capability (6-12mo) ──> Scale Up (12-18mo)
|
||||
x=40,w=380 x=450,w=380 x=860,w=380
|
||||
```
|
||||
|
||||
### Benchmarking Matrix
|
||||
|
||||
Horizontal table; own row highlighted in theme color, others in gray. Leading indicators marked green, lagging marked red. Use `<circle>` or `<rect>` to build score points.
|
||||
|
||||
### Waterfall Chart (Change Attribution)
|
||||
|
||||
Start → increase/decrease factors → End. Positive factors green bars, negative factors red bars, start/end points dark bars, cumulative line as dashed connector.
|
||||
|
||||
> When `page_rhythm = breathing`, the MBB-appropriate form is **negative-space-driven**: a single takeaway statement on a near-empty canvas, or a dominant chart with one sentence of strategic implication (an asymmetric 2:8 degeneration of the standard chart+insight layout). The extreme-simplicity aesthetic of MBB is *served* by this — filler imagery and decorative overlap from marketing-style decks do NOT belong here. Universal rhythm discipline is in `executor-base.md §2.1`.
|
||||
|
||||
---
|
||||
|
||||
## Strategic Use of Color
|
||||
|
||||
MBB-level color usage is extremely restrained — color serves information:
|
||||
|
||||
| Purpose | Method |
|
||||
|---------|--------|
|
||||
| **Focus** | Target data in theme color, everything else gray |
|
||||
| **Reduce cognitive load** | Same series differentiated by opacity (`fill-opacity` 1.0/0.6/0.3) |
|
||||
| **Semantics** | Green = positive, Red = negative, Gray = baseline |
|
||||
| **Branding** | Gradient top bar / decorative lines in brand color |
|
||||
|
||||
**Commandments**: No more than 3 primary colors; accent color used at most 2-3 places globally; data series use same-hue depth variations, not different colors; background white or very light gray.
|
||||
|
||||
---
|
||||
|
||||
## Chart vs Table Selection Matrix
|
||||
|
||||
| Scenario | Recommended Form | Reason |
|
||||
|----------|-----------------|--------|
|
||||
| Comparing 2-7 categories | **Bar chart** | Visual comparison is intuitive |
|
||||
| Time trends | **Line chart** | Time series clarity |
|
||||
| Precise values / large rankings | **Table** | 50 data points in a bar chart would be chaotic |
|
||||
| Proportional composition | **Donut chart** | More modern than pie charts |
|
||||
| Two-dimensional positioning | **2x2 matrix** | Strategic quadrant analysis |
|
||||
| Change attribution | **Waterfall chart** | Factor decomposition |
|
||||
|
||||
---
|
||||
|
||||
## Speaker Notes Style
|
||||
|
||||
### Narrative Tone
|
||||
|
||||
Targeting **executives / decision-makers**. Pyramid structure — every sentence carries information. Composed, authoritative, and insightful tone.
|
||||
|
||||
### Notes Writing Guidelines
|
||||
|
||||
Notes are pure spoken narration (TTS). No bracketed markers, no `Key points:` / `Duration:` / `Flex:` lines — see [executor-base.md §8](executor-base.md#8-speaker-notes-generation-framework).
|
||||
|
||||
- **Pyramid structure**: Conclusion → Arguments → Details, written as flowing prose.
|
||||
- **Data contextualization**: Every number is paired with a comparison reference in the same sentence ("twenty-three percent — nearly double the industry average of twelve").
|
||||
- **Executive language**: "The strategic implication is…", "The core insight is…".
|
||||
- **Natural transitions**: Open each page after the first with a sentence that bridges from the prior page.
|
||||
|
||||
### Notes Example
|
||||
|
||||
```markdown
|
||||
# 03_strategic_path
|
||||
|
||||
Having clarified the problem and the opportunity, we arrive at the most critical part — our response path. The recommendation is a three-phase strategy: focus, expand, and scale. In phase one, over the next six months, we concentrate resources on conquering Eastern China, which contributes nearly two-thirds of industry growth yet sees our penetration rate at only half of Competitor A's. Phase two replicates that template to Southern and Northern China, and phase three leverages a digital platform for nationwide coverage over an eighteen-month horizon.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MBB-level Quality Checklist Supplement
|
||||
|
||||
### Content Level
|
||||
|
||||
- [ ] **SCQA complete**: Overall follows Situation-Complication-Question-Answer structure
|
||||
- [ ] **Data contextualized**: Every data point has a comparison reference
|
||||
- [ ] **Conclusion first**: Every page's Takeaway Box has a one-sentence conclusion
|
||||
- [ ] **MECE principle**: Categorized analysis is mutually exclusive and collectively exhaustive
|
||||
|
||||
### Visual Level
|
||||
|
||||
- [ ] **Color with intent**: Colors serve information delivery
|
||||
- [ ] **Ample whitespace**: Not crowded; information can "breathe"
|
||||
- [ ] **Visual hierarchy**: Conclusion > Arguments > Details, differentiated by font size/weight
|
||||
- [ ] **Brand consistency**: Gradient top bar and footer unified throughout
|
||||
|
||||
### Notes Level
|
||||
|
||||
- [ ] **Pyramid structure**: Every page is conclusion-first
|
||||
- [ ] **Pure spoken prose**: No bracketed stage markers, no `Key points:` / `Duration:` / `Flex:` meta-lines (TTS reads everything verbatim)
|
||||
- [ ] **Data contextualized in prose**: Every number is paired with a comparison reference in the same sentence
|
||||
@@ -1,187 +0,0 @@
|
||||
# Executor Consultant — Consulting Style
|
||||
|
||||
> Common guidelines: executor-base.md. Technical constraints: shared-standards.md.
|
||||
|
||||
---
|
||||
|
||||
## Role Definition
|
||||
|
||||
A data-driven, consulting-style SVG design executor. Suitable for business analysis reports, market research, operational reviews, strategic recommendations, and other **general consulting** scenarios. Emphasizes structured information presentation and data visualization; clean, clear, and professional style.
|
||||
|
||||
---
|
||||
|
||||
## Consultant-specific Data Visualization Techniques
|
||||
|
||||
### 1. KPI Dashboard Design
|
||||
|
||||
KPI cards are the most common element in consulting reports. Standard layout (1280x720):
|
||||
|
||||
```
|
||||
4-card layout: each card 280x180, gap 30
|
||||
Card 1: x=45, y=160
|
||||
Card 2: x=355, y=160
|
||||
Card 3: x=665, y=160
|
||||
Card 4: x=975, y=160
|
||||
```
|
||||
|
||||
**Card internal structure** (top to bottom):
|
||||
|
||||
| Area | Content | Font Size (example @ body=18px) | Style |
|
||||
|------|---------|-----------|-------|
|
||||
| Icon row | data-icon icon | 32x32 | Theme color |
|
||||
| Metric name | "Monthly Active Users" | 14px (~0.8x body) | Gray #64748B |
|
||||
| Core number | "1.2M" | 36-42px (~2x body, hero number band) | Bold, dark color |
|
||||
| Trend annotation | "+12.3% vs last month" | 12px (~0.65x body, annotation band) | Green=up / Red=down |
|
||||
|
||||
> Px values assume the typical dense consulting baseline (`body` ≈ 18px). For a deck with a different `body` in `spec_lock.md`, apply the ratios in parentheses rather than copying the px figures.
|
||||
|
||||
**Trend arrow conventions**:
|
||||
- Up: `arrow-trend-up` icon + green text
|
||||
- Down: `arrow-trend-down` icon + red text
|
||||
- Flat: horizontal line icon + gray text
|
||||
|
||||
### 2. Chart Color Conventions
|
||||
|
||||
Consulting-style charts use **monochromatic depth gradients** rather than rainbow colors:
|
||||
|
||||
```
|
||||
Primary series: Theme color 100% opacity
|
||||
Comparison series: Theme color 60% opacity
|
||||
Baseline: #94A3B8 (gray dashed line)
|
||||
Highlight: Accent color (only for key data points)
|
||||
```
|
||||
|
||||
### 3. Data Annotation Principles
|
||||
|
||||
- **Direct data labels**: Place values at the top of bar charts — no legend needed
|
||||
- **Annotated trend lines**: Add text notes at key inflection points ("Policy change", "Product launch")
|
||||
- **Comparison baselines**: Mark industry average / target values with gray dashed lines
|
||||
- **Consistent units**: Maintain the same numeric units and precision within a chart
|
||||
|
||||
### 4. Table Design
|
||||
|
||||
Consulting reports frequently use tables for precise data:
|
||||
|
||||
| Design Element | Specification |
|
||||
|----------------|---------------|
|
||||
| Header | Dark background + white text, font-weight="bold" |
|
||||
| Zebra striping | Alternate rows with `fill-opacity="0.05"` light background |
|
||||
| Number alignment | Numbers right-aligned, text left-aligned |
|
||||
| Highlighted row | Mark key rows with accent color `fill-opacity="0.1"` |
|
||||
| Borders | Use horizontal lines only to separate rows; avoid full grid lines |
|
||||
|
||||
---
|
||||
|
||||
## Consulting-specific Layout Patterns
|
||||
|
||||
### MECE Decomposition Tree
|
||||
|
||||
Main trunk on the left, branches expanding rightward — mutually exclusive, collectively exhaustive:
|
||||
|
||||
```
|
||||
Main metric ──┬── Branch A (45%)
|
||||
├── Branch B (30%)
|
||||
├── Branch C (20%)
|
||||
└── Branch D (5%)
|
||||
```
|
||||
|
||||
- Use `<line>` to connect trunk to branches
|
||||
- Each branch has a `<rect>` container + percentage annotation
|
||||
- Sum must = 100% (or explicitly label "Other")
|
||||
|
||||
### Driver Factor Tree
|
||||
|
||||
Top-level metric → decomposed factors → actions. Ideal for performance attribution analysis:
|
||||
|
||||
```
|
||||
Revenue growth 15%
|
||||
├── Average order value +8% → Premium product line expansion
|
||||
├── Customer count +5% → New channel acquisition
|
||||
└── Repurchase rate +2% → Loyalty program optimization
|
||||
```
|
||||
|
||||
### Left-chart Right-text (Chart Interpretation)
|
||||
|
||||
Core consulting report layout: chart on the left, key insights on the right:
|
||||
|
||||
```
|
||||
Chart area: x=40, y=120, w=700, h=480
|
||||
Insight area: x=780, y=120, w=460, h=480
|
||||
- Core conclusion (bold, 16px)
|
||||
- 3-5 bullet points (14px)
|
||||
- Data source (12px, gray)
|
||||
```
|
||||
|
||||
> When `page_rhythm = breathing`, this standard layout can legitimately degenerate to **chart-dominant (2:8)**: one large chart carrying the page, one sentence of takeaway — the rhythm rule is then satisfied without adding patterns foreign to consulting style. See `executor-base.md §2.1` for the universal rhythm discipline.
|
||||
|
||||
---
|
||||
|
||||
## Professional Expression Standards
|
||||
|
||||
### Page Titles
|
||||
|
||||
Consulting-style page titles should be **assertion headlines**, not descriptive titles:
|
||||
|
||||
| Type | Descriptive (avoid) | Assertion (recommended) |
|
||||
|------|---------------------|------------------------|
|
||||
| Market | "Market Overview" | "Domestic market grows 23% YoY, significantly outpacing global average" |
|
||||
| Competition | "Competitive Analysis" | "Three major competitors show clear weaknesses in channel coverage" |
|
||||
| Finance | "Financial Data" | "Gross margin improved for four consecutive quarters, breaking industry ceiling" |
|
||||
|
||||
### Data Source Attribution
|
||||
|
||||
Every data-containing page must include a source note at the bottom:
|
||||
|
||||
```xml
|
||||
<text x="40" y="700" font-size="10" fill="#94A3B8">
|
||||
Source: National Bureau of Statistics 2025 Annual Report; Internal team analysis
|
||||
</text>
|
||||
```
|
||||
|
||||
### Key Takeaway Box
|
||||
|
||||
Consulting-style content pages should include a **Takeaway Box** below the title:
|
||||
|
||||
```
|
||||
Position: x=40, y=80, w=1200, h=50
|
||||
Background: Light theme color (fill-opacity="0.08")
|
||||
Text: 14-16px, one-sentence summary of the page's core takeaway
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Speaker Notes Style
|
||||
|
||||
### Narrative Tone
|
||||
|
||||
Consultant-style speaker notes use a **conclusion-driven** approach — state the conclusion first, then present supporting evidence. Professional, concise, and persuasive tone.
|
||||
|
||||
### Notes Writing Guidelines
|
||||
|
||||
Notes are pure spoken narration (TTS). No bracketed markers, no `Key points:` / `Duration:` lines — see [executor-base.md §8](executor-base.md#8-speaker-notes-generation-framework).
|
||||
|
||||
- **Conclusion first**: The first sentence of each page's notes is the core takeaway.
|
||||
- **Conversational data**: 30% → "roughly one-third", 85% → "more than eight out of ten", 2.5x → "two and a half times". Spell out percentages as words when the spoken form is more natural.
|
||||
- **Evidence follows immediately**: After the conclusion, provide 2-3 supporting data points or facts in flowing prose.
|
||||
- **Natural transitions**: Open each page after the first with a sentence that bridges from the prior page ("Building on that scan…", "Based on those findings…").
|
||||
- **Professional terminology**: Use terms like "insight", "driver", "key lever".
|
||||
|
||||
### Notes Example
|
||||
|
||||
```markdown
|
||||
# 03_key_findings
|
||||
|
||||
Based on our market scan, we have distilled three key findings, and the most important is that the growth engine is shifting from acquisition to retention. New customer acquisition cost rose nearly forty percent year-over-year, yet improved repurchase rates contributed more than sixty percent of revenue growth. On top of that, lower-tier market growth significantly outpaces tier-one and tier-two cities, and the twenty-five to thirty-five female user segment now carries an ARPU nearly twice the overall average.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Self-check Supplement (Consultant-specific)
|
||||
|
||||
- [ ] Data matches source data — no fabrication
|
||||
- [ ] Every data page has a source attribution at the bottom
|
||||
- [ ] Page titles are assertion-based, not descriptive
|
||||
- [ ] KPI cards have trend arrows and comparison annotations
|
||||
- [ ] Chart colors are unified, using monochromatic scheme rather than rainbow
|
||||
- [ ] Notes are conclusion-first with conversational data
|
||||
- [ ] Notes contain no bracketed stage markers and no `Key points:` / `Duration:` meta-lines (TTS reads everything verbatim)
|
||||
@@ -1,109 +0,0 @@
|
||||
# Executor General — Creative Versatile Style
|
||||
|
||||
> Common guidelines: executor-base.md. Technical constraints: shared-standards.md.
|
||||
|
||||
---
|
||||
|
||||
## Role Definition
|
||||
|
||||
A creative, versatile-style SVG design executor. Suitable for product introductions, training materials, proposal presentations, marketing campaigns, and other **non-consulting** scenarios. Emphasizes visual impact and information engagement, striking a balance between professionalism and approachability.
|
||||
|
||||
---
|
||||
|
||||
## General-specific Layout Techniques
|
||||
|
||||
### 1. Flexible and Varied Layouts
|
||||
|
||||
The General style is not confined to fixed templates; layouts can be freely chosen based on content:
|
||||
|
||||
| Layout | Use Case | Layout Details (1280x720) |
|
||||
|--------|----------|--------------------------|
|
||||
| Full-image background + text overlay | Covers, emotional pages | `<image>` fills canvas + semi-transparent overlay + centered title |
|
||||
| Left-right split (image-text mix) | Feature introductions, comparisons | Left x=40,w=580 / Right x=660,w=580 |
|
||||
| Three-column cards | Feature lists, team introductions | x=40,450,860 each w=380, equal-height cards |
|
||||
| Top-bottom split | Timelines, process flows | Top area: title+description h=250 / Bottom area: charts+content h=420 |
|
||||
| Center-radiating | Core concepts, ecosystem diagrams | Center element + 4-6 surrounding nodes, lines pointing to center |
|
||||
| Waterfall / Z-pattern | Storytelling, case studies | Content blocks alternate left-right, guiding the eye in a Z-pattern |
|
||||
|
||||
### 2. Visual Rhythm Control
|
||||
|
||||
- **Information density alternation**: Follow a data-heavy page with a "breathing page" (large image / quote / transition) to prevent audience fatigue
|
||||
- **Visual weight balance**: Dark/large-area elements are "heavy", light/small elements are "light" — balance left-right/top-bottom
|
||||
- **Repetition and variation**: Maintain layout consistency within a chapter; vary between chapters to maintain freshness
|
||||
|
||||
### 3. Decorative Element Usage
|
||||
|
||||
| Element | Usage | Notes |
|
||||
|---------|-------|-------|
|
||||
| Gradient blocks | Background zones, title backing | Use `<linearGradient>` / `<radialGradient>`, limit to 2-3 colors |
|
||||
| Rounded rectangle cards | Content containers, feature modules | `rx="12"`; add light shadow ONLY if the card floats over a photo/colored panel (see shared-standards.md §6) |
|
||||
| Icon accents | List item prefixes, feature markers | Use `data-icon` placeholders, size 32-48px |
|
||||
| Numbered circles | Step flows, ranked lists | `<circle>` + centered `<text>`, theme color fill |
|
||||
| Divider lines | Content separation | `<line>` or `<rect height="2">`, opacity 0.2-0.3 |
|
||||
|
||||
---
|
||||
|
||||
## Visual Strategy
|
||||
|
||||
### Color Usage
|
||||
|
||||
- **Bold use of theme color**: Covers and chapter pages can use large areas of theme color background
|
||||
- **Gradients enhance depth**: Title bars and card backgrounds can use same-hue gradients
|
||||
- **Contrast creates focus**: Key numbers/words use accent color, creating contrast with surroundings
|
||||
- **Color-mood matching**: Cool tones for tech feel, warm tones for energy, dark tones for gravitas
|
||||
|
||||
### Image Handling Strategy
|
||||
|
||||
| Scenario | Strategy | SVG Implementation |
|
||||
|----------|----------|-------------------|
|
||||
| Full-screen background | Image fills + dark gradient overlay | `preserveAspectRatio="xMidYMid slice"` + gradient rect |
|
||||
| Portrait image display | Place left/right, maintain original ratio | Control width, height adapts |
|
||||
| Multi-image grid | Grid arrangement, uniform sizing | Equal-width equal-height `<image>` matrix |
|
||||
| Person photo | Circular crop effect | `<circle>` background + square image overlay (post-processing crops) |
|
||||
|
||||
### Typography Hierarchy
|
||||
|
||||
Sizes follow the ramp anchored on the deck's `body` baseline from `spec_lock.md` — the px values below are **example figures for body ≈ 18px** (multiply by the ratio column for any other baseline: 0.7x annotation / 1x body / 1.2x subtitle / 1.6x title).
|
||||
|
||||
```
|
||||
Title layer → ~1.5-2x body (e.g., 28-36px @ body=18) bold, theme color or white
|
||||
Subtitle layer → ~1.2x body (e.g., 20-24px @ body=18) medium weight, secondary color
|
||||
Body layer → 1x body (e.g., 16-18px @ body=18) regular, dark gray
|
||||
Annotation layer → ~0.7-0.8x (e.g., 12-14px @ body=18) light gray, bottom-aligned
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Speaker Notes Style
|
||||
|
||||
### Narrative Tone
|
||||
|
||||
General style speaker notes use **conversational narration** — like talking with the audience, not reading a report. Natural tone with rhythm, using rhetorical devices where appropriate.
|
||||
|
||||
### Notes Writing Guidelines
|
||||
|
||||
Notes are pure spoken narration (TTS). No bracketed markers, no `Key points:` / `Duration:` lines — see [executor-base.md §8](executor-base.md#8-speaker-notes-generation-framework).
|
||||
|
||||
- **Tell stories**: Use a "scenario-conflict-resolution" arc for each page's narrative.
|
||||
- **Use metaphors**: Make abstract concepts tangible ("It's like adding a turbocharger to the system").
|
||||
- **Create suspense**: Pose questions at the right moment and answer them on the next page — written as plain rhetorical questions, not as `[Interactive]` tags.
|
||||
- **Conversational data**: 30% → "nearly one-third", 2.5x → "more than doubled". Spell out percentages as words when the spoken form is more natural.
|
||||
- **Natural transitions**: Open each page after the first with a sentence that bridges from the prior page.
|
||||
|
||||
### Notes Example
|
||||
|
||||
```markdown
|
||||
# 03_key_advantages
|
||||
|
||||
Having covered the market landscape, you might be wondering — where is our opportunity? Our core advantages can be summed up in three words: fast, accurate, efficient. Fast, because deployment time has been cut from three months to two weeks. Accurate, because recognition accuracy now reaches ninety-seven point three percent, far exceeding the industry average of eighty-two. And efficient, because overall costs have been reduced by nearly a third — a combination that, if you were the decision-maker, would be hard to ignore.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Self-check Supplement (General-specific)
|
||||
|
||||
- [ ] Visual rhythm is reasonable: data-dense pages alternate with breathing pages
|
||||
- [ ] Decorative elements are moderate: serving content, not overshadowing it
|
||||
- [ ] Image-text ratio is appropriate: not just text walls, visual highlights present
|
||||
- [ ] Notes are conversational: reads like speaking, not reading a script
|
||||
- [ ] Notes contain no bracketed stage markers and no `Key points:` / `Duration:` meta-lines (TTS reads everything verbatim)
|
||||
+3
-3
@@ -81,12 +81,12 @@ When no preset carries the deck's temperament, set `image_rendering: custom` and
|
||||
|
||||
## 2. Auto-selection table — `design_spec` → rendering
|
||||
|
||||
Match `design_spec.md d. Style` (mode + descriptor) against this table. First match wins. **No row matches** → use `custom` per §1.5 rather than force-fitting `vector-illustration`.
|
||||
Match `design_spec.md d` (mode + `visual_style`) against this table. First match wins. **No row matches** → use `custom` per §1.5 rather than force-fitting `vector-illustration`. (When the locked `visual_style` names a paired rendering, prefer that for aesthetic alignment.)
|
||||
|
||||
| `d. Style` signal | Recommended rendering | Alternates |
|
||||
|---|---|---|
|
||||
| Top Consulting / strategic / MBB | `editorial` or `vector-illustration` | `blueprint`, `minimalist-swiss` |
|
||||
| General Consulting / corporate report | `vector-illustration` | `flat`, `digital-dashboard` |
|
||||
| Strategic / MBB / board | `editorial` or `vector-illustration` | `blueprint`, `minimalist-swiss` |
|
||||
| Corporate report / analysis | `vector-illustration` | `flat`, `digital-dashboard` |
|
||||
| High-end consulting / luxury / 高端 / design-firm | `minimalist-swiss` | `editorial`, `vector-illustration` |
|
||||
| Tech / SaaS / AI / system / architecture | `3d-isometric`, `blueprint`, or `digital-dashboard` | `flat`, `vector-illustration` |
|
||||
| Modern SaaS / fintech / health-tech / premium app | `glassmorphism` | `digital-dashboard`, `flat` |
|
||||
|
||||
@@ -0,0 +1,73 @@
|
||||
# Modes — Index
|
||||
|
||||
A **mode** is the deck's **narrative + persuasion skeleton** — how the argument is organized and advanced across pages. Lock **one mode per deck**; it shapes page sequencing, title voice, page-structure tendencies, and speaker-notes register.
|
||||
|
||||
> A mode is *not* a visual style. **Mode = how you argue; visual style = how it looks** (see [`visual-styles/_index.md`](../visual-styles/_index.md)). The two are locked independently — any mode pairs with any visual style (a `pyramid` deck can look `swiss-minimal` or `dark-tech`).
|
||||
|
||||
---
|
||||
|
||||
## 1. Catalog (5 modes)
|
||||
|
||||
Each mode has its own file with: narrative skeleton, page-structure tendencies, speaker-notes register, and a page skeleton example. **Read only the file for the mode you lock** — never glob the directory.
|
||||
|
||||
| Mode | Narrative skeleton | Best for |
|
||||
|---|---|---|
|
||||
| [`pyramid`](./pyramid.md) | Conclusion first; MECE arguments; every datum carries a comparison | Decision support, analysis, strategy, board / exec reports |
|
||||
| [`narrative`](./narrative.md) | Story arc — situation → tension → resolution; suspense and turns | Pitches, case studies, brand journeys, fundraising |
|
||||
| [`instructional`](./instructional.md) | Concept decomposition; step-by-step; parallel exposition | Training, tutorials, explainers, knowledge sharing |
|
||||
| [`showcase`](./showcase.md) | Visual-led impact; big imagery / numbers; emotional rhythm | Launches, brand reveals, event / promo decks |
|
||||
| [`briefing`](./briefing.md) | Neutral, complete, scannable; topic titles, even weight, no thesis | Status updates, reference decks, catalogs, meeting packs, FAQs |
|
||||
|
||||
> The five partition presentation *intent*, not aesthetics: persuade (`pyramid`) · tell a story (`narrative`) · teach (`instructional`) · impress (`showcase`) · simply inform (`briefing`).
|
||||
>
|
||||
> **A mode is a lens, not a mandate over the user's own structure.** When the user brings their own outline, it is authoritative: transcribe it into `design_spec.md §IX` as given — page order and titles preserved — and let the mode govern only voice / register and page-internal treatment. A mode never reorders a user's pages or rewrites their given titles (mode is Reference-strength; a user-authored outline is exactly the override). When the user gives no structure, the mode does the structural lifting. To lay an outline out with the least reshaping, `briefing` imposes the lightest skeleton.
|
||||
|
||||
---
|
||||
|
||||
## 2. Auto-selection — content / audience signal → mode
|
||||
|
||||
| Signal | Recommended mode | Alternates |
|
||||
|---|---|---|
|
||||
| Strategic decision / analysis / board / investor | `pyramid` | `narrative` |
|
||||
| Pitch / case study / origin story / campaign arc | `narrative` | `showcase` |
|
||||
| Course / onboarding / how-to / science explainer | `instructional` | `pyramid` |
|
||||
| Product launch / brand reveal / event opener / keynote / 发布会 / TED | `showcase` | `narrative` |
|
||||
| Status update / reference / catalog / FAQ / meeting pack / 周报 / 参考 | `briefing` | `pyramid` |
|
||||
|
||||
> No single signal dominates — read the deck's actual purpose from `c. Key Information`. When two modes fit, follow the **primary** intent of the body pages, not the cover. A data review legitimately runs almost entirely `pyramid`; do not force variety.
|
||||
|
||||
**Close calls** — the genuinely adjacent pairs; every other pair is far enough apart that the auto-selection signal decides.
|
||||
|
||||
| Torn between | …the first when | …the second when |
|
||||
|---|---|---|
|
||||
| `pyramid` / `briefing` | it must land a recommendation — conclusion-first, every number compared | it must inform completely without arguing — topic titles, even weight |
|
||||
| `narrative` / `pyramid` | the point lands through a story arc, tension → resolution | the point lands as a conclusion stated up front, then supported |
|
||||
| `narrative` / `showcase` | an argument travels through the story | presence leads — minimal copy, one big visual per page |
|
||||
| `instructional` / `briefing` | the goal is to build understanding step by step | the goal is to lay out a complete reference to scan |
|
||||
|
||||
> "Keynote-style" is a *mode* request, not a visual style — it means showcase pacing (one big idea per page, full-bleed hero, reveal rhythm), skinned by whatever visual style fits the brand (`swiss-minimal` clean, `dark-tech` dramatic, `glassmorphism` premium). Don't reach for a "keynote" visual style — there isn't one, by design.
|
||||
|
||||
---
|
||||
|
||||
## 3. How to use
|
||||
|
||||
1. Strategist reads this index at confirmation `d. Layer 1`.
|
||||
2. Pick one mode from the auto-selection table + the deck's stated purpose.
|
||||
3. Lock it: write `- mode: <name>` into `spec_lock.md`, record the rationale in `design_spec.md`.
|
||||
4. Executor reads **only** `modes/<locked-mode>.md` at generation entry — never globs this directory.
|
||||
|
||||
**Lock scope**: deck-wide (one mode per deck). The five are the catalog you select from; if the structure is genuinely mixed, pick the mode of the body pages and let pages vary within it, or recommend a `custom` blend (§4). Recommend the best fit; the user confirms.
|
||||
|
||||
---
|
||||
|
||||
## 4. Escape hatch — `custom`
|
||||
|
||||
`custom` holds **any bespoke narrative direction the five don't give as-is** — and what *kind* of thing it is doesn't matter. It might be a nameable cadence (dialectic 正反合, myth-vs-reality, countdown / Top-N, Socratic), a deliberate multi-act fusion of several modes, or the user's own feel for how the deck should carry (confrontational here, detached there). Don't try to taxonomize it.
|
||||
|
||||
**Either side may originate it.** The user can ask for it directly; or the Strategist — as the deck's strategist — may **recommend** `custom` when a bespoke direction (often a fusion of two modes) genuinely serves the deck better than any single preset. Like every confirmation, it's a recommendation the user confirms or overrides — and the recommendation must **spell the custom out in plain language** (what the cadence / fusion / posture actually is), never present the bare token `custom`, so the user confirms something legible. Either way, the Strategist **crystallizes the intent into a `- mode_behavior:` paragraph** — concrete enough that the Executor can follow it per page (the act sequence or posture shifts, the title voice, the page rhythm, the notes register). Set `- mode: custom` in `spec_lock.md` with that sibling line; the Executor follows the prose in place of a preset file. (This records the intent so it survives 20 pages of generation — the Executor only ever reads `spec_lock.md`, never the chat.)
|
||||
|
||||
> **One value per deck — fusion is *one* `custom`, not several modes.** A deck always locks a single `mode`. A multi-mode blend is expressed as **one** `mode: custom` whose `mode_behavior` paragraph describes the acts — never by locking several modes.
|
||||
>
|
||||
> **First ask whether it's really fusion.** A locked mode is a *tendency*, not a cage: a `narrative` deck can still carry one analytical (pyramid-style) page, an `instructional` deck one showcase reveal — that is leaning within a dominant mode, and needs **no** `custom`. Reach for `custom` only when there is genuinely no single dominant spine.
|
||||
|
||||
**The one thing to avoid**: reaching for `custom` as a *dodge* — defaulting to it because picking among the five takes judgment. When a preset genuinely fits, lock the preset; propose `custom` when a bespoke direction earns its place, not to avoid choosing. (And a user-stated direction is authoritative the same way a user-supplied outline is — see the lens-not-mandate note in §1.)
|
||||
@@ -0,0 +1,39 @@
|
||||
# Mode: briefing
|
||||
|
||||
Neutral information delivery. Lay the facts out plainly and completely, organized for scanning and lookup — no thesis to argue, no story to tell, no lesson to build, no spectacle. For status updates, reference decks, catalogs, meeting packs, FAQs, data references.
|
||||
|
||||
---
|
||||
|
||||
## 1. Narrative skeleton
|
||||
|
||||
**No thesis, by design**: the deck informs rather than argues. Don't manufacture a conclusion-first claim (that's `pyramid`) or a turn (that's `narrative`) where the material is simply "here is what's true".
|
||||
|
||||
**Topic titles, not assertions**: the page title names its subject plainly ("Q3 headcount by team", "Supported file formats") — clarity for lookup beats a persuasive finding. This is the deliberate inverse of `pyramid`'s assertion titles.
|
||||
|
||||
**Complete over selective**: include the full reference set the audience needs to scan, not only the points that support a case. Coverage is the value here.
|
||||
|
||||
**Parallel, even treatment**: sibling items get the same shape and weight so they can be compared and located quickly; nothing is dramatized over its peers unless it genuinely differs.
|
||||
|
||||
**Sectioned for navigation**: group related facts, label the groups, keep order predictable (chronological / categorical / alphabetical) so the reader can jump to what they need.
|
||||
|
||||
---
|
||||
|
||||
## 2. Page-structure tendencies
|
||||
|
||||
- Tables, definition lists, status cards, reference grids, dashboards — scannable structures over hero compositions.
|
||||
- Even hierarchy within a section; consistent layout across sibling pages so the eye always knows where to look.
|
||||
- Where one figure genuinely matters (a total, a status flag, an exception), surface it — but don't invent a punchline the content doesn't have.
|
||||
|
||||
> Table / list / dashboard / status-card geometry lives in [`templates/charts/`](../../templates/charts/); this mode decides *that the page informs completely and neutrally*, not pixel positions.
|
||||
|
||||
## 3. Speaker-notes register
|
||||
|
||||
Even, factual, plain. State what the page shows without building tension or pressing a "so what". No rhetorical questions, no suspense — a clear read-out the listener can follow or skim. Numbers stated plainly. (Common framework: [`executor-base.md §8`](../executor-base.md).)
|
||||
|
||||
## 4. Page skeleton example
|
||||
|
||||
```
|
||||
Title: "Q3 deliverables by workstream" ← a topic label, not a claim
|
||||
Body: status table — workstream | owner | status | due — rows at equal weight
|
||||
Notes: "Three workstreams are on track; payments is at risk on the integration." (plain read-out)
|
||||
```
|
||||
@@ -0,0 +1,45 @@
|
||||
# Mode: instructional
|
||||
|
||||
Teaching-led exposition. Decompose a concept into ordered, digestible parts and build understanding step by step. For training, tutorials, explainers, onboarding, science / knowledge sharing.
|
||||
|
||||
---
|
||||
|
||||
## 1. Narrative skeleton
|
||||
|
||||
**Decompose, then sequence**: break the subject into parts and present them in a deliberate order (simple → complex, prerequisite → dependent, overview → detail).
|
||||
|
||||
**One concept per page**: each page teaches a single idea well; do not stack unrelated concepts.
|
||||
|
||||
**Parallel exposition**: sibling concepts get parallel structure — same shape, same depth — so the audience can compare and map them.
|
||||
|
||||
**Show, then tell**: lead with a concrete example or analogy, then state the principle. A worked example beats an abstract definition.
|
||||
|
||||
**Signpost**: orient the learner — what we covered, what comes next.
|
||||
|
||||
Titles state what the page teaches ("How attention weights are computed") — clear over clever.
|
||||
|
||||
---
|
||||
|
||||
## 2. Page-structure tendencies
|
||||
|
||||
- Numbered steps / ordered flows for processes; parallel cards for sibling concepts.
|
||||
- Diagrams that build incrementally; annotate the part currently being explained.
|
||||
- A concrete example anchors each abstract point.
|
||||
|
||||
> Step / flow / diagram geometry lives in [`templates/charts/`](../../templates/charts/); this mode decides *the learning order and granularity*.
|
||||
|
||||
---
|
||||
|
||||
## 3. Speaker-notes register
|
||||
|
||||
Patient, explanatory. Define before using; analogy then principle. Anticipate the learner's question and answer it. Steady pace; signpost transitions ("now that we have X, we can ask Y"). Conversational data. (Common framework: [`executor-base.md §8`](../executor-base.md).)
|
||||
|
||||
---
|
||||
|
||||
## 4. Page skeleton example
|
||||
|
||||
```
|
||||
Title: "Step 2 — Scoring each token against the query"
|
||||
Body: concrete example (3 tokens) → the rule it illustrates → one diagram
|
||||
Notes: "Remember the query from the last page? Here's what it does next…"
|
||||
```
|
||||
@@ -0,0 +1,43 @@
|
||||
# Mode: narrative
|
||||
|
||||
Story-arc persuasion. Carry the audience through situation → tension → resolution, using suspense, turns, and human framing so the point lands emotionally before it lands logically. For pitches, case studies, brand journeys, fundraising.
|
||||
|
||||
---
|
||||
|
||||
## 1. Narrative skeleton
|
||||
|
||||
**Arc, per deck and per page**: scenario → conflict → resolution. Set a stake, raise a tension, resolve it — then bridge to the next beat.
|
||||
|
||||
**Suspense and payoff**: pose a question at the right moment, answer it on the next page. Let curiosity pull the audience forward.
|
||||
|
||||
**Human framing**: anchor abstract points in a protagonist, a moment, a concrete stake ("a team that shipped in two weeks instead of three months").
|
||||
|
||||
**At least one turn**: a reframe, a reveal, a "but here's what changed". Flat exposition is not narrative.
|
||||
|
||||
Titles read as beats that advance the arc ("Then the numbers stopped adding up"), not as labels.
|
||||
|
||||
---
|
||||
|
||||
## 2. Page-structure tendencies
|
||||
|
||||
- Pages alternate rhythm: a dense beat followed by a breathing page (single image / quote / turn) to prevent fatigue.
|
||||
- Visual weight guides the eye through each beat (hero image, one focal number, a pull quote).
|
||||
- Continuity within a chapter, variation between chapters.
|
||||
|
||||
> Structure serves the arc, not a grid. Layout / chart geometry lives in [`templates/charts/`](../../templates/charts/) and [`executor-base.md`](../executor-base.md); this mode decides *the emotional beat of each page*.
|
||||
|
||||
---
|
||||
|
||||
## 3. Speaker-notes register
|
||||
|
||||
Conversational narration — like talking with the audience, not reading a report. Scenario-conflict-resolution per page. Metaphors make the abstract tangible ("like adding a turbocharger"). Plain rhetorical questions create suspense; bridge each page from the prior one. Conversational data ("nearly a third", "more than doubled"). (Common framework: [`executor-base.md §8`](../executor-base.md).)
|
||||
|
||||
---
|
||||
|
||||
## 4. Page skeleton example
|
||||
|
||||
```
|
||||
Page 3 (turn): full-bleed image + one line — "Then deployment broke."
|
||||
Page 4 (payoff): the reframe — what changed, one focal number
|
||||
Notes: "You might be wondering where the opportunity is…" (bridges, builds)
|
||||
```
|
||||
@@ -0,0 +1,58 @@
|
||||
# Mode: pyramid
|
||||
|
||||
Conclusion-first argumentation. State the answer, then support it with mutually-exclusive, collectively-exhaustive evidence — every claim earns its place, every number carries a comparison. For audiences who want the result before the process: executives, boards, investors, decision-makers.
|
||||
|
||||
---
|
||||
|
||||
## 1. Narrative skeleton
|
||||
|
||||
**Conclusion first**: the page title *is* the conclusion, not a label. The body develops the supporting arguments beneath it.
|
||||
|
||||
SCQA opening, pyramid body:
|
||||
|
||||
| Stage | Role | Where |
|
||||
|---|---|---|
|
||||
| Situation | establish shared context | cover / first 1-2 pages |
|
||||
| Complication | the tension / problem | early pages |
|
||||
| Question | the implicit question to resolve | transition |
|
||||
| Answer | the recommendation, developed MECE | all body pages |
|
||||
|
||||
**Assertion titles** — write the finding, not the topic:
|
||||
|
||||
| Weak (topic) | Strong (assertion) |
|
||||
|---|---|
|
||||
| "Market Overview" | "Domestic market grows 23% YoY, outpacing the global average" |
|
||||
| "Challenges" | "Three structural contradictions block scaled deployment" |
|
||||
| "Our Solution" | "Three-phase path: Focus, Expand, Scale" |
|
||||
|
||||
**Data never stands alone** — every figure pairs with a comparison (prior period / benchmark / competitor / target / rank) and a "so what". A bare number is an incomplete thought in this mode.
|
||||
|
||||
**MECE** — when decomposing (drivers, segments, options), branches are mutually exclusive and collectively exhaustive; parts sum to the whole (or label "Other").
|
||||
|
||||
---
|
||||
|
||||
## 2. Page-structure tendencies
|
||||
|
||||
- Title (the conclusion) → one-line takeaway → supporting evidence beneath.
|
||||
- Each body page answers one question and states its own one-sentence conclusion.
|
||||
- Decomposition pages (driver tree / MECE breakdown / 2×2 matrix) carry the analytical load.
|
||||
- Source attribution on every data page.
|
||||
|
||||
> Page structure is a tendency, not a coordinate template. Card / tree / chart / KPI geometry lives in [`templates/charts/`](../../templates/charts/) — adapt those skeletons, do not reinvent. This mode decides *what argument each page makes*, not pixel positions.
|
||||
|
||||
---
|
||||
|
||||
## 3. Speaker-notes register
|
||||
|
||||
Conclusion-driven: the first sentence of each page's notes is the takeaway, then 2-3 supporting facts in flowing prose. Composed, authoritative. Every number paired with its comparison in the same sentence ("23% — nearly double the industry's 12%"). Spell percentages as words where the spoken form reads more naturally. (Common framework: [`executor-base.md §8`](../executor-base.md).)
|
||||
|
||||
---
|
||||
|
||||
## 4. Page skeleton example
|
||||
|
||||
```
|
||||
Title: "Retention, not acquisition, now drives growth" ← the conclusion
|
||||
Takeaway: one line — "CAC up 40% YoY, yet repurchase lifted 60% of revenue growth"
|
||||
Body: 3 MECE arguments, each with one contextualized datum
|
||||
Footer: Source: … | page #
|
||||
```
|
||||
@@ -0,0 +1,43 @@
|
||||
# Mode: showcase
|
||||
|
||||
Visual-led impact. Let imagery, scale, and rhythm carry the message; minimize copy, maximize presence. For product launches, brand reveals, event openers, promotional decks.
|
||||
|
||||
---
|
||||
|
||||
## 1. Narrative skeleton
|
||||
|
||||
**Image / number leads, words support**: each page has one dominant visual element — a hero image, a single huge number, a short phrase — not a paragraph.
|
||||
|
||||
**Emotional rhythm**: build and release — a run of bold pages punctuated by a quiet one. Pace for feeling, not density.
|
||||
|
||||
**One idea per page, stated big**: reduce each page to a single takeaway expressed at scale.
|
||||
|
||||
**Reveal structure**: hold back, then reveal (the product, the result, the tagline) for maximum effect.
|
||||
|
||||
Titles are short and evocative — a phrase, not a sentence.
|
||||
|
||||
---
|
||||
|
||||
## 2. Page-structure tendencies
|
||||
|
||||
- Full-bleed imagery with overlay text; a single focal hero number / phrase.
|
||||
- Generous negative space; the page breathes around one element.
|
||||
- Bold use of the deck's theme color for atmosphere (cover / chapter pages).
|
||||
|
||||
> Hero / full-bleed / breathing-page geometry lives in [`executor-base.md`](../executor-base.md) and [`image-layout-patterns.md`](../image-layout-patterns.md); this mode decides *what single thing each page presents*.
|
||||
|
||||
---
|
||||
|
||||
## 3. Speaker-notes register
|
||||
|
||||
Energetic, evocative — sets mood and builds anticipation. Short, punchy sentences. Lets the visual do the work and narrates the feeling around it. (Common framework: [`executor-base.md §8`](../executor-base.md).)
|
||||
|
||||
---
|
||||
|
||||
## 4. Page skeleton example
|
||||
|
||||
```
|
||||
Page (reveal): full-bleed product image + one line — "Meet the new standard."
|
||||
Page (proof): single huge number "10×" + one phrase, vast whitespace
|
||||
Notes: "Imagine cutting that to seconds. That's what this does."
|
||||
```
|
||||
@@ -371,7 +371,7 @@ Only when the element genuinely floats above another layer:
|
||||
- Pages with only one content container — no second layer to lift above
|
||||
- Dark backgrounds — black shadows vanish; use 1px low-opacity white stroke or outer glow
|
||||
|
||||
**Per-page budget**: ≤2-3 shadowed elements. If you reach for a 4th, drop one first.
|
||||
**Reference — not a constraint**: 2-3 shadowed elements per page usually reads cleanest; before adding a 4th, check the extra layering earns its weight — a genuinely complex dashboard may justify more.
|
||||
|
||||
#### Single light source per page
|
||||
|
||||
@@ -380,7 +380,7 @@ All `feOffset` on a page must share the same `dx`/`dy` direction. Default: `dx="
|
||||
#### Restraint over visibility
|
||||
|
||||
Standard: "the shadow is felt, not seen." If noticed, it's too strong.
|
||||
- Resting cards: `flood-opacity` 0.06-0.12
|
||||
- Resting cards: `flood-opacity` 0.06-0.10
|
||||
- Raised elements (CTA, overlay): max `flood-opacity` 0.20
|
||||
- Above 0.20 = Office 2007 hard-shadow look
|
||||
- Color: near-black at low opacity, or a darker tint of background. Brand-color shadow only on accent elements sharing that hue.
|
||||
@@ -424,7 +424,7 @@ Best for: cards, floating panels, elevated elements. The `svg_to_pptx` converter
|
||||
Recommended parameters (see "Two-tier elevation maximum" above for tier guidance):
|
||||
```
|
||||
stdDeviation: 4–16 (resting cards: 4–8; raised elements: 10–16)
|
||||
flood-opacity: 0.06–0.12 (resting cards — default)
|
||||
flood-opacity: 0.06–0.10 (resting cards — default)
|
||||
0.12–0.20 (raised elements only — primary CTA, overlay)
|
||||
NEVER > 0.20 (Office 2007 hard-shadow look)
|
||||
dy: 2–10 (resting: 2–4; raised: 6–10)
|
||||
|
||||
@@ -40,51 +40,40 @@ Confirm target audience, usage occasion, and core message; provide initial asses
|
||||
|
||||
### d. Style Objective Confirmation
|
||||
|
||||
Two layers. Output: `d. Style: <Mode> + <Visual style descriptor>`.
|
||||
Two independent layers, each locks one catalog item. Output: `d. Mode: <mode> + Visual style: <visual_style>`.
|
||||
|
||||
> **Presenting a `custom` lock — spell it out.** Whenever either layer resolves to `custom`, the confirmation must state the bespoke choice in **plain language** — what the cadence / fusion / posture actually is (Layer 1), or what the aesthetic actually is (Layer 2) — so the user confirms a legible direction, never the bare word `custom`. Show this prose in the confirmation first; it is the same content you then crystallize into the `mode_behavior` / `visual_style_behavior` line. e.g. `d. Mode: custom — open with a narrative hook, then a pyramid analysis core, then a showcase close (no single dominant spine)` — not just `Mode: custom`.
|
||||
|
||||
#### Layer 1 — Communication mode
|
||||
|
||||
| Mode | Core Focus | Target Audience | One-line Description |
|
||||
|-------|-----------|----------------|---------------------|
|
||||
| **A) General Versatile** | Visual impact first | Public / clients / trainees | "Catch the eye at a glance" |
|
||||
| **B) General Consulting** | Data clarity first | Teams / management | "Let data speak" |
|
||||
| **C) Top Consulting** | Logical persuasion first | Executives / board | "Lead with conclusions" |
|
||||
🚧 **GATE**: read [`modes/_index.md`](./modes/_index.md) before recommending.
|
||||
|
||||
Mode selection decision tree:
|
||||
The deck's **narrative + persuasion skeleton** — how the argument is organized and advanced. Lock **one** of `pyramid` / `narrative` / `instructional` / `showcase` / `briefing` (closed set; full catalog in the index).
|
||||
|
||||
```
|
||||
Content characteristics?
|
||||
├── Heavy imagery / promotional ──→ A) General Versatile
|
||||
├── Data analysis / progress report ──→ B) General Consulting
|
||||
└── Strategic decisions / persuading executives ──→ C) Top Consulting
|
||||
**Source**:
|
||||
- User supplied their own outline / structure → it is authoritative. Transcribe it into `§IX` as given (page order + titles preserved); still lock a mode, but for register / voice and page-internal treatment, **not** to reshape — never reorder the user's pages or rewrite their given titles. Note in `design_spec.md` that the structure is user-authored. `briefing` imposes the least if no particular "讲法" is intended.
|
||||
- A bespoke direction the five don't give — a nameable cadence (dialectic 正反合, myth-vs-reality, countdown, Socratic), a multi-act fusion of modes, or the user's own feel (confrontational here, detached there). Either the user asks, **or you recommend it** when a fusion / bespoke direction genuinely serves the deck better than a single preset (a recommendation the user confirms, like every lock). The *kind* doesn't matter → `mode: custom` + a `mode_behavior:` paragraph that **crystallizes the intent** (act sequence or posture shifts, title voice, page rhythm, register) concretely enough for the Executor to follow per page; it reads only `spec_lock.md`, never the chat. One deck locks **one** value — a fusion is one `custom` describing the acts, never several modes. Avoid only the *dodge*: don't default to `custom` when a preset genuinely fits, and prefer a dominant mode + page-level variation when one mode leads.
|
||||
- No user structure or cadence → recommend by the index's auto-selection table (content / audience signal → mode) plus the deck's stated purpose; the mode does the structural lifting. Present as a recommendation; the user may override.
|
||||
|
||||
Audience?
|
||||
├── Public / clients / trainees ────→ A) General Versatile
|
||||
├── Teams / management ────────────→ B) General Consulting
|
||||
└── Executives / board / investors → C) Top Consulting
|
||||
```
|
||||
Write the locked value to `spec_lock.md` `- mode:` and record the rationale in `design_spec.md` (for `custom`, also write the sibling `- mode_behavior:` paragraph). Executor loads only that one mode file, or follows `mode_behavior` when the value is `custom`.
|
||||
|
||||
#### Layer 2 — Visual style
|
||||
|
||||
Anchors the downstream confirmations e (Color), f (Icon), g (Typography), h (Image).
|
||||
🚧 **GATE**: read [`visual-styles/_index.md`](./visual-styles/_index.md) before recommending.
|
||||
|
||||
The deck's **visual aesthetic** — shape language, decoration density, whitespace rhythm, typographic character, texture. Anchors the downstream confirmations e (Color), f (Icon), g (Typography), h (Image). Lock one preset from the catalog, or `custom`.
|
||||
|
||||
**Source**:
|
||||
- User named a style → record verbatim as a short descriptor (normalize multilingual phrasings to a single canonical form)
|
||||
- No user description → propose a default that fits the content (e.g., warm cultural tones for heritage content; clean minimalism for tech briefings; high-contrast editorial for magazine essays). Present as a recommendation; the user may override
|
||||
- User named a style → map to the closest preset; if none fits, `custom` with a `visual_style_behavior` paragraph.
|
||||
- No user description → recommend by the index's auto-selection table (content vibe / industry → style). Present as a recommendation; the user may override.
|
||||
|
||||
**Common descriptors** (free-form, combinable, not enums):
|
||||
**Carries no color.** A visual style governs how the deck's HEX (locked at `e`) is *used* — never which colors, same discipline as [`image-renderings`](./image-renderings/_index.md). When the deck has AI images, prefer the style's paired rendering so layout and illustration share one aesthetic.
|
||||
|
||||
| Axis | Examples |
|
||||
|---|---|
|
||||
| Aesthetic | minimalist / information-dense / Keynote / editorial / hand-drawn |
|
||||
| Scenario | business consulting / academic defense / government briefing / product launch / education / pitch deck |
|
||||
| Visual character | dark tech / pixel retro / neo-Chinese / Scandinavian / Memphis / cyberpunk / vaporwave |
|
||||
Write the locked value to `spec_lock.md` `- visual_style:` and the rationale to `design_spec.md`. Executor loads only that one visual-style file.
|
||||
|
||||
Accept user combinations and one-off coinages ("Scandinavian + slight industrial"). The list is for recall, not constraint.
|
||||
> **Template vs preset**: a style mention may sound like a template name ("academic style" vs the `academic_defense/` template directory). Step 3 only triggers on an explicit template directory path supplied by the user — bare names and style words never copy templates; they map to a visual-style preset here. If a template was triggered upstream, its files are already in `<project_path>/templates/` and its fused design_spec governs.
|
||||
|
||||
> **Template vs descriptor**: a style mention may sound like a template name ("academic style" vs the `academic_defense/` template directory). Step 3 only triggers on an explicit template directory path supplied by the user — bare names and style words never copy templates. If a template was triggered upstream, its files are already in `<project_path>/templates/`. Layer 2 only handles descriptors that did NOT come with a template path.
|
||||
|
||||
**Downstream effect**: e / f / g / h values realize the Layer 2 descriptor on top of the Layer 1 mode. Example: "A) Versatile + neo-Chinese" → e leans cinnabar / ink / rice-paper; g pairs serif (KaiTi-class) with sans body; f minimal line icons; h restrained traditional imagery with negative space.
|
||||
**Downstream effect**: e / f / g / h realize the locked mode + visual style. Example: `showcase` + `dark-tech` → e applies one luminous accent on a dark field; g pairs a clean sans with mono; f minimal glow icons; h the `digital-dashboard` rendering.
|
||||
|
||||
### e. Color Scheme Recommendation
|
||||
|
||||
@@ -163,7 +152,7 @@ See [`../templates/icons/README.md`](../templates/icons/README.md) for the curre
|
||||
- `"Times New Roman"` ↔ `Times`
|
||||
- `Georgia` ↔ `Cambria`
|
||||
|
||||
**Mandatory**: propose **two** combinations to the user — one concord (safe), one contrast (with tension). Do not default to "title = body, same font" without explicit user request. Pick each family by subject fit; `Microsoft YaHei` / `KaiTi` are safe choices, not the default look.
|
||||
**Mandatory**: propose **two** combinations to the user — one concord (safe), one contrast (with tension). Do not default to "title = body, same font" without explicit user request. Pick each family by subject fit and the locked `visual_style` character — there is **no default family**; type should follow the deck's content and aesthetic, not fall back to one safe face.
|
||||
|
||||
> **Template precedence**: when a template was loaded at Step 3 via an explicit path and declares `title` / `body` font stacks in `<project_path>/templates/design_spec.md §III Typography` / §IV (or whichever heading the fused spec uses), lock those directly and skip the two-combination presentation. Same precedence as e. — user override > template values.
|
||||
|
||||
@@ -191,7 +180,7 @@ See [`../templates/icons/README.md`](../templates/icons/README.md) for the curre
|
||||
| Cool serif (academic) | `Cambria, SimSun, serif` | `"Times New Roman", SimSun, serif` | — |
|
||||
| Hei × song (政务) | `SimHei, "Microsoft YaHei", sans-serif` | `SimSun, serif` | — |
|
||||
| Tech / developer | `Arial, "Microsoft YaHei", sans-serif` | same | `Consolas, "Courier New", monospace` |
|
||||
| Concord (single family — pick the family by subject) | `"Microsoft YaHei", "PingFang SC", sans-serif` | same | — |
|
||||
| Concord (single family — pick the family by subject + `visual_style`) | `<family by subject>, …, sans-serif / serif` | same | — |
|
||||
|
||||
> **Stack length discipline (soft rule).** ≤4 fonts per stack. Lead with Windows-preinstalled fonts (Microsoft YaHei / SimSun / Arial / Georgia / Consolas); keep at most **one** macOS-exclusive family (typically `"PingFang SC"`). Converter only picks the first Latin and first CJK font ([`drawingml_utils.py parse_font_family`](../scripts/svg_to_pptx/drawingml_utils.py)); macOS→Windows fallback is auto-mapped via `FONT_FALLBACK_WIN`.
|
||||
|
||||
@@ -226,6 +215,8 @@ Baseline choice follows **content density**, not style. Common: `18px` (dense) /
|
||||
|
||||
> Two baseline columns are illustrative only — for any other baseline (16/20/22/28/32…), multiply the row's ratio. Checker reads live `body` from `spec_lock.md`. Executor may pick any px within a role's band without pre-declaring; values outside **every** band require lock extension first.
|
||||
|
||||
> **Hero in single-focus / breathing pages**: when one element *is* the entire page — a large number, a headline, a key phrase — it is the visual subject, not body content. Such heroes may borrow the cover-title band (2.5–5×); for greater emphasis, declare a hero slot in `spec_lock.md` (e.g., `hero_number` / `hero_headline`) — checker exempts declared slots with no fixed upper limit. The row above "Hero number (consulting KPIs) 1.5–2×" applies only to numeric KPIs in dashboard/data layouts, not to full-page focal elements.
|
||||
|
||||
#### Formula Rendering Policy
|
||||
|
||||
Formula rendering is part of Typography confirmation. Recommend one policy and let the user confirm or override it inside item g.
|
||||
@@ -386,8 +377,8 @@ The tables below are source data Strategist reads when constructing the three ca
|
||||
|
||||
| `d. Style` signal | Recommended rendering | Alternates |
|
||||
|---|---|---|
|
||||
| Top Consulting / strategic / MBB | `editorial` or `vector-illustration` | `blueprint`, `minimalist-swiss` |
|
||||
| General Consulting / corporate report / 学术答辩 | `vector-illustration` | `flat`, `editorial` |
|
||||
| Strategic / MBB / board | `editorial` or `vector-illustration` | `blueprint`, `minimalist-swiss` |
|
||||
| Corporate report / analysis / 学术答辩 | `vector-illustration` | `flat`, `editorial` |
|
||||
| High-end consulting / luxury / 高端 / design-firm | `minimalist-swiss` | `editorial`, `vector-illustration` |
|
||||
| Tech / SaaS / AI / 架构 | `3d-isometric`, `blueprint`, `digital-dashboard` | `flat` |
|
||||
| Modern SaaS / fintech / health-tech / premium app | `glassmorphism` | `digital-dashboard`, `flat` |
|
||||
@@ -614,39 +605,20 @@ The most common Strategist failure mode is missing the structural half — treat
|
||||
|
||||
---
|
||||
|
||||
## 2. Executor Style Details (Reference for Confirmation Item #4)
|
||||
## 2. Mode & Visual-Style Catalogs (Reference for Confirmation Item d)
|
||||
|
||||
### A) General Versatile — Executor_General
|
||||
Confirmation `d` locks two independent catalog items:
|
||||
|
||||
- **Capabilities**: full-width images + gradient overlays; free creative layouts; variants (image-text / minimalist / creative)
|
||||
- **Scenarios**: promotions, product launches, training, brand campaigns
|
||||
- **Avoid**: rigid/formal tone, dense data tables
|
||||
- **Mode** — narrative skeleton: [`modes/_index.md`](./modes/_index.md) → `pyramid` / `narrative` / `instructional` / `showcase` / `briefing`.
|
||||
- **Visual style** — aesthetic: [`visual-styles/_index.md`](./visual-styles/_index.md) → presets + `custom`.
|
||||
|
||||
### B) General Consulting — Executor_Consultant
|
||||
|
||||
- **Capabilities**: KPI dashboards (4-card, big numbers + trend arrows); chart combinations (bar/line/pie/funnel); status color grading (R/Y/G)
|
||||
- **Scenarios**: progress reports, financial analysis, government reports, proposals
|
||||
- **Avoid**: flashy decoration, image-dominated slides
|
||||
|
||||
### C) Top Consulting — Executor_Consultant_Top
|
||||
|
||||
| Rule | Detail |
|
||||
|------|--------|
|
||||
| Data contextualization | Every data point gets a comparison ("grew 63% — industry avg 12%") |
|
||||
| SCQA framework | Situation → Complication → Question → Answer |
|
||||
| Pyramid principle | Conclusion first; core insight in title |
|
||||
| Strategic coloring | Color serves information, not decoration |
|
||||
| Chart vs Table | Trends → charts; precise values → tables |
|
||||
|
||||
- **Page elements**: gradient top bar + dark takeaway box, confidential marking + footer, MECE / driver tree / waterfall
|
||||
- **Scenarios**: strategic decisions, deep analysis, MBB-level deliverables
|
||||
- **Avoid**: isolated data, subjective statements, decoration
|
||||
Read the relevant `_index.md` at confirmation `d` (Layer 1 / Layer 2) for its catalog table and auto-selection. Executor loads the locked mode + visual-style files at generation (see SKILL Step 6).
|
||||
|
||||
---
|
||||
|
||||
## 3. Color Knowledge Base
|
||||
|
||||
### Consulting Style Colors
|
||||
### Consulting Brand Colors
|
||||
|
||||
| Brand | HEX |
|
||||
|-------|-----|
|
||||
@@ -656,7 +628,7 @@ The most common Strategist failure mode is missing the structural half — treat
|
||||
| PwC Orange | `#D04A02` |
|
||||
| EY Yellow | `#FFE600` |
|
||||
|
||||
### General Versatile Colors
|
||||
### Versatile / General Colors
|
||||
|
||||
| Style | HEX |
|
||||
|-------|-----|
|
||||
@@ -712,11 +684,7 @@ Templates are starting points. The Strategist may adjust based on content and au
|
||||
|
||||
### 6.1 Content Planning Strategy
|
||||
|
||||
| Style | Content Outline | Speaker Notes |
|
||||
|-------|----------------|---------------|
|
||||
| A) General Versatile | Per-page core theme from source doc | Concise script |
|
||||
| B) General Consulting | Structured sections, data-driven insights | Professional terms, conclusion-first |
|
||||
| C) Top Consulting | SCQA + pyramid principle | Highly condensed, conclusion-driven |
|
||||
Content-outline and speaker-notes strategy follow the deck's locked **mode** — see [`modes/_index.md`](./modes/_index.md) and the locked mode's file. The guidance below applies within any mode:
|
||||
|
||||
**Per-block expression**: phrase each §IX content block in the mode that fits it — prose, bullet, keyword, or any phrasing the content calls for — not a default bullet. Take the cue from the source's texture: a narrative source (article / transcript / talk) leans prose — resist compressing its argument pages into fragments; a data sheet leans bullet/keyword. Write the real sentence into §IX itself, not a skeleton point to expand later. One page mixes modes; let layout pull each (narrative → prose, structural/chart → bullets/keywords).
|
||||
|
||||
|
||||
+102
@@ -0,0 +1,102 @@
|
||||
# Visual Styles — Index
|
||||
|
||||
A **visual style** is how the deck **looks** — shape language, decoration density, whitespace rhythm, typographic character, texture / elevation. Lock **one per deck**; it anchors the aesthetic of the SVG layout itself (cards, dividers, spacing, corner radius, shadow use).
|
||||
|
||||
> **Styles carry NO HEX and lock no palette.** Color truth lives in `design_spec.colors` / `spec_lock.colors` (confirmation `e`); color *behavior* lives in [`image-palettes/`](../image-palettes/). A visual style only describes how the deck's existing colors are *used* — never which colors. (Same discipline as [`image-renderings/`](../image-renderings/) for AI images.)
|
||||
>
|
||||
> A visual style is *not* a mode. **Visual style = how it looks; mode = how you argue** (see [`modes/_index.md`](../modes/_index.md)). Locked independently — any style pairs with any mode.
|
||||
|
||||
---
|
||||
|
||||
## 1. Catalog
|
||||
|
||||
Each style has its own file with: shape & decoration, typography character, color-usage discipline (no HEX), texture / elevation, and the paired image-rendering. **Read only the file for the style you lock** — never glob the directory. The catalog mirrors [`image-renderings`](../image-renderings/_index.md): each style's "Paired rendering" names the illustration family that shares its aesthetic.
|
||||
|
||||
### 1.1 Corporate / product
|
||||
|
||||
| Visual style | Character | Best for | Paired rendering |
|
||||
|---|---|---|---|
|
||||
| [`swiss-minimal`](./swiss-minimal.md) | Grid-locked, sharp, aggressive whitespace, no decoration | High-end consulting, architecture, type-led | `minimalist-swiss` |
|
||||
| [`soft-rounded`](./soft-rounded.md) | Rounded cards, gentle elevation, approachable | Product, SaaS, training, consumer | `flat` |
|
||||
| [`glassmorphism`](./glassmorphism.md) | Translucent glass panels, gradient light, floating depth | Modern SaaS, fintech, product launches, AI demos | `glassmorphism` |
|
||||
| [`dark-tech`](./dark-tech.md) | Dark canvas, glow accents, geometric precision | Tech, AI, data products, launches | `digital-dashboard` |
|
||||
| [`blueprint`](./blueprint.md) | Schematic line work on dark paper, isometric, annotated | Technical briefings, architecture, engineering | `blueprint` |
|
||||
|
||||
### 1.2 Editorial / publication
|
||||
|
||||
| Visual style | Character | Best for | Paired rendering |
|
||||
|---|---|---|---|
|
||||
| [`editorial`](./editorial.md) | Magazine hierarchy, rules & columns, serif/sans interplay | Finance, journalism, analysis, explainers | `editorial` |
|
||||
| [`photo-editorial`](./photo-editorial.md) | Full-bleed photography dominates, text points & captions | Architecture, design, fashion, culture, photo-led | `corporate-photo` |
|
||||
| [`data-journalism`](./data-journalism.md) | Multi-column micro-charts, sidebars, source lines, dense | Finance, market reviews, research, data reports | `editorial` |
|
||||
| [`brutalist`](./brutalist.md) | Newsprint density, ruled boxes, raw structure, flat | Annual reviews, research digests, manifestos | `screen-print` / `editorial` |
|
||||
|
||||
### 1.3 Expressive / print
|
||||
|
||||
| Visual style | Character | Best for | Paired rendering |
|
||||
|---|---|---|---|
|
||||
| [`memphis`](./memphis.md) | Clashing color blocks, geometric confetti, bold outlines | Festivals, consumer, youth, launch hype | `flat` |
|
||||
| [`zine`](./zine.md) | Riso misregistration, halftone, limited palette, print grit | Culture, design talks, indie brands | `screen-print` |
|
||||
| [`vintage-poster`](./vintage-poster.md) | Mid-century flat blocks, halftone, retro-geometric warmth | Heritage, hospitality, cultural, anniversaries | `vintage-poster` |
|
||||
| [`paper-cut`](./paper-cut.md) | Layered cut-paper sheets, soft inter-layer shadow, tactile | Cultural / folk, children, festival, sustainability | `paper-cut` |
|
||||
|
||||
### 1.4 Hand-drawn / brush
|
||||
|
||||
| Visual style | Character | Best for | Paired rendering |
|
||||
|---|---|---|---|
|
||||
| [`sketch-notes`](./sketch-notes.md) | Warm paper, doodle line work, soft pastel blocks | Education, training, onboarding, knowledge | `sketch-notes` |
|
||||
| [`ink-notes`](./ink-notes.md) | Pale field, black hand-ink, sparse semantic accent | Methodology, before/after, manifestos | `ink-notes` |
|
||||
| [`chalkboard`](./chalkboard.md) | Dark slate, chalk strokes, powdery pastel accents | Teaching, tutorials, classroom, academic | `chalkboard` |
|
||||
| [`ink-wash`](./ink-wash.md) | Rice-paper whitespace, brush marks, seal accent, still | Cultural, philosophy, heritage, 新中式 | `ink-notes` / `watercolor` |
|
||||
|
||||
### 1.5 Specialty
|
||||
|
||||
| Visual style | Character | Best for | Paired rendering |
|
||||
|---|---|---|---|
|
||||
| [`pixel-art`](./pixel-art.md) | Strict pixel grid, blocky forms, limited palette, flat | Gaming, retro-tech, nostalgic, game-flavored | `pixel-art` |
|
||||
|
||||
---
|
||||
|
||||
## 2. Auto-selection — content vibe / industry → style
|
||||
|
||||
| Signal | Recommended style | Alternates |
|
||||
|---|---|---|
|
||||
| High-end consulting / architecture / luxury / minimal | `swiss-minimal` | `editorial` |
|
||||
| Finance / journalism / research / long-form analysis | `editorial` | `data-journalism` |
|
||||
| Photography-led / architecture / design / fashion / 大图 | `photo-editorial` | `editorial` |
|
||||
| Data report / market review / 财经 / Bloomberg / Economist | `data-journalism` | `editorial` |
|
||||
| Product / SaaS / training / consumer / friendly | `soft-rounded` | `editorial` |
|
||||
| Modern SaaS / fintech / health-tech / premium app | `glassmorphism` | `dark-tech` |
|
||||
| Tech / AI / dev tools / data / futuristic | `dark-tech` | `glassmorphism` |
|
||||
| Cultural / philosophy / heritage / 新中式 / 东方 | `ink-wash` | `editorial` |
|
||||
| Engineering / systems / architecture walkthrough | `blueprint` | `dark-tech` |
|
||||
| Annual review / manifesto / max-density editorial | `brutalist` | `editorial` |
|
||||
| Festival / consumer brand / youth / loud launch | `memphis` | `soft-rounded` |
|
||||
| Indie publishing / design / culture / printed feel | `zine` | `editorial` |
|
||||
| Heritage / hospitality / retro brand / 老字号 / 周年 | `vintage-poster` | `zine` |
|
||||
| Cultural / folk / festival / children / sustainability | `paper-cut` | `sketch-notes` |
|
||||
| Education / training / onboarding / 教学 | `sketch-notes` | `paper-cut` |
|
||||
| Methodology / before-after / manifesto / 方法论 | `ink-notes` | `editorial` |
|
||||
| Classroom / tutorial / academic / 课堂 | `chalkboard` | `sketch-notes` |
|
||||
| Gaming / retro / 8-bit / 复古游戏 | `pixel-art` | `vintage-poster` |
|
||||
|
||||
> When the deck has AI images, align style with rendering: a `swiss-minimal` layout reads best with a `minimalist-swiss` rendering, so page and illustrations share one aesthetic. The "Paired rendering" column is the default pairing; override when content demands.
|
||||
>
|
||||
> Not every image-rendering becomes its own visual style. A rendering earns a layout twin only when it defines a whole-page layout language (shape, whitespace, composition, texture) — not merely how an inserted image looks. Purely atmospheric renderings (`nature`, `warm-scene`, `fantasy-animation`) stay imagery-only: they pair with whichever layout style fits rather than being one. (Note the distinction `photo-editorial` draws: photography as a *rendering* is image-look, but photo-*led composition* is a real layout language — so the style exists, paired with `corporate-photo`.)
|
||||
|
||||
---
|
||||
|
||||
## 3. Escape hatch — `custom`
|
||||
|
||||
When no preset captures the intended aesthetic, set `- visual_style: custom` in `spec_lock.md` and add a `- visual_style_behavior:` line: one paragraph naming shape language, decoration density, whitespace, typographic character, and texture — **no HEX, no color names as values**. `custom` is a tail-case, not a default; reach for a preset first.
|
||||
|
||||
---
|
||||
|
||||
## 4. How to use
|
||||
|
||||
1. Strategist reads this index at confirmation `d. Layer 2`.
|
||||
2. Pick one style from the auto-selection table + the deck's vibe.
|
||||
3. Lock it: write `- visual_style: <name>` into `spec_lock.md`, record rationale in `design_spec.md`.
|
||||
4. Executor reads **only** `visual-styles/<locked-style>.md` at generation entry — never globs this directory.
|
||||
|
||||
**Lock scope**: deck-wide (one style per deck). It anchors taste as a **reference**, not a whitelist — pages may deviate with reason.
|
||||
+33
@@ -0,0 +1,33 @@
|
||||
# Visual style: blueprint
|
||||
|
||||
Engineering schematic — thin line work on dark blueprint paper, isometric projection, technical-annotation language. Speaks like a drawing hung on a wall, not a marketing slide. For architecture walkthroughs, technical briefings, engineering whitepapers, systems explainers.
|
||||
|
||||
---
|
||||
|
||||
## 1. Shape & decoration
|
||||
|
||||
- Shape language: thin single-weight line frames (no heavy fills); components drawn as outlined geometry; optional isometric / 3D-axonometric projection for structures. Slight or zero corner rounding.
|
||||
- Decoration: the engineering-drawing vocabulary — dimension lines, leader arrows, component codes, coordinate labels, a faint gridline backdrop under everything. Annotation *is* the decoration.
|
||||
- Whitespace: the grid breathes through; let line work float on the dark field with measured spacing.
|
||||
|
||||
## 2. Typography character
|
||||
|
||||
- Clean sans for labels and body; monospace for every component name / code / coordinate — mirroring how real technical docs read.
|
||||
- Small, precise annotation type; wide tracking on coordinate / dimension labels. Restraint over emphasis.
|
||||
|
||||
> Families are chosen at confirmation `g`; this style asks for a clean sans + monospace pairing.
|
||||
|
||||
## 3. Using the deck's colors
|
||||
|
||||
- Dark paper field; a single line-color carries all the schematic line work (frames, connectors, edges); one spot accent marks the current state / key path / callout — the classic engineering-drawing convention of one highlight color.
|
||||
- Everything else stays low-key line work. The accent appears at few points, high contrast.
|
||||
|
||||
> HEX values come from confirmation `e`; this style only governs the line-vs-accent discipline — it names no colors.
|
||||
|
||||
## 4. Texture / elevation
|
||||
|
||||
- Flat line work, not material elevation. Depth reads from isometric projection and layered line weights, not shadows. Optional subtle corner vignette / accent glow on the dark paper — keep it faint. (Dark-field legibility: [`shared-standards.md §6`](../shared-standards.md).)
|
||||
|
||||
## 5. Paired image-rendering
|
||||
|
||||
`blueprint` — lock it so AI imagery shares the schematic line-drawing aesthetic.
|
||||
+34
@@ -0,0 +1,34 @@
|
||||
# Visual style: brutalist
|
||||
|
||||
Brutalist editorial newspaper. Wall-to-wall small type, irregular column widths, heavy rule lines, raw structure on show. Reportorial and information-dense — for annual reviews, research digests, manifestos, editorial decks that flaunt density.
|
||||
|
||||
---
|
||||
|
||||
## 1. Shape & decoration
|
||||
|
||||
- Shape language: hard rectangles and ruled boxes; thick black borders / cell frames; visible column dividers. Corner radius `rx="0"` — never rounded.
|
||||
- Decoration: the grid itself is the decoration — masthead bars, rule lines, boxed pull-quotes, halftone fills. No gradients, no soft cards, no shadows.
|
||||
- Whitespace: tight and deliberate — narrow margins, dense columns, a newspaper's packed rhythm. Density is the point; one or two breathing zones per page keep it readable, not airy.
|
||||
- Irregular multi-column layout (mixed column widths) over a uniform grid; asymmetry is intentional.
|
||||
|
||||
## 2. Typography character
|
||||
|
||||
- Three-family hard contrast: a heavy display sans for headlines (poster-black weight), a serif for column body, monospace for figures / data — the collision is the look.
|
||||
- Small body size, high density; strong size jump between masthead headline and body. Flush-left columns, tight leading.
|
||||
|
||||
> Families are chosen at confirmation `g`; this style asks for a display-black × serif-body × monospace-data *character*.
|
||||
|
||||
## 3. Using the deck's colors
|
||||
|
||||
- Near-monochrome: ink-dark structure and type on a paper-light field; a single spot accent appears rarely (a masthead rule, one key figure, a stamp) — a few percent of canvas at most.
|
||||
- Color as punctuation, not fill. No color blocking, no gradients — the accent earns attention by scarcity.
|
||||
|
||||
> HEX values come from confirmation `e`; this style only governs how sparingly the accent is used — it names no colors.
|
||||
|
||||
## 4. Texture / elevation
|
||||
|
||||
- Strictly flat — no drop shadows, no elevation. Depth comes from rule weight and halftone texture, not material. Optional paper-grain / halftone `<pattern>` for a printed feel.
|
||||
|
||||
## 5. Paired image-rendering
|
||||
|
||||
`screen-print` or `editorial` — halftone monochrome imagery that sits inside the newsprint aesthetic.
|
||||
+32
@@ -0,0 +1,32 @@
|
||||
# Visual style: chalkboard
|
||||
|
||||
Classroom chalkboard — a dark slate field, soft chalk-stroke line work, powdery pastel accents. Nostalgic and instructional. For teaching decks, tutorials, school / academic content, retro-classroom atmosphere.
|
||||
|
||||
---
|
||||
|
||||
## 1. Shape & decoration
|
||||
|
||||
- Shape language: chalk-stroke line work with slightly diffused, dry-medium edges; sketched boxes, brackets, arrows in chalk. Confident but never mechanical.
|
||||
- Decoration: underlines and emphasis marks; a few sprinkled chalk stars / dots. Blackboard pedagogy — organized sections, a clear central focus.
|
||||
- Whitespace: the dark board reads as room; let chalk marks breathe rather than crowd.
|
||||
|
||||
## 2. Typography character
|
||||
|
||||
- Hand-lettered chalk character for titles; legible body. Dry, nostalgic, classroom-warm.
|
||||
|
||||
> Families are chosen at confirmation `g`; this style asks for a hand-lettered chalk title *character*.
|
||||
|
||||
## 3. Using the deck's colors
|
||||
|
||||
- Dark slate field; off-white chalk carries most marks; the deck's colors appear as soft, powdery pastel chalk accents, used sparingly.
|
||||
- Restrained and powdery — never saturated fills.
|
||||
|
||||
> HEX values come from confirmation `e`; this style only governs the chalk-on-slate, powdery-accent discipline — it names no colors. (Dark-field legibility: [`shared-standards.md §6`](../shared-standards.md).)
|
||||
|
||||
## 4. Texture / elevation
|
||||
|
||||
- Flat — depth from chalk-stroke weight, not material. Chalk-dust grain texture across the board is on-brand; no drop shadows.
|
||||
|
||||
## 5. Paired image-rendering
|
||||
|
||||
`chalkboard` — chalk-on-slate imagery with the same classroom feel.
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
# Visual style: dark-tech
|
||||
|
||||
Dark canvas, luminous accents, geometric precision. For tech, AI, dev tools, data products, launches.
|
||||
|
||||
---
|
||||
|
||||
## 1. Shape & decoration
|
||||
|
||||
- Shape language: crisp geometry; thin glowing rules; hexagon / circuit / grid motifs used sparingly. Slight rounding (`rx` 4-8) or sharp.
|
||||
- Decoration: glow accents, fine grid backgrounds, monospace labels, node / connector lines. Restrained — precision over clutter.
|
||||
- Whitespace: dark negative space reads as depth; let elements float on it.
|
||||
|
||||
## 2. Typography character
|
||||
|
||||
- Clean sans for body; monospace for labels / figures / code cues. Wide tracking on small-caps labels.
|
||||
- High-contrast hierarchy against the dark field.
|
||||
|
||||
> Families are chosen at confirmation `g`; this style asks for a clean sans + monospace pairing.
|
||||
|
||||
## 3. Using the deck's colors
|
||||
|
||||
- Dark background; one or two luminous accents carry focus (glowing figures, active nodes); everything else low-key.
|
||||
- The accent does the work of attention — few points, high contrast.
|
||||
|
||||
## 4. Texture / elevation
|
||||
|
||||
- Depth via glow and layering on dark, not drop shadows. Outer glow / light strokes mark elevation; gradients stay same-hue and subtle. (Dark-theme legibility — prefer light stroke / outer glow over black shadow: [`shared-standards.md §6`](../shared-standards.md).)
|
||||
|
||||
## 5. Paired image-rendering
|
||||
|
||||
`digital-dashboard` or `blueprint` — polished UI / technical-schematic look for AI images.
|
||||
+32
@@ -0,0 +1,32 @@
|
||||
# Visual style: data-journalism
|
||||
|
||||
Bloomberg / Economist news-infographic — publication-grade information density: multi-column grids, inline micro-charts, data tables, editorial sidebars, source lines. Cool and restrained, read like a financial long-read rather than a keynote. For finance, market reviews, research, annual data reports, data-driven explainers.
|
||||
|
||||
---
|
||||
|
||||
## 1. Shape & decoration
|
||||
|
||||
- Shape language: a dense multi-column grid carrying many small charts and data tables inline; editorial sidebars and pull-stats; hairline dividers; hero numbers; a running source / footnote line. Information density is the look — kept legible by a rigorous grid.
|
||||
- Decoration: minimal beyond the data — a single accent rule, sparing annotation. Charts and numbers are the visual interest, not ornament.
|
||||
- Whitespace: tight but structured; the grid earns density without clutter.
|
||||
|
||||
## 2. Typography character
|
||||
|
||||
- Serif headline / hero-number for authority × a clean sans or monospace for numeric precision in tables and chart labels. Small captions and source lines; tight, deliberate hierarchy.
|
||||
|
||||
> Families are chosen at confirmation `g`; this style asks for a serif-headline × precise-sans/mono-data *character*.
|
||||
|
||||
## 3. Using the deck's colors
|
||||
|
||||
- A restrained field — light publication paper or dark graphite both fit (Economist vs Bloomberg-terminal); the deck's accent marks risk / key figures, an optional secondary distinguishes a second series; charts use tints of the same family, never a rainbow.
|
||||
- Numbers are colored to *mean* (up / down / risk / focus), not to decorate.
|
||||
|
||||
> HEX values come from confirmation `e`; this style only governs the restrained-field, meaning-coded-data discipline — it names no colors. (Dark-field legibility, if dark: [`shared-standards.md §6`](../shared-standards.md).)
|
||||
|
||||
## 4. Texture / elevation
|
||||
|
||||
- Flat, publication-grade — hairline rules over heavy cards; optional scrim on any image; no glow, no decorative shadow.
|
||||
|
||||
## 5. Paired image-rendering
|
||||
|
||||
`editorial` — magazine-style infographic imagery sharing the data-publication aesthetic.
|
||||
+32
@@ -0,0 +1,32 @@
|
||||
# Visual style: editorial
|
||||
|
||||
Magazine-grade hierarchy. Columns, hairline rules, a serif / sans interplay, strong typographic structure. For finance, journalism, research, long-form analysis.
|
||||
|
||||
---
|
||||
|
||||
## 1. Shape & decoration
|
||||
|
||||
- Shape language: rectilinear; thin rules and column dividers instead of cards. Minimal rounding (`rx` 0-4).
|
||||
- Decoration: hairline rules, kickers / eyebrows, pull quotes, drop-style emphasis — typographic, not graphic. Sparing.
|
||||
- Whitespace: structured by columns and baseline rhythm; comfortable but information-rich.
|
||||
- Multi-column text flow where content suits.
|
||||
|
||||
## 2. Typography character
|
||||
|
||||
- Serif / sans interplay: a serif for headlines or pull quotes against a clean sans body (or the reverse). Clear role contrast.
|
||||
- Strong vertical hierarchy: kicker → headline → standfirst → body. Generous leading.
|
||||
|
||||
> Families are chosen at confirmation `g`; this style asks for an editorial serif/sans *pairing*, not specific fonts.
|
||||
|
||||
## 3. Using the deck's colors
|
||||
|
||||
- Mostly monochrome text on a light field; one accent for emphasis (a rule, a highlighted figure, a kicker).
|
||||
- Restraint — color marks structure and emphasis, not decoration.
|
||||
|
||||
## 4. Texture / elevation
|
||||
|
||||
- Flat to barely-raised. Rules and whitespace separate content, not shadows. Shadow only on a genuine floating element.
|
||||
|
||||
## 5. Paired image-rendering
|
||||
|
||||
`editorial` — magazine-style infographic look for AI images.
|
||||
+32
@@ -0,0 +1,32 @@
|
||||
# Visual style: glassmorphism
|
||||
|
||||
Frosted-glass SaaS — translucent layered panels, flowing gradient light, floating depth on a dark field. Future-tech, weightless, premium. For modern SaaS, fintech, health-tech, product launches, AI demos.
|
||||
|
||||
---
|
||||
|
||||
## 1. Shape & decoration
|
||||
|
||||
- Shape language: rounded translucent glass panels (low fill-opacity over the dark field) with bright hairline edges; layered, floating cards that imply blur and frost; rounded corners (`rx` 12-20).
|
||||
- Decoration: soft radial light blooms in the background; thin luminous edge highlights along panels; restrained — the glass material is the decoration, not added ornament.
|
||||
- Whitespace: dark negative space reads as depth; let panels float on it with room to breathe.
|
||||
|
||||
## 2. Typography character
|
||||
|
||||
- Clean modern sans; light / medium weights; airy. Headlines can carry a luminous gradient on the dark field.
|
||||
|
||||
> Families are chosen at confirmation `g`; this style asks for a clean, modern, slightly-light sans *character*.
|
||||
|
||||
## 3. Using the deck's colors
|
||||
|
||||
- Dark field; the deck's colors read as luminous gradients flowing across panels and titles, low-opacity glass tints, and a neon accent at ~10%. Color behaves like light through glass, not flat fill.
|
||||
- Depth and hierarchy come from how brightly the glass glows, not from heavy saturation.
|
||||
|
||||
> HEX values come from confirmation `e`; this style only governs the translucent-glass, luminous-gradient discipline — it names no colors.
|
||||
|
||||
## 4. Texture / elevation
|
||||
|
||||
- Depth via translucency, layering, bright edge highlights, and soft background glow — not hard drop shadows. Smooth multi-stop gradients are intrinsic here (the one style where generous gradient use is on-brand); keep them luminous, not muddy. (Dark-field legibility: [`shared-standards.md §6`](../shared-standards.md).)
|
||||
|
||||
## 5. Paired image-rendering
|
||||
|
||||
`glassmorphism` — frosted translucent panels / soft-gradient imagery matching the glass surfaces.
|
||||
+33
@@ -0,0 +1,33 @@
|
||||
# Visual style: ink-notes
|
||||
|
||||
Whiteboard-ink minimalism — a pale field, confident black hand-ink line work, sparse semantic color. Considered and manifesto-clear, the professional end of hand-drawn. For methodology, before/after essays, mindset-shift narratives, technical manifestos.
|
||||
|
||||
---
|
||||
|
||||
## 1. Shape & decoration
|
||||
|
||||
- Shape language: hand-drawn line work with slight, intentional wobble — boxes, arrows, dividers and brackets sketched as if on a thoughtful whiteboard; never mechanically straight. Line defines structure; no filled cards.
|
||||
- Decoration: minimal — a few doodle marks (stars, dashes, dots, underlines) for emphasis. Restraint is the look; clutter breaks the "considered" feel.
|
||||
- Whitespace: generous and empty; the pale field carries most of the canvas, elements float with room around them.
|
||||
|
||||
## 2. Typography character
|
||||
|
||||
- Hand-lettered / humanist character for titles — bold, slightly oversized, confident. Plain legible sans for body.
|
||||
- Reads as written-by-hand-but-deliberate, not corporate-precise.
|
||||
|
||||
> Families are chosen at confirmation `g`; this style asks for a humanist / hand-lettered title *character*.
|
||||
|
||||
## 3. Using the deck's colors
|
||||
|
||||
- Near-monochrome: ink-dark line work on a pale field does ~85% of the work; the deck's accent appears only as a semantic mark (risk / positive / highlight) under ~10% of canvas.
|
||||
- Color carries meaning, not decoration — one or two accents, used where they signify.
|
||||
|
||||
> HEX values come from confirmation `e`; this style only governs the monochrome-with-semantic-accent discipline — it names no colors.
|
||||
|
||||
## 4. Texture / elevation
|
||||
|
||||
- Strictly flat — no shadows, no paper grain (the field stays clean). Depth reads from line weight and spacing alone.
|
||||
|
||||
## 5. Paired image-rendering
|
||||
|
||||
`ink-notes` — black-ink visual-note imagery on a clean field, matching the considered hand-drawn aesthetic.
|
||||
+32
@@ -0,0 +1,32 @@
|
||||
# Visual style: ink-wash
|
||||
|
||||
New-Chinese ink-wash — a rice-paper field, vast literati whitespace, restrained brush marks, a single seal-stamp accent. Still, considered, Eastern. For cultural reading-shares, philosophy, heritage, self-cultivation, 新中式 narratives.
|
||||
|
||||
---
|
||||
|
||||
## 1. Shape & decoration
|
||||
|
||||
- Shape language: minimal brush-stroke marks and hairline dividers; the occasional ink-dark block; a single seal-stamp (印章) square as a focal accent. No cards, no boxes — emptiness is the structure.
|
||||
- Decoration: almost none; what little appears reads as brush and seal. Asymmetric, scroll-like composition with deliberate off-balance.
|
||||
- Whitespace: vast and intentional — the rice-paper field carries most of the page; a few elements float in great calm.
|
||||
|
||||
## 2. Typography character
|
||||
|
||||
- Brush / serif character for titles (calligraphic, expressive) against a clean modern sans body — a Kai × Hei contrast axis. Large airy titles, generous leading, vertical rhythm welcome.
|
||||
|
||||
> Families are chosen at confirmation `g`; this style asks for a calligraphic-brush title × clean-sans body *character*.
|
||||
|
||||
## 3. Using the deck's colors
|
||||
|
||||
- A pale rice-paper field dominates; ink-dark carries type and the rare ink shape; a single warm seal-red accent appears at one key point — scarce, like a stamp on a scroll.
|
||||
- Near-monochrome ink discipline — restraint is the aesthetic, not abundance.
|
||||
|
||||
> HEX values come from confirmation `e`; this style only governs the ink-on-paper, single-seal-accent discipline — it names no colors.
|
||||
|
||||
## 4. Texture / elevation
|
||||
|
||||
- Flat — emptiness and brush weight carry depth, not shadow. Optional faint paper grain or low-opacity ink-bleed wash; no drop shadows.
|
||||
|
||||
## 5. Paired image-rendering
|
||||
|
||||
`ink-notes` or `watercolor` — mono-ink or soft-wash imagery that shares the literati restraint.
|
||||
+33
@@ -0,0 +1,33 @@
|
||||
# Visual style: memphis
|
||||
|
||||
Memphis / Pop — clashing color blocks, geometric confetti, bold outlines, 80s-revival exuberance. Loud and playful. For festivals, consumer brands, youth culture, launch hype, anything that wants energy over restraint.
|
||||
|
||||
---
|
||||
|
||||
## 1. Shape & decoration
|
||||
|
||||
- Shape language: bold geometric primitives — circles, triangles, zigzags, squiggles, blobs — with thick dark outlines (2-4px). Mixed corner radii allowed; playful inconsistency is on-brand.
|
||||
- Decoration: scattered geometric confetti, color-block backings, pattern fills (dots / stripes), oversized punctuation. Generous decoration — but composed, not chaotic.
|
||||
- Whitespace: energetic asymmetry; props float at angles. Still leave the focal content room to read against the noise.
|
||||
|
||||
## 2. Typography character
|
||||
|
||||
- Display poster type for headlines (heavy, attention-grabbing); a neutral readable sans for body so density stays legible under the visual energy.
|
||||
- Big, confident headline scale; tight to the artwork. Body kept clean and quiet by contrast.
|
||||
|
||||
> Families are chosen at confirmation `g`; this style asks for a display-poster headline × neutral-sans body *character*.
|
||||
|
||||
## 3. Using the deck's colors
|
||||
|
||||
- Multi-accent clash is the signature — but bounded: the clashing colors stay a minority of canvas (≈40% cap), and any one page fronts only two or three of them, not the whole set.
|
||||
- A light field carries the noise; dark outlines anchor every shape so the clash reads as composed, not muddy. Disciplined exuberance, never rainbow soup.
|
||||
|
||||
> HEX values come from confirmation `e`; this style governs how many accents appear and how boldly — it names no colors.
|
||||
|
||||
## 4. Texture / elevation
|
||||
|
||||
- Mostly flat pop-art blocks; bold outlines do the separating, not shadows. Optional hard-offset (sticker / cutout) shadows for a retro pop feel — flat, not soft. Keep gradients rare.
|
||||
|
||||
## 5. Paired image-rendering
|
||||
|
||||
`flat` — clean vivid flat-color illustration that matches the pop-block energy.
|
||||
+32
@@ -0,0 +1,32 @@
|
||||
# Visual style: paper-cut
|
||||
|
||||
Layered paper-craft — scissor-cut shapes stacked in tactile layers, soft shadow where layers overlap. Warm, hand-made, child-friendly without being childish. For education, children's content, cultural / folk topics, festival, sustainability.
|
||||
|
||||
---
|
||||
|
||||
## 1. Shape & decoration
|
||||
|
||||
- Shape language: forms defined by crisp, slightly-irregular cut edges (no outlines); simplified, stylized shapes that read as cut paper rather than illustration.
|
||||
- Decoration: layering itself is the device — each element is a "sheet" stacked over the one beneath; small cut-out accents on the top layer.
|
||||
- Whitespace: cozy, composed — the backing sheet shows through as breathing room.
|
||||
|
||||
## 2. Typography character
|
||||
|
||||
- Clean friendly sans; warm, not severe. Titles can sit on a cut-paper banner shape.
|
||||
|
||||
> Families are chosen at confirmation `g`; this style asks for a warm, rounded, approachable sans *character*.
|
||||
|
||||
## 3. Using the deck's colors
|
||||
|
||||
- Each color reads as one sheet of paper — the primary is the dominant foreground sheet, the secondary the backing field, the accent a small top-layer cut-out.
|
||||
- Layering and overlap drive emphasis more than proportion: even a small primary sheet in front of a large secondary reads as primary-led.
|
||||
|
||||
> HEX values come from confirmation `e`; this style only governs the each-color-is-a-sheet, layering discipline — it names no colors.
|
||||
|
||||
## 4. Texture / elevation
|
||||
|
||||
- Real layered depth — a soft 8-12% drop shadow under each cut layer is core here (the one style where layered shadow is the point, not a violation). Matte paper grain on each sheet. (Shadow rules: [`shared-standards.md §6`](../shared-standards.md).)
|
||||
|
||||
## 5. Paired image-rendering
|
||||
|
||||
`paper-cut` — layered cut-paper imagery sharing the tactile, hand-made depth.
|
||||
+32
@@ -0,0 +1,32 @@
|
||||
# Visual style: photo-editorial
|
||||
|
||||
Photo-led editorial — large full-bleed photography dominates the page, text points and captions. The big image speaks; words title it. Magazine photo-essay rhythm. For architecture, design, fashion, culture, photography-forward long-reads.
|
||||
|
||||
---
|
||||
|
||||
## 1. Shape & decoration
|
||||
|
||||
- Shape language: large full-bleed / edge-to-edge image fields are the page's spine; text sits in restrained columns, caption blocks, kickers, or overlay headlines. Minimal chrome — the photograph carries the page.
|
||||
- Decoration: thin rules, section numbering, small figure notes; nothing competes with the image.
|
||||
- Whitespace: generous around text; the photo fills, the type breathes beside it. Asymmetric magazine composition.
|
||||
|
||||
## 2. Typography character
|
||||
|
||||
- Editorial serif / CJK title × clean sans body; magazine-column cadence; small precise captions and figure notes. Words are concise — they point, they don't fill.
|
||||
|
||||
> Families are chosen at confirmation `g`; this style asks for an editorial serif-title × clean-sans-body *character*.
|
||||
|
||||
## 3. Using the deck's colors
|
||||
|
||||
- The photograph carries the color; the text-side field stays a quiet neutral so imagery dominates; one restrained accent marks numbering, rules, or a key word.
|
||||
- Deliberately understated on the type side — the image is the loudest element, by design.
|
||||
|
||||
> HEX values come from confirmation `e`; this style only governs the image-dominant, understated-type discipline — it names no colors.
|
||||
|
||||
## 4. Texture / elevation
|
||||
|
||||
- Flat — no decorative shadows. The one practical exception: a scrim gradient over an image where overlay text needs legibility. Photography supplies the texture.
|
||||
|
||||
## 5. Paired image-rendering
|
||||
|
||||
`corporate-photo` — real editorial photography as the hero imagery the layout is built around.
|
||||
+32
@@ -0,0 +1,32 @@
|
||||
# Visual style: pixel-art
|
||||
|
||||
8-bit retro game — strict pixel grid, chunky blocky forms, a limited palette, no anti-aliasing. Playful and nostalgic. For gaming decks, retro-tech decks, nostalgic or game-flavored education / entertainment.
|
||||
|
||||
---
|
||||
|
||||
## 1. Shape & decoration
|
||||
|
||||
- Shape language: everything aligns to a visible pixel grid — blocky shapes, stepped edges, sharp transitions, no smooth curves; optional 1-pixel darker outlines for definition.
|
||||
- Decoration: classic game framing — HUD bars, tile floors, sprite icons, chunky pixel borders. References NES / SNES / arcade composition.
|
||||
- Whitespace: grid-disciplined; let blocks sit on clean tiled ground rather than crowd.
|
||||
|
||||
## 2. Typography character
|
||||
|
||||
- Pixel / bitmap display character for headlines; keep body in a clean legible face — full-pixel body type strains at reading length.
|
||||
|
||||
> Families are chosen at confirmation `g`; this style asks for a pixel / bitmap display *character* for titles, legible body alongside.
|
||||
|
||||
## 3. Using the deck's colors
|
||||
|
||||
- Colors used as palette slots: primary the dominant object, secondary the terrain / background, accent the highlights and markers; a darker shade of the primary serves as outline pixels.
|
||||
- Flat blocks only — shading comes from palette layering (lighter top, darker bottom), never gradients.
|
||||
|
||||
> HEX values come from confirmation `e`; this style only governs the palette-slot, flat-pixel discipline — it names no colors.
|
||||
|
||||
## 4. Texture / elevation
|
||||
|
||||
- No texture beyond the pixel grid itself; strictly flat blocks. Depth reads from lighter-top / darker-bottom pixel shading, not drop shadows.
|
||||
|
||||
## 5. Paired image-rendering
|
||||
|
||||
`pixel-art` — 8-bit imagery on the same grid, sharing the retro-game aesthetic.
|
||||
+32
@@ -0,0 +1,32 @@
|
||||
# Visual style: sketch-notes
|
||||
|
||||
Warm hand-drawn sketchnote — soft paper field, black ink doodle line work, gentle pastel blocks. The most approachable style, friendly over precise. For education, training, onboarding, science communication, knowledge content.
|
||||
|
||||
---
|
||||
|
||||
## 1. Shape & decoration
|
||||
|
||||
- Shape language: rounded shapes drawn with a slight wobble; pastel block fills that slightly overshoot their outlines (hand-painted feel); simple cartoon icons.
|
||||
- Decoration: small doodles — stars, sparkles, dots, underlines — sprinkled sparingly for warmth; wavy hand-drawn arrows connecting ideas with short inline labels.
|
||||
- Whitespace: airy and well-organized; generous gaps between elements keep it friendly, never dense.
|
||||
|
||||
## 2. Typography character
|
||||
|
||||
- Friendly hand-lettered titles; clear humanist body. Warmth and legibility over corporate severity.
|
||||
|
||||
> Families are chosen at confirmation `g`; this style asks for a warm hand-lettered / humanist *character*.
|
||||
|
||||
## 3. Using the deck's colors
|
||||
|
||||
- Warm, soft paper field; the deck's colors rendered as gentle pastel tints inside the blocks rather than full saturation; one accent reserved for a key arrow or emphasis.
|
||||
- Generous but gentle — soft tints, never high-chroma or rainbow.
|
||||
|
||||
> HEX values come from confirmation `e`; this style only governs the soft-pastel, warm-field discipline — it names no colors.
|
||||
|
||||
## 4. Texture / elevation
|
||||
|
||||
- Flat 2D — sketchnote is intentionally flat. Optional subtle paper grain for warmth; no drop shadows.
|
||||
|
||||
## 5. Paired image-rendering
|
||||
|
||||
`sketch-notes` — cream-paper hand-drawn imagery with soft pastel fills, sharing the friendly note aesthetic.
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
# Visual style: soft-rounded
|
||||
|
||||
Approachable and modern. Rounded cards, gentle elevation, friendly rhythm. For product, SaaS, training, consumer decks.
|
||||
|
||||
---
|
||||
|
||||
## 1. Shape & decoration
|
||||
|
||||
- Shape language: rounded rectangles (`rx` 12-16), pill tags, soft containers. Consistent radius deck-wide.
|
||||
- Decoration: cards as the primary container; icon accents; numbered circles; gentle dividers. Moderate, in service of clarity.
|
||||
- Whitespace: comfortable padding inside cards; even gutters; balanced rather than austere.
|
||||
|
||||
## 2. Typography character
|
||||
|
||||
- Friendly sans (humanist or geometric); medium weights; clear but not severe hierarchy.
|
||||
- Rounded, open letterforms suit; avoid condensed / industrial faces.
|
||||
|
||||
> Families are chosen at confirmation `g`; this style asks for an approachable sans *character*.
|
||||
|
||||
## 3. Using the deck's colors
|
||||
|
||||
- Theme color used confidently on covers / chapter backgrounds; same-hue tints for card backings; accent for key figures.
|
||||
- Warmer, more generous color use than swiss / editorial — still disciplined (60-30-10), never rainbow.
|
||||
|
||||
## 4. Texture / elevation
|
||||
|
||||
- Gentle elevation: soft shadows on floating cards (resting tier), subtle tints, optional same-hue gradients. Two-tier elevation max; keep peer-grid cards flat. (Full shadow rules: [`shared-standards.md §6`](../shared-standards.md).)
|
||||
|
||||
## 5. Paired image-rendering
|
||||
|
||||
`flat` — clean modern blocks for AI images. (For frosted-glass depth, see the dedicated [`glassmorphism`](./glassmorphism.md) style.)
|
||||
+34
@@ -0,0 +1,34 @@
|
||||
# Visual style: swiss-minimal
|
||||
|
||||
Strict Swiss-grid discipline. Modular grid, sharp geometry, aggressive whitespace, near-zero decoration. The most restrained style — for high-end consulting, architecture, design firms, type-led decks.
|
||||
|
||||
---
|
||||
|
||||
## 1. Shape & decoration
|
||||
|
||||
- Shape language: sharp rectangles, true circles, single-weight rules. Corner radius `rx="0"` by default; if rounding at all, ≤4.
|
||||
- Decoration: none. No gradient fills, no decorative blocks, no badges — structure carries the page.
|
||||
- Whitespace: vast and deliberate; negative space carries as much weight as content. Wide margins, generous gutters.
|
||||
- Layout snaps to a visible or implied modular grid; rigorous column / row alignment.
|
||||
|
||||
## 2. Typography character
|
||||
|
||||
- Sans-serif, single family; weight contrast (e.g. 900 / 300) over family contrast. Tight, rigorous spacing.
|
||||
- Strong size hierarchy — large headlines, small precise body. Left-aligned, flush.
|
||||
|
||||
> Family is chosen at confirmation `g` by subject fit — this style asks for a grotesque / neo-grotesque *character*, not a specific font.
|
||||
|
||||
## 3. Using the deck's colors
|
||||
|
||||
- One color dominates a deliberate grid zone; the field stays near-white; the accent appears at a single point — never more than a few percent of canvas.
|
||||
- Color as conceptual zone, not decoration. No gradients.
|
||||
|
||||
> HEX values come from confirmation `e`; this style only governs how sparingly they are applied — it names no colors.
|
||||
|
||||
## 4. Texture / elevation
|
||||
|
||||
- Strictly flat. No shadows, no depth, no material — 2D conceptual planes only.
|
||||
|
||||
## 5. Paired image-rendering
|
||||
|
||||
`minimalist-swiss` — lock it for AI images so illustrations share the grid-austere aesthetic.
|
||||
+32
@@ -0,0 +1,32 @@
|
||||
# Visual style: vintage-poster
|
||||
|
||||
Mid-century print poster (1950s–1970s) — bold rounded-geometric shapes, limited flat color blocks, halftone / paper grain, retro warmth. For cultural decks, brand storytelling, hospitality, retro-tech narratives, anniversaries, heritage brands.
|
||||
|
||||
---
|
||||
|
||||
## 1. Shape & decoration
|
||||
|
||||
- Shape language: bold geometric shapes with rounded organic edges, often slightly off-axis for retro tension; overlapping flat blocks; thick hand-aware lines; stylized, reduced iconography (a stylized sun, an angular mountain).
|
||||
- Decoration: the print artifacts — halftone dot overlays, slight ink misregistration — carry the character; imagery stays reduced and graphic, never photoreal.
|
||||
- Whitespace: confident poster composition — a few large blocks, deliberate negative space.
|
||||
|
||||
## 2. Typography character
|
||||
|
||||
- Retro display character for headlines (mid-century geometric, confident); a simple legible body by contrast.
|
||||
|
||||
> Families are chosen at confirmation `g`; this style asks for a mid-century display *character*.
|
||||
|
||||
## 3. Using the deck's colors
|
||||
|
||||
- Applied as limited flat blocks (a small set of colors): the primary dominates large blocks, the secondary reads as a warm paper field, the accent marks small shapes or tints the halftone.
|
||||
- Flat color only — no gradients; depth comes from overlap, not blending.
|
||||
|
||||
> HEX values come from confirmation `e`; this style only governs the limited-flat-block, halftone discipline — it names no colors.
|
||||
|
||||
## 4. Texture / elevation
|
||||
|
||||
- Flat — depth implied via overlapping shapes, never via shadow. Halftone dot pattern or paper grain at low opacity gives printed age; slight ink-offset character is on-brand.
|
||||
|
||||
## 5. Paired image-rendering
|
||||
|
||||
`vintage-poster` — mid-century poster imagery with matching halftone and retro-geometric warmth.
|
||||
@@ -0,0 +1,33 @@
|
||||
# Visual style: zine
|
||||
|
||||
Risograph zine / DIY poster — misregistered color layers, halftone dots, a tightly limited palette, handmade print grit. Indie-publishing texture over polish. For culture decks, design talks, indie brands, anything wanting a printed, hand-assembled feel.
|
||||
|
||||
---
|
||||
|
||||
## 1. Shape & decoration
|
||||
|
||||
- Shape language: cut-and-paste blocks, offset color shapes, rough frames; outlines in a near-black ink tone. Corner radius low or zero — print-flat, not soft-digital.
|
||||
- Decoration: the riso print artifacts — 1-3px color-layer misregistration, halftone-dot `<pattern>` texture, overlapping color blocks that imply a third color where they cross. Texture is the decoration.
|
||||
- Whitespace: poster-like — bold focal blocks with raw margins; deliberate roughness over clean alignment.
|
||||
|
||||
## 2. Typography character
|
||||
|
||||
- Punk-DIY contrast: a heavy poster display face for headlines, a plain readable sans for body, monospace for annotation (typewriter / photocopier feel).
|
||||
- Big headline tension against quiet body; slight intentional looseness reads as hand-set rather than mechanical.
|
||||
|
||||
> Families are chosen at confirmation `g`; this style asks for a display-poster × plain-sans × monospace-annotation *character*.
|
||||
|
||||
## 3. Using the deck's colors
|
||||
|
||||
- A strictly limited spot palette (riso logic) on a warm paper field; two ink layers do most of the work and a third spot color appears rarely (<5%).
|
||||
- Color is laid as flat spot fills, not gradients; overlap and offset of the same few inks create depth and the third-color illusion. Scarcity and overlap, not variety.
|
||||
|
||||
> HEX values come from confirmation `e`; this style governs the flat-spot, misregistered-overlay discipline — it names no colors.
|
||||
|
||||
## 4. Texture / elevation
|
||||
|
||||
- Flat print, no digital elevation. Depth from layer offset and halftone grain, not shadows. Warm-paper grain via faint texture / low-opacity halftone is on-brand; avoid drop shadows and slick gradients.
|
||||
|
||||
## 5. Paired image-rendering
|
||||
|
||||
`screen-print` — duotone / spot-ink imagery that shares the riso print aesthetic.
|
||||
+5
-2
@@ -34,7 +34,8 @@
|
||||
|
||||
### Theme Style
|
||||
|
||||
- **Style**: {design_style}
|
||||
- **Mode**: [pyramid / narrative / instructional / showcase / briefing — narrative skeleton, locked at d Layer 1]
|
||||
- **Visual style**: [preset name or custom — aesthetic, locked at d Layer 2; carries no HEX]
|
||||
- **Theme**: [Light theme / Dark theme]
|
||||
- **Tone**: [Filled by Strategist, e.g., tech, professional, modern, innovative]
|
||||
|
||||
@@ -145,6 +146,8 @@ Two views on the same font decisions — fill both, keep them consistent:
|
||||
|
||||
> Sizes outside **every** band remain forbidden — surface the need and extend `spec_lock.md typography` (e.g., `cover_title: 96`) rather than invent a one-off value.
|
||||
|
||||
> **Hero in single-focus / breathing pages**: when one element *is* the entire page — a large number, a headline, a key phrase — it is the visual subject, not body content. Such heroes may borrow the cover-title band (2.5–5×); for greater emphasis, declare a hero slot in `spec_lock.md` (e.g., `hero_number` / `hero_headline`) — checker exempts declared slots with no fixed upper limit. The row above "Hero number (consulting KPIs) 1.5–2×" applies only to numeric KPIs in dashboard/data layouts, not to full-page focal elements.
|
||||
|
||||
---
|
||||
|
||||
## V. Layout Principles
|
||||
@@ -199,7 +202,7 @@ Two views on the same font decisions — fill both, keep them consistent:
|
||||
**Non-card containers** (naked text blocks / full-bleed imagery / divider-separated content — typical for `breathing` pages or minimalist designs):
|
||||
|
||||
- Vertical rhythm carried by **whitespace**, not gutters — block gaps run wider than card gaps since there's no container edge to separate content.
|
||||
- **Line-height**: 1.4-1.6× body font size.
|
||||
- **Line-height**: ~1.4–1.5× for dense/small-body text (CLReq comfortable minimum); 1.6–2.0× for large-type, sparse, or `breathing` pages.
|
||||
- **Full-bleed text placement**: inset text away from the image's focal points; legibility over photographic backgrounds typically needs a gradient or opacity overlay.
|
||||
- **Content width** is driven by reading comfort and image composition, not a card grid slot — don't back-compute "column width" when there's no column.
|
||||
|
||||
|
||||
@@ -12,6 +12,18 @@
|
||||
|
||||
> Strategist: fill viewBox and format for the chosen canvas. Common values: `0 0 1280 720` (PPT 16:9), `0 0 1024 768` (PPT 4:3), `0 0 1242 1660` (Xiaohongshu), `0 0 1080 1080` (WeChat Moments), `0 0 1080 1920` (Story).
|
||||
|
||||
## mode
|
||||
- mode: pyramid
|
||||
|
||||
> Strategist: the deck's narrative skeleton, locked at confirmation `d` Layer 1. One of `pyramid` / `narrative` / `instructional` / `showcase` / `briefing` — see [`references/modes/_index.md`](../references/modes/_index.md). Executor reads only the locked mode's file. Deck-wide. Or the literal `custom` for a bespoke direction no preset captures (a special cadence, a multi-mode fusion, a particular posture) — user-requested or Strategist-recommended (user confirms, like every lock). Then add a sibling `- mode_behavior:` paragraph (how the argument advances, title voice, page rhythm, register) that the Executor follows in place of a preset file. One deck locks one value; don't default to `custom` when a preset fits.
|
||||
|
||||
## visual_style
|
||||
- visual_style: swiss-minimal
|
||||
|
||||
> Strategist: the deck's visual aesthetic, locked at confirmation `d` Layer 2. A preset name from [`references/visual-styles/_index.md`](../references/visual-styles/_index.md), **or** the literal `custom`. Reference intent (shape / decoration / whitespace / texture) — **not a whitelist**, and **carries no HEX** (color truth stays in `colors`). Executor reads only the locked style's file.
|
||||
>
|
||||
> **`custom`** — add a sibling `- visual_style_behavior:` row with a one-paragraph aesthetic description (shape language, decoration density, whitespace, typographic character, texture); no HEX, no color names. Tail-case, not a default.
|
||||
|
||||
## colors
|
||||
- bg: #FFFFFF
|
||||
- primary: #......
|
||||
|
||||
@@ -45,7 +45,7 @@ Read skills/ppt-master/SKILL.md
|
||||
|
||||
Then jump to `### Step 6: Executor Phase` and run the documented pipeline:
|
||||
|
||||
- Read references (executor-base + shared-standards + chosen style file + image-layout-spec + svg-image-embedding)
|
||||
- Read references (executor-base + shared-standards + the locked `mode` file under `modes/` + the locked `visual_style` file under `visual-styles/` + image-layout-spec + svg-image-embedding)
|
||||
- Design Parameter Confirmation
|
||||
- Pre-generation Batch Read (every layout / chart SVG referenced in `spec_lock`)
|
||||
- Per-page `spec_lock` re-read + sequential page generation
|
||||
|
||||
Reference in New Issue
Block a user