feat: 导出 SproutClaw .sproutclaw 配置
包含 extensions、skills、prompts、settings、auth、models、mcp 等配置。 排除 node_modules、npm 缓存、sessions 等运行时数据。
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"$schema": "https://json.schemastore.org/claude-code-plugin-manifest.json",
|
||||
"name": "ppt-master",
|
||||
"description": "Generate natively editable PPTX from PDF / DOCX / URL / Markdown.",
|
||||
"author": {
|
||||
"name": "Hugo He",
|
||||
"email": "heyug3@gmail.com",
|
||||
"url": "https://www.hehugo.com/"
|
||||
},
|
||||
"homepage": "https://github.com/hugohe3/ppt-master",
|
||||
"repository": "https://github.com/hugohe3/ppt-master",
|
||||
"license": "MIT",
|
||||
"keywords": [
|
||||
"pptx",
|
||||
"presentation",
|
||||
"powerpoint",
|
||||
"svg",
|
||||
"drawingml",
|
||||
"ai",
|
||||
"skill",
|
||||
"office",
|
||||
"document-conversion"
|
||||
],
|
||||
"skills": "./"
|
||||
}
|
||||
209
agent/skills-disabled/ppt-master/skills/ppt-master/.env.example
Normal file
@@ -0,0 +1,209 @@
|
||||
# ─────────────────────────────────────────────────────────────
|
||||
# Image Generation Configuration / 图片生成配置
|
||||
# ─────────────────────────────────────────────────────────────
|
||||
|
||||
# This file is an optional fallback config source for image_gen.py.
|
||||
# Current process environment variables take precedence over this file.
|
||||
# 当前文件是 image_gen.py 的可选 fallback 配置来源。
|
||||
# 当前进程环境变量优先于这个文件。
|
||||
#
|
||||
# Resolution order (only the FIRST existing file is read; keys are NOT merged across files):
|
||||
# 1. ./.env in your current working directory
|
||||
# 2. <skill-dir>/.env (skill install, e.g. ~/.agents/skills/ppt-master/.env)
|
||||
# 3. <repo-root>/.env (when running from a clone)
|
||||
# 4. ~/.ppt-master/.env (user-level config)
|
||||
# 查找顺序(只读第一个存在的文件,多个 .env 之间不合并):
|
||||
# 1. 当前工作目录下的 ./.env
|
||||
# 2. skill 安装目录下的 .env(如 ~/.agents/skills/ppt-master/.env)
|
||||
# 3. 仓库根目录下的 .env(仅在 clone 模式下)
|
||||
# 4. ~/.ppt-master/.env(用户级配置)
|
||||
|
||||
# Active backend (required) / 当前启用后端(必需)
|
||||
# Recommended core backends: openai / gemini / qwen / zhipu / volcengine
|
||||
# 推荐核心后端:openai / gemini / qwen / zhipu / volcengine
|
||||
# IMAGE_BACKEND=openai
|
||||
|
||||
# You may also provide the same variables directly via the current process environment.
|
||||
# 也可以不写 .env,而是直接通过当前运行进程的环境变量提供同样的配置。
|
||||
|
||||
# IMPORTANT:
|
||||
# - IMAGE_API_KEY / IMAGE_MODEL / IMAGE_BASE_URL are no longer supported.
|
||||
# - Use provider-specific keys only.
|
||||
# 重要:
|
||||
# - 不再支持 IMAGE_API_KEY / IMAGE_MODEL / IMAGE_BASE_URL。
|
||||
# - 请只使用各提供商自己的变量。
|
||||
|
||||
# ─────────────────────────────────────────────────────────────
|
||||
# Example: OpenAI / OpenAI 示例 (recommended / 推荐)
|
||||
# ─────────────────────────────────────────────────────────────
|
||||
# IMAGE_BACKEND=openai
|
||||
# OPENAI_API_KEY=sk-xxx
|
||||
# OPENAI_MODEL=gpt-image-2
|
||||
# OPENAI_BASE_URL=http://127.0.0.1:3000/v1
|
||||
# OpenAI-compatible providers may need these compatibility knobs.
|
||||
# OpenAI-compatible 第三方平台可按需开启以下兼容参数。
|
||||
# OPENAI_SIZE_PRESET=auto
|
||||
# OPENAI_RESPONSE_FORMAT=auto
|
||||
# OPENAI_QUALITY=auto
|
||||
# Allowed values: png / jpeg / webp
|
||||
# OPENAI_OUTPUT_FORMAT=png
|
||||
# jpeg/webp only, 0-100
|
||||
# OPENAI_OUTPUT_COMPRESSION=80
|
||||
# gpt-image-2: auto / opaque
|
||||
# OPENAI_BACKGROUND=auto
|
||||
# auto / low
|
||||
# OPENAI_MODERATION=auto
|
||||
|
||||
# ─────────────────────────────────────────────────────────────
|
||||
# Example: Gemini / Gemini 示例
|
||||
# ─────────────────────────────────────────────────────────────
|
||||
# IMAGE_BACKEND=gemini
|
||||
# GEMINI_API_KEY=your-gemini-api-key
|
||||
# GEMINI_MODEL=gemini-3.1-flash-image-preview
|
||||
# GEMINI_BASE_URL=https://your-proxy-url.com
|
||||
|
||||
# ─────────────────────────────────────────────────────────────
|
||||
# Example: MiniMax / MiniMax 示例
|
||||
# ─────────────────────────────────────────────────────────────
|
||||
# IMAGE_BACKEND=minimax
|
||||
# MINIMAX_API_KEY=your-minimax-key
|
||||
# MINIMAX_MODEL=image-01
|
||||
# Default China endpoint / 默认国内地址
|
||||
# MINIMAX_BASE_URL=https://api.minimaxi.com/v1/image_generation
|
||||
# Optional overseas endpoint / 可选海外地址
|
||||
# MINIMAX_BASE_URL=https://api.minimax.io/v1/image_generation
|
||||
|
||||
# ─────────────────────────────────────────────────────────────
|
||||
# Example: Qwen / 通义生图示例
|
||||
# ─────────────────────────────────────────────────────────────
|
||||
# IMAGE_BACKEND=qwen
|
||||
# QWEN_API_KEY=your-dashscope-key
|
||||
# QWEN_MODEL=qwen-image-2.0-pro
|
||||
# QWEN_BASE_URL=https://dashscope.aliyuncs.com/api/v1/services/aigc/text2image/image-synthesis
|
||||
|
||||
# ─────────────────────────────────────────────────────────────
|
||||
# Example: Zhipu / 智谱生图示例
|
||||
# ─────────────────────────────────────────────────────────────
|
||||
# IMAGE_BACKEND=zhipu
|
||||
# ZHIPU_API_KEY=your-zhipu-key
|
||||
# ZHIPU_MODEL=glm-image
|
||||
# ZHIPU_BASE_URL=https://open.bigmodel.cn/api/paas/v4/images/generations
|
||||
|
||||
# ─────────────────────────────────────────────────────────────
|
||||
# Example: Volcengine / 火山引擎示例
|
||||
# ─────────────────────────────────────────────────────────────
|
||||
# IMAGE_BACKEND=volcengine
|
||||
# VOLCENGINE_API_KEY=your-volcengine-key
|
||||
# VOLCENGINE_MODEL=doubao-seedream-4-5-251128
|
||||
# VOLCENGINE_BASE_URL=https://operator.las.cn-beijing.volces.com/api/v1/images/generations
|
||||
|
||||
# ─────────────────────────────────────────────────────────────
|
||||
# Extended / Experimental backends
|
||||
# 扩展 / 实验后端
|
||||
# ─────────────────────────────────────────────────────────────
|
||||
# STABILITY_API_KEY=your-stability-key
|
||||
# STABILITY_MODEL=stable-image-core
|
||||
# STABILITY_BASE_URL=https://api.stability.ai
|
||||
#
|
||||
# BFL_API_KEY=your-bfl-key
|
||||
# BFL_MODEL=flux-pro-1.1-ultra
|
||||
# BFL_BASE_URL=https://api.bfl.ai
|
||||
#
|
||||
# IDEOGRAM_API_KEY=your-ideogram-key
|
||||
# IDEOGRAM_MODEL=ideogram-v3
|
||||
# IDEOGRAM_BASE_URL=https://api.ideogram.ai
|
||||
#
|
||||
# MINIMAX_API_KEY=your-minimax-key
|
||||
# MINIMAX_MODEL=image-01
|
||||
# Default China endpoint / 默认国内地址
|
||||
# MINIMAX_BASE_URL=https://api.minimaxi.com/v1/image_generation
|
||||
# Optional overseas endpoint / 可选海外地址
|
||||
# MINIMAX_BASE_URL=https://api.minimax.io/v1/image_generation
|
||||
#
|
||||
# SILICONFLOW_API_KEY=your-siliconflow-key
|
||||
# SILICONFLOW_MODEL=Qwen/Qwen-Image
|
||||
# SILICONFLOW_BASE_URL=https://api.siliconflow.cn/v1/images/generations
|
||||
#
|
||||
# FAL_KEY=your-fal-key
|
||||
# FAL_MODEL=fal-ai/imagen3/fast
|
||||
# FAL_BASE_URL=https://fal.run
|
||||
#
|
||||
# REPLICATE_API_TOKEN=r8_xxx
|
||||
# REPLICATE_MODEL=black-forest-labs/flux-1.1-pro
|
||||
# REPLICATE_BASE_URL=https://api.replicate.com/v1/predictions
|
||||
#
|
||||
# OPENROUTER_API_KEY=sk-or-v1-xxx
|
||||
# OPENROUTER_MODEL=google/gemini-3.1-flash-image-preview
|
||||
# OPENROUTER_BASE_URL=https://openrouter.ai/api/v1
|
||||
#
|
||||
# OpenAI-compatible example: Agnes AI / OpenAI-compatible 示例:Agnes AI
|
||||
# IMAGE_BACKEND=openai
|
||||
# OPENAI_API_KEY=your-agnes-key
|
||||
# OPENAI_MODEL=agnes-image-2.1-flash
|
||||
# OPENAI_BASE_URL=https://apihub.agnes-ai.com/v1
|
||||
# OPENAI_SIZE_PRESET=gpt-image-2
|
||||
# OPENAI_RESPONSE_FORMAT=omit
|
||||
# OPENAI_QUALITY=omit
|
||||
#
|
||||
# IMAGE_BACKEND=modelscope
|
||||
# MODELSCOPE_API_KEY=your-modelscope-key
|
||||
# MODELSCOPE_MODEL=Tongyi-MAI/Z-Image-Turbo
|
||||
# MODELSCOPE_BASE_URL=https://api-inference.modelscope.cn/v1
|
||||
|
||||
# ─────────────────────────────────────────────────────────────
|
||||
# Multi-provider example / 多提供商共存示例
|
||||
# ─────────────────────────────────────────────────────────────
|
||||
# IMAGE_BACKEND=openai
|
||||
# OPENAI_API_KEY=sk-xxx
|
||||
# OPENAI_MODEL=gpt-image-2
|
||||
# OPENAI_OUTPUT_FORMAT=png
|
||||
# GEMINI_API_KEY=your-gemini-api-key
|
||||
# GEMINI_MODEL=gemini-3.1-flash-image-preview
|
||||
#
|
||||
# Switch providers by changing IMAGE_BACKEND only.
|
||||
# 切换提供商时,只改 IMAGE_BACKEND 即可。
|
||||
|
||||
# ─────────────────────────────────────────────────────────────
|
||||
# Audio narration TTS (notes_to_audio.py) / 旁白音频 TTS
|
||||
# ─────────────────────────────────────────────────────────────
|
||||
# edge-tts is the default narration backend and needs no API key.
|
||||
# Use cloud providers only when you want high-quality or cloned voices —
|
||||
# all four (ElevenLabs / MiniMax / Qwen / CosyVoice) accept a cloned voice_id.
|
||||
# Clone the voice in the provider's console first, then pass --voice-id to
|
||||
# notes_to_audio.py. See docs/audio-narration.md "Use a cloned voice".
|
||||
# edge-tts 是默认旁白后端,无需 API Key。
|
||||
# 需要高质量云端旁白或复刻音色时再配置云端提供商——
|
||||
# ElevenLabs / MiniMax / Qwen / CosyVoice 四家都支持传入复刻 voice_id。
|
||||
# 先在 provider 控制台复刻得到 voice_id,再用 --voice-id 传给 notes_to_audio.py。
|
||||
# 详见 docs/zh/audio-narration.md "使用复刻音色"。
|
||||
#
|
||||
# ELEVENLABS_API_KEY=your-elevenlabs-api-key
|
||||
# MINIMAX_API_KEY=your-minimax-key
|
||||
# QWEN_API_KEY=your-dashscope-key
|
||||
# COSYVOICE_API_KEY=your-dashscope-key
|
||||
# DASHSCOPE_API_KEY=your-dashscope-key
|
||||
#
|
||||
# Optional provider-specific TTS endpoint overrides.
|
||||
# 可选:按提供商覆盖 TTS 接入点。
|
||||
# Default China endpoint / 默认国内地址
|
||||
# MINIMAX_TTS_BASE_URL=https://api.minimaxi.com/v1/t2a_v2
|
||||
# Optional overseas endpoint / 可选海外地址
|
||||
# MINIMAX_TTS_BASE_URL=https://api.minimax.io/v1/t2a_v2
|
||||
# QWEN_TTS_BASE_URL=https://dashscope-intl.aliyuncs.com/api/v1/services/aigc/multimodal-generation/generation
|
||||
# COSYVOICE_TTS_BASE_URL=https://dashscope.aliyuncs.com/api/v1/services/audio/tts/SpeechSynthesizer
|
||||
|
||||
# ─────────────────────────────────────────────────────────────
|
||||
# Web image search (image_search.py) / 网络图片搜索
|
||||
# ─────────────────────────────────────────────────────────────
|
||||
# Used by scripts/image_search.py — separate from IMAGE_BACKEND above.
|
||||
# image_search.py 用,与上面的 IMAGE_BACKEND 互不影响。
|
||||
#
|
||||
# Openverse and Wikimedia work with no key, but image quality can be uneven.
|
||||
# For polished stock-style PPT images, configure Pexels and/or Pixabay.
|
||||
# Openverse 和 Wikimedia 无需 Key,但图片质量不稳定。
|
||||
# 如需更稳定的商业图库风格 PPT 配图,建议配置 Pexels 和/或 Pixabay。
|
||||
#
|
||||
# Sign up: https://www.pexels.com/api/
|
||||
# PEXELS_API_KEY=your-pexels-key
|
||||
# Sign up: https://pixabay.com/api/docs/
|
||||
# PIXABAY_API_KEY=your-pixabay-key
|
||||
566
agent/skills-disabled/ppt-master/skills/ppt-master/SKILL.md
Normal file
@@ -0,0 +1,566 @@
|
||||
---
|
||||
name: ppt-master
|
||||
description: >
|
||||
AI-driven multi-format SVG content generation system. Converts source documents
|
||||
(PDF/DOCX/URL/Markdown) into high-quality SVG pages and exports to PPTX through
|
||||
multi-role collaboration. Use when user asks to "create PPT", "make presentation",
|
||||
"生成PPT", "做PPT", "制作演示文稿", or mentions "ppt-master".
|
||||
---
|
||||
|
||||
# PPT Master Skill
|
||||
|
||||
> AI-driven multi-format SVG content generation system. Converts source documents into high-quality SVG pages through multi-role collaboration and exports to PPTX.
|
||||
|
||||
**Core Pipeline**: `Source Document → Create Project → [Template] → Strategist → [Image_Generator] → Executor Live Preview → Quality Check → Post-processing → Export`
|
||||
|
||||
> [!CAUTION]
|
||||
> ## 🚨 Global Execution Discipline (MANDATORY)
|
||||
>
|
||||
> **This workflow is a strict serial pipeline. The following rules have the highest priority — violating any one of them constitutes execution failure:**
|
||||
>
|
||||
> 1. **SERIAL EXECUTION** — Steps MUST be executed in order; the output of each step is the input for the next. Non-BLOCKING adjacent steps may proceed continuously once prerequisites are met, without waiting for the user to say "continue"
|
||||
> 2. **BLOCKING = HARD STOP** — Steps marked ⛔ BLOCKING require a full stop; the AI MUST wait for an explicit user response before proceeding and MUST NOT make any decisions on behalf of the user
|
||||
> 3. **NO CROSS-PHASE BUNDLING** — Cross-phase bundling is FORBIDDEN. (Note: the Eight Confirmations in Step 4 are ⛔ BLOCKING — the AI MUST present recommendations and wait for explicit user confirmation before proceeding. Once the user confirms, all subsequent non-BLOCKING steps — design spec output, SVG generation, speaker notes, and post-processing — may proceed automatically without further user confirmation)
|
||||
> 4. **GATE BEFORE ENTRY** — Each Step has prerequisites (🚧 GATE) listed at the top; these MUST be verified before starting that Step
|
||||
> 5. **NO SPECULATIVE EXECUTION** — "Pre-preparing" content for subsequent Steps is FORBIDDEN (e.g., writing SVG code during the Strategist phase)
|
||||
> 6. **NO SUB-AGENT SVG GENERATION** — Executor Step 6 SVG generation is context-dependent and MUST be completed by the current main agent end-to-end. Delegating page SVG generation to sub-agents is FORBIDDEN
|
||||
> 7. **SEQUENTIAL PAGE GENERATION ONLY** — In Executor Step 6, after the global design context is confirmed, SVG pages MUST be generated sequentially page by page in one continuous pass. Grouped page batches (for example, 5 pages at a time) are FORBIDDEN
|
||||
> 8. **SPEC_LOCK RE-READ PER PAGE** — Before generating each SVG page, Executor MUST `read_file <project_path>/spec_lock.md`. All colors / fonts / icons / images MUST come from this file — no values from memory or invented on the fly. Executor MUST also look up the current page's `page_rhythm` (`anchor` / `dense` / `breathing`), `page_layouts` (which template SVG to inherit, if any), and `page_charts` (which chart template to adapt, if any). Empty / absent entries are intentional Strategist signals — see executor-base.md §2.1. This rule exists to resist context-compression drift on long decks and to break the uniform "every page is a card grid" default
|
||||
> 9. **SVG MUST BE HAND-WRITTEN, NOT SCRIPT-GENERATED** — Every SVG page is written by the main agent directly, one page at a time (see rules 6 and 7). Writing or running a Python / Node / shell script that produces the SVG files in batch — looping over pages, templating from data, or emitting them via a generator — is FORBIDDEN, including under "save tokens", "quick draft", or "user is in a hurry" pretexts. The script-generation path was tried on a feature branch and abandoned: cross-page visual consistency depends on per-page authoring with full upstream context, which a generator script cannot reproduce
|
||||
|
||||
> [!IMPORTANT]
|
||||
> ## 🌐 Language & Communication Rule
|
||||
>
|
||||
> - **Response language**: match the user's input and source materials. Explicit user override (e.g., "请用英文回答") takes precedence.
|
||||
> - **Template format**: `design_spec.md` MUST follow its original English template structure (section headings, field names) regardless of conversation language. Content values may be in the user's language.
|
||||
|
||||
> [!IMPORTANT]
|
||||
> ## 🔌 Compatibility With Generic Coding Skills
|
||||
>
|
||||
> - `ppt-master` is a repository-specific workflow, not a general application scaffold
|
||||
> - Do NOT create `.worktrees/`, `tests/`, branch workflows, or generic engineering structure by default
|
||||
> - On conflict with a generic coding skill, follow this skill unless the user explicitly says otherwise
|
||||
|
||||
## Main Pipeline Scripts
|
||||
|
||||
| Script | Purpose |
|
||||
|--------|---------|
|
||||
| `${SKILL_DIR}/scripts/source_to_md/pdf_to_md.py` | PDF to Markdown |
|
||||
| `${SKILL_DIR}/scripts/source_to_md/doc_to_md.py` | Documents to Markdown — native Python for DOCX/HTML/EPUB/IPYNB, pandoc fallback for legacy formats (.doc/.odt/.rtf/.tex/.rst/.org/.typ) |
|
||||
| `${SKILL_DIR}/scripts/source_to_md/excel_to_md.py` | Excel workbooks to Markdown — supports .xlsx/.xlsm; legacy .xls should be resaved as .xlsx |
|
||||
| `${SKILL_DIR}/scripts/source_to_md/ppt_to_md.py` | PowerPoint to Markdown |
|
||||
| `${SKILL_DIR}/scripts/source_to_md/web_to_md.py` | Web page to Markdown (supports WeChat via `curl_cffi`) |
|
||||
| `${SKILL_DIR}/scripts/project_manager.py` | Project init / validate / manage |
|
||||
| `${SKILL_DIR}/scripts/analyze_images.py` | Image analysis |
|
||||
| `${SKILL_DIR}/scripts/latex_render.py` | LaTeX formula rendering (manifest-driven PNG assets) |
|
||||
| `${SKILL_DIR}/scripts/image_gen.py` | AI image generation (multi-provider) |
|
||||
| `${SKILL_DIR}/scripts/svg_quality_checker.py` | SVG quality check |
|
||||
| `${SKILL_DIR}/scripts/total_md_split.py` | Speaker notes splitting |
|
||||
| `${SKILL_DIR}/scripts/finalize_svg.py` | SVG post-processing (unified entry) |
|
||||
| `${SKILL_DIR}/scripts/svg_to_pptx.py` | Export to PPTX |
|
||||
| `${SKILL_DIR}/scripts/update_spec.py` | Propagate a `spec_lock.md` color / font_family change across all generated SVGs |
|
||||
|
||||
For complete tool documentation, see `${SKILL_DIR}/scripts/README.md`.
|
||||
|
||||
> **Windows note**: if a `python3 ...` command fails (common on python.org installs, which provide `python.exe` but not `python3.exe`), rerun the same command with `python` instead.
|
||||
|
||||
## Template Index
|
||||
|
||||
| Index | Path | Purpose |
|
||||
|-------|------|---------|
|
||||
| Layout templates | `${SKILL_DIR}/templates/layouts/layouts_index.json` | Query available page layout templates |
|
||||
| Brand presets | `${SKILL_DIR}/templates/brands/brands_index.json` | Query available brand identity presets (color / typography / logo / voice) |
|
||||
| Visualization templates | `${SKILL_DIR}/templates/charts/charts_index.json` | Query available visualization SVG templates (charts, infographics, diagrams, frameworks) |
|
||||
| Icon library | `${SKILL_DIR}/templates/icons/` | See `${SKILL_DIR}/templates/icons/README.md`; search icons on demand with `ls templates/icons/<library>/ \| grep <keyword>` |
|
||||
|
||||
## Standalone Workflows
|
||||
|
||||
| Workflow | Path | Purpose |
|
||||
|----------|------|---------|
|
||||
| `topic-research` | `workflows/topic-research.md` | Pre-pipeline — gather web sources when the user supplies only a topic with no source files |
|
||||
| `template-fill` | `workflows/template-fill-pptx.md` | Give a native PPTX template deck plus source material; select fitting pages (a page may be reused for several output slides) and fill text back without SVG conversion |
|
||||
| `create-template` | `workflows/create-template.md` | Standalone layout template creation workflow |
|
||||
| `create-brand` | `workflows/create-brand.md` | Standalone brand-only template creation (identity preset; no SVG page roster) |
|
||||
| `resume-execute` | `workflows/resume-execute.md` | Phase B entry — resume execution in a fresh chat after Phase A (Step 1–5) completed in another session (split mode) |
|
||||
| `verify-charts` | `workflows/verify-charts.md` | Chart coordinate calibration — run after SVG generation if the deck contains data charts |
|
||||
| `customize-animations` | `workflows/customize-animations.md` | Object-level PPTX animation customization — run only when the user explicitly asks to tune animation order/effects/timing |
|
||||
| `live-preview` | `workflows/live-preview.md` | Browser-based live preview — auto-started during generation and re-enterable any time the user mentions "live preview", "preview", "看效果", or wants to click/select a slide element |
|
||||
| `visual-review` | `workflows/visual-review.md` | Per-page rubric-based visual self-check — run only when the user explicitly asks for a visual re-pass on the generated SVGs (between Executor and post-processing). Opt-in only; never invoked by the main pipeline. |
|
||||
|
||||
---
|
||||
|
||||
## Workflow
|
||||
|
||||
### Step 1: Source Content Processing
|
||||
|
||||
🚧 **GATE**: User has provided source material (PDF / DOCX / EPUB / URL / Markdown file / text description / conversation content — any form is acceptable).
|
||||
|
||||
> **No source content?** When the user supplies only a topic name or requirements without any file or substantive description, run the [`topic-research`](workflows/topic-research.md) workflow first, then return here with its products as input.
|
||||
|
||||
When the user provides non-Markdown content, convert immediately:
|
||||
|
||||
| User Provides | Command |
|
||||
|---------------|---------|
|
||||
| PDF file | `python3 ${SKILL_DIR}/scripts/source_to_md/pdf_to_md.py <file>` |
|
||||
| DOCX / Word / Office document | `python3 ${SKILL_DIR}/scripts/source_to_md/doc_to_md.py <file>` |
|
||||
| XLSX / XLSM / Excel workbook | `python3 ${SKILL_DIR}/scripts/source_to_md/excel_to_md.py <file>` |
|
||||
| CSV / TSV | Read directly as plain-text table source |
|
||||
| PPTX / PowerPoint deck | `python3 ${SKILL_DIR}/scripts/source_to_md/ppt_to_md.py <file>` |
|
||||
| EPUB / HTML / LaTeX / RST / other | `python3 ${SKILL_DIR}/scripts/source_to_md/doc_to_md.py <file>` |
|
||||
| Web link | `python3 ${SKILL_DIR}/scripts/source_to_md/web_to_md.py <URL>` |
|
||||
| WeChat / high-security site | `python3 ${SKILL_DIR}/scripts/source_to_md/web_to_md.py <URL>` (requires `curl_cffi`, included in `requirements.txt`) |
|
||||
| Markdown | Read directly |
|
||||
|
||||
> **Office vector assets (EMF/WMF) from DOCX/PPTX sources**:
|
||||
> `doc_to_md.py` / `ppt_to_md.py` extract embedded Office vector images (.emf/.wmf)
|
||||
> alongside bitmap images. After `import-sources`, these land in `images/`
|
||||
> together with `image_manifest.json` and are first-class assets in §VIII Image Resource List.
|
||||
>
|
||||
> **Do NOT convert EMF/WMF to PNG.** The PPT Master pipeline preserves them as external
|
||||
> references (`finalize_svg.py` skips them) and `svg_to_pptx.py` embeds them as
|
||||
> PPTX-native media via `image/x-emf` / `image/x-wmf` MIME — PowerPoint renders them at full vector fidelity.
|
||||
> Converting via LibreOffice/Inkscape introduces CJK font substitution drift and
|
||||
> rasterization loss; the original EMF/WMF is always higher fidelity than the converted PNG.
|
||||
>
|
||||
> Browser-based live preview cannot render EMF (will show blank) — this is expected;
|
||||
> the PPTX output is the source of truth.
|
||||
|
||||
**✅ Checkpoint — Confirm source content is ready, proceed to Step 2.**
|
||||
|
||||
---
|
||||
|
||||
### Step 2: Project Initialization
|
||||
|
||||
🚧 **GATE**: Step 1 complete; source content is ready (Markdown file, user-provided text, or requirements described in conversation are all valid).
|
||||
|
||||
```bash
|
||||
python3 ${SKILL_DIR}/scripts/project_manager.py init <project_name> --format <format>
|
||||
```
|
||||
|
||||
Format options: `ppt169` (default), `ppt43`, `xhs`, `story`, etc. For the full format list, see `references/canvas-formats.md`.
|
||||
|
||||
Import source content (choose based on the situation):
|
||||
|
||||
| Situation | Action |
|
||||
|-----------|--------|
|
||||
| Has source files (PDF/MD/etc.) | `python3 ${SKILL_DIR}/scripts/project_manager.py import-sources <project_path> <source_files...> --move` |
|
||||
| User provided text directly in conversation | No import needed — content is already in conversation context; subsequent steps can reference it directly |
|
||||
|
||||
> ⚠️ **MUST use `--move`** (not copy): all source files — Step 1's generated Markdown, original PDFs / MDs / images — go into `sources/` via `import-sources --move`. After execution they no longer exist at the original location. Intermediate artifacts (e.g., `_files/`) are handled automatically.
|
||||
|
||||
**✅ Checkpoint — Confirm project structure created successfully, `sources/` contains all source files, converted materials are ready. Proceed to Step 3.**
|
||||
|
||||
---
|
||||
|
||||
### Step 3: Template Option
|
||||
|
||||
🚧 **GATE**: Step 2 complete; project directory structure is ready.
|
||||
|
||||
**Default — free design.** Proceed directly to Step 4. Do NOT query any `*_index.json` unless triggered. Do NOT ask the user. Do NOT proactively suggest, hint at, or fuzzy-match any template based on content, slug-like words, or vague style descriptions.
|
||||
|
||||
**Template flow triggers ONLY on explicit directory paths** supplied by the user in their initial message. The trigger rule is mechanical, not interpretive:
|
||||
|
||||
| User input contains | Step 3 action |
|
||||
|---|---|
|
||||
| One or more explicit template directory paths (each resolves to a directory containing `design_spec.md` with `kind: brand` / `kind: layout` / `kind: deck` in its YAML frontmatter) | Read each spec's `kind`, dispatch per the kind matrix below, fuse if multiple |
|
||||
| Anything else — bare template names ("用 academic_defense"), style descriptions ("麦肯锡风格"), brand mentions ("招商银行风格"), vague intent ("想用个模板"), or silence | Skip Step 3, free design |
|
||||
|
||||
There is no slug matching, no name lookup, no fuzzy resolution. A name without a path does not trigger — the user must give a path the AI can `cd` into.
|
||||
|
||||
> Style descriptions ("麦肯锡风格" / "Keynote 风" / "极简风" / etc.) never trigger Step 3. They flow into Strategist's Eight Confirmations as a style brief (color / typography / tone in confirmations e–g).
|
||||
|
||||
> Bare names ("academic_defense", "招商银行", "anthropic") do NOT trigger Step 3 even if a matching directory exists in the library. The user must give a path. AI must not "helpfully" resolve a name to a path.
|
||||
|
||||
> "What templates exist?" is out-of-band Q&A — answer by listing entries from `brands_index.json` / `layouts_index.json` / `decks_index.json` together with their paths. Listing alone does not advance the pipeline; the user must send a path back to trigger Step 3.
|
||||
|
||||
> To create a new layout or deck, read [`workflows/create-template.md`](workflows/create-template.md). To create a new brand, read [`workflows/create-brand.md`](workflows/create-brand.md).
|
||||
|
||||
#### Three template kinds
|
||||
|
||||
The architecture has three independent reference bundles. Full schema in [`docs/zh/templates-architecture.md`](../../docs/zh/templates-architecture.md). Summary:
|
||||
|
||||
| Kind | Physical dir | Contains | Frontmatter |
|
||||
|---|---|---|---|
|
||||
| **brand** | `templates/brands/<id>/` | identity-only segment: color / typography / logo / voice / icon style | `kind: brand` |
|
||||
| **layout** | `templates/layouts/<id>/` | structure-only segment: canvas / page structure / page types / SVG roster | `kind: layout` |
|
||||
| **deck** | `templates/decks/<id>/` | full replica: identity + structure + middle (template overview) segments | `kind: deck` |
|
||||
|
||||
**Segment ownership** (governs fusion override priority):
|
||||
|
||||
| Segment | Sections | Owner kind on fusion |
|
||||
|---|---|---|
|
||||
| Identity | Color Scheme / Typography / Logo / Voice & Tone / Icon Style | brand |
|
||||
| Structure | Canvas / Page Structure / Page Types / SVG Roster | layout |
|
||||
| Middle | Template Overview (use cases / design intent) | deck (no other kind writes this) |
|
||||
|
||||
#### Single-path dispatch
|
||||
|
||||
| User path's `kind` | Step 3 action |
|
||||
|---|---|
|
||||
| `kind: brand` | Copy `design_spec.md` + logo files + asset subdirs (`images/` / `illustrations/` / `icons/`) into `<project>/templates/`. Strategist locks identity segment as truth; structure stays free. |
|
||||
| `kind: layout` | Copy `design_spec.md` + SVG roster + asset files into `<project>/templates/`. Strategist locks structure; identity decided in Eight Confirmations e–g. |
|
||||
| `kind: deck` | Copy everything (`design_spec.md` + SVGs + logos + assets) into `<project>/templates/`. Strategist locks all segments; Eight Confirmations narrows to deck-content fields (audience / page count / outline / tone tweaks). |
|
||||
|
||||
```bash
|
||||
TEMPLATE_DIR=<user-supplied path>
|
||||
cp -r ${TEMPLATE_DIR}/* <project_path>/templates/
|
||||
```
|
||||
|
||||
The single-line copy suffices for all three kinds — the spec's `kind` field tells Strategist how to read it; downstream code doesn't distinguish.
|
||||
|
||||
#### Multi-path fusion
|
||||
|
||||
When the user gives two or more paths of **different kinds**, Step 3 fuses them into a single `<project>/templates/design_spec.md`. **Default granularity is segment-level integer replacement** — entire identity / structure / middle segments are taken from the highest-priority source for that segment, no implicit field-level mixing.
|
||||
|
||||
Override priority by segment:
|
||||
|
||||
| Combination | Identity from | Structure from | Middle from |
|
||||
|---|---|---|---|
|
||||
| brand only | brand | (free design) | (none) |
|
||||
| layout only | (free design) | layout | (none) |
|
||||
| deck only | deck | deck | deck |
|
||||
| brand + layout | brand | layout | (none) |
|
||||
| brand + deck | brand (overrides deck) | deck | deck |
|
||||
| layout + deck | deck | layout (overrides deck) | deck |
|
||||
| brand + layout + deck | brand | layout | deck |
|
||||
|
||||
Field-level micro-adjustment (e.g. "use anthropic brand but primary changed to #FF0000") is **not** part of Step 3 fusion — it flows into Strategist Eight Confirmations e–g as a normal user request.
|
||||
|
||||
#### Same-kind multiple paths — conflict resolution
|
||||
|
||||
When the user gives two paths of the **same kind** (e.g. `brands/anthropic` + `brands/google`), Step 3 surfaces a conflict prompt before fusing — like resolving a git merge conflict:
|
||||
|
||||
```
|
||||
AI: 你给了两个 brand,检测到段级冲突:
|
||||
- Color Scheme(Anthropic 橙红 vs Google 多色)
|
||||
- Typography(Styrene/AnthropicSans vs GoogleSans/Roboto)
|
||||
- Logo(Anthropic 标 vs Google 标)
|
||||
- Voice & Tone(restrained vs friendly)
|
||||
- Icon Style(stroke vs filled)
|
||||
|
||||
要 (a) 全部按 Anthropic / (b) 全部按 Google / (c) 逐段挑?
|
||||
```
|
||||
|
||||
Rules:
|
||||
- Default: no implicit ordering — every cross-source segment difference is reported as a conflict
|
||||
- Only when the user picks `(c)` does AI walk through each segment one by one
|
||||
- Field-level conflicts are out of scope — segment-level only
|
||||
- Three or more same-kind paths are not supported — ask the user to converge to at most two
|
||||
|
||||
#### Fused spec provenance
|
||||
|
||||
When fusion happens (any multi-path case), the resulting `<project>/templates/design_spec.md` carries a provenance block immediately under its H1:
|
||||
|
||||
```markdown
|
||||
> **Fused from:**
|
||||
> - deck: `templates/decks/招商银行/` (base)
|
||||
> - brand: `templates/brands/anthropic/` (identity override)
|
||||
> - layout: `templates/layouts/academic_defense/` (structure override)
|
||||
> - conflicts resolved: Color Scheme from anthropic(user picked a)
|
||||
```
|
||||
|
||||
Single-path Step 3 does **not** add provenance (the source is self-evident from the copied files).
|
||||
|
||||
**✅ Checkpoint — Default path proceeds to Step 4 without user interaction. If the user supplied one or more explicit template paths, those have been dispatched (or fused) into `<project_path>/templates/` before advancing.**
|
||||
|
||||
---
|
||||
|
||||
### Step 4: Strategist Phase (MANDATORY — cannot be skipped)
|
||||
|
||||
🚧 **GATE**: Step 3 complete; default free-design path taken, or (if triggered) template files copied into the project.
|
||||
|
||||
First, read the role definition:
|
||||
```
|
||||
Read references/strategist.md
|
||||
```
|
||||
|
||||
> ⚠️ **Mandatory gate**: before writing `design_spec.md`, Strategist MUST `read_file templates/design_spec_reference.md` and follow its full I–XI section structure. See `strategist.md` Section 1.
|
||||
|
||||
**Eight Confirmations** (full template: `templates/design_spec_reference.md`):
|
||||
|
||||
⛔ **BLOCKING**: present the Eight Confirmations as a single bundled recommendation set and **wait for explicit user confirmation or modification** before outputting Design Specification & Content Outline. This is the single core confirmation point — once confirmed, all subsequent steps proceed automatically.
|
||||
|
||||
1. Canvas format
|
||||
2. Page count range
|
||||
3. Target audience
|
||||
4. Style objective
|
||||
5. Color scheme
|
||||
6. Icon usage approach
|
||||
7. Typography plan, including formula rendering policy
|
||||
8. Image usage approach
|
||||
|
||||
**Mandatory — split-mode note** (not a ninth confirmation): after listing the eight confirmation details, you MUST append exactly one short line (rendered in the user's language, prefixed with 💡) about generation mode. Pick the variant by qualitative read of Phase A signals — recommended page count, source-material bulk, whether `topic-research` ran with substantial web-fetch accumulation:
|
||||
|
||||
| Signal read | Line content |
|
||||
|---|---|
|
||||
| Heavy (long page count / bulky sources / heavy web-fetch accumulation) | State estimated page count and large source size; recommend switching to [split mode](workflows/resume-execute.md) after Step 5 — stop this chat, open a fresh window and input `继续生成 projects/<project_name>` to enter Phase B (SVG generation + export); no response or "continue" = default continuous mode. |
|
||||
| Normal (default) | State scale is moderate, default continuous mode generates in one go; if mid-way window switch is desired, input `继续生成 projects/<project_name>` after Step 5 to switch to [split mode](workflows/resume-execute.md). |
|
||||
|
||||
This line is required output every run — the user must always see the mode choice exists. Whether to act on it is the user's call.
|
||||
|
||||
**Formula rendering policy lives inside item 7 (Typography plan)**:
|
||||
|
||||
| Policy | Behavior |
|
||||
|---|---|
|
||||
| `mixed` (default) | Strategist renders complex formula-worthy expressions as PNG assets; simple inline expressions remain editable text / Unicode |
|
||||
| `render-all` | Strategist renders every formula-worthy expression as PNG assets |
|
||||
| `text-only` | No formula rendering; formulas remain editable text / Unicode |
|
||||
|
||||
After the Eight Confirmations are approved and **before outputting `design_spec.md` / `spec_lock.md`**, if the confirmed formula policy is `mixed` or `render-all` and the content contains formula-worthy expressions, Strategist MUST:
|
||||
|
||||
1. Identify explicit LaTeX and any source expressions that should be faithfully structured as formulas.
|
||||
2. Write `<project_path>/images/formula_manifest.json` with only the formulas selected for rendering.
|
||||
3. Run:
|
||||
```bash
|
||||
python3 ${SKILL_DIR}/scripts/latex_render.py <project_path>
|
||||
```
|
||||
4. Include the rendered formula PNGs as `Acquire Via: formula`, `Status: Rendered`, `Type: Latex Formula` rows in `design_spec.md §VIII Image Resource List`; also list them in `spec_lock.md images` with `| no-crop`.
|
||||
|
||||
The formula renderer uses a provider fallback chain by default: `codecogs,quicklatex,mathpad,wikimedia`. The first three are color-aware; Wikimedia is an availability fallback. Formula PNGs are transparent by default: manifest `background` is the temporary render matte and transparency-removal reference, not a retained final background unless `transparent: false` is set for that item. Do not scan `spec_lock.md` for `$...$` or `$$...$$`. Dollar-delimited math in source material is only a signal for Strategist; the renderer consumes the explicit manifest.
|
||||
|
||||
If the user provided images or formula PNGs were rendered, run analysis **before outputting the design spec**:
|
||||
```bash
|
||||
python3 ${SKILL_DIR}/scripts/analyze_images.py <project_path>/images
|
||||
```
|
||||
|
||||
> ⚠️ **Image handling**: NEVER directly read / open / view image files (`.jpg`, `.png`, etc.). All image info comes from `analyze_images.py` output or the Design Spec's Image Resource List.
|
||||
|
||||
**Output**:
|
||||
- `<project_path>/design_spec.md` — human-readable design narrative
|
||||
- `<project_path>/spec_lock.md` — machine-readable execution contract (skeleton: `templates/spec_lock_reference.md`); Executor re-reads before every page
|
||||
|
||||
**✅ Checkpoint — Phase deliverables complete, auto-proceed to next step**:
|
||||
```markdown
|
||||
## ✅ Strategist Phase Complete
|
||||
- [x] Eight Confirmations completed (user confirmed)
|
||||
- [x] Split-mode note appended below the eight items (heavy or normal variant)
|
||||
- [x] Design Specification & Content Outline generated
|
||||
- [x] Execution lock (spec_lock.md) generated
|
||||
- [ ] **Next**: Auto-proceed to [Image_Generator / Executor] phase
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Step 5: Image Acquisition Phase (Conditional)
|
||||
|
||||
🚧 **GATE**: Step 4 complete; Design Specification & Content Outline generated and user confirmed. Any formula rows already have `Acquire Via: formula` and `Status: Rendered`.
|
||||
|
||||
> **Trigger**: At least one row in the resource list has `Acquire Via: ai` and/or `Acquire Via: web`. If every row is `user`, `formula`, or `placeholder`, skip to Step 6.
|
||||
|
||||
**Always load the common framework**:
|
||||
|
||||
```
|
||||
Read references/image-base.md
|
||||
```
|
||||
|
||||
Then **lazy-load the path-specific reference** for each row that actually needs it:
|
||||
|
||||
| Acquire Via | Load reference (only if any such row exists) | Run |
|
||||
|---|---|---|
|
||||
| `ai` | `references/image-generator.md` | `python3 ${SKILL_DIR}/scripts/image_gen.py --manifest <project_path>/images/image_prompts.json` |
|
||||
| `web` | `references/image-searcher.md` | `python3 ${SKILL_DIR}/scripts/image_search.py ...` |
|
||||
| `user` / `placeholder` | (skip) | (skip) |
|
||||
|
||||
A deck with only `ai` rows never loads `image-searcher.md`; a deck with only `web` rows never loads `image-generator.md`. A mixed deck loads both, processes each row through its own path, and writes both `image_prompts.json` and `image_sources.json`.
|
||||
|
||||
> ⚠️ **In-pipeline ai path MUST use manifest mode** — even when only 1 ai row exists. Write `images/image_prompts.json` first, then run `image_gen.py --manifest`, then `image_gen.py --render-md` to produce the `image_prompts.md` sidecar. The positional form (`image_gen.py "prompt" ...`) is reserved for **out-of-pipeline one-off testing / single-image fixups** — it skips manifest + sidecar, leaving no audit trail.
|
||||
|
||||
Workflow:
|
||||
|
||||
1. Extract all rows with `Status: Pending` and `Acquire Via ∈ {ai, web}` from the design spec
|
||||
2. Generate prompts (ai rows) and/or run search (web rows) per [image-base.md](references/image-base.md) §2 dispatch table
|
||||
3. Verify every row reaches a terminal status: `Generated` (ai success), `Sourced` (web success), or `Needs-Manual`
|
||||
|
||||
**✅ Checkpoint — Confirm acquisition attempted for every row**:
|
||||
```markdown
|
||||
## ✅ Image Acquisition Phase Complete
|
||||
- [x] image_prompts.json created (when any ai rows processed)
|
||||
- [x] image_prompts.md sidecar rendered (when any ai rows processed)
|
||||
- [x] image_sources.json created (when any web rows processed)
|
||||
- [x] Each row: status is `Generated` / `Sourced` / `Needs-Manual` (no `Pending` remaining)
|
||||
```
|
||||
|
||||
**Default — auto-proceed to Step 6.** Only when the user's Step 4 response explicitly opted into split mode (in reply to the optional hint), output the Phase A hand-off below and stop this conversation:
|
||||
|
||||
```markdown
|
||||
## ✅ Phase A Complete
|
||||
- [x] Spec: `design_spec.md`, `spec_lock.md`
|
||||
- [x] Resources: `sources/`, `images/`, `templates/`
|
||||
- [ ] **Next**: open a fresh chat window and input `继续生成 projects/<project_name>` to enter Phase B via the [`resume-execute`](workflows/resume-execute.md) workflow.
|
||||
```
|
||||
|
||||
> On acquisition failure, do NOT halt — follow the Failure Handling rule in [image-base.md](references/image-base.md) §5: retry once, then mark the row `Needs-Manual`, report to user, and continue to the checkpoint above.
|
||||
|
||||
---
|
||||
|
||||
### Step 6: Executor Phase
|
||||
|
||||
🚧 **GATE**: Step 4 (and Step 5 if triggered) complete; all prerequisite deliverables are ready.
|
||||
|
||||
Read the role definition based on the selected style:
|
||||
```
|
||||
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)
|
||||
```
|
||||
|
||||
> Only read executor-base + shared-standards + one style file.
|
||||
|
||||
**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.
|
||||
|
||||
**Live Preview Auto-Startup (Mandatory)**: before the first SVG, automatically start the browser editor in live mode and keep it running continuously through Executor + Step 7 export:
|
||||
```bash
|
||||
python3 ${SKILL_DIR}/scripts/svg_editor/server.py <project_path> --live
|
||||
```
|
||||
- Start it immediately when Executor begins; `svg_output/` may be empty. Editor opens at `http://localhost:5050`; port conflict → `--port <other>` and report the actual URL.
|
||||
- Run it as a long-running side process/session; do not wait for it to exit before generating SVG pages. Do not wait for user confirmation after startup.
|
||||
- **Service must keep running** until one of: (a) the user clicks **Exit preview** in the browser, or (b) the user explicitly asks in chat to stop it. Generation continues even if the user closes the editor.
|
||||
- **Do NOT read or apply submitted annotations during generation.** Users may annotate at any time, but Executor proceeds without touching them. The window to apply annotations opens only after Step 7 completes — see [`workflows/live-preview.md`](workflows/live-preview.md).
|
||||
- The editor also supports **staged direct edits** (text content + SVG element attributes previewed immediately, then written to `svg_output/` only when the user clicks **Apply changes**; `Ctrl+Z` / Undo drops staged edits) alongside annotation; re-export stays chat-driven. Full scope and editor details: see [`workflows/live-preview.md`](workflows/live-preview.md) Notes.
|
||||
|
||||
**Pre-generation Batch Read (Mandatory)**: before the first SVG, batch-read every distinct layout SVG referenced in `spec_lock.page_layouts` and every distinct chart SVG referenced in `spec_lock.page_charts` (plus any §VII backup charts). One read per file, up front — do not re-read these during page generation. See executor-base.md §1.0.
|
||||
|
||||
**Per-page spec_lock re-read (Mandatory)**: before **each** SVG page, `read_file <project_path>/spec_lock.md` and use only its colors / fonts / icons / images, plus the per-page `page_rhythm` / `page_layouts` / `page_charts` lookups (resolves to template SVGs already loaded in the batch read above). Resists context-compression drift on long decks. See executor-base.md §2.1.
|
||||
|
||||
> ⚠️ **Main-agent only**: SVG generation MUST stay in the current main agent — page design depends on full upstream context. Do NOT delegate to sub-agents.
|
||||
> ⚠️ **Generation rhythm**: generate pages sequentially, one at a time, in the same continuous context. Do NOT batch (e.g., 5 per group).
|
||||
|
||||
**Visual Construction Phase**: generate SVG pages sequentially, one at a time, in one continuous pass → `<project_path>/svg_output/`
|
||||
|
||||
**Quality Check Gate (Mandatory)** — after all SVGs, BEFORE annotation handling and speaker notes:
|
||||
```bash
|
||||
python3 ${SKILL_DIR}/scripts/svg_quality_checker.py <project_path>
|
||||
```
|
||||
- Any `error` (banned SVG features, viewBox mismatch, spec_lock drift, etc.) MUST be fixed before proceeding — return to Visual Construction, regenerate that page, re-run check.
|
||||
- `warning` entries (low-res image, non-PPT-safe font tail, etc.): fix when straightforward, otherwise acknowledge and release.
|
||||
- Run against `svg_output/` (not after `finalize_svg.py` — finalize rewrites SVG and masks violations).
|
||||
|
||||
**Logic Construction Phase**: generate speaker notes → `<project_path>/notes/total.md`
|
||||
|
||||
**✅ Checkpoint — Confirm all SVGs and notes are fully generated and quality-checked. Proceed directly to Step 7 post-processing**:
|
||||
```markdown
|
||||
## ✅ Executor Phase Complete
|
||||
- [x] Live preview started and kept available at the reported URL
|
||||
- [x] All SVGs generated to svg_output/
|
||||
- [x] svg_quality_checker.py passed (0 errors)
|
||||
- [x] Speaker notes generated at notes/total.md
|
||||
```
|
||||
|
||||
> **Chart pages?** If this deck contains data charts (bar / line / pie / radar / etc.), run the standalone [`verify-charts`](workflows/verify-charts.md) workflow before Step 7 to calibrate coordinates. AI models routinely introduce 10–50 px errors when mapping data to pixel positions; verify-charts eliminates that class of error. Skip if no chart pages.
|
||||
|
||||
> **Visual self-check (opt-in)?** If the user explicitly asked for a per-page visual re-pass on the SVGs ("跑一下视觉自检 / 视觉回看", "visual review", "check pages visually", etc.), run the standalone [`visual-review`](workflows/visual-review.md) workflow before Step 7. Do NOT run it by default and do NOT recommend it based on inferred model capability or deck size — trigger is user request only.
|
||||
|
||||
---
|
||||
|
||||
### Step 7: Post-processing & Export
|
||||
|
||||
🚧 **GATE**: Step 6 complete; all SVGs generated to `svg_output/`; speaker notes `notes/total.md` generated.
|
||||
|
||||
🚧 **Image readiness GATE** (when Step 5 left ai rows in `Needs-Manual`): every expected file must exist at `project/images/<filename>` before running 7.1.
|
||||
|
||||
> If files are missing: PAUSE, list the missing filenames, point the user to `images/image_prompts.md` (each `### Image N:` block is paste-ready for ChatGPT / Gemini / Midjourney; auto-generated from `image_prompts.json`) and the required placement `project/images/<filename>`. Resume Step 7.1 only after all expected files are in place. `finalize_svg.py` and `svg_to_pptx.py` do not detect missing files at this layer — proceeding with gaps produces a deck with broken image references.
|
||||
|
||||
> ⚠️ Run the three sub-steps **one at a time** — each must complete successfully before the next.
|
||||
> ❌ **NEVER** combine them into a single code block or shell invocation.
|
||||
|
||||
Canonical three-command pipeline (mirrors `references/shared-standards.md` §5):
|
||||
|
||||
**Step 7.1** — Split speaker notes:
|
||||
```bash
|
||||
python3 ${SKILL_DIR}/scripts/total_md_split.py <project_path>
|
||||
```
|
||||
|
||||
**Step 7.2** — SVG post-processing (icon embedding / image crop & embed / text flattening / rounded rect to path):
|
||||
```bash
|
||||
python3 ${SKILL_DIR}/scripts/finalize_svg.py <project_path>
|
||||
```
|
||||
|
||||
**Step 7.3** — Export PPTX (embeds speaker notes by default):
|
||||
```bash
|
||||
python3 ${SKILL_DIR}/scripts/svg_to_pptx.py <project_path>
|
||||
# Output (default-flow mode):
|
||||
# exports/<project_name>_<timestamp>.pptx ← native pptx (canonical output, reads svg_output/)
|
||||
# backup/<timestamp>/svg_output/ ← Executor SVG source backup (always written)
|
||||
#
|
||||
# Add --svg-snapshot to additionally emit the SVG-image preview pptx alongside the native pptx:
|
||||
# exports/<project_name>_<timestamp>_svg.pptx ← SVG preview pptx (reads svg_final/)
|
||||
```
|
||||
|
||||
> The native pptx consumes `svg_output/` directly so the converter can preserve
|
||||
> high-fidelity primitives (icon `<use>` placeholders, image `preserveAspectRatio`
|
||||
> → `srcRect`, rounded rect `rx/ry` → `prstGeom roundRect`). The `svg_output/`
|
||||
> snapshot in `backup/<timestamp>/` is always written so the project can be
|
||||
> re-exported from frozen SVG sources without re-running the LLM. The SVG-rendered
|
||||
> preview pptx is opt-in via `--svg-snapshot` — live preview already provides the
|
||||
> SVG visual reference, so it's only needed when you want a self-contained file
|
||||
> to share. Pass `-s output` or `-s final` to force a single source if you need it.
|
||||
|
||||
> **Paragraph editability vs line fidelity** — by default, mergeable dy-stacked
|
||||
> paragraph blocks collapse into one editable PowerPoint text frame with multiple
|
||||
> `<a:p>`, improving body-text editing and resize/reflow behavior. Add `--no-merge`
|
||||
> only when the user explicitly asks for strict line-layout fidelity or when a
|
||||
> layout-tight page must keep every dy-stacked line as its own text frame. The
|
||||
> merge detector is conservative; mixed-layout text falls back to per-line frames.
|
||||
|
||||
**Optional animation flags** (the defaults already enable rich entrance animations — adjust only when the user asks for something different):
|
||||
- `-t <effect>` — page transition. Default `fade`. Options: `fade` / `push` / `wipe` / `split` / `strips` / `cover` / `random` / `none`.
|
||||
- `-a <effect>` — per-element entrance animation. Default `auto` (map effect from group id: chart→wipe, card-/step-/pillar-→fly, title/takeaway→fade; image-like ids `hero` / `figure-` / `image` / `img-` / `kpi` cycle a richer pool — zoom / dissolve / circle / box / diamond / wheel — so multiple images vary across the deck). Pass `none` to disable, a specific effect like `fade`, or `mixed` for the legacy 16-effect cycle. Requires top-level `<g id="...">` groups (already required by Executor).
|
||||
- `--animation-trigger {on-click,with-previous,after-previous}` — Start mode (matches PowerPoint's animation-pane Start dropdown). Default `after-previous` (click-free cascade; pace via `--animation-stagger`). Use `on-click` for presenter-paced reveals, or `with-previous` for all-at-once.
|
||||
- `--animation-config <path>` — optional object-level sidecar. Default: `<project_path>/animations.json` when present.
|
||||
- `--auto-advance <seconds>` — kiosk-style auto-play.
|
||||
|
||||
**Optional custom animations** (only when the user asks to tune animation order/effects/timing for specific objects):
|
||||
|
||||
Run the standalone [`customize-animations`](workflows/customize-animations.md) workflow. Default export already has global entrance animation; do not create `animations.json` unless object-level customization was requested.
|
||||
|
||||
**Optional recorded narration** (only when the user asks for narrated/video export):
|
||||
|
||||
Run the standalone [`generate-audio`](workflows/generate-audio.md) workflow. The AI picks a narration backend (`edge` by default, or a configured cloud provider such as ElevenLabs / MiniMax / Qwen / CosyVoice for high-quality or cloned voices), asks the user once (backend + voice + rate/settings + embed-or-not, all with recommended values), then executes `notes_to_audio.py` and (if chosen) re-exports the PPTX with `--recorded-narration audio`.
|
||||
|
||||
Do NOT call `notes_to_audio.py` directly without going through the workflow — `--voice` / `--voice-id` is required and the workflow produces the locale/provider-aware recommendation that makes the choice meaningful.
|
||||
|
||||
Full effect list, anchor logic, and limits: [`references/animations.md`](references/animations.md).
|
||||
|
||||
> ❌ **NEVER** substitute `cp` for `finalize_svg.py` — finalize performs multiple critical processing steps
|
||||
> ❌ **NEVER** force `-s output` for the legacy/preview pptx (PowerPoint's internal SVG parser drops icons and rounded corners). The default auto-split already gives native the high-fidelity source it needs without touching legacy.
|
||||
> ❌ **NEVER** use `--only` (it suppresses one of the two output files)
|
||||
|
||||
> **Post-export annotation window**: the preview service from Step 6 typically remains running after export. If the user submitted annotations in the browser (during Executor or after export) and now asks to apply them — they may quote the browser prompt (`Changes saved to svg_output...` / `修改已保存到 svg_output...`), say "apply my annotations" / "应用注解" / equivalent — run [`live-preview`](workflows/live-preview.md) Step 2 to apply and re-export. Annotations submitted during generation are also handled here, not earlier.
|
||||
|
||||
> **Direct edits in the browser**: the user may also stage text / SVG attribute edits in the preview. These land in `svg_output/` only after the user clicks **Apply changes**. If they ask to "re-export" / "重新导出" after applying such edits, just re-run Step 7.2–7.3 (finalize + export); no annotation-application step is needed unless they also saved AI-needed annotations.
|
||||
|
||||
> **Preview not running?** Any time the user mentions "live preview", "preview", "看效果", or wants to select/click a slide element and the service is not running, run [`live-preview`](workflows/live-preview.md) Step 1 to start it. If the service is already running, just point them at the URL — do not restart.
|
||||
|
||||
---
|
||||
|
||||
## Role Switching Protocol
|
||||
|
||||
Before switching roles, **MUST first read** the corresponding reference file. Output marker:
|
||||
|
||||
```markdown
|
||||
## [Role Switch: <Role Name>]
|
||||
📖 Reading role definition: references/<filename>.md
|
||||
📋 Current task: <brief description>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Reference Resources
|
||||
|
||||
| Resource | Path |
|
||||
|----------|------|
|
||||
| Shared technical constraints | `references/shared-standards.md` |
|
||||
| Canvas format specification | `references/canvas-formats.md` |
|
||||
| Image-text layout patterns (Primary structures + Modifier layers — combine freely) | `references/image-layout-patterns.md` |
|
||||
| Image layout sizing (math for side-by-side container dimensions) | `references/image-layout-spec.md` |
|
||||
| SVG image embedding | `references/svg-image-embedding.md` |
|
||||
| Icon library | `templates/icons/README.md` |
|
||||
|
||||
---
|
||||
|
||||
## Notes
|
||||
|
||||
- Local preview: `python3 -m http.server -d <project_path>/svg_final 8000`
|
||||
- **Troubleshooting**: on generation issues (layout overflow, export errors, blank images, etc.), check `docs/faq.md` for known solutions
|
||||
@@ -0,0 +1,65 @@
|
||||
# AI Image Comparison — Three-Dimension Reference Gallery
|
||||
|
||||
PPT Master's AI images are governed by three orthogonal dimensions: **rendering (visual style) × palette (color behavior) × type (internal composition)**.
|
||||
This directory uses **controlled-variable comparison** — vary one dimension while holding the other two fixed — so you can see exactly what each dimension contributes.
|
||||
|
||||
> This is **not** an example project (see `examples/` for those). It is a dimension-selection reference for the Strategist role and end users when picking AI image parameters.
|
||||
|
||||
## The three comparison sets
|
||||
|
||||
| Subdirectory | Count | Variable | Fixed baseline |
|
||||
|---|---|---|---|
|
||||
| [`rendering/`](./rendering/) | 20 | rendering (20 styles) | single-subject hero composition (§4.1 Primitive A), palette=cool-corporate |
|
||||
| [`palette/`](./palette/) | 14 | palette (14 color behaviors) | single-subject hero composition (§4.1 Primitive A), rendering=vector-illustration |
|
||||
| [`type/`](./type/) | 11 | type (11 internal compositions for `page_role: local`) | rendering=vector-illustration, palette=cool-corporate |
|
||||
|
||||
Each subdirectory contains:
|
||||
|
||||
- `_subject.md` — the controlled variables and the subject used for this set
|
||||
- `_manifest.json` — generation manifest (status=Pending), runnable via `image_gen.py --manifest`
|
||||
- `<dimension>.png` — the generated image for each rendering / palette / type
|
||||
|
||||
> `page_role: hero_page` images don't pick an `image_type` — they use the four composition primitives in [`image-generator.md`](../image-generator.md) §4.1 directly (single-subject / portrait / typographic / atmospheric). The 11 types in `type/` are for local infographic blocks only.
|
||||
|
||||
## Why these baselines
|
||||
|
||||
| Choice | Reason |
|
||||
|---|---|
|
||||
| rendering=`vector-illustration` | Most versatile in the catalog; ✓✓ compatible with all 14 palettes; minimal interference when used as the "origin" for palette / type comparisons |
|
||||
| palette=`cool-corporate` | Most neutral and most common; simple color behavior (HEX 60-30-10 applied directly) so it doesn't overpower the dimension under comparison |
|
||||
| composition=single-subject hero (§4.1 Primitive A) | One dominant subject (60-70% of canvas) — the most visually representative shape, so rendering / palette differences show up most clearly |
|
||||
|
||||
## How the images were generated
|
||||
|
||||
> Reference images were generated with the **OpenAI gpt-image-2** backend. Other backends (gemini / doubao / qwen / etc.) will produce visually different results — this reflects model-level differences, not differences in PPT Master's dimension system.
|
||||
|
||||
To reproduce or regenerate:
|
||||
|
||||
```bash
|
||||
python3 skills/ppt-master/scripts/image_gen.py \
|
||||
--manifest skills/ppt-master/references/ai-image-comparison/rendering/_manifest.json \
|
||||
-o skills/ppt-master/references/ai-image-comparison/rendering/ \
|
||||
--backend openai
|
||||
|
||||
python3 skills/ppt-master/scripts/image_gen.py \
|
||||
--manifest skills/ppt-master/references/ai-image-comparison/palette/_manifest.json \
|
||||
-o skills/ppt-master/references/ai-image-comparison/palette/ \
|
||||
--backend openai
|
||||
|
||||
python3 skills/ppt-master/scripts/image_gen.py \
|
||||
--manifest skills/ppt-master/references/ai-image-comparison/type/_manifest.json \
|
||||
-o skills/ppt-master/references/ai-image-comparison/type/ \
|
||||
--backend openai
|
||||
```
|
||||
|
||||
Generated images land in the corresponding subdirectory. Each item's `status` in the manifest is updated in place to `Generated` / `Failed` / `Needs-Manual`. Re-running only retries `Pending` and `Failed` items — `Generated` items are skipped.
|
||||
|
||||
## How to use
|
||||
|
||||
| If you are deciding... | Look at |
|
||||
|---|---|
|
||||
| Which rendering to lock in Strategist h.5 | `rendering/` — scan all 20 side by side; pick the visual temperament that matches the deck |
|
||||
| Which palette pairs best with your chosen rendering | `palette/` — see how color behavior shifts the same subject |
|
||||
| Which type fits a specific image's purpose | `type/` — match the internal composition to the page's content shape |
|
||||
|
||||
> The three sets are intentionally independent. When deciding rendering, do not look at the palette set — its varying colors will distort your judgment of pure rendering style.
|
||||
@@ -0,0 +1,126 @@
|
||||
{
|
||||
"project": "skills/ppt-master/references/ai-image-comparison/palette",
|
||||
"generated_at": "2026-05-15",
|
||||
"comparison_set": "palette",
|
||||
"baseline": {
|
||||
"rendering": "vector-illustration",
|
||||
"subject": "a confident professional standing beside an upward growth chart, looking forward",
|
||||
"note": "HEX is NOT fixed across this set — each palette uses its own typical HEX triplet, because palette is about color behavior + the HEX it expects. See _subject.md for full HEX table.",
|
||||
"composition": "single-subject hero (image-generator.md §4.1 Primitive A)"
|
||||
},
|
||||
"deck_style_anchor": "Single subject hero composition, vector-illustration rendering: clean flat vector with bold shapes, sharp edges, no gradients, no shadows.",
|
||||
"items": [
|
||||
{
|
||||
"filename": "cool-corporate.png",
|
||||
"purpose": "Palette comparison — cool-corporate",
|
||||
"aspect_ratio": "16:9",
|
||||
"prompt": "Clean flat vector illustration with bold geometric shapes, sharp edges, no gradients, no shadows, solid flat fills throughout. Subject: a confident professional standing beside an upward growth chart, looking forward. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is restrained-corporate: secondary off-white #F8F9FA occupies 60-70% of the canvas as calm breathing space; primary deep navy #1E3A5F carries the main subject in confident solid blocks; accent gold #D4AF37 appears only in one or two small emphasis points totaling under 5% of the area. No fourth color. Flat solid fills only — no metallic, no glossy reflections. 12-20% inner safe-zone padding. No embedded text labels, no HEX codes visible.",
|
||||
"alt_text": "Cool-corporate palette: vector hero of professional and growth chart in deep navy on off-white with restrained gold accent",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "warm-earth.png",
|
||||
"purpose": "Palette comparison — warm-earth",
|
||||
"aspect_ratio": "16:9",
|
||||
"prompt": "Clean flat vector illustration with bold geometric shapes, sharp edges, no gradients, no shadows, solid flat fills throughout. Subject: a confident professional standing beside an upward growth chart, looking forward. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is warm-grounded: secondary warm cream #FEF3C7 carries about 55% of the canvas as soft breathing space; primary deep terracotta #9A3412 anchors the main subject and dominant forms in confident warm tones (about 32%); accent warm gold #D4AF37 appears in small concentrated pops totaling under 13%. Soft warm temperament throughout, no cool tones. 12-20% inner safe-zone padding. No embedded text labels, no HEX codes visible.",
|
||||
"alt_text": "Warm-earth palette: vector hero of professional and growth chart in deep terracotta on cream with warm gold accent",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "tech-neon.png",
|
||||
"purpose": "Palette comparison — tech-neon",
|
||||
"aspect_ratio": "16:9",
|
||||
"prompt": "Clean flat vector illustration with bold geometric shapes, sharp edges, solid flat fills throughout (subtle 8%-opacity glow halos allowed for tech-neon energy). Subject: a confident professional standing beside an upward growth chart, looking forward. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is tech-neon: secondary deep digital navy #0A0E27 covers about 50% of the canvas as the dark field; primary electric blue #0EA5E9 carries the main subject in confident saturated tones (about 35%) with a soft 8%-opacity glow halo around it; accent vivid cyan #06B6D4 appears in 10-15% as small bright pops on the chart, also with implied glow. High contrast between vivid foreground and dark digital background. 12-20% inner safe-zone padding. No embedded text labels, no HEX codes visible.",
|
||||
"alt_text": "Tech-neon palette: vector hero of professional and chart in electric blue with cyan glow on deep digital navy",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "editorial-classic.png",
|
||||
"purpose": "Palette comparison — editorial-classic",
|
||||
"aspect_ratio": "16:9",
|
||||
"prompt": "Clean flat vector illustration with bold geometric shapes, sharp edges, no gradients, solid flat fills throughout (subtle 8%-opacity paper grain texture allowed for editorial feel). Subject: a confident professional standing beside an upward growth chart, looking forward. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is editorial-classic: secondary warm cream #FAF7F2 carries the magazine-paper field across about 55% of the canvas with subtle paper-grain texture at 8% opacity; primary deep navy #0F2C4C anchors the dominant subject in confident solid tone (about 30%); accent burnt orange #C2410C appears as a single thin horizontal rule and one small highlight marker totaling under 14%. Magazine-considered composition, deliberate breathing room. 12-20% inner safe-zone padding. No embedded text or readable labels.",
|
||||
"alt_text": "Editorial-classic palette: vector hero of professional and chart with magazine feel, deep navy on warm cream with burnt orange rule",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "macaron.png",
|
||||
"purpose": "Palette comparison — macaron",
|
||||
"aspect_ratio": "16:9",
|
||||
"prompt": "Clean flat vector illustration with bold rounded geometric shapes (slightly softer corners for macaron warmth), no gradients, solid flat pastel fills with slight hand-painted overshoot beyond outlines. Subject: a confident professional standing beside an upward growth chart, looking forward. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is macaron pastel: warm cream paper background #F5F0E8 covers about 50% of the canvas. The main subject and chart are filled in soft pastel tints — light blue, mint green, lavender, peach (about 40% total area). Accent warm coral #F97316 appears in one or two small emphasis points only (under 10%). Soft, friendly, educational temperament throughout. 12-20% inner safe-zone padding. No embedded text or labels visible.",
|
||||
"alt_text": "Macaron palette: vector hero of professional and chart in soft pastels on cream paper with coral accent",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "mono-ink.png",
|
||||
"purpose": "Palette comparison — mono-ink",
|
||||
"aspect_ratio": "16:9",
|
||||
"prompt": "Clean flat vector illustration with bold geometric shapes, sharp edges, no gradients, solid flat fills throughout. Subject: a confident professional standing beside an upward growth chart, looking forward. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is mono-ink: pure white background #FFFFFF (about 55%). All structural elements — figure, chart, lines — in near-black ink #1A1A1A (about 38%). The accent coral red #E8655A is reserved as the semantic emphasis accent, appearing in 1-3 small focal points only (the highlighted chart bar, an arrow, an emphasis dot) totaling under 8%. No other colors. High contrast monochrome with one semantic accent only. 12-20% inner safe-zone padding. No embedded text or labels visible.",
|
||||
"alt_text": "Mono-ink palette: vector hero of professional and chart in near-black on pure white with coral red accent point",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "vivid-launch.png",
|
||||
"purpose": "Palette comparison — vivid-launch",
|
||||
"aspect_ratio": "16:9",
|
||||
"prompt": "Clean flat vector illustration with bold geometric shapes, sharp edges, no gradients, solid flat saturated fills throughout. Subject: a confident professional standing beside an upward growth chart, looking forward. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is vivid-launch: secondary near-white #FAFAFA background (about 38%); primary saturated brand magenta #E11D48 carries the dominant subject in confident vivid blocks (about 35%); accent vivid orange #F97316 is co-star — a major secondary subject element or supporting block (about 25%). One small detail in deep neutral for definition (about 2%). All colors confident and saturated. Promotional, attention-grabbing energy. 12-20% inner safe-zone padding. No embedded text or labels visible.",
|
||||
"alt_text": "Vivid-launch palette: vector hero of professional and chart in saturated magenta and vivid orange on near-white",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "dark-cinematic.png",
|
||||
"purpose": "Palette comparison — dark-cinematic",
|
||||
"aspect_ratio": "16:9",
|
||||
"prompt": "Clean flat vector illustration with bold geometric shapes (subtle 8%-opacity glow halos around bright elements for dark-cinematic atmosphere). Subject: a confident professional standing beside an upward growth chart, looking forward. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is dark-cinematic: deep dark background #0A0E27 covers about 65% of the canvas with subtle gradient toward darker edges. Primary bright teal #14B8A6 carries the main subject and growth chart bars as bright lit elements (about 25%) with implied luminance glow at 8% opacity. Accent vivid amber #D4AF37 appears as a small concentrated glow point near the focal area (about 10%). The bright primary and accent feel like light sources within the cinematic dark. 12-20% inner safe-zone padding. No embedded text or labels visible.",
|
||||
"alt_text": "Dark-cinematic palette: vector hero of professional and chart with bright teal and amber glow on deep dark navy background",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "duotone.png",
|
||||
"purpose": "Palette comparison — duotone",
|
||||
"aspect_ratio": "16:9",
|
||||
"prompt": "Clean flat vector illustration with bold geometric shapes, sharp edges, no gradients, only two solid colors total. Subject: a confident professional standing beside an upward growth chart, looking forward. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is duotone: Color A — deep teal #0F766E — carries the main subject silhouette and the dominant zone of the canvas (about 50%). Color B — vivid amber #D97706 — carries the background field and the secondary zone (about 48%). The two colors are the entire palette — no third hue beyond a barely-perceptible neutral 2% in transitional textures. Editorial poster balance. 12-20% inner safe-zone padding. No embedded text or labels visible.",
|
||||
"alt_text": "Duotone palette: vector hero of professional and chart in deep teal silhouette on vivid amber background, two colors only",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "nature-organic.png",
|
||||
"purpose": "Palette comparison — nature-organic",
|
||||
"aspect_ratio": "16:9",
|
||||
"prompt": "Clean flat vector illustration with bold but slightly organic geometric shapes, sharp edges, no gradients, solid flat earthy fills. Subject: a confident professional standing beside an upward growth chart, looking forward. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is nature-organic: secondary soft cream #FEF3C7 covers the background field as gentle outdoor breath (about 50%). Primary deep forest green #166534 carries the dominant subject and natural forms — clothing, chart elements styled as organic shapes (about 35%). Accent warm honey #D4AF37 appears in small natural detail pops — a flower, a sunlit highlight on the chart (about 13%). All tones earthy and slightly desaturated. 12-20% inner safe-zone padding. No embedded text or labels visible.",
|
||||
"alt_text": "Nature-organic palette: vector hero of professional and organic chart in deep forest green on soft cream with warm honey detail",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "jewel-tone.png",
|
||||
"purpose": "Palette comparison — jewel-tone",
|
||||
"aspect_ratio": "16:9",
|
||||
"prompt": "Clean flat vector illustration with bold geometric shapes, sharp edges, no gradients, solid flat fills with rich gemstone saturation. Subject: a confident professional standing beside an upward growth chart, looking forward. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is jewel-tone: rich primary deep emerald #047857 carries the dominant subject silhouette and main chart elements as confident saturated gemstone block (about 36%); secondary deep cream #FEF3C7 forms the velvet field background (about 50%); accent polished gold #D4AF37 appears as one thin metallic horizontal rule and one small jewel-cut dot, totaling about 14%. High saturation, premium evening feel, no muted tints, no plastic look. 12-20% inner padding. No embedded text or labels visible.",
|
||||
"alt_text": "Jewel-tone palette: vector hero of professional and growth chart in rich deep emerald on velvet cream with polished gold accent",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "frost-ice.png",
|
||||
"purpose": "Palette comparison — frost-ice",
|
||||
"aspect_ratio": "16:9",
|
||||
"prompt": "Clean flat vector illustration with bold geometric shapes, sharp edges, no gradients, near-white field dominance. Subject: a confident professional standing beside an upward growth chart, looking forward. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is frost-ice: secondary near-white #F8FBFD occupies about 80% of the canvas as vast calm field (the breathing room IS the identity); pale cool primary #DBEAFE renders the subject silhouette and chart as soft restrained structure (about 12%); accent steel blue #3B82F6 appears as one small deliberate focal element — a chart highlight or single dot, about 5%. No warm tones, no saturated colors. Clean clinical premium-minimal feel. 12-20% inner padding. No embedded text or labels visible.",
|
||||
"alt_text": "Frost-ice palette: vector hero of professional and chart as pale cool silhouette on vast near-white field with steel blue focal accent",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "sunset-gradient.png",
|
||||
"purpose": "Palette comparison — sunset-gradient",
|
||||
"aspect_ratio": "16:9",
|
||||
"prompt": "Flat vector illustration with bold geometric shapes layered over a smooth atmospheric gradient background (sunset-gradient overrides the rendering's usual no-gradient rule for the BACKGROUND FIELD only — shapes on top remain flat). Subject: a confident professional silhouette standing beside an upward growth chart, looking forward. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is sunset-gradient: the entire background flows as a smooth diagonal gradient — primary deep pink #EC4899 in the lower-left, transitioning through secondary warm orange #F97316 in the middle band, into accent purple #9333EA in the upper-right. Smooth blending, no hard color edges in the gradient. Above the gradient, a near-black silhouette professional and chart shapes sit as flat solid forms (about 30%) as the focal rest point. Atmospheric, energetic, optimistic. 12-20% inner padding. No embedded text or labels.",
|
||||
"alt_text": "Sunset-gradient palette: vector hero of silhouette and chart on warm pink-orange-purple gradient field",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "earthy-dusty.png",
|
||||
"purpose": "Palette comparison — earthy-dusty",
|
||||
"aspect_ratio": "16:9",
|
||||
"prompt": "Clean flat vector illustration with bold geometric shapes, sharp edges, no gradients, solid flat fills at uniformly reduced saturation (Morandi-adjacent). Subject: a confident professional standing beside an upward growth chart, looking forward. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is earthy-dusty: every color appears desaturated 30% from a vivid source. Secondary muted oat #E8E0D5 carries about 50% of the canvas as calm dusted field; primary muted dusty terracotta #C9A38C forms the subject silhouette and chart in soft warm earth tone (about 35%); accent muted sage #A8B5A0 appears as one thin horizontal line near the chart and one small dusty dot, totaling about 12%. No vivid colors anywhere. Refined, contemplative, slow. 12-20% inner padding. No embedded text or labels.",
|
||||
"alt_text": "Earthy-dusty palette: vector hero of silhouette and chart in muted dusty terracotta on muted oat field with sage accent",
|
||||
"status": "Generated"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,248 @@
|
||||
# Image Generation Prompts
|
||||
|
||||
> Auto-generated from `image_prompts.json` by `image_gen.py --render-md`.
|
||||
> Do not hand-edit — re-run the command to refresh.
|
||||
|
||||
> Project: skills/ppt-master/references/ai-image-comparison/palette
|
||||
> Generated: 2026-05-15
|
||||
> Deck Style Anchor: Single subject hero composition, vector-illustration rendering: clean flat vector with bold shapes, sharp edges, no gradients, no shadows.
|
||||
|
||||
---
|
||||
|
||||
### Image 1: cool-corporate.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Palette comparison — cool-corporate |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Clean flat vector illustration with bold geometric shapes, sharp edges, no gradients, no shadows, solid flat fills throughout. Subject: a confident professional standing beside an upward growth chart, looking forward. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is restrained-corporate: secondary off-white #F8F9FA occupies 60-70% of the canvas as calm breathing space; primary deep navy #1E3A5F carries the main subject in confident solid blocks; accent gold #D4AF37 appears only in one or two small emphasis points totaling under 5% of the area. No fourth color. Flat solid fills only — no metallic, no glossy reflections. 12-20% inner safe-zone padding. No embedded text labels, no HEX codes visible.
|
||||
|
||||
**Alt Text**:
|
||||
> Cool-corporate palette: vector hero of professional and growth chart in deep navy on off-white with restrained gold accent
|
||||
|
||||
---
|
||||
|
||||
### Image 2: warm-earth.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Palette comparison — warm-earth |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Clean flat vector illustration with bold geometric shapes, sharp edges, no gradients, no shadows, solid flat fills throughout. Subject: a confident professional standing beside an upward growth chart, looking forward. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is warm-grounded: secondary warm cream #FEF3C7 carries about 55% of the canvas as soft breathing space; primary deep terracotta #9A3412 anchors the main subject and dominant forms in confident warm tones (about 32%); accent warm gold #D4AF37 appears in small concentrated pops totaling under 13%. Soft warm temperament throughout, no cool tones. 12-20% inner safe-zone padding. No embedded text labels, no HEX codes visible.
|
||||
|
||||
**Alt Text**:
|
||||
> Warm-earth palette: vector hero of professional and growth chart in deep terracotta on cream with warm gold accent
|
||||
|
||||
---
|
||||
|
||||
### Image 3: tech-neon.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Palette comparison — tech-neon |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Clean flat vector illustration with bold geometric shapes, sharp edges, solid flat fills throughout (subtle 8%-opacity glow halos allowed for tech-neon energy). Subject: a confident professional standing beside an upward growth chart, looking forward. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is tech-neon: secondary deep digital navy #0A0E27 covers about 50% of the canvas as the dark field; primary electric blue #0EA5E9 carries the main subject in confident saturated tones (about 35%) with a soft 8%-opacity glow halo around it; accent vivid cyan #06B6D4 appears in 10-15% as small bright pops on the chart, also with implied glow. High contrast between vivid foreground and dark digital background. 12-20% inner safe-zone padding. No embedded text labels, no HEX codes visible.
|
||||
|
||||
**Alt Text**:
|
||||
> Tech-neon palette: vector hero of professional and chart in electric blue with cyan glow on deep digital navy
|
||||
|
||||
---
|
||||
|
||||
### Image 4: editorial-classic.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Palette comparison — editorial-classic |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Clean flat vector illustration with bold geometric shapes, sharp edges, no gradients, solid flat fills throughout (subtle 8%-opacity paper grain texture allowed for editorial feel). Subject: a confident professional standing beside an upward growth chart, looking forward. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is editorial-classic: secondary warm cream #FAF7F2 carries the magazine-paper field across about 55% of the canvas with subtle paper-grain texture at 8% opacity; primary deep navy #0F2C4C anchors the dominant subject in confident solid tone (about 30%); accent burnt orange #C2410C appears as a single thin horizontal rule and one small highlight marker totaling under 14%. Magazine-considered composition, deliberate breathing room. 12-20% inner safe-zone padding. No embedded text or readable labels.
|
||||
|
||||
**Alt Text**:
|
||||
> Editorial-classic palette: vector hero of professional and chart with magazine feel, deep navy on warm cream with burnt orange rule
|
||||
|
||||
---
|
||||
|
||||
### Image 5: macaron.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Palette comparison — macaron |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Clean flat vector illustration with bold rounded geometric shapes (slightly softer corners for macaron warmth), no gradients, solid flat pastel fills with slight hand-painted overshoot beyond outlines. Subject: a confident professional standing beside an upward growth chart, looking forward. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is macaron pastel: warm cream paper background #F5F0E8 covers about 50% of the canvas. The main subject and chart are filled in soft pastel tints — light blue, mint green, lavender, peach (about 40% total area). Accent warm coral #F97316 appears in one or two small emphasis points only (under 10%). Soft, friendly, educational temperament throughout. 12-20% inner safe-zone padding. No embedded text or labels visible.
|
||||
|
||||
**Alt Text**:
|
||||
> Macaron palette: vector hero of professional and chart in soft pastels on cream paper with coral accent
|
||||
|
||||
---
|
||||
|
||||
### Image 6: mono-ink.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Palette comparison — mono-ink |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Clean flat vector illustration with bold geometric shapes, sharp edges, no gradients, solid flat fills throughout. Subject: a confident professional standing beside an upward growth chart, looking forward. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is mono-ink: pure white background #FFFFFF (about 55%). All structural elements — figure, chart, lines — in near-black ink #1A1A1A (about 38%). The accent coral red #E8655A is reserved as the semantic emphasis accent, appearing in 1-3 small focal points only (the highlighted chart bar, an arrow, an emphasis dot) totaling under 8%. No other colors. High contrast monochrome with one semantic accent only. 12-20% inner safe-zone padding. No embedded text or labels visible.
|
||||
|
||||
**Alt Text**:
|
||||
> Mono-ink palette: vector hero of professional and chart in near-black on pure white with coral red accent point
|
||||
|
||||
---
|
||||
|
||||
### Image 7: vivid-launch.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Palette comparison — vivid-launch |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Clean flat vector illustration with bold geometric shapes, sharp edges, no gradients, solid flat saturated fills throughout. Subject: a confident professional standing beside an upward growth chart, looking forward. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is vivid-launch: secondary near-white #FAFAFA background (about 38%); primary saturated brand magenta #E11D48 carries the dominant subject in confident vivid blocks (about 35%); accent vivid orange #F97316 is co-star — a major secondary subject element or supporting block (about 25%). One small detail in deep neutral for definition (about 2%). All colors confident and saturated. Promotional, attention-grabbing energy. 12-20% inner safe-zone padding. No embedded text or labels visible.
|
||||
|
||||
**Alt Text**:
|
||||
> Vivid-launch palette: vector hero of professional and chart in saturated magenta and vivid orange on near-white
|
||||
|
||||
---
|
||||
|
||||
### Image 8: dark-cinematic.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Palette comparison — dark-cinematic |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Clean flat vector illustration with bold geometric shapes (subtle 8%-opacity glow halos around bright elements for dark-cinematic atmosphere). Subject: a confident professional standing beside an upward growth chart, looking forward. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is dark-cinematic: deep dark background #0A0E27 covers about 65% of the canvas with subtle gradient toward darker edges. Primary bright teal #14B8A6 carries the main subject and growth chart bars as bright lit elements (about 25%) with implied luminance glow at 8% opacity. Accent vivid amber #D4AF37 appears as a small concentrated glow point near the focal area (about 10%). The bright primary and accent feel like light sources within the cinematic dark. 12-20% inner safe-zone padding. No embedded text or labels visible.
|
||||
|
||||
**Alt Text**:
|
||||
> Dark-cinematic palette: vector hero of professional and chart with bright teal and amber glow on deep dark navy background
|
||||
|
||||
---
|
||||
|
||||
### Image 9: duotone.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Palette comparison — duotone |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Clean flat vector illustration with bold geometric shapes, sharp edges, no gradients, only two solid colors total. Subject: a confident professional standing beside an upward growth chart, looking forward. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is duotone: Color A — deep teal #0F766E — carries the main subject silhouette and the dominant zone of the canvas (about 50%). Color B — vivid amber #D97706 — carries the background field and the secondary zone (about 48%). The two colors are the entire palette — no third hue beyond a barely-perceptible neutral 2% in transitional textures. Editorial poster balance. 12-20% inner safe-zone padding. No embedded text or labels visible.
|
||||
|
||||
**Alt Text**:
|
||||
> Duotone palette: vector hero of professional and chart in deep teal silhouette on vivid amber background, two colors only
|
||||
|
||||
---
|
||||
|
||||
### Image 10: nature-organic.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Palette comparison — nature-organic |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Clean flat vector illustration with bold but slightly organic geometric shapes, sharp edges, no gradients, solid flat earthy fills. Subject: a confident professional standing beside an upward growth chart, looking forward. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is nature-organic: secondary soft cream #FEF3C7 covers the background field as gentle outdoor breath (about 50%). Primary deep forest green #166534 carries the dominant subject and natural forms — clothing, chart elements styled as organic shapes (about 35%). Accent warm honey #D4AF37 appears in small natural detail pops — a flower, a sunlit highlight on the chart (about 13%). All tones earthy and slightly desaturated. 12-20% inner safe-zone padding. No embedded text or labels visible.
|
||||
|
||||
**Alt Text**:
|
||||
> Nature-organic palette: vector hero of professional and organic chart in deep forest green on soft cream with warm honey detail
|
||||
|
||||
---
|
||||
|
||||
### Image 11: jewel-tone.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Palette comparison — jewel-tone |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Clean flat vector illustration with bold geometric shapes, sharp edges, no gradients, solid flat fills with rich gemstone saturation. Subject: a confident professional standing beside an upward growth chart, looking forward. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is jewel-tone: rich primary deep emerald #047857 carries the dominant subject silhouette and main chart elements as confident saturated gemstone block (about 36%); secondary deep cream #FEF3C7 forms the velvet field background (about 50%); accent polished gold #D4AF37 appears as one thin metallic horizontal rule and one small jewel-cut dot, totaling about 14%. High saturation, premium evening feel, no muted tints, no plastic look. 12-20% inner padding. No embedded text or labels visible.
|
||||
|
||||
**Alt Text**:
|
||||
> Jewel-tone palette: vector hero of professional and growth chart in rich deep emerald on velvet cream with polished gold accent
|
||||
|
||||
---
|
||||
|
||||
### Image 12: frost-ice.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Palette comparison — frost-ice |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Clean flat vector illustration with bold geometric shapes, sharp edges, no gradients, near-white field dominance. Subject: a confident professional standing beside an upward growth chart, looking forward. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is frost-ice: secondary near-white #F8FBFD occupies about 80% of the canvas as vast calm field (the breathing room IS the identity); pale cool primary #DBEAFE renders the subject silhouette and chart as soft restrained structure (about 12%); accent steel blue #3B82F6 appears as one small deliberate focal element — a chart highlight or single dot, about 5%. No warm tones, no saturated colors. Clean clinical premium-minimal feel. 12-20% inner padding. No embedded text or labels visible.
|
||||
|
||||
**Alt Text**:
|
||||
> Frost-ice palette: vector hero of professional and chart as pale cool silhouette on vast near-white field with steel blue focal accent
|
||||
|
||||
---
|
||||
|
||||
### Image 13: sunset-gradient.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Palette comparison — sunset-gradient |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Flat vector illustration with bold geometric shapes layered over a smooth atmospheric gradient background (sunset-gradient overrides the rendering's usual no-gradient rule for the BACKGROUND FIELD only — shapes on top remain flat). Subject: a confident professional silhouette standing beside an upward growth chart, looking forward. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is sunset-gradient: the entire background flows as a smooth diagonal gradient — primary deep pink #EC4899 in the lower-left, transitioning through secondary warm orange #F97316 in the middle band, into accent purple #9333EA in the upper-right. Smooth blending, no hard color edges in the gradient. Above the gradient, a near-black silhouette professional and chart shapes sit as flat solid forms (about 30%) as the focal rest point. Atmospheric, energetic, optimistic. 12-20% inner padding. No embedded text or labels.
|
||||
|
||||
**Alt Text**:
|
||||
> Sunset-gradient palette: vector hero of silhouette and chart on warm pink-orange-purple gradient field
|
||||
|
||||
---
|
||||
|
||||
### Image 14: earthy-dusty.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Palette comparison — earthy-dusty |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Clean flat vector illustration with bold geometric shapes, sharp edges, no gradients, solid flat fills at uniformly reduced saturation (Morandi-adjacent). Subject: a confident professional standing beside an upward growth chart, looking forward. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is earthy-dusty: every color appears desaturated 30% from a vivid source. Secondary muted oat #E8E0D5 carries about 50% of the canvas as calm dusted field; primary muted dusty terracotta #C9A38C forms the subject silhouette and chart in soft warm earth tone (about 35%); accent muted sage #A8B5A0 appears as one thin horizontal line near the chart and one small dusty dot, totaling about 12%. No vivid colors anywhere. Refined, contemplative, slow. 12-20% inner padding. No embedded text or labels.
|
||||
|
||||
**Alt Text**:
|
||||
> Earthy-dusty palette: vector hero of silhouette and chart in muted dusty terracotta on muted oat field with sage accent
|
||||
|
||||
---
|
||||
@@ -0,0 +1,51 @@
|
||||
# Palette Comparison Set
|
||||
|
||||
## Controlled variables
|
||||
|
||||
| Dimension | Value | Status |
|
||||
|---|---|---|
|
||||
| Palette | **varies (14 palettes)** | under comparison |
|
||||
| Rendering | `vector-illustration` | fixed baseline |
|
||||
| Composition | single-subject hero — see [`image-generator.md`](../../image-generator.md) §4.1 Primitive A | fixed baseline |
|
||||
|
||||
## Subject
|
||||
|
||||
> A confident professional standing beside an upward growth chart, looking forward — single dominant subject occupying 60-70% of the canvas. This is the "single-subject hero" composition described as [`image-generator.md`](../../image-generator.md) §4.1 Primitive A, used here as a stable baseline because a single dominant subject makes palette color behavior read most clearly.
|
||||
|
||||
## On HEX values
|
||||
|
||||
**Important**: this set does **not** fix HEX values across all 14 palettes. Each palette uses its own typical HEX triplet.
|
||||
|
||||
Reason: a palette is a *color behavior* (saturation, contrast, temperament, proportion), and the HEX it expects is part of that behavior. Forcing cool-corporate's deep navy through a vivid-launch palette would produce a strange "restrained navy mimicking promotional energy" image — losing the semantic representativeness of the palette.
|
||||
|
||||
This also matches real production: a user who picks vivid-launch will have vivid HEX values in their `design_spec`, not navy. This set simulates each palette's typical production scenario.
|
||||
|
||||
| Palette | Primary | Secondary | Accent |
|
||||
|---|---|---|---|
|
||||
| cool-corporate | `#1E3A5F` deep navy | `#F8F9FA` off-white | `#D4AF37` gold |
|
||||
| warm-earth | `#9A3412` terracotta | `#FEF3C7` cream | `#D4AF37` gold |
|
||||
| tech-neon | `#0EA5E9` electric blue | `#0A0E27` deep navy | `#06B6D4` cyan |
|
||||
| editorial-classic | `#0F2C4C` deep navy | `#FAF7F2` warm cream | `#C2410C` burnt orange |
|
||||
| macaron | (pastel tints) | `#F5F0E8` cream | `#F97316` coral |
|
||||
| mono-ink | `#1A1A1A` near-black | `#FFFFFF` white | `#E8655A` coral red |
|
||||
| vivid-launch | `#E11D48` magenta | `#FAFAFA` near-white | `#F97316` orange |
|
||||
| dark-cinematic | `#14B8A6` teal | `#0A0E27` deep dark | `#D4AF37` amber |
|
||||
| duotone | `#0F766E` deep teal | `#D97706` amber | (only 2 colors) |
|
||||
| nature-organic | `#166534` forest green | `#FEF3C7` cream | `#D4AF37` honey |
|
||||
| jewel-tone | `#047857` deep emerald | `#FEF3C7` deep cream | `#D4AF37` polished gold |
|
||||
| frost-ice | `#DBEAFE` pale cool blue | `#F8FBFD` near-white | `#3B82F6` steel blue |
|
||||
| sunset-gradient | `#EC4899` deep pink | `#F97316` warm orange | `#9333EA` purple |
|
||||
| earthy-dusty | `#C9A38C` muted dusty terracotta | `#E8E0D5` muted oat | `#A8B5A0` muted sage |
|
||||
|
||||
## Naming convention
|
||||
|
||||
Each filename is `<palette>.png`, matching the corresponding file under `references/image-palettes/`.
|
||||
|
||||
## How to read this set
|
||||
|
||||
Scan all 14 images side by side. Focus on:
|
||||
|
||||
- **Color temperature** — cool-professional vs warm-human vs neutral-editorial
|
||||
- **Saturation** — restrained vs vivid vs monochrome
|
||||
- **The 60-30-10 proportional feel** — how dominant the secondary really is
|
||||
- **Accent weight** — how much visual presence the small accent commands
|
||||
|
After Width: | Height: | Size: 752 KiB |
|
After Width: | Height: | Size: 934 KiB |
|
After Width: | Height: | Size: 798 KiB |
|
After Width: | Height: | Size: 928 KiB |
|
After Width: | Height: | Size: 1.2 MiB |
|
After Width: | Height: | Size: 696 KiB |
|
After Width: | Height: | Size: 800 KiB |
|
After Width: | Height: | Size: 790 KiB |
|
After Width: | Height: | Size: 780 KiB |
|
After Width: | Height: | Size: 859 KiB |
|
After Width: | Height: | Size: 831 KiB |
|
After Width: | Height: | Size: 918 KiB |
|
After Width: | Height: | Size: 824 KiB |
|
After Width: | Height: | Size: 798 KiB |
|
After Width: | Height: | Size: 828 KiB |
@@ -0,0 +1,178 @@
|
||||
{
|
||||
"project": "skills/ppt-master/references/ai-image-comparison/rendering",
|
||||
"generated_at": "2026-05-15",
|
||||
"comparison_set": "rendering",
|
||||
"baseline": {
|
||||
"palette": "cool-corporate",
|
||||
"subject": "a confident professional standing beside an upward growth chart, looking forward",
|
||||
"composition": "single-subject hero (image-generator.md §4.1 Primitive A)"
|
||||
},
|
||||
"color_scheme": {
|
||||
"primary": "#1E3A5F",
|
||||
"secondary": "#F8F9FA",
|
||||
"accent": "#D4AF37"
|
||||
},
|
||||
"deck_style_anchor": "Single subject hero composition, cool-corporate palette: secondary off-white #F8F9FA dominates background (60-70%), primary deep navy #1E3A5F carries main subject, accent gold #D4AF37 in small emphasis points only.",
|
||||
"items": [
|
||||
{
|
||||
"filename": "vector-illustration.png",
|
||||
"purpose": "Rendering comparison — vector-illustration",
|
||||
"aspect_ratio": "16:9",
|
||||
"prompt": "Clean flat vector illustration with bold geometric shapes, sharp edges, no gradients, no shadows, solid flat fills throughout. Subject: a confident professional standing beside an upward growth chart, looking forward. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is restrained-corporate: secondary off-white #F8F9FA occupies 60-70% of the canvas as calm breathing space; primary deep navy #1E3A5F carries the main subject in confident solid blocks; accent gold #D4AF37 appears only in one or two small emphasis points totaling under 5% of the area. No fourth color. 12-20% inner safe-zone padding around the subject. No embedded text labels, no HEX codes or color names visible in the image.",
|
||||
"alt_text": "Vector illustration hero rendering: confident professional beside growth chart, deep navy on off-white with gold accent",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "flat.png",
|
||||
"purpose": "Rendering comparison — flat",
|
||||
"aspect_ratio": "16:9",
|
||||
"prompt": "Modern flat design with crisp geometric blocks, slightly more decorative than pure vector, clean angular composition, solid flat fills, subtle 8%-opacity drop shadows allowed under layered blocks. Subject: a confident professional standing beside an upward growth chart, looking forward. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is restrained-corporate: secondary off-white #F8F9FA occupies 60-70% of the canvas as calm breathing space; primary deep navy #1E3A5F carries the main subject and dominant blocks; accent gold #D4AF37 appears only in one or two small emphasis points totaling under 5% of the area. No fourth color. 12-20% inner safe-zone padding. No embedded text labels, no HEX codes or color names visible.",
|
||||
"alt_text": "Flat design hero rendering: professional beside growth chart, geometric blocks in deep navy on off-white with gold accent",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "3d-isometric.png",
|
||||
"purpose": "Rendering comparison — 3d-isometric",
|
||||
"aspect_ratio": "16:9",
|
||||
"prompt": "Isometric 3D rendering with axonometric perspective, subtle ambient shadows at 8% opacity, soft volumetric forms, slight gradient shading on lit faces. Subject: a confident professional standing beside an upward growth chart, looking forward — both subject and chart rendered as isometric 3D forms. Single dominant scene occupying 60-70% of the canvas (hero composition). Color behavior is restrained-corporate: secondary off-white #F8F9FA occupies 60-70% of the canvas as calm breathing space; primary deep navy #1E3A5F carries the main isometric forms; accent gold #D4AF37 appears only in one or two small emphasis points totaling under 5% of the area. No fourth color. 12-20% inner safe-zone padding. No embedded text labels, no HEX codes visible.",
|
||||
"alt_text": "3D isometric hero rendering: isometric professional and growth chart in deep navy on off-white with gold accent",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "digital-dashboard.png",
|
||||
"purpose": "Rendering comparison — digital-dashboard",
|
||||
"aspect_ratio": "16:9",
|
||||
"prompt": "Polished UI dashboard aesthetic, screen-like surface with cards and chart elements, subtle drop shadows under cards, clean data-viz typography feel, modern SaaS look. Subject: a dashboard view dominated by an upward growth chart card with a confident professional avatar overlaid on the side. Single dominant composition occupying 60-70% of the canvas (hero composition). Color behavior is restrained-corporate dashboard: secondary off-white #F8F9FA dominates as the UI surface (about 70%); primary deep navy #1E3A5F carries the main chart bars and dominant card header; accent gold #D4AF37 reserved for one highlighted KPI marker totaling under 5%. Soft 8% drop shadows under cards. No fourth color. 12-20% inner safe-zone padding. No embedded text labels, no HEX codes visible.",
|
||||
"alt_text": "Digital dashboard hero rendering: growth chart UI card with professional avatar in deep navy on off-white with gold KPI",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "corporate-photo.png",
|
||||
"purpose": "Rendering comparison — corporate-photo",
|
||||
"aspect_ratio": "16:9",
|
||||
"prompt": "Editorial corporate photography, real human subject in modern office environment, natural soft window lighting, magazine-quality, slight depth of field, photo-realistic. Subject: a confident professional standing beside an upward growth chart projected on a screen or printed on a wall, looking forward. Single dominant subject occupying 60-70% of the canvas (hero composition). Color grading is restrained-corporate: muted off-white #F8F9FA tones in the environment dominate as calm breathing space (about 65%); deep navy #1E3A5F appears as the dominant clothing or screen tone of the subject area; warm gold #D4AF37 grade appears only as a small environmental accent — perhaps a metal detail or warm light glow — under 5% of the area. No saturated extra colors. 12-20% inner safe-zone padding around the subject. No embedded text in the image.",
|
||||
"alt_text": "Corporate photography hero rendering: real professional in modern office beside growth chart, navy and off-white grade with gold accent",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "blueprint.png",
|
||||
"purpose": "Rendering comparison — blueprint",
|
||||
"aspect_ratio": "16:9",
|
||||
"prompt": "Technical schematic blueprint style, fine grid background, monospace cues, drafting lines, blueprint annotation aesthetic with measurement marks and structural callout lines. Subject: a stylized blueprint of a confident professional figure standing beside a schematic upward growth chart, both rendered as engineering drawings with clean line weights. Single dominant composition occupying 60-70% of the canvas (hero composition). Color behavior is restrained-corporate blueprint: secondary off-white #F8F9FA carries the paper field with subtle grid (about 65%); primary deep navy #1E3A5F carries all schematic linework and the dominant figure outlines (about 28%); accent gold #D4AF37 appears only as one or two highlighted callout markers totaling under 5%. No fourth color. 12-20% inner safe-zone padding. No embedded text or measurement numbers as legible labels.",
|
||||
"alt_text": "Blueprint schematic hero rendering: technical drawing of professional and growth chart in deep navy on off-white with gold callouts",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "editorial.png",
|
||||
"purpose": "Rendering comparison — editorial",
|
||||
"aspect_ratio": "16:9",
|
||||
"prompt": "Magazine-style editorial infographic, refined typography hierarchy, balanced gutters, paper-grain texture at 8% opacity, deliberate negative space, considered composition with magazine-spread feel. Subject: a confident professional rendered as an editorial illustration standing beside an upward growth chart styled as a magazine data visualization. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is restrained editorial: secondary off-white #F8F9FA carries the magazine-paper field with subtle paper-grain (about 65%); primary deep navy #1E3A5F anchors the dominant figure and main chart block (about 28%); accent gold #D4AF37 appears as one thin horizontal rule and one small highlight marker totaling under 7%. No fourth color. 12-20% inner safe-zone padding. No embedded text or labels visible in the image.",
|
||||
"alt_text": "Editorial magazine hero rendering: professional and growth chart with magazine-spread feel, navy on cream-white with gold rule",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "sketch-notes.png",
|
||||
"purpose": "Rendering comparison — sketch-notes",
|
||||
"aspect_ratio": "16:9",
|
||||
"prompt": "Hand-drawn sketch-notes style on warm cream paper background, black ink outlines with slight wobble, pastel color fills with slight hand-painted overshoot beyond edges, organic hand-lettered feel, doodle aesthetic. Subject: a confident professional figure hand-drawn beside an upward growth chart sketched as a doodle with arrows and small annotation marks. Single dominant composition occupying 60-70% of the canvas (hero composition). Color behavior is restrained-corporate sketched: cream paper field #F8F9FA dominates (about 65%); primary deep navy #1E3A5F carries the main ink linework and dominant figure (about 28%); accent gold #D4AF37 appears as one highlighted hand-drawn arrow or doodle decoration totaling under 7%. No fourth color. 12-20% inner safe-zone padding. No embedded text or hand-lettered words visible.",
|
||||
"alt_text": "Sketch-notes hero rendering: hand-drawn professional and doodle growth chart on cream paper, navy ink with gold accent",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "ink-notes.png",
|
||||
"purpose": "Rendering comparison — ink-notes",
|
||||
"aspect_ratio": "16:9",
|
||||
"prompt": "Pure white background with sparse black ink drawing, hand-drawn linework, deliberate empty space, near-monochrome with one semantic accent color in 1-3 small focal points only. Subject: a confident professional figure hand-drawn in minimal black ink strokes beside an upward growth chart sketched with sparse confident lines. Single dominant composition occupying 60-70% of the canvas (hero composition). Color behavior is mono-ink shifted to the deck's HEX: pure white background (about 60%); deep navy #1E3A5F replaces the typical black ink for all linework and the dominant figure (about 33%); accent gold #D4AF37 appears as one small semantic emphasis dot or arrow totaling under 7%. No other colors. 12-20% inner safe-zone padding. No embedded text or words visible.",
|
||||
"alt_text": "Ink-notes hero rendering: minimal navy ink drawing of professional and growth chart on white with gold accent dot",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "chalkboard.png",
|
||||
"purpose": "Rendering comparison — chalkboard",
|
||||
"aspect_ratio": "16:9",
|
||||
"prompt": "Chalk drawing on a dark green chalkboard surface, white and pale chalk strokes with slight smudge texture, classroom feel, hand-drawn chalk linework. Subject: a confident professional figure drawn in white chalk beside an upward growth chart sketched in chalk strokes with arrows. Single dominant composition occupying 60-70% of the canvas (hero composition). Color behavior — chalkboard adapted to deck HEX: deep dark chalkboard surface dominates (about 65%); pale off-white chalk #F8F9FA renders all primary linework and the dominant figure (about 28%); warm gold chalk #D4AF37 appears only in one or two small highlights totaling under 7%. No fourth chalk color. 12-20% inner safe-zone padding. No embedded text or written words visible on the chalkboard.",
|
||||
"alt_text": "Chalkboard hero rendering: chalk drawing of professional and growth chart on dark green board with white chalk and gold accent",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "watercolor.png",
|
||||
"purpose": "Rendering comparison — watercolor",
|
||||
"aspect_ratio": "16:9",
|
||||
"prompt": "Painterly watercolor style with soft bleeding edges, organic color washes, slight paper grain, hand-painted brush feel, no hard outlines. Subject: a confident professional figure painted in watercolor beside an upward growth chart suggested through soft watercolor washes and brush strokes. Single dominant composition occupying 60-70% of the canvas (hero composition). Color behavior is restrained-corporate watercolor: soft off-white #F8F9FA paper field dominates (about 65%); deep navy #1E3A5F watercolor wash carries the main figure and chart with soft bleeding edges (about 28%); warm gold #D4AF37 watercolor highlights appear in one or two small concentrated wash spots totaling under 7%. No fourth pigment. 12-20% inner safe-zone padding. No embedded text or letters visible.",
|
||||
"alt_text": "Watercolor hero rendering: painted professional and growth chart with soft navy washes on off-white paper with gold highlights",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "warm-scene.png",
|
||||
"purpose": "Rendering comparison — warm-scene",
|
||||
"aspect_ratio": "16:9",
|
||||
"prompt": "Golden-hour cinematic warmth, soft directional sunlight from low angle, warm color grading throughout, atmospheric haze, lifestyle photography feel. Subject: a confident professional standing beside an upward growth chart bathed in warm golden-hour light, looking forward toward the light source. Single dominant subject occupying 60-70% of the canvas (hero composition). Color grading is restrained-corporate warmed: soft off-white #F8F9FA highlights carry the warmly lit field and atmospheric haze (about 60%); deep navy #1E3A5F appears in the shadowed clothing and shadowed side of the chart (about 30%); warm gold #D4AF37 grade carries the golden-hour light itself and rim lighting on the subject totaling about 10%. No saturated extra colors. 12-20% inner safe-zone padding. No embedded text in the image.",
|
||||
"alt_text": "Warm-scene hero rendering: cinematic golden-hour photo of professional and growth chart with navy shadows and gold light",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "screen-print.png",
|
||||
"purpose": "Rendering comparison — screen-print",
|
||||
"aspect_ratio": "16:9",
|
||||
"prompt": "Halftone screen-print poster art, limited flat colors, visible halftone dot pattern in transitional zones, slight color misregistration for silkscreen authenticity, retro poster aesthetic. Subject: a confident professional figure rendered as a stylized poster silhouette beside an upward growth chart simplified to bold poster shapes. Single dominant composition occupying 60-70% of the canvas (hero composition). Color behavior is restrained-corporate poster: off-white #F8F9FA carries the poster field (about 60%); deep navy #1E3A5F is the dominant flat poster ink for the figure and chart (about 33%); warm gold #D4AF37 is the second poster ink in one or two emphasis blocks totaling under 7%. Halftone dot transitions between color zones. Slight misregistration. No fourth ink. 12-20% inner safe-zone padding. No embedded text or poster lettering visible.",
|
||||
"alt_text": "Screen-print hero rendering: halftone poster of professional and growth chart in navy and gold on off-white with retro silkscreen feel",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "fantasy-animation.png",
|
||||
"purpose": "Rendering comparison — fantasy-animation",
|
||||
"aspect_ratio": "16:9",
|
||||
"prompt": "Hand-drawn animation style reminiscent of Studio Ghibli — soft warm linework, painted watercolor-style backgrounds, gentle character expression, storybook warmth, animated film look. Subject: a confident professional character drawn in animation style standing beside an upward growth chart rendered as part of a warm storybook scene. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is restrained-corporate softened for animation: soft off-white #F8F9FA painted background (about 60%); deep navy #1E3A5F appears as the character's clothing and dominant scene tone (about 30%); warm gold #D4AF37 appears as warm light glow and character highlights totaling about 10%. No clashing saturated colors. 12-20% inner safe-zone padding. No embedded text or letters visible.",
|
||||
"alt_text": "Fantasy-animation hero rendering: Ghibli-style professional and growth chart with navy clothing and warm gold light on soft off-white",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "pixel-art.png",
|
||||
"purpose": "Rendering comparison — pixel-art",
|
||||
"aspect_ratio": "16:9",
|
||||
"prompt": "8-bit pixel art aesthetic, blocky pixels with sharp pixel edges and no anti-aliasing, retro game feel, limited color palette per fill, deliberate jagged edges. Subject: a confident professional pixel character standing beside an upward growth chart rendered as a pixelated bar chart. Single dominant composition occupying 60-70% of the canvas (hero composition). Color behavior is restrained-corporate pixel: off-white #F8F9FA fills the background pixel field (about 60%); deep navy #1E3A5F is the dominant pixel color for the character and chart bars (about 33%); warm gold #D4AF37 appears as one or two small accent pixel clusters — a highlighted bar tip or pixel sparkle — under 7%. No fourth color. 12-20% inner safe-zone padding. No embedded pixel text or letters visible.",
|
||||
"alt_text": "Pixel-art hero rendering: 8-bit professional and bar chart in navy pixels on off-white with gold accent pixels",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "nature.png",
|
||||
"purpose": "Rendering comparison — nature",
|
||||
"aspect_ratio": "16:9",
|
||||
"prompt": "Organic earthy illustration with botanical details, hand-drawn natural forms, leaves and organic textures, slightly desaturated earthy line quality. Subject: a confident professional figure standing in a natural outdoor setting beside an upward growth chart formed organically from stylized plant shapes or rising leaves. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is restrained-corporate naturalized: soft off-white #F8F9FA carries the open natural breathing space (about 60%); deep navy #1E3A5F shifted slightly toward natural-darkened tone for the figure and organic forms (about 30%); warm gold #D4AF37 appears as small natural sun-detail pops — sunlit leaf tips, a small flower — totaling about 10%. Earth-toned, slightly desaturated. 12-20% inner safe-zone padding. No embedded text or letters.",
|
||||
"alt_text": "Nature hero rendering: professional in natural setting with organic growth chart in navy and earthy gold on off-white",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "minimalist-swiss.png",
|
||||
"purpose": "Rendering comparison — minimalist-swiss",
|
||||
"aspect_ratio": "16:9",
|
||||
"prompt": "Strict Swiss-grid minimalist composition with rigorous modular grid alignment, reduced geometric primitives (clean rectangles, perfect circles, single-weight lines), no decoration, no gradients, no shadows, generous aggressive whitespace. Subject: a stylized confident professional silhouette standing beside an upward growth chart reduced to a single straight diagonal line — both elements snapped to the grid. Single dominant composition occupying 60-70% of the canvas (hero composition), with deliberate negative space carrying as much weight as filled areas. Color behavior is restrained-corporate: secondary off-white #F8F9FA occupies 70% of the canvas as vast calm field; primary deep navy #1E3A5F carries the silhouette and chart line as flat solid block; accent gold #D4AF37 appears only as one thin horizontal rule or single small dot at a rule-of-thirds intersection, under 3%. No fourth color. 18-20% inner padding. No embedded text or labels.",
|
||||
"alt_text": "Minimalist-swiss hero rendering: gridded silhouette and chart line in deep navy on vast off-white field with single gold accent",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "glassmorphism.png",
|
||||
"purpose": "Rendering comparison — glassmorphism",
|
||||
"aspect_ratio": "16:9",
|
||||
"prompt": "Modern glassmorphism aesthetic with layered semi-transparent frosted-glass panels, thin 1px highlight strokes on panel top/left edges, large soft drop shadows (20% opacity, generous spread) for real depth, soft gradient background blurring through panels. Subject: a confident professional figure rendered as a clean solid silhouette inside the main frosted-glass panel, standing beside an upward growth chart shown as a polished glass card with crisp data marks. Single dominant composition occupying 60-70% of the canvas (hero composition). Color behavior is restrained-corporate glass: secondary off-white #F8F9FA forms the soft gradient field (about 60%); primary deep navy #1E3A5F carries the figure silhouette and chart data inside the glass panel (about 32%); accent gold #D4AF37 appears as one small focal indicator on the chart, under 5%. Polished, premium, futuristic-friendly. 12% inner safe-zone padding. No embedded text or labels.",
|
||||
"alt_text": "Glassmorphism hero rendering: frosted-glass panel with professional silhouette and chart in deep navy on soft off-white gradient with gold accent",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "vintage-poster.png",
|
||||
"purpose": "Rendering comparison — vintage-poster",
|
||||
"aspect_ratio": "16:9",
|
||||
"prompt": "Mid-century modern poster aesthetic with bold geometric shapes with rounded organic edges, slightly off-axis retro composition, halftone dot pattern at 12% opacity overlaying fills, subtle paper grain at 10% opacity, slight ink misregistration along edges suggesting screen-print authenticity, thick hand-aware lines. Subject: a stylized retro confident professional silhouette standing beside an upward growth chart shown as angular geometric bars, both in mid-century poster character. Single dominant composition occupying 60-70% of the canvas (hero composition). Color behavior is restrained-corporate in mid-century register: secondary off-white #F8F9FA (slightly toned toward warm paper) carries about 60% of the canvas; primary deep navy #1E3A5F forms the silhouette and bars as confident flat blocks with halftone overlay (about 32%); accent gold #D4AF37 appears as one small geometric circle or thin horizontal rule, under 8%. Three colors total. 12% inner padding. No embedded text or letters.",
|
||||
"alt_text": "Vintage-poster hero rendering: mid-century retro silhouette and angular bars in deep navy on warm off-white with gold geometric accent",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "paper-cut.png",
|
||||
"purpose": "Rendering comparison — paper-cut",
|
||||
"aspect_ratio": "16:9",
|
||||
"prompt": "Layered paper-cut craft aesthetic with crisp scissor-cut edges (slightly irregular, hand-aware, not mathematically perfect), soft 8-12% drop shadows under each cut-paper layer giving real tactile depth, paper grain at 12% opacity over each color sheet, no outlines anywhere (shapes defined by paper edges only). Subject: a confident professional figure built as layered paper cutouts standing beside an upward growth chart constructed as stacked paper rectangles of increasing height. Single dominant composition occupying 60-70% of the canvas (hero composition). Color behavior is restrained-corporate as paper: secondary off-white #F8F9FA forms the background paper sheet (about 60%); primary deep navy #1E3A5F is the dominant paper-layer color for the figure and chart bars (about 32%); accent gold #D4AF37 appears as one small cut paper detail — a bar tip highlight or a small paper-cut sun — under 8%. Each layer casts a soft 10% drop shadow. 12% inner padding. No embedded text or letters.",
|
||||
"alt_text": "Paper-cut hero rendering: layered paper silhouette and stacked paper bars in deep navy on off-white sheet with gold paper accent",
|
||||
"status": "Generated"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,351 @@
|
||||
# Image Generation Prompts
|
||||
|
||||
> Auto-generated from `image_prompts.json` by `image_gen.py --render-md`.
|
||||
> Do not hand-edit — re-run the command to refresh.
|
||||
|
||||
> Project: skills/ppt-master/references/ai-image-comparison/rendering
|
||||
> Generated: 2026-05-15
|
||||
> Color scheme: Primary #1E3A5F | Secondary #F8F9FA | Accent #D4AF37
|
||||
> Deck Style Anchor: Single subject hero composition, cool-corporate palette: secondary off-white #F8F9FA dominates background (60-70%), primary deep navy #1E3A5F carries main subject, accent gold #D4AF37 in small emphasis points only.
|
||||
|
||||
---
|
||||
|
||||
### Image 1: vector-illustration.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Rendering comparison — vector-illustration |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Clean flat vector illustration with bold geometric shapes, sharp edges, no gradients, no shadows, solid flat fills throughout. Subject: a confident professional standing beside an upward growth chart, looking forward. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is restrained-corporate: secondary off-white #F8F9FA occupies 60-70% of the canvas as calm breathing space; primary deep navy #1E3A5F carries the main subject in confident solid blocks; accent gold #D4AF37 appears only in one or two small emphasis points totaling under 5% of the area. No fourth color. 12-20% inner safe-zone padding around the subject. No embedded text labels, no HEX codes or color names visible in the image.
|
||||
|
||||
**Alt Text**:
|
||||
> Vector illustration hero rendering: confident professional beside growth chart, deep navy on off-white with gold accent
|
||||
|
||||
---
|
||||
|
||||
### Image 2: flat.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Rendering comparison — flat |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Modern flat design with crisp geometric blocks, slightly more decorative than pure vector, clean angular composition, solid flat fills, subtle 8%-opacity drop shadows allowed under layered blocks. Subject: a confident professional standing beside an upward growth chart, looking forward. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is restrained-corporate: secondary off-white #F8F9FA occupies 60-70% of the canvas as calm breathing space; primary deep navy #1E3A5F carries the main subject and dominant blocks; accent gold #D4AF37 appears only in one or two small emphasis points totaling under 5% of the area. No fourth color. 12-20% inner safe-zone padding. No embedded text labels, no HEX codes or color names visible.
|
||||
|
||||
**Alt Text**:
|
||||
> Flat design hero rendering: professional beside growth chart, geometric blocks in deep navy on off-white with gold accent
|
||||
|
||||
---
|
||||
|
||||
### Image 3: 3d-isometric.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Rendering comparison — 3d-isometric |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Isometric 3D rendering with axonometric perspective, subtle ambient shadows at 8% opacity, soft volumetric forms, slight gradient shading on lit faces. Subject: a confident professional standing beside an upward growth chart, looking forward — both subject and chart rendered as isometric 3D forms. Single dominant scene occupying 60-70% of the canvas (hero composition). Color behavior is restrained-corporate: secondary off-white #F8F9FA occupies 60-70% of the canvas as calm breathing space; primary deep navy #1E3A5F carries the main isometric forms; accent gold #D4AF37 appears only in one or two small emphasis points totaling under 5% of the area. No fourth color. 12-20% inner safe-zone padding. No embedded text labels, no HEX codes visible.
|
||||
|
||||
**Alt Text**:
|
||||
> 3D isometric hero rendering: isometric professional and growth chart in deep navy on off-white with gold accent
|
||||
|
||||
---
|
||||
|
||||
### Image 4: digital-dashboard.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Rendering comparison — digital-dashboard |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Polished UI dashboard aesthetic, screen-like surface with cards and chart elements, subtle drop shadows under cards, clean data-viz typography feel, modern SaaS look. Subject: a dashboard view dominated by an upward growth chart card with a confident professional avatar overlaid on the side. Single dominant composition occupying 60-70% of the canvas (hero composition). Color behavior is restrained-corporate dashboard: secondary off-white #F8F9FA dominates as the UI surface (about 70%); primary deep navy #1E3A5F carries the main chart bars and dominant card header; accent gold #D4AF37 reserved for one highlighted KPI marker totaling under 5%. Soft 8% drop shadows under cards. No fourth color. 12-20% inner safe-zone padding. No embedded text labels, no HEX codes visible.
|
||||
|
||||
**Alt Text**:
|
||||
> Digital dashboard hero rendering: growth chart UI card with professional avatar in deep navy on off-white with gold KPI
|
||||
|
||||
---
|
||||
|
||||
### Image 5: corporate-photo.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Rendering comparison — corporate-photo |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Editorial corporate photography, real human subject in modern office environment, natural soft window lighting, magazine-quality, slight depth of field, photo-realistic. Subject: a confident professional standing beside an upward growth chart projected on a screen or printed on a wall, looking forward. Single dominant subject occupying 60-70% of the canvas (hero composition). Color grading is restrained-corporate: muted off-white #F8F9FA tones in the environment dominate as calm breathing space (about 65%); deep navy #1E3A5F appears as the dominant clothing or screen tone of the subject area; warm gold #D4AF37 grade appears only as a small environmental accent — perhaps a metal detail or warm light glow — under 5% of the area. No saturated extra colors. 12-20% inner safe-zone padding around the subject. No embedded text in the image.
|
||||
|
||||
**Alt Text**:
|
||||
> Corporate photography hero rendering: real professional in modern office beside growth chart, navy and off-white grade with gold accent
|
||||
|
||||
---
|
||||
|
||||
### Image 6: blueprint.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Rendering comparison — blueprint |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Technical schematic blueprint style, fine grid background, monospace cues, drafting lines, blueprint annotation aesthetic with measurement marks and structural callout lines. Subject: a stylized blueprint of a confident professional figure standing beside a schematic upward growth chart, both rendered as engineering drawings with clean line weights. Single dominant composition occupying 60-70% of the canvas (hero composition). Color behavior is restrained-corporate blueprint: secondary off-white #F8F9FA carries the paper field with subtle grid (about 65%); primary deep navy #1E3A5F carries all schematic linework and the dominant figure outlines (about 28%); accent gold #D4AF37 appears only as one or two highlighted callout markers totaling under 5%. No fourth color. 12-20% inner safe-zone padding. No embedded text or measurement numbers as legible labels.
|
||||
|
||||
**Alt Text**:
|
||||
> Blueprint schematic hero rendering: technical drawing of professional and growth chart in deep navy on off-white with gold callouts
|
||||
|
||||
---
|
||||
|
||||
### Image 7: editorial.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Rendering comparison — editorial |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Magazine-style editorial infographic, refined typography hierarchy, balanced gutters, paper-grain texture at 8% opacity, deliberate negative space, considered composition with magazine-spread feel. Subject: a confident professional rendered as an editorial illustration standing beside an upward growth chart styled as a magazine data visualization. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is restrained editorial: secondary off-white #F8F9FA carries the magazine-paper field with subtle paper-grain (about 65%); primary deep navy #1E3A5F anchors the dominant figure and main chart block (about 28%); accent gold #D4AF37 appears as one thin horizontal rule and one small highlight marker totaling under 7%. No fourth color. 12-20% inner safe-zone padding. No embedded text or labels visible in the image.
|
||||
|
||||
**Alt Text**:
|
||||
> Editorial magazine hero rendering: professional and growth chart with magazine-spread feel, navy on cream-white with gold rule
|
||||
|
||||
---
|
||||
|
||||
### Image 8: sketch-notes.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Rendering comparison — sketch-notes |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Hand-drawn sketch-notes style on warm cream paper background, black ink outlines with slight wobble, pastel color fills with slight hand-painted overshoot beyond edges, organic hand-lettered feel, doodle aesthetic. Subject: a confident professional figure hand-drawn beside an upward growth chart sketched as a doodle with arrows and small annotation marks. Single dominant composition occupying 60-70% of the canvas (hero composition). Color behavior is restrained-corporate sketched: cream paper field #F8F9FA dominates (about 65%); primary deep navy #1E3A5F carries the main ink linework and dominant figure (about 28%); accent gold #D4AF37 appears as one highlighted hand-drawn arrow or doodle decoration totaling under 7%. No fourth color. 12-20% inner safe-zone padding. No embedded text or hand-lettered words visible.
|
||||
|
||||
**Alt Text**:
|
||||
> Sketch-notes hero rendering: hand-drawn professional and doodle growth chart on cream paper, navy ink with gold accent
|
||||
|
||||
---
|
||||
|
||||
### Image 9: ink-notes.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Rendering comparison — ink-notes |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Pure white background with sparse black ink drawing, hand-drawn linework, deliberate empty space, near-monochrome with one semantic accent color in 1-3 small focal points only. Subject: a confident professional figure hand-drawn in minimal black ink strokes beside an upward growth chart sketched with sparse confident lines. Single dominant composition occupying 60-70% of the canvas (hero composition). Color behavior is mono-ink shifted to the deck's HEX: pure white background (about 60%); deep navy #1E3A5F replaces the typical black ink for all linework and the dominant figure (about 33%); accent gold #D4AF37 appears as one small semantic emphasis dot or arrow totaling under 7%. No other colors. 12-20% inner safe-zone padding. No embedded text or words visible.
|
||||
|
||||
**Alt Text**:
|
||||
> Ink-notes hero rendering: minimal navy ink drawing of professional and growth chart on white with gold accent dot
|
||||
|
||||
---
|
||||
|
||||
### Image 10: chalkboard.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Rendering comparison — chalkboard |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Chalk drawing on a dark green chalkboard surface, white and pale chalk strokes with slight smudge texture, classroom feel, hand-drawn chalk linework. Subject: a confident professional figure drawn in white chalk beside an upward growth chart sketched in chalk strokes with arrows. Single dominant composition occupying 60-70% of the canvas (hero composition). Color behavior — chalkboard adapted to deck HEX: deep dark chalkboard surface dominates (about 65%); pale off-white chalk #F8F9FA renders all primary linework and the dominant figure (about 28%); warm gold chalk #D4AF37 appears only in one or two small highlights totaling under 7%. No fourth chalk color. 12-20% inner safe-zone padding. No embedded text or written words visible on the chalkboard.
|
||||
|
||||
**Alt Text**:
|
||||
> Chalkboard hero rendering: chalk drawing of professional and growth chart on dark green board with white chalk and gold accent
|
||||
|
||||
---
|
||||
|
||||
### Image 11: watercolor.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Rendering comparison — watercolor |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Painterly watercolor style with soft bleeding edges, organic color washes, slight paper grain, hand-painted brush feel, no hard outlines. Subject: a confident professional figure painted in watercolor beside an upward growth chart suggested through soft watercolor washes and brush strokes. Single dominant composition occupying 60-70% of the canvas (hero composition). Color behavior is restrained-corporate watercolor: soft off-white #F8F9FA paper field dominates (about 65%); deep navy #1E3A5F watercolor wash carries the main figure and chart with soft bleeding edges (about 28%); warm gold #D4AF37 watercolor highlights appear in one or two small concentrated wash spots totaling under 7%. No fourth pigment. 12-20% inner safe-zone padding. No embedded text or letters visible.
|
||||
|
||||
**Alt Text**:
|
||||
> Watercolor hero rendering: painted professional and growth chart with soft navy washes on off-white paper with gold highlights
|
||||
|
||||
---
|
||||
|
||||
### Image 12: warm-scene.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Rendering comparison — warm-scene |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Golden-hour cinematic warmth, soft directional sunlight from low angle, warm color grading throughout, atmospheric haze, lifestyle photography feel. Subject: a confident professional standing beside an upward growth chart bathed in warm golden-hour light, looking forward toward the light source. Single dominant subject occupying 60-70% of the canvas (hero composition). Color grading is restrained-corporate warmed: soft off-white #F8F9FA highlights carry the warmly lit field and atmospheric haze (about 60%); deep navy #1E3A5F appears in the shadowed clothing and shadowed side of the chart (about 30%); warm gold #D4AF37 grade carries the golden-hour light itself and rim lighting on the subject totaling about 10%. No saturated extra colors. 12-20% inner safe-zone padding. No embedded text in the image.
|
||||
|
||||
**Alt Text**:
|
||||
> Warm-scene hero rendering: cinematic golden-hour photo of professional and growth chart with navy shadows and gold light
|
||||
|
||||
---
|
||||
|
||||
### Image 13: screen-print.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Rendering comparison — screen-print |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Halftone screen-print poster art, limited flat colors, visible halftone dot pattern in transitional zones, slight color misregistration for silkscreen authenticity, retro poster aesthetic. Subject: a confident professional figure rendered as a stylized poster silhouette beside an upward growth chart simplified to bold poster shapes. Single dominant composition occupying 60-70% of the canvas (hero composition). Color behavior is restrained-corporate poster: off-white #F8F9FA carries the poster field (about 60%); deep navy #1E3A5F is the dominant flat poster ink for the figure and chart (about 33%); warm gold #D4AF37 is the second poster ink in one or two emphasis blocks totaling under 7%. Halftone dot transitions between color zones. Slight misregistration. No fourth ink. 12-20% inner safe-zone padding. No embedded text or poster lettering visible.
|
||||
|
||||
**Alt Text**:
|
||||
> Screen-print hero rendering: halftone poster of professional and growth chart in navy and gold on off-white with retro silkscreen feel
|
||||
|
||||
---
|
||||
|
||||
### Image 14: fantasy-animation.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Rendering comparison — fantasy-animation |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Hand-drawn animation style reminiscent of Studio Ghibli — soft warm linework, painted watercolor-style backgrounds, gentle character expression, storybook warmth, animated film look. Subject: a confident professional character drawn in animation style standing beside an upward growth chart rendered as part of a warm storybook scene. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is restrained-corporate softened for animation: soft off-white #F8F9FA painted background (about 60%); deep navy #1E3A5F appears as the character's clothing and dominant scene tone (about 30%); warm gold #D4AF37 appears as warm light glow and character highlights totaling about 10%. No clashing saturated colors. 12-20% inner safe-zone padding. No embedded text or letters visible.
|
||||
|
||||
**Alt Text**:
|
||||
> Fantasy-animation hero rendering: Ghibli-style professional and growth chart with navy clothing and warm gold light on soft off-white
|
||||
|
||||
---
|
||||
|
||||
### Image 15: pixel-art.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Rendering comparison — pixel-art |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
8-bit pixel art aesthetic, blocky pixels with sharp pixel edges and no anti-aliasing, retro game feel, limited color palette per fill, deliberate jagged edges. Subject: a confident professional pixel character standing beside an upward growth chart rendered as a pixelated bar chart. Single dominant composition occupying 60-70% of the canvas (hero composition). Color behavior is restrained-corporate pixel: off-white #F8F9FA fills the background pixel field (about 60%); deep navy #1E3A5F is the dominant pixel color for the character and chart bars (about 33%); warm gold #D4AF37 appears as one or two small accent pixel clusters — a highlighted bar tip or pixel sparkle — under 7%. No fourth color. 12-20% inner safe-zone padding. No embedded pixel text or letters visible.
|
||||
|
||||
**Alt Text**:
|
||||
> Pixel-art hero rendering: 8-bit professional and bar chart in navy pixels on off-white with gold accent pixels
|
||||
|
||||
---
|
||||
|
||||
### Image 16: nature.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Rendering comparison — nature |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Organic earthy illustration with botanical details, hand-drawn natural forms, leaves and organic textures, slightly desaturated earthy line quality. Subject: a confident professional figure standing in a natural outdoor setting beside an upward growth chart formed organically from stylized plant shapes or rising leaves. Single dominant subject occupying 60-70% of the canvas (hero composition). Color behavior is restrained-corporate naturalized: soft off-white #F8F9FA carries the open natural breathing space (about 60%); deep navy #1E3A5F shifted slightly toward natural-darkened tone for the figure and organic forms (about 30%); warm gold #D4AF37 appears as small natural sun-detail pops — sunlit leaf tips, a small flower — totaling about 10%. Earth-toned, slightly desaturated. 12-20% inner safe-zone padding. No embedded text or letters.
|
||||
|
||||
**Alt Text**:
|
||||
> Nature hero rendering: professional in natural setting with organic growth chart in navy and earthy gold on off-white
|
||||
|
||||
---
|
||||
|
||||
### Image 17: minimalist-swiss.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Rendering comparison — minimalist-swiss |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Strict Swiss-grid minimalist composition with rigorous modular grid alignment, reduced geometric primitives (clean rectangles, perfect circles, single-weight lines), no decoration, no gradients, no shadows, generous aggressive whitespace. Subject: a stylized confident professional silhouette standing beside an upward growth chart reduced to a single straight diagonal line — both elements snapped to the grid. Single dominant composition occupying 60-70% of the canvas (hero composition), with deliberate negative space carrying as much weight as filled areas. Color behavior is restrained-corporate: secondary off-white #F8F9FA occupies 70% of the canvas as vast calm field; primary deep navy #1E3A5F carries the silhouette and chart line as flat solid block; accent gold #D4AF37 appears only as one thin horizontal rule or single small dot at a rule-of-thirds intersection, under 3%. No fourth color. 18-20% inner padding. No embedded text or labels.
|
||||
|
||||
**Alt Text**:
|
||||
> Minimalist-swiss hero rendering: gridded silhouette and chart line in deep navy on vast off-white field with single gold accent
|
||||
|
||||
---
|
||||
|
||||
### Image 18: glassmorphism.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Rendering comparison — glassmorphism |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Modern glassmorphism aesthetic with layered semi-transparent frosted-glass panels, thin 1px highlight strokes on panel top/left edges, large soft drop shadows (20% opacity, generous spread) for real depth, soft gradient background blurring through panels. Subject: a confident professional figure rendered as a clean solid silhouette inside the main frosted-glass panel, standing beside an upward growth chart shown as a polished glass card with crisp data marks. Single dominant composition occupying 60-70% of the canvas (hero composition). Color behavior is restrained-corporate glass: secondary off-white #F8F9FA forms the soft gradient field (about 60%); primary deep navy #1E3A5F carries the figure silhouette and chart data inside the glass panel (about 32%); accent gold #D4AF37 appears as one small focal indicator on the chart, under 5%. Polished, premium, futuristic-friendly. 12% inner safe-zone padding. No embedded text or labels.
|
||||
|
||||
**Alt Text**:
|
||||
> Glassmorphism hero rendering: frosted-glass panel with professional silhouette and chart in deep navy on soft off-white gradient with gold accent
|
||||
|
||||
---
|
||||
|
||||
### Image 19: vintage-poster.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Rendering comparison — vintage-poster |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Mid-century modern poster aesthetic with bold geometric shapes with rounded organic edges, slightly off-axis retro composition, halftone dot pattern at 12% opacity overlaying fills, subtle paper grain at 10% opacity, slight ink misregistration along edges suggesting screen-print authenticity, thick hand-aware lines. Subject: a stylized retro confident professional silhouette standing beside an upward growth chart shown as angular geometric bars, both in mid-century poster character. Single dominant composition occupying 60-70% of the canvas (hero composition). Color behavior is restrained-corporate in mid-century register: secondary off-white #F8F9FA (slightly toned toward warm paper) carries about 60% of the canvas; primary deep navy #1E3A5F forms the silhouette and bars as confident flat blocks with halftone overlay (about 32%); accent gold #D4AF37 appears as one small geometric circle or thin horizontal rule, under 8%. Three colors total. 12% inner padding. No embedded text or letters.
|
||||
|
||||
**Alt Text**:
|
||||
> Vintage-poster hero rendering: mid-century retro silhouette and angular bars in deep navy on warm off-white with gold geometric accent
|
||||
|
||||
---
|
||||
|
||||
### Image 20: paper-cut.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Rendering comparison — paper-cut |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Layered paper-cut craft aesthetic with crisp scissor-cut edges (slightly irregular, hand-aware, not mathematically perfect), soft 8-12% drop shadows under each cut-paper layer giving real tactile depth, paper grain at 12% opacity over each color sheet, no outlines anywhere (shapes defined by paper edges only). Subject: a confident professional figure built as layered paper cutouts standing beside an upward growth chart constructed as stacked paper rectangles of increasing height. Single dominant composition occupying 60-70% of the canvas (hero composition). Color behavior is restrained-corporate as paper: secondary off-white #F8F9FA forms the background paper sheet (about 60%); primary deep navy #1E3A5F is the dominant paper-layer color for the figure and chart bars (about 32%); accent gold #D4AF37 appears as one small cut paper detail — a bar tip highlight or a small paper-cut sun — under 8%. Each layer casts a soft 10% drop shadow. 12% inner padding. No embedded text or letters.
|
||||
|
||||
**Alt Text**:
|
||||
> Paper-cut hero rendering: layered paper silhouette and stacked paper bars in deep navy on off-white sheet with gold paper accent
|
||||
|
||||
---
|
||||
@@ -0,0 +1,37 @@
|
||||
# Rendering Comparison Set
|
||||
|
||||
## Controlled variables
|
||||
|
||||
| Dimension | Value | Status |
|
||||
|---|---|---|
|
||||
| Rendering | **varies (20 styles)** | under comparison |
|
||||
| Palette | `cool-corporate` | fixed baseline |
|
||||
| Composition | single-subject hero — see [`image-generator.md`](../../image-generator.md) §4.1 Primitive A | fixed baseline |
|
||||
|
||||
## Subject
|
||||
|
||||
> A confident professional standing beside an upward growth chart, looking forward — single dominant subject occupying 60-70% of the canvas. This is the "single-subject hero" composition described as [`image-generator.md`](../../image-generator.md) §4.1 Primitive A, used here as a stable baseline because a single dominant subject makes rendering differences read most clearly.
|
||||
|
||||
## Baseline HEX (canonical cool-corporate values)
|
||||
|
||||
- Primary `#1E3A5F` deep navy (main subject)
|
||||
- Secondary `#F8F9FA` off-white (~60-70% breathing space)
|
||||
- Accent `#D4AF37` gold (< 5% emphasis)
|
||||
|
||||
## Naming convention
|
||||
|
||||
Each filename is `<rendering>.png`, matching the corresponding file under `references/image-renderings/`.
|
||||
|
||||
## Why fix single-subject hero + cool-corporate
|
||||
|
||||
- The single-subject hero composition (§4.1 Primitive A) makes rendering differences read most clearly — a single dominant subject is the most visually representative shape
|
||||
- `cool-corporate` has the most restrained color behavior — it does not visually overpower the rendering style being compared
|
||||
- Both are the most common "origin" choices in production, making this set the most stable comparison baseline
|
||||
|
||||
## How to read this set
|
||||
|
||||
Scan all 20 images side by side. Focus on:
|
||||
|
||||
- **Line quality** — hand-drawn vs vector vs photographic
|
||||
- **Surface material** — flat vs volumetric vs paper vs screen
|
||||
- **Emotional temperament** — restrained-professional vs warm-narrative vs retro-nostalgic
|
||||
|
After Width: | Height: | Size: 1010 KiB |
|
After Width: | Height: | Size: 1.6 MiB |
|
After Width: | Height: | Size: 1.0 MiB |
|
After Width: | Height: | Size: 908 KiB |
|
After Width: | Height: | Size: 1.5 MiB |
|
After Width: | Height: | Size: 1.6 MiB |
|
After Width: | Height: | Size: 912 KiB |
|
After Width: | Height: | Size: 1020 KiB |
|
After Width: | Height: | Size: 885 KiB |
|
After Width: | Height: | Size: 687 KiB |
|
After Width: | Height: | Size: 1.6 MiB |
|
After Width: | Height: | Size: 1.5 MiB |
|
After Width: | Height: | Size: 707 KiB |
|
After Width: | Height: | Size: 1.7 MiB |
|
After Width: | Height: | Size: 1.4 MiB |
|
After Width: | Height: | Size: 763 KiB |
|
After Width: | Height: | Size: 1.8 MiB |
|
After Width: | Height: | Size: 1.0 MiB |
|
After Width: | Height: | Size: 1.5 MiB |
@@ -0,0 +1,117 @@
|
||||
{
|
||||
"project": "skills/ppt-master/references/ai-image-comparison/type",
|
||||
"generated_at": "2026-05-15",
|
||||
"comparison_set": "type",
|
||||
"baseline": {
|
||||
"rendering": "vector-illustration",
|
||||
"palette": "cool-corporate",
|
||||
"subject_theme": "team scaling a business — collaboration, growth, structure"
|
||||
},
|
||||
"color_scheme": {
|
||||
"primary": "#1E3A5F",
|
||||
"secondary": "#F8F9FA",
|
||||
"accent": "#D4AF37"
|
||||
},
|
||||
"deck_style_anchor": "Vector-illustration rendering: clean flat vector with bold shapes, sharp edges, no gradients, no shadows. Cool-corporate palette: secondary off-white #F8F9FA dominates background (60-70%), primary deep navy #1E3A5F carries main forms, accent gold #D4AF37 in small emphasis points only.",
|
||||
"items": [
|
||||
{
|
||||
"filename": "infographic.png",
|
||||
"purpose": "Type comparison — infographic (2-5 ordered zones with icons + minimal labels)",
|
||||
"type": "infographic",
|
||||
"aspect_ratio": "4:3",
|
||||
"prompt": "Clean flat vector illustration, infographic composition with 4 evenly distributed ordered zones in a 2x2 grid, each zone containing one stylized icon and minimal supporting elements. Subject: 4 KPI zones representing team scaling — top-left a stylized people icon (team), top-right a stylized box icon (product), bottom-left a stylized handshake or person silhouette (customer), bottom-right an upward arrow icon (revenue growth). Each zone has clean spatial separation. Color behavior is restrained-corporate: secondary off-white #F8F9FA dominates the canvas and zone backgrounds (about 60%); primary deep navy #1E3A5F carries all 4 icon shapes and zone framing lines in confident solid fills (about 32%); accent gold #D4AF37 appears only on one highlighted KPI zone — perhaps a small accent dot or border on the revenue arrow — totaling under 8%. No fourth color. Icons should NOT contain readable text labels — pure pictographic icons only. No HEX codes visible.",
|
||||
"alt_text": "Infographic type: 2x2 grid of 4 KPI icon zones in deep navy on off-white with gold highlight on revenue zone",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "flowchart.png",
|
||||
"purpose": "Type comparison — flowchart (sequential blocks connected by arrows)",
|
||||
"type": "flowchart",
|
||||
"aspect_ratio": "21:9",
|
||||
"prompt": "Clean flat vector illustration, horizontal flowchart composition with 5 sequential blocks left-to-right connected by arrows. Subject: a 5-stage business scaling flow — block 1 a stylized lightbulb (idea), block 2 a stylized people group (team), block 3 a stylized box (product), block 4 a stylized person (customer), block 5 an upward arrow (growth). Each block separated by a clear directional arrow. Even horizontal rhythm. Color behavior is restrained-corporate: secondary off-white #F8F9FA dominates the canvas (about 65%); primary deep navy #1E3A5F carries all 5 block shapes, icons, and connecting arrows in confident solid fills (about 28%); accent gold #D4AF37 appears only on the final growth-stage block as the destination highlight — totaling under 7%. No fourth color. Icons should NOT contain readable text labels. No HEX codes visible.",
|
||||
"alt_text": "Flowchart type: 5 horizontal sequential blocks (idea→team→product→customer→growth) in deep navy on off-white with gold final block",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "framework.png",
|
||||
"purpose": "Type comparison — framework (central node + radiating satellites)",
|
||||
"type": "framework",
|
||||
"aspect_ratio": "1:1",
|
||||
"prompt": "Clean flat vector illustration, framework composition with one central node and 4 satellite nodes radiating outward, all connected to the center by clean lines. Subject: a stylized 'business' node at center (a small building or geometric core), with 4 satellite nodes around it — top a people group icon (team), right a box icon (product), bottom a person icon (customer), left an arrow icon (growth). Symmetrical radial balance. Color behavior is restrained-corporate: secondary off-white #F8F9FA dominates the canvas as breathing space between nodes (about 60%); primary deep navy #1E3A5F carries the central node, all 4 satellite nodes, and connecting lines in confident solid fills (about 32%); accent gold #D4AF37 appears only on the central business node as the focal anchor — totaling under 8%. No fourth color. Icons should NOT contain readable text labels. No HEX codes visible.",
|
||||
"alt_text": "Framework type: central business node with 4 radiating satellites (team/product/customer/growth) in deep navy on off-white with gold center",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "comparison.png",
|
||||
"purpose": "Type comparison — comparison (split composition, left vs right)",
|
||||
"type": "comparison",
|
||||
"aspect_ratio": "21:9",
|
||||
"prompt": "Clean flat vector illustration, split-screen comparison composition with a clear vertical division down the center, left side and right side showing contrasting states. Subject: a Before vs After business scaling comparison — left side shows a small isolated person figure with a single small box (small team / single product), right side shows a larger group of people with multiple boxes connected by arrows (scaled team / multiple products with growth). Visual weight balanced left and right. Color behavior is restrained-corporate: secondary off-white #F8F9FA dominates both halves as the field (about 60%); primary deep navy #1E3A5F carries all figures, boxes, and structural shapes on both sides in confident solid fills (about 32%); accent gold #D4AF37 appears only on the right (After) side as the highlight indicating the positive scaled state — totaling under 8%. No fourth color. No readable text labels. No HEX codes visible.",
|
||||
"alt_text": "Comparison type: split-screen left small team vs right scaled team in deep navy on off-white with gold accent on right",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "timeline.png",
|
||||
"purpose": "Type comparison — timeline (linear progression along an axis)",
|
||||
"type": "timeline",
|
||||
"aspect_ratio": "21:9",
|
||||
"prompt": "Clean flat vector illustration, horizontal timeline composition with a clear horizontal axis line spanning left to right, 4 evenly spaced milestone markers along the axis, each with a small icon above or below the axis. Subject: a 4-year business scaling timeline — Year 1 marker a stylized small person (founder), Year 2 a small team icon, Year 3 a larger team with product box, Year 4 a large team with multiple products and an upward arrow. Progressive scale increase along the axis. Color behavior is restrained-corporate: secondary off-white #F8F9FA dominates the canvas as breathing space (about 65%); primary deep navy #1E3A5F carries the axis line, all 4 milestone markers and icons in confident solid fills (about 28%); accent gold #D4AF37 appears only on the Year 4 final milestone as the destination highlight — totaling under 7%. No fourth color. No readable year-number text labels. No HEX codes visible.",
|
||||
"alt_text": "Timeline type: horizontal axis with 4 milestones (Y1→Y2→Y3→Y4 team scaling) in deep navy on off-white with gold final marker",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "scene.png",
|
||||
"purpose": "Type comparison — scene (atmospheric environment with narrative)",
|
||||
"type": "scene",
|
||||
"aspect_ratio": "4:3",
|
||||
"prompt": "Clean flat vector illustration, atmospheric scene composition with environmental context and a narrative moment captured. Subject: a team scaling moment — 4-5 people figures collaborating around a table in a stylized modern office environment, one figure pointing at a wall-mounted growth chart, soft window light suggested through stylized window shapes on one wall. Scene-level depth with foreground subjects and background environment. Color behavior is restrained-corporate: secondary off-white #F8F9FA dominates the environment — walls, window light, table surface (about 60%); primary deep navy #1E3A5F carries the figures, structural environment shapes, and the growth chart on the wall in confident solid fills (about 32%); accent gold #D4AF37 appears only as warm window light highlights and one or two small environment details totaling under 8%. No fourth color. No readable text on the wall chart or in the environment. No HEX codes visible.",
|
||||
"alt_text": "Scene type: team collaboration around a table with wall growth chart in modern office, deep navy on off-white with gold light",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "matrix.png",
|
||||
"purpose": "Type comparison — matrix (2×2 quadrant grid)",
|
||||
"type": "matrix",
|
||||
"aspect_ratio": "1:1",
|
||||
"prompt": "Clean flat vector illustration, 2×2 strategic matrix composition with two perpendicular axis lines crossing at exact canvas center dividing into four equal quadrants. Subject (under the 'team scaling' theme): a stylized growth-strategy quadrant — each quadrant holds one simple iconic symbol representing a scaling lever — upper-left a small team icon, upper-right a product icon, lower-left a customer icon, lower-right an upward growth arrow. Each quadrant has a subtle background tint. Color behavior is restrained-corporate: secondary off-white #F8F9FA fills the four quadrants as base field with slightly varying pale tints (about 65%); primary deep navy #1E3A5F draws the two perpendicular axis lines and all four iconic symbols in solid confident fills (about 30%); accent gold #D4AF37 appears as four small dots at the outer corners or as the highlighted lower-right growth-arrow tip, under 5%. No fourth color. NO axis labels, NO quadrant names, NO text of any kind. No HEX codes visible.",
|
||||
"alt_text": "Matrix type: 2x2 quadrant grid with four iconic symbols (team, product, customer, growth) in deep navy on pale off-white with gold corner dots",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "cycle.png",
|
||||
"purpose": "Type comparison — cycle (closed-loop process)",
|
||||
"type": "cycle",
|
||||
"aspect_ratio": "1:1",
|
||||
"prompt": "Clean flat vector illustration, closed-loop cycle composition with 4 step nodes arranged in a perfect circle at 12/3/6/9 o'clock positions on the canvas perimeter. Subject (under the 'team scaling' theme): a 4-step continuous scaling loop — node 1 a small team icon (BUILD), node 2 a product/box icon (SHIP), node 3 a customer icon (LEARN), node 4 a growth-up-arrow icon (SCALE) — curved directional arrows flowing clockwise between each node, the last arrow closing the loop back to node 1. The center holds one small focal dot. Color behavior is restrained-corporate: secondary off-white #F8F9FA fills the canvas as breathing field (about 60%); primary deep navy #1E3A5F draws the four rounded-square node frames and all icons in solid confident fills (about 32%); accent gold #D4AF37 carries the four curved directional arrows and the central focal dot, totaling under 8%. No fourth color. NO text or step labels — SVG will overlay labels externally. No HEX codes visible.",
|
||||
"alt_text": "Cycle type: 4-step closed loop (build→ship→learn→scale) with curved gold arrows around the circle, deep navy nodes on off-white",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "funnel.png",
|
||||
"purpose": "Type comparison — funnel (top-wide bottom-narrow conversion stack)",
|
||||
"type": "funnel",
|
||||
"aspect_ratio": "3:4",
|
||||
"prompt": "Clean flat vector illustration, vertical funnel composition with 4 horizontal bands stacked vertically, each band centered on the canvas vertical axis and ~20% narrower than the band above (visibly converging downward). Subject (under the 'team scaling' theme): a 4-stage scaling funnel — band 1 (top, widest) holds a megaphone-and-many-people icon (AWARENESS), band 2 a smaller group with handshake icon (INTEREST), band 3 a single team-around-table icon (ENGAGEMENT), band 4 (bottom, narrowest) a growth-arrow icon (CONVERSION). Color behavior is restrained-corporate: secondary off-white #F8F9FA fills the side margins around the narrowing bands as breathing space (about 60%); primary deep navy #1E3A5F carries the 4 band rectangles and the white iconic symbols inside in solid confident fills (about 33%); accent gold #D4AF37 appears as thin dividers between bands and the bottom-band emphasis (about 7%). No fourth color. NO band labels or text. No HEX codes visible.",
|
||||
"alt_text": "Funnel type: 4 narrowing bands (awareness→interest→engagement→conversion) in deep navy on off-white with gold dividers",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "pyramid.png",
|
||||
"purpose": "Type comparison — pyramid (bottom-wide top-narrow hierarchical tiers)",
|
||||
"type": "pyramid",
|
||||
"aspect_ratio": "3:4",
|
||||
"prompt": "Clean flat vector illustration, vertical pyramid composition with 4 horizontal stepped tiers stacked vertically, each tier centered on the canvas vertical axis and ~18% narrower than the tier below (visibly narrowing upward). Subject (under the 'team scaling' theme): a 4-tier capability hierarchy — tier 1 (foundation, widest) holds a foundation/bricks icon (CULTURE), tier 2 a team icon (TEAM), tier 3 a product/box icon (PRODUCT), tier 4 (apex, narrowest) a growth-star icon (GROWTH). Color behavior is restrained-corporate progression: secondary off-white #F8F9FA fills side margins as breathing space (about 60%); primary deep navy #1E3A5F at full strength for the foundation tier 1, lighter tints for tiers 2-3, and tier 4 carries accent gold #D4AF37 as the apex (total navy + tints about 32%, gold about 8%). Each tier holds a single white iconic symbol. NO tier labels or text. No HEX codes visible.",
|
||||
"alt_text": "Pyramid type: 4 narrowing-upward tiers (culture→team→product→growth) in deep navy progression with gold apex on off-white",
|
||||
"status": "Generated"
|
||||
},
|
||||
{
|
||||
"filename": "map.png",
|
||||
"purpose": "Type comparison — map (stylized geographic outline with annotated markers)",
|
||||
"type": "map",
|
||||
"aspect_ratio": "16:9",
|
||||
"prompt": "Clean flat vector illustration, stylized geographic map composition. Subject (under the 'team scaling' theme): a stylized world map showing global team expansion — simplified continental landmasses positioned with approximate geographic accuracy in solid silhouette (no country borders, no political subdivisions). Six small circular markers placed at major office locations — two in North America, two in Europe, one in East Asia, one in Australia — each marker with a thin pulsing-glow ring at 30% opacity. Two or three thin slightly-curved connection lines between markers suggesting team collaboration routes. Color behavior is restrained-corporate: secondary off-white #F8F9FA fills the ocean/negative space (about 62%); primary deep navy #1E3A5F is the solid silhouette for all continents (about 30%); accent gold #D4AF37 carries the six markers, their glow rings, and the connection arcs (about 8%). NO country names, city names, or any text. No HEX codes visible.",
|
||||
"alt_text": "Map type: stylized world with 6 gold office markers and connection arcs over deep navy continents on off-white ocean",
|
||||
"status": "Generated"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,209 @@
|
||||
# Image Generation Prompts
|
||||
|
||||
> Auto-generated from `image_prompts.json` by `image_gen.py --render-md`.
|
||||
> Do not hand-edit — re-run the command to refresh.
|
||||
|
||||
> Project: skills/ppt-master/references/ai-image-comparison/type
|
||||
> Generated: 2026-05-15
|
||||
> Color scheme: Primary #1E3A5F | Secondary #F8F9FA | Accent #D4AF37
|
||||
> Deck Style Anchor: Vector-illustration rendering: clean flat vector with bold shapes, sharp edges, no gradients, no shadows. Cool-corporate palette: secondary off-white #F8F9FA dominates background (60-70%), primary deep navy #1E3A5F carries main forms, accent gold #D4AF37 in small emphasis points only.
|
||||
|
||||
---
|
||||
|
||||
### Image 1: infographic.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Type comparison — infographic (2-5 ordered zones with icons + minimal labels) |
|
||||
| Type | infographic |
|
||||
| Aspect ratio | 4:3 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Clean flat vector illustration, infographic composition with 4 evenly distributed ordered zones in a 2x2 grid, each zone containing one stylized icon and minimal supporting elements. Subject: 4 KPI zones representing team scaling — top-left a stylized people icon (team), top-right a stylized box icon (product), bottom-left a stylized handshake or person silhouette (customer), bottom-right an upward arrow icon (revenue growth). Each zone has clean spatial separation. Color behavior is restrained-corporate: secondary off-white #F8F9FA dominates the canvas and zone backgrounds (about 60%); primary deep navy #1E3A5F carries all 4 icon shapes and zone framing lines in confident solid fills (about 32%); accent gold #D4AF37 appears only on one highlighted KPI zone — perhaps a small accent dot or border on the revenue arrow — totaling under 8%. No fourth color. Icons should NOT contain readable text labels — pure pictographic icons only. No HEX codes visible.
|
||||
|
||||
**Alt Text**:
|
||||
> Infographic type: 2x2 grid of 4 KPI icon zones in deep navy on off-white with gold highlight on revenue zone
|
||||
|
||||
---
|
||||
|
||||
### Image 2: flowchart.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Type comparison — flowchart (sequential blocks connected by arrows) |
|
||||
| Type | flowchart |
|
||||
| Aspect ratio | 21:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Clean flat vector illustration, horizontal flowchart composition with 5 sequential blocks left-to-right connected by arrows. Subject: a 5-stage business scaling flow — block 1 a stylized lightbulb (idea), block 2 a stylized people group (team), block 3 a stylized box (product), block 4 a stylized person (customer), block 5 an upward arrow (growth). Each block separated by a clear directional arrow. Even horizontal rhythm. Color behavior is restrained-corporate: secondary off-white #F8F9FA dominates the canvas (about 65%); primary deep navy #1E3A5F carries all 5 block shapes, icons, and connecting arrows in confident solid fills (about 28%); accent gold #D4AF37 appears only on the final growth-stage block as the destination highlight — totaling under 7%. No fourth color. Icons should NOT contain readable text labels. No HEX codes visible.
|
||||
|
||||
**Alt Text**:
|
||||
> Flowchart type: 5 horizontal sequential blocks (idea→team→product→customer→growth) in deep navy on off-white with gold final block
|
||||
|
||||
---
|
||||
|
||||
### Image 3: framework.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Type comparison — framework (central node + radiating satellites) |
|
||||
| Type | framework |
|
||||
| Aspect ratio | 1:1 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Clean flat vector illustration, framework composition with one central node and 4 satellite nodes radiating outward, all connected to the center by clean lines. Subject: a stylized 'business' node at center (a small building or geometric core), with 4 satellite nodes around it — top a people group icon (team), right a box icon (product), bottom a person icon (customer), left an arrow icon (growth). Symmetrical radial balance. Color behavior is restrained-corporate: secondary off-white #F8F9FA dominates the canvas as breathing space between nodes (about 60%); primary deep navy #1E3A5F carries the central node, all 4 satellite nodes, and connecting lines in confident solid fills (about 32%); accent gold #D4AF37 appears only on the central business node as the focal anchor — totaling under 8%. No fourth color. Icons should NOT contain readable text labels. No HEX codes visible.
|
||||
|
||||
**Alt Text**:
|
||||
> Framework type: central business node with 4 radiating satellites (team/product/customer/growth) in deep navy on off-white with gold center
|
||||
|
||||
---
|
||||
|
||||
### Image 4: comparison.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Type comparison — comparison (split composition, left vs right) |
|
||||
| Type | comparison |
|
||||
| Aspect ratio | 21:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Clean flat vector illustration, split-screen comparison composition with a clear vertical division down the center, left side and right side showing contrasting states. Subject: a Before vs After business scaling comparison — left side shows a small isolated person figure with a single small box (small team / single product), right side shows a larger group of people with multiple boxes connected by arrows (scaled team / multiple products with growth). Visual weight balanced left and right. Color behavior is restrained-corporate: secondary off-white #F8F9FA dominates both halves as the field (about 60%); primary deep navy #1E3A5F carries all figures, boxes, and structural shapes on both sides in confident solid fills (about 32%); accent gold #D4AF37 appears only on the right (After) side as the highlight indicating the positive scaled state — totaling under 8%. No fourth color. No readable text labels. No HEX codes visible.
|
||||
|
||||
**Alt Text**:
|
||||
> Comparison type: split-screen left small team vs right scaled team in deep navy on off-white with gold accent on right
|
||||
|
||||
---
|
||||
|
||||
### Image 5: timeline.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Type comparison — timeline (linear progression along an axis) |
|
||||
| Type | timeline |
|
||||
| Aspect ratio | 21:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Clean flat vector illustration, horizontal timeline composition with a clear horizontal axis line spanning left to right, 4 evenly spaced milestone markers along the axis, each with a small icon above or below the axis. Subject: a 4-year business scaling timeline — Year 1 marker a stylized small person (founder), Year 2 a small team icon, Year 3 a larger team with product box, Year 4 a large team with multiple products and an upward arrow. Progressive scale increase along the axis. Color behavior is restrained-corporate: secondary off-white #F8F9FA dominates the canvas as breathing space (about 65%); primary deep navy #1E3A5F carries the axis line, all 4 milestone markers and icons in confident solid fills (about 28%); accent gold #D4AF37 appears only on the Year 4 final milestone as the destination highlight — totaling under 7%. No fourth color. No readable year-number text labels. No HEX codes visible.
|
||||
|
||||
**Alt Text**:
|
||||
> Timeline type: horizontal axis with 4 milestones (Y1→Y2→Y3→Y4 team scaling) in deep navy on off-white with gold final marker
|
||||
|
||||
---
|
||||
|
||||
### Image 6: scene.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Type comparison — scene (atmospheric environment with narrative) |
|
||||
| Type | scene |
|
||||
| Aspect ratio | 4:3 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Clean flat vector illustration, atmospheric scene composition with environmental context and a narrative moment captured. Subject: a team scaling moment — 4-5 people figures collaborating around a table in a stylized modern office environment, one figure pointing at a wall-mounted growth chart, soft window light suggested through stylized window shapes on one wall. Scene-level depth with foreground subjects and background environment. Color behavior is restrained-corporate: secondary off-white #F8F9FA dominates the environment — walls, window light, table surface (about 60%); primary deep navy #1E3A5F carries the figures, structural environment shapes, and the growth chart on the wall in confident solid fills (about 32%); accent gold #D4AF37 appears only as warm window light highlights and one or two small environment details totaling under 8%. No fourth color. No readable text on the wall chart or in the environment. No HEX codes visible.
|
||||
|
||||
**Alt Text**:
|
||||
> Scene type: team collaboration around a table with wall growth chart in modern office, deep navy on off-white with gold light
|
||||
|
||||
---
|
||||
|
||||
### Image 7: matrix.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Type comparison — matrix (2×2 quadrant grid) |
|
||||
| Type | matrix |
|
||||
| Aspect ratio | 1:1 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Clean flat vector illustration, 2×2 strategic matrix composition with two perpendicular axis lines crossing at exact canvas center dividing into four equal quadrants. Subject (under the 'team scaling' theme): a stylized growth-strategy quadrant — each quadrant holds one simple iconic symbol representing a scaling lever — upper-left a small team icon, upper-right a product icon, lower-left a customer icon, lower-right an upward growth arrow. Each quadrant has a subtle background tint. Color behavior is restrained-corporate: secondary off-white #F8F9FA fills the four quadrants as base field with slightly varying pale tints (about 65%); primary deep navy #1E3A5F draws the two perpendicular axis lines and all four iconic symbols in solid confident fills (about 30%); accent gold #D4AF37 appears as four small dots at the outer corners or as the highlighted lower-right growth-arrow tip, under 5%. No fourth color. NO axis labels, NO quadrant names, NO text of any kind. No HEX codes visible.
|
||||
|
||||
**Alt Text**:
|
||||
> Matrix type: 2x2 quadrant grid with four iconic symbols (team, product, customer, growth) in deep navy on pale off-white with gold corner dots
|
||||
|
||||
---
|
||||
|
||||
### Image 8: cycle.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Type comparison — cycle (closed-loop process) |
|
||||
| Type | cycle |
|
||||
| Aspect ratio | 1:1 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Clean flat vector illustration, closed-loop cycle composition with 4 step nodes arranged in a perfect circle at 12/3/6/9 o'clock positions on the canvas perimeter. Subject (under the 'team scaling' theme): a 4-step continuous scaling loop — node 1 a small team icon (BUILD), node 2 a product/box icon (SHIP), node 3 a customer icon (LEARN), node 4 a growth-up-arrow icon (SCALE) — curved directional arrows flowing clockwise between each node, the last arrow closing the loop back to node 1. The center holds one small focal dot. Color behavior is restrained-corporate: secondary off-white #F8F9FA fills the canvas as breathing field (about 60%); primary deep navy #1E3A5F draws the four rounded-square node frames and all icons in solid confident fills (about 32%); accent gold #D4AF37 carries the four curved directional arrows and the central focal dot, totaling under 8%. No fourth color. NO text or step labels — SVG will overlay labels externally. No HEX codes visible.
|
||||
|
||||
**Alt Text**:
|
||||
> Cycle type: 4-step closed loop (build→ship→learn→scale) with curved gold arrows around the circle, deep navy nodes on off-white
|
||||
|
||||
---
|
||||
|
||||
### Image 9: funnel.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Type comparison — funnel (top-wide bottom-narrow conversion stack) |
|
||||
| Type | funnel |
|
||||
| Aspect ratio | 3:4 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Clean flat vector illustration, vertical funnel composition with 4 horizontal bands stacked vertically, each band centered on the canvas vertical axis and ~20% narrower than the band above (visibly converging downward). Subject (under the 'team scaling' theme): a 4-stage scaling funnel — band 1 (top, widest) holds a megaphone-and-many-people icon (AWARENESS), band 2 a smaller group with handshake icon (INTEREST), band 3 a single team-around-table icon (ENGAGEMENT), band 4 (bottom, narrowest) a growth-arrow icon (CONVERSION). Color behavior is restrained-corporate: secondary off-white #F8F9FA fills the side margins around the narrowing bands as breathing space (about 60%); primary deep navy #1E3A5F carries the 4 band rectangles and the white iconic symbols inside in solid confident fills (about 33%); accent gold #D4AF37 appears as thin dividers between bands and the bottom-band emphasis (about 7%). No fourth color. NO band labels or text. No HEX codes visible.
|
||||
|
||||
**Alt Text**:
|
||||
> Funnel type: 4 narrowing bands (awareness→interest→engagement→conversion) in deep navy on off-white with gold dividers
|
||||
|
||||
---
|
||||
|
||||
### Image 10: pyramid.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Type comparison — pyramid (bottom-wide top-narrow hierarchical tiers) |
|
||||
| Type | pyramid |
|
||||
| Aspect ratio | 3:4 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Clean flat vector illustration, vertical pyramid composition with 4 horizontal stepped tiers stacked vertically, each tier centered on the canvas vertical axis and ~18% narrower than the tier below (visibly narrowing upward). Subject (under the 'team scaling' theme): a 4-tier capability hierarchy — tier 1 (foundation, widest) holds a foundation/bricks icon (CULTURE), tier 2 a team icon (TEAM), tier 3 a product/box icon (PRODUCT), tier 4 (apex, narrowest) a growth-star icon (GROWTH). Color behavior is restrained-corporate progression: secondary off-white #F8F9FA fills side margins as breathing space (about 60%); primary deep navy #1E3A5F at full strength for the foundation tier 1, lighter tints for tiers 2-3, and tier 4 carries accent gold #D4AF37 as the apex (total navy + tints about 32%, gold about 8%). Each tier holds a single white iconic symbol. NO tier labels or text. No HEX codes visible.
|
||||
|
||||
**Alt Text**:
|
||||
> Pyramid type: 4 narrowing-upward tiers (culture→team→product→growth) in deep navy progression with gold apex on off-white
|
||||
|
||||
---
|
||||
|
||||
### Image 11: map.png
|
||||
|
||||
| Attribute | Value |
|
||||
|---|---|
|
||||
| Purpose | Type comparison — map (stylized geographic outline with annotated markers) |
|
||||
| Type | map |
|
||||
| Aspect ratio | 16:9 |
|
||||
| Status | Generated |
|
||||
|
||||
**Prompt**:
|
||||
|
||||
Clean flat vector illustration, stylized geographic map composition. Subject (under the 'team scaling' theme): a stylized world map showing global team expansion — simplified continental landmasses positioned with approximate geographic accuracy in solid silhouette (no country borders, no political subdivisions). Six small circular markers placed at major office locations — two in North America, two in Europe, one in East Asia, one in Australia — each marker with a thin pulsing-glow ring at 30% opacity. Two or three thin slightly-curved connection lines between markers suggesting team collaboration routes. Color behavior is restrained-corporate: secondary off-white #F8F9FA fills the ocean/negative space (about 62%); primary deep navy #1E3A5F is the solid silhouette for all continents (about 30%); accent gold #D4AF37 carries the six markers, their glow rings, and the connection arcs (about 8%). NO country names, city names, or any text. No HEX codes visible.
|
||||
|
||||
**Alt Text**:
|
||||
> Map type: stylized world with 6 gold office markers and connection arcs over deep navy continents on off-white ocean
|
||||
|
||||
---
|
||||
@@ -0,0 +1,68 @@
|
||||
# Type Comparison Set
|
||||
|
||||
## Controlled variables
|
||||
|
||||
| Dimension | Value | Status |
|
||||
|---|---|---|
|
||||
| Type | **varies (11 types)** | under comparison |
|
||||
| Rendering | `vector-illustration` | fixed baseline |
|
||||
| Palette | `cool-corporate` | fixed baseline |
|
||||
|
||||
> The 11 types here are the **internal geometric skeletons** for `page_role: local` infographic blocks. `page_role: hero_page` images don't pick a type — they use the four composition primitives in [`image-generator.md`](../../image-generator.md) §4.1 instead (single-subject / portrait / typographic / atmospheric), so they don't appear in this comparison set.
|
||||
|
||||
## Subject theme
|
||||
|
||||
> "Team scaling a business — collaboration, growth, structure"
|
||||
|
||||
This abstract theme is chosen deliberately. Each type interprets it through a **completely different composition**, which is precisely the value of the type comparison:
|
||||
|
||||
| Type | How the same theme renders under this type |
|
||||
|---|---|
|
||||
| infographic | Four KPI zones: team / product / customer / revenue |
|
||||
| flowchart | Sequential arrows: idea → team → product → customer → growth |
|
||||
| framework | Central business node + 4 radiating satellites (team / product / customer / growth) |
|
||||
| matrix | 2×2 quadrant grid with team / product / customer / growth icons |
|
||||
| cycle | Closed-loop: build → ship → learn → scale, arrows returning to start |
|
||||
| funnel | 4 narrowing bands: awareness → interest → engagement → conversion |
|
||||
| pyramid | 4 narrowing-upward tiers: culture → team → product → growth |
|
||||
| comparison | Split: small team vs scaled team (before / after) |
|
||||
| timeline | Time axis: Year 1 → Year 2 → Year 3 → Year 5 |
|
||||
| map | Stylized world map with office markers and collaboration arcs |
|
||||
| scene | Narrative scene of team collaboration in a meeting room |
|
||||
|
||||
## Baseline HEX (cool-corporate)
|
||||
|
||||
- Primary `#1E3A5F` deep navy
|
||||
- Secondary `#F8F9FA` off-white
|
||||
- Accent `#D4AF37` gold
|
||||
|
||||
## Aspect ratios
|
||||
|
||||
Each type uses its own "natural container shape" (see the default container table in `image-type-templates/_index.md`):
|
||||
|
||||
| Type | Aspect ratio | Container character |
|
||||
|---|---|---|
|
||||
| infographic | 4:3 | Square-ish info block |
|
||||
| flowchart | 21:9 | Horizontal banner |
|
||||
| framework | 1:1 | Square radial |
|
||||
| matrix | 1:1 | Square quadrant grid |
|
||||
| cycle | 1:1 | Square closed loop |
|
||||
| funnel | 3:4 | Portrait converging-down stack |
|
||||
| pyramid | 3:4 | Portrait converging-up tiers |
|
||||
| comparison | 21:9 | Wide split banner |
|
||||
| timeline | 21:9 | Long horizontal axis |
|
||||
| map | 16:9 | Wide geographic frame |
|
||||
| scene | 4:3 | Scene-format frame |
|
||||
|
||||
## Naming convention
|
||||
|
||||
Each filename is `<type>.png`, matching the corresponding file under `references/image-type-templates/`.
|
||||
|
||||
## How to read this set
|
||||
|
||||
Scan all 11 images side by side. Focus on:
|
||||
|
||||
- **Internal composition skeleton** — central / sequential / radiating / symmetrical / tiled / axis-aligned
|
||||
- **Subject density and distribution**
|
||||
- **Visual relationships between elements** — connecting / parallel / nested / progressive
|
||||
- **Intuitive use-case fit** — which best fits "process content", "comparison content", "data content"
|
||||
|
After Width: | Height: | Size: 602 KiB |
|
After Width: | Height: | Size: 806 KiB |
|
After Width: | Height: | Size: 584 KiB |
|
After Width: | Height: | Size: 764 KiB |
|
After Width: | Height: | Size: 708 KiB |
|
After Width: | Height: | Size: 626 KiB |
|
After Width: | Height: | Size: 862 KiB |
|
After Width: | Height: | Size: 806 KiB |
|
After Width: | Height: | Size: 627 KiB |
|
After Width: | Height: | Size: 807 KiB |
|
After Width: | Height: | Size: 568 KiB |
@@ -0,0 +1,163 @@
|
||||
# Page Transitions & Per-Element Animations
|
||||
|
||||
PPT Master's exported PPTX supports **page transitions** (slide-to-slide) and **per-element entrance animations** (within a slide). Both are controlled by `svg_to_pptx.py` CLI flags and ship as real OOXML — they animate inside PowerPoint and Keynote, no embedded video.
|
||||
|
||||
## Defaults
|
||||
|
||||
| Layer | Default | Why |
|
||||
|---|---|---|
|
||||
| Page transition | `fade`, 0.4s | Calm baseline that suits most decks |
|
||||
| Per-element animation | `auto` effect + `after-previous` trigger, 0.4s duration + 0.5s stagger | Effects are mapped from group id (chart→wipe, card-/step-/pillar-→fly, title/takeaway→fade); image-like ids (`hero` / `figure-` / `image` / `img-` / `kpi`) cycle a richer visual pool (zoom / dissolve / circle / box / diamond / wheel) so multiple images vary across the deck; unmatched ids cycle a small fade/wipe/fly/zoom pool. Cascades automatically on slide entry — zero interaction |
|
||||
|
||||
To regenerate a deck with different settings, rerun `svg_to_pptx.py` against the same `svg_output/` (or `svg_final/`) — no need to rerun the LLM. To turn per-element animation off entirely, pass `-a none`.
|
||||
|
||||
## Custom Object-Level Animation
|
||||
|
||||
Default animation is global. When a deck needs specific object timing — for example title first, chart second, annotation last — use the optional `animations.json` sidecar. The SVG remains static visual source; the sidecar only controls PPTX export behavior.
|
||||
|
||||
Run the standalone [`customize-animations`](../workflows/customize-animations.md) workflow when the user asks to tune animation order, effects, timing, or object-level reveals.
|
||||
|
||||
```bash
|
||||
# Build an editable scaffold from real top-level <g id> anchors
|
||||
python3 skills/ppt-master/scripts/animation_config.py scaffold <project>
|
||||
|
||||
# Validate references before export
|
||||
python3 skills/ppt-master/scripts/animation_config.py validate <project>
|
||||
|
||||
# Export reads <project>/animations.json automatically when present
|
||||
python3 skills/ppt-master/scripts/svg_to_pptx.py <project>
|
||||
```
|
||||
|
||||
Minimal sidecar:
|
||||
|
||||
```json
|
||||
{
|
||||
"version": 1,
|
||||
"slides": {
|
||||
"03_market": {
|
||||
"groups": {
|
||||
"title": { "effect": "fade", "order": 1 },
|
||||
"chart": { "effect": "wipe", "order": 2, "duration": 0.6 },
|
||||
"insight": { "effect": "fly", "order": 3, "delay": 0.2 },
|
||||
"footer": { "effect": "none" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Rules:
|
||||
|
||||
- `slides` keys match SVG stems (`03_market.svg` → `03_market`).
|
||||
- `groups` keys match top-level `<g id="...">` anchors.
|
||||
- `effect: none` removes that group from the entrance sequence.
|
||||
- `order` changes animation order only; it does not change slide layering.
|
||||
- `delay` is seconds before that group starts in `after-previous` mode.
|
||||
- `duration` overrides the per-group entrance duration.
|
||||
- `--animation none` overrides the sidecar and disables all per-element animation.
|
||||
|
||||
## Page Transitions
|
||||
|
||||
```bash
|
||||
# Pick a different effect
|
||||
python3 skills/ppt-master/scripts/svg_to_pptx.py <project> -t push --transition-duration 0.6
|
||||
|
||||
# Disable
|
||||
python3 skills/ppt-master/scripts/svg_to_pptx.py <project> -t none
|
||||
|
||||
# Auto-advance every 5 seconds (kiosk-style playback)
|
||||
python3 skills/ppt-master/scripts/svg_to_pptx.py <project> --auto-advance 5
|
||||
```
|
||||
|
||||
Available effects: `fade`, `push`, `wipe`, `split`, `strips`, `cover`, `random`.
|
||||
|
||||
Flags:
|
||||
|
||||
- `-t/--transition` — effect name, or `none` to disable. Default: `fade`.
|
||||
- `--transition-duration` — seconds, default `0.4`.
|
||||
- `--auto-advance` — seconds; omit for presenter-controlled advance.
|
||||
|
||||
## Per-Element Animations
|
||||
|
||||
Enabled by default (`auto` effect + `after-previous` trigger). Three Start modes are available — these mirror PowerPoint's animation-pane "Start" dropdown:
|
||||
|
||||
- **`on-click`** — entering a slide → first click reveals the first semantic group; each subsequent click reveals the next group in z-order. Suits live presentations where the speaker paces reveals. Forbidden with `--recorded-narration` because video-ready exports need click-free playback.
|
||||
- **`with-previous`** — all groups start together on slide entry, playing their entrance animation in parallel. Stagger ignored.
|
||||
- **`after-previous`** (default) — first group fires on slide entry, subsequent groups cascade after the previous one finishes, with `--animation-stagger` extra spacing. Suits kiosk playback, recorded walkthroughs, or anyone who wants visual flow without clicking.
|
||||
|
||||
```bash
|
||||
# Default behavior (no flags needed): auto effect + after-previous cascade
|
||||
python3 skills/ppt-master/scripts/svg_to_pptx.py <project>
|
||||
|
||||
# Disable per-element animation entirely
|
||||
python3 skills/ppt-master/scripts/svg_to_pptx.py <project> -a none
|
||||
|
||||
# Use a single effect (still cascades via the default after-previous trigger)
|
||||
python3 skills/ppt-master/scripts/svg_to_pptx.py <project> --animation fade
|
||||
|
||||
# Switch to on-click for live presentations (presenter controls pacing)
|
||||
python3 skills/ppt-master/scripts/svg_to_pptx.py <project> --animation-trigger on-click
|
||||
|
||||
# Custom pacing
|
||||
python3 skills/ppt-master/scripts/svg_to_pptx.py <project> --animation mixed \
|
||||
--animation-stagger 0.7 --animation-duration 0.5
|
||||
|
||||
# All groups animate in unison on slide entry
|
||||
python3 skills/ppt-master/scripts/svg_to_pptx.py <project> --animation-trigger with-previous
|
||||
```
|
||||
|
||||
22 single effects: `appear`, `fade`, `fly`, `cut`, `zoom`, `wipe`, `split`, `blinds`, `checkerboard`, `dissolve`, `random_bars`, `peek`, `wheel`, `box`, `circle`, `diamond`, `plus`, `strips`, `wedge`, `stretch`, `expand`, `swivel`. Plus three auto-vary modes:
|
||||
|
||||
- `auto` (default) — map effect from the group's SVG id. Information-dense elements get a single stable effect: `chart` / `table` / `legend` / `timeline` / `track` → `wipe`; `card-*` / `pillar-*` / `item-*` / `step-*` / `stage-*` / `tier-*` / `principle-*` → `fly`; `title` / `chapter-*` / `section-*` / `cover-*` / `tagline` / `subtitle` → `fade`; `takeaway` / `callout` / `quote` / `source` / `conclusion` / `note` → `fade`. Image-like ids `hero` / `figure-*` / `image` / `img-*` / `kpi` instead cycle a richer visual pool (`zoom` / `dissolve` / `circle` / `box` / `diamond` / `wheel`) so multiple images vary across the deck. Unmatched ids cycle through `fade` / `wipe` / `fly` / `zoom`.
|
||||
- `mixed` (legacy) — deterministic. The first animated group on each slide uses `fade`; later groups cycle through a 16-effect pool (`blinds` / `checkerboard` / `dissolve` / `fly` / `cut` / `random_bars` / `box` / `split` / `strips` / `wedge` / `wheel` / `wipe` / `expand` / `fade` / `swivel` / `zoom`) across the deck. Kept for backward compatibility.
|
||||
- `random` — samples from the legacy 16-effect pool.
|
||||
|
||||
`appear` is excluded from every variation pool because it has no visible motion.
|
||||
|
||||
Flags:
|
||||
|
||||
- `-a/--animation` — effect name, `auto`, `mixed`, `random`, or `none`. Default: `auto`.
|
||||
- `--animation-trigger` — Start mode (matches PowerPoint): `on-click`, `with-previous`, or `after-previous` (default).
|
||||
- `--animation-duration` — per-element entrance seconds, default `0.4`.
|
||||
- `--animation-stagger` — gap between elements in `after-previous` mode (seconds, default `0.5`). Ignored otherwise.
|
||||
- `--animation-config` — sidecar path. Default: `<project>/animations.json` when present.
|
||||
|
||||
> Note: `--recorded-narration` rejects `on-click`; use `after-previous` or `with-previous` for video-ready narrated decks.
|
||||
|
||||
## Anchor Logic — Top-Level `<g id="...">`
|
||||
|
||||
Per-element animations are anchored on **top-level `<g id="...">` content groups** in the SVG (e.g. `<g id="cover-title">`, `<g id="card-1">`). One group = one click reveal.
|
||||
|
||||
Aim for **3–8 content groups per slide**. This is also the granularity PowerPoint uses for group-select / group-move, so it improves editing ergonomics regardless of animation.
|
||||
|
||||
**Chrome groups skip the cascade automatically.** Top-level groups that look like page chrome (background, header/footer, decorations, watermark, page number, nav, logo, dividing rule) are excluded from the click sequence and appear together with the slide. Detection is done on the `id`: after splitting on `-` and `_`, if any token matches `background` / `bg` / `decoration` / `decorations` / `decor` / `header` / `footer` / `chrome` / `watermark` / `pagenumber` / `pagenum` / `nav` / `logo` / `rule`, the group is treated as chrome. Examples that auto-skip: `<g id="background">`, `<g id="bg-texture">`, `<g id="cover-footer">`, `<g id="p03-header">`, `<g id="bottom-decor">`, `<g id="watermark">`, `<g id="nav">`, `<g id="logo-area">`, `<g id="column-rule">`. Examples that still animate: `<g id="card-1">`, `<g id="cover-title">`, `<g id="step-discover">`, `<g id="timeline-track">`. Don't strip the `<g>` wrapper to avoid animation — keep it (PowerPoint group-select needs it) and just name it appropriately.
|
||||
|
||||
**Fallback for flat SVGs** (no top-level `<g>` wrappers, only raw `<rect>` / `<text>` / `<path>` at the root):
|
||||
|
||||
- ≤ 8 visible top-level primitives → each becomes one anchor (capped to avoid 70+ atom cascades on dense pages).
|
||||
- > 8 → animation is skipped on that slide. The slide still renders, just without entrance animation.
|
||||
|
||||
Executors should wrap logical sections in `<g id>` regardless of whether you plan to animate. The Executor reference (`skills/ppt-master/references/shared-standards.md`) requires it.
|
||||
|
||||
## Limitations
|
||||
|
||||
- **Native shapes mode only.** Per-element animation needs editable shape anchors. `--only legacy` produces one image per slide and has no element granularity to animate; that mode is unaffected by `-a/--animation` and only honors `-t/--transition`.
|
||||
- **Office version drift on element animations.** Effects use the `<p:animEffect filter=...>` path (vs. `presetID` lookup tables) to stay stable across Office versions. Most filters render identically in PowerPoint 2016+; older Office may downgrade some filters to plain Appear.
|
||||
- **PNG fallback (compat mode) is for visual rendering only.** Transitions and animations live in the slide XML, not in the PNG, so disabling compat mode does not affect either layer.
|
||||
|
||||
## Quick Reference
|
||||
|
||||
| Goal | Command |
|
||||
|---|---|
|
||||
| Disable transitions | `-t none` |
|
||||
| Change transition effect | `-t push` (or any from the list above) |
|
||||
| Slower transition | `--transition-duration 0.8` |
|
||||
| Auto-play | `--auto-advance 5` |
|
||||
| Disable element animation | `-a none` |
|
||||
| Switch to on-click trigger | `--animation-trigger on-click` |
|
||||
| Use a single effect instead of auto | `--animation fade` |
|
||||
| All groups animate together | `--animation-trigger with-previous` |
|
||||
| Slower per-element reveal | `--animation-duration 0.5` |
|
||||
| Wider gap in after-previous | `--animation-stagger 0.7` |
|
||||
|
||||
See also: [`scripts/docs/svg-pipeline.md`](../scripts/docs/svg-pipeline.md) for the full `svg_to_pptx.py` reference.
|
||||
@@ -0,0 +1,73 @@
|
||||
# Canvas Format Specification
|
||||
|
||||
> See shared-standards.md for SVG basic rules.
|
||||
|
||||
## Format Quick Reference
|
||||
|
||||
| Format | viewBox | Ratio | Use Case |
|
||||
|--------|---------|-------|----------|
|
||||
| PPT 16:9 | `0 0 1280 720` | 16:9 | Business presentations, meetings |
|
||||
| PPT 4:3 | `0 0 1024 768` | 4:3 | Traditional projectors, academic talks |
|
||||
| Xiaohongshu (RED) | `0 0 1242 1660` | 3:4 | Image-text sharing, knowledge posts |
|
||||
| WeChat Moments / IG | `0 0 1080 1080` | 1:1 | Square posters, brand showcases |
|
||||
| Story / TikTok | `0 0 1080 1920` | 9:16 | Vertical stories, short video covers |
|
||||
| WeChat Article Header | `0 0 900 383` | 2.35:1 | WeChat article cover images |
|
||||
| Landscape Banner | `0 0 1920 1080` | 16:9 | Web banners, digital screens |
|
||||
| Portrait Poster | `0 0 1080 1920` | 9:16 | Phone screens, elevator ads |
|
||||
| A4 Print | `0 0 1240 1754` | 1:sqrt(2) | Print posters, flyers |
|
||||
|
||||
## Format Selection Decision Tree
|
||||
|
||||
```
|
||||
Content purpose?
|
||||
├── Presentation
|
||||
│ ├── Modern devices → PPT 16:9 (1280x720)
|
||||
│ └── Traditional devices → PPT 4:3 (1024x768)
|
||||
├── Social sharing
|
||||
│ ├── Xiaohongshu (RED) → 1242x1660
|
||||
│ ├── WeChat Moments / IG → 1080x1080
|
||||
│ └── Story / TikTok → 1080x1920
|
||||
└── Marketing materials
|
||||
├── WeChat Article Header → 900x383
|
||||
├── Banner → 1920x1080
|
||||
└── Print → 1240x1754
|
||||
```
|
||||
|
||||
## Layout Principles
|
||||
|
||||
### Landscape (16:9, 4:3, 2.35:1)
|
||||
- Visual flow: Z-pattern, left to right
|
||||
- Margins: 40-80px
|
||||
- Layouts: multi-column, left-right split, grid
|
||||
- Card dimensions (16:9): single-row 530-600px, double-row 265-295px
|
||||
|
||||
### Portrait (3:4, 9:16)
|
||||
- Visual flow: top to bottom
|
||||
- Margins: 60-120px
|
||||
- Layouts: single-column, top-bottom split, card stacking
|
||||
- Card dimensions (3:4): height 400-600px, gap 40-60px
|
||||
|
||||
### Square (1:1)
|
||||
- Visual flow: center-radiating
|
||||
- Margins: 60-100px
|
||||
- Core area: ~800x800px
|
||||
|
||||
## Format-specific Design
|
||||
|
||||
| Format | Title Area | Content Area | Special Notes |
|
||||
|--------|-----------|--------------|---------------|
|
||||
| PPT | 80-100px | Full width utilization | Page number bottom-right |
|
||||
| Xiaohongshu (RED) | 180-240px (bold) | Generous top/bottom whitespace | Brand area at bottom 120-160px |
|
||||
| WeChat Moments | 200-280px | Center 500-600px | QR code area at bottom 150-200px |
|
||||
| Story | — | Middle 1500px | Top safe zone 120px, bottom 180px |
|
||||
| WeChat Article Header | Center/left-aligned 48-72px | — | Image on right or as background |
|
||||
|
||||
## ViewBox Examples
|
||||
|
||||
```xml
|
||||
<svg width="1280" height="720" viewBox="0 0 1280 720"> <!-- PPT 16:9 -->
|
||||
<svg width="1242" height="1660" viewBox="0 0 1242 1660"> <!-- Xiaohongshu -->
|
||||
<svg width="1080" height="1080" viewBox="0 0 1080 1080"> <!-- WeChat Moments -->
|
||||
<svg width="1080" height="1920" viewBox="0 0 1080 1920"> <!-- Story -->
|
||||
<svg width="900" height="383" viewBox="0 0 900 383"> <!-- WeChat Article Header -->
|
||||
```
|
||||
@@ -0,0 +1,424 @@
|
||||
# Executor Common Guidelines
|
||||
|
||||
> Style-specific content is in the corresponding `executor-{style}.md`. Technical constraints are in shared-standards.md.
|
||||
|
||||
---
|
||||
|
||||
## 1. Template Adherence Rules
|
||||
|
||||
### 1.0 Pre-generation Batch Read
|
||||
|
||||
**Hard rule**: Before the first SVG page, batch-read every template SVG this deck will reference. Read once up front, never re-read during generation.
|
||||
|
||||
| Source list | Read path |
|
||||
|---|---|
|
||||
| Chosen template's `design_spec.md` (read frontmatter to detect `replication_mode`) | `templates/<chosen_template>/design_spec.md` |
|
||||
| Every distinct `<basename>` in `spec_lock.md page_layouts` | `templates/<chosen_template>/<basename>.svg` |
|
||||
| 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**:
|
||||
- Layout SVG already loaded in this batch
|
||||
- Chart SVG already loaded in this batch
|
||||
|
||||
`spec_lock.md` is the only file re-read per page (§2.1).
|
||||
|
||||
**Exception**: user mid-deck adds pages or swaps templates introducing a basename/chart absent from the original batch → read the new file once, continue.
|
||||
|
||||
> Note: batched prefix reads stay in the cached prompt prefix; per-page `spec_lock.md` re-reads append below and benefit from that cache. Scattered on-demand reads of layout/chart SVGs would invalidate downstream cache and sit in the compression-vulnerable mid-context region.
|
||||
|
||||
Resolve the per-page template SVG via `spec_lock.md page_layouts` (authoritative). The legacy page-type table below is a **last-resort fallback** for legacy decks where `page_layouts` is missing.
|
||||
|
||||
**Resolution order (per page):**
|
||||
|
||||
1. **Mirror-mode template** (template's `design_spec.md` frontmatter has `replication_mode: mirror`) → see §1.1 below. The page is consumed as a **visual reference**, not as a placeholder shell.
|
||||
2. `spec_lock.md page_layouts` has `P<NN>: <basename>` for this page → inherit the structure of `templates/<chosen_template>/<basename>.svg` (already in context from §1.0).
|
||||
3. `page_layouts` exists but **no entry** for this page → **free design**, no template inheritance.
|
||||
4. `page_layouts` section absent (legacy deck) **and** `templates/` directory exists → fall back to the page-type table below, matching by SVG filename keyword (cover/chapter/content/ending/toc). Read the matched file at first use if §1.0 batch did not cover it.
|
||||
5. No template at all → free design.
|
||||
|
||||
> Note: `page_layouts` disambiguates the multiple content variants modern templates ship (e.g., `graduation_defense` has 8); the legacy table cannot.
|
||||
|
||||
### 1.1 Mirror-mode templates — reference-style consumption
|
||||
|
||||
When the project's chosen template is a `mirror` template (`design_spec.md` frontmatter declares `replication_mode: mirror`), Executor switches to a **reference-style** consumption path that bypasses placeholder substitution:
|
||||
|
||||
1. **Per-page reference selection** — Strategist selects one mirror page per project page via `spec_lock.md page_layouts` (e.g., `P04: 015_content`). The basename is the mirror filename without extension; Strategist made this choice by reading `design_spec.md §V Page Roster` descriptions, not by guessing.
|
||||
2. **Copy, don't fill** — open the referenced mirror SVG (already in context from §1.0). **Copy it as the starting point for the project page**, then edit text elements in place to express the project's content for `P<NN>`. Preserve every non-text element verbatim: backgrounds, decorative shapes, sprite-cropped images, charts, icon usage, color values, font families, geometry, sprite `<svg viewBox>` wrappers, `<image>` references.
|
||||
3. **What you may edit** — the visible text content of `<text>` / `<tspan>` elements that express slide-specific content (title, body, captions, KPI labels, dates, page numbers). Replace the source deck's example text with the project's text for this page from `design_spec.md §IX` and `notes/<NN>_*.md`.
|
||||
4. **What you must not touch** — element positions, sizes, fonts, colors, fills, strokes, gradients, image hrefs, `<g>` grouping, sprite-sheet `<svg viewBox>` wrappers, decorative `<rect>` / `<path>` / `<circle>` / `<polygon>` shapes, `<use data-icon="...">` markers, embedded chart data structures. Mirror's value is preserving the source deck's visual identity — any geometric / decorative drift defeats the purpose.
|
||||
5. **Content fit** — the mirror page was chosen by Strategist because its layout matches the content slot. If the project's content for `P<NN>` legitimately needs more / fewer items than the mirror page provides (e.g. mirror shows 3 KPI cards, project has 4 metrics), keep the mirror page's visual rhythm and either drop one metric to fit or split across two pages — do **not** restructure the mirror page's grid. If neither works, surface a `warning: P<NN> content does not fit mirror reference <basename>; suggest different reference page` and proceed with the closest-fit edit.
|
||||
6. **No `{{}}` substitution** — mirror SVGs do not contain placeholder markers. Do not search for `{{TITLE}}` / `{{CONTENT_AREA}}` etc.; do not invent placeholders. The whole mirror contract is "verbatim source + in-place text edit".
|
||||
7. **Output filename** — follow the standard project SVG naming convention (`<NN>_<page_name>.svg` where `<NN>` matches the project page index, not the mirror source index). The mirror filename is the *reference*, not the *output*.
|
||||
|
||||
**Detecting mirror mode**: read the chosen template's `design_spec.md` frontmatter once during §1.0 batch read. If `replication_mode: mirror`, every page that hits `page_layouts` follows §1.1 above; pages without a `page_layouts` entry still fall through to free design (resolution rule 3 above).
|
||||
|
||||
**Mirror + chart pages**: chart structures inside a mirror SVG are already drawn (axis, series, labels). Treat them as visual references — replace the data labels and series text content to match the project's chart spec, but do not redraw the chart from a `templates/charts/<name>.svg` baseline. A mirror template's `page_charts` entries are normally absent for this reason.
|
||||
|
||||
**Legacy fallback table** (used only when `page_layouts` is absent):
|
||||
|
||||
| Page Type | Corresponding Template | Adherence Rules |
|
||||
|-----------|----------------------|-----------------|
|
||||
| Cover | `01_cover.svg` | Inherit background, decorative elements, layout structure; replace placeholder content |
|
||||
| Chapter | `02_chapter.svg` | Inherit numbering style, title position, decorative elements |
|
||||
| Content | `03_content.svg` | Inherit header/footer styles; **content area may be freely laid out** |
|
||||
| Ending | `04_ending.svg` | Inherit background, thank-you message position, contact info layout |
|
||||
| TOC | `02_toc.svg` | **Optional**: Inherit TOC title, list styles |
|
||||
|
||||
### Page-Template Mapping Declaration (Required Output)
|
||||
|
||||
Before generating each page, output which template is used:
|
||||
|
||||
```
|
||||
📝 **Template mapping**: `templates/<chosen_template>/03a_content_image_text.svg` (or "None (free design)")
|
||||
🎯 **Adherence rules / layout strategy**: [specific description]
|
||||
```
|
||||
|
||||
- **Content pages**: template defines only header/footer; content area is free
|
||||
- **No template**: generate entirely per the Design Spec
|
||||
|
||||
---
|
||||
|
||||
## 2. Design Parameter Confirmation (Mandatory Step)
|
||||
|
||||
Before the first SVG page, output a confirmation listing: canvas dimensions, body font size, color scheme (primary/secondary/accent HEX), font plan. Prevents spec/execution drift.
|
||||
|
||||
### 2.1 Per-page spec_lock re-read (Mandatory)
|
||||
|
||||
> Long decks drift off the declared palette/icons mid-deck due to context compression. `spec_lock.md` is the canonical execution reference — re-read it per page to bypass model memory.
|
||||
|
||||
**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.
|
||||
|
||||
- **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.
|
||||
- **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.
|
||||
|
||||
> Note: block-level phrasing, applied *within* the page's `page_rhythm` density (below), not against it.
|
||||
|
||||
**If `spec_lock.md` is missing**: emit `warning: spec_lock.md missing — generating without execution lock` once, then proceed using `design_spec.md` values. Expected only for legacy projects; new projects MUST have it (see [strategist.md](strategist.md) §6 step 4).
|
||||
|
||||
**Forbidden — values outside the lock**:
|
||||
|
||||
- Colors (fill / stroke / stop-color) MUST come from `colors`
|
||||
- Icons MUST come from `icons.inventory`; library MUST equal `icons.library`
|
||||
- Font family from `typography`: use role override (`title_family` / `body_family` / `emphasis_family` / `code_family`) if declared, else fall back to `font_family`
|
||||
- Font sizes follow a **ramp anchored on `typography.body`**, not a closed menu. Use the declared slots when they fit. Intermediate sizes (e.g., 40px hero number, 13px annotation) are allowed if the ratio to `body` falls within the role's band (see `design_spec.md §IV ramp table`). Sizes outside every band require extending the lock first.
|
||||
- Images MUST reference files listed under `images`; no invented filenames
|
||||
- Formula PNGs are images with `Acquire Via: formula` / `Status: Rendered`; place them only from the listed file path and never recreate the formula as text.
|
||||
|
||||
If a page needs a value not in `spec_lock.md`, surface it — do not silently invent one.
|
||||
|
||||
**Per-page layout rhythm — `page_rhythm` section**:
|
||||
|
||||
Before drawing each page, look up its entry in `page_rhythm` (key format `P<NN>` matching the page index in §IX of `design_spec.md`) and apply the corresponding layout discipline:
|
||||
|
||||
| Tag | Layout discipline |
|
||||
|-----|-------------------|
|
||||
| `anchor` | Structural page (cover / chapter / TOC / ending). Follow the matching template verbatim. |
|
||||
| `dense` | Information-heavy. Card grids, multi-column layouts, KPI dashboards, tables, and charts are all permitted. This is the baseline behavior. |
|
||||
| `breathing` | Low-density impact page. Avoid **multi-card grid layouts** — do not organize content as multiple parallel rounded containers (3-card row, 4-card KPI grid, 2×2 matrix rendered as cards). Use naked text blocks, dividers, whitespace, or full-bleed imagery as the content structure. Single rounded visual elements (hero image corners, callouts, tags, one emphasis block) are fine — the rule is about grid structure, not about the `rx` attribute. Proportions follow information weight (not a preset ratio). Typical forms: hero quote, single large number with one-line interpretation, full-bleed image with floating caption, section transition. |
|
||||
|
||||
> Without rhythm variation, every page defaults to card grids (the "AI-generated" look). `page_rhythm` is the only narrative lever that survives context compression.
|
||||
|
||||
**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.
|
||||
|
||||
**Per-page template lookup — `page_layouts` section**:
|
||||
|
||||
Before drawing each page, look up its entry in `page_layouts` to decide which basename to inherit (the SVG itself was loaded in §1.0):
|
||||
|
||||
- Entry present (e.g., `P04: 03a_content_image_text`) → inherit the corresponding SVG already in context. The basename **must match** an actual file in the chosen template directory; if it doesn't, emit `warning: page_layouts P<NN> references missing file <basename>.svg — falling back to free design` and proceed.
|
||||
- No entry for this page → free design, no inheritance. **Not an error** — Strategist intentionally left this page free.
|
||||
- Whole section absent → see §1 fallback (legacy page-type matching).
|
||||
|
||||
Do **not** invent a layout entry, and do **not** assume a template just because `templates/` exists — if `page_layouts` is present but silent for this page, that silence is the instruction.
|
||||
|
||||
**Per-page chart reference — `page_charts` section**:
|
||||
|
||||
Before drawing each page, look up its entry in `page_charts` to decide which chart structure applies (the SVG itself was loaded in §1.0):
|
||||
|
||||
- Entry present (e.g., `P09: timeline_horizontal`) → adapt the corresponding chart SVG already in context. Apply project colors/typography/density; do not copy verbatim. Cross-reference `templates/charts/charts_index.json` for the chart's purpose summary if needed.
|
||||
- No entry for this page → either no chart on this page, or a chart that didn't match any catalog template (Strategist's `no-template-match` fallback). Design the visualization from scratch using `design_spec.md §VII` for guidance.
|
||||
- Whole section absent → no chart pages in this deck.
|
||||
|
||||
---
|
||||
|
||||
## 3. Execution Guidelines
|
||||
|
||||
- **Proximity**: group related elements with tight spacing; separate unrelated groups
|
||||
- **Spec adherence**: follow color, layout, canvas format, and typography in the spec
|
||||
- **Template structure**: if templates exist, inherit the visual framework
|
||||
- **Main-agent ownership**: SVG generation must run in the main agent (not sub-agents) — pages share upstream context for cross-page visual continuity
|
||||
- **Generation rhythm**: lock global design context first, then generate pages sequentially in one continuous context. No batched groups (e.g., 5 at a time).
|
||||
- **Phased batch generation** (recommended):
|
||||
1. **Visual Construction Phase**: generate all SVG pages sequentially for visual consistency. Use layout judgment for chart marks during the draft. **MUST embed plot-area markers** per §3.1 below on every chart page — coordinate calibration is a post-generation step (see [`workflows/verify-charts.md`](../workflows/verify-charts.md)) that depends on these markers.
|
||||
2. **Quality Check Gate**: run `python3 scripts/svg_quality_checker.py <project_path>` on `svg_output/`. Any `error` (banned features, viewBox mismatch, spec_lock drift, non-PPT-safe font, etc.) MUST be fixed on the offending page before proceeding — regenerate and re-check. Address `warning`s when straightforward. Do NOT defer to after `finalize_svg.py` — finalize rewrites SVG and masks some violations.
|
||||
3. **Logic Construction Phase**: after SVGs pass the quality check, batch-generate speaker notes for narrative continuity.
|
||||
|
||||
### 3.1 Chart Plot-Area Marker (MANDATORY on every chart page)
|
||||
|
||||
> 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).
|
||||
|
||||
**Rectangular plot area** (bar / horizontal_bar / grouped_bar / stacked_bar / line / area / stacked_area / scatter / waterfall / pareto / butterfly):
|
||||
|
||||
```xml
|
||||
<!-- chart-plot-area: x_min,y_min,x_max,y_max -->
|
||||
```
|
||||
|
||||
**Radial charts** (pie / donut / radar):
|
||||
|
||||
```xml
|
||||
<!-- chart-plot-area: pie | center: cx,cy | radius: r -->
|
||||
<!-- chart-plot-area: donut | center: cx,cy | outer-radius: r1 | inner-radius: r2 -->
|
||||
<!-- chart-plot-area: radar | center: cx,cy | radius: r -->
|
||||
```
|
||||
|
||||
**How to determine coordinate values**:
|
||||
|
||||
| Value | Derivation |
|
||||
|-------|------------|
|
||||
| `x_min` | X coordinate of the Y-axis line (leftmost data boundary) |
|
||||
| `y_min` | Y coordinate of the topmost grid line (highest data boundary) |
|
||||
| `x_max` | X coordinate of the rightmost axis endpoint or grid line |
|
||||
| `y_max` | Y coordinate of the X-axis baseline |
|
||||
| `cx, cy` | Center point of pie/donut/radar (accounting for `transform="translate()"`) |
|
||||
| `r` | Outer radius of the chart |
|
||||
|
||||
**Per-page verification** — after writing each chart SVG, confirm the marker exists:
|
||||
|
||||
```bash
|
||||
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.
|
||||
|
||||
### SVG File Naming Convention
|
||||
|
||||
Format: `<NN>_<page_name>.svg` (two-digit number from 01; name matches the deck's language and the page title in the Design Spec).
|
||||
|
||||
Examples: `01_封面.svg` / `02_目录.svg` / `03_核心优势.svg`; `01_cover.svg` / `02_agenda.svg` / `03_key_benefits.svg`.
|
||||
|
||||
---
|
||||
|
||||
## 4. Icon Usage
|
||||
|
||||
Strategist chooses the library and inventory; Executor only implements. Library details and one-library rule: [`../templates/icons/README.md`](../templates/icons/README.md). This section defines placeholder syntax.
|
||||
|
||||
**Built-in icons — Placeholder method (recommended)**:
|
||||
|
||||
```xml
|
||||
<!-- chunk-filled (straight-line geometry, sharp corners, structured) -->
|
||||
<use data-icon="chunk-filled/home" x="100" y="200" width="48" height="48" fill="#005587"/>
|
||||
|
||||
<!-- tabler-filled (bezier-curve forms, smooth & rounded contours) -->
|
||||
<use data-icon="tabler-filled/home" x="100" y="200" width="48" height="48" fill="#005587"/>
|
||||
|
||||
<!-- tabler-outline (light, line-art style — screen-only decks) -->
|
||||
<use data-icon="tabler-outline/home" x="100" y="200" width="48" height="48" fill="#005587"/>
|
||||
|
||||
<!-- phosphor-duotone (single color + 20% backplate — soft depth without solid weight) -->
|
||||
<use data-icon="phosphor-duotone/house" x="100" y="200" width="48" height="48" fill="#005587"/>
|
||||
|
||||
<!-- simple-icons (brand logos — used alongside the deck's primary library, only for real company/product marks) -->
|
||||
<use data-icon="simple-icons/github" x="100" y="200" width="48" height="48" fill="#181717"/>
|
||||
|
||||
<!-- tabler-outline with thin / bold stroke (stroke-style libraries only) -->
|
||||
<use data-icon="tabler-outline/home" x="100" y="200" width="48" height="48" fill="#005587" stroke-width="1.5"/>
|
||||
<use data-icon="tabler-outline/home" x="100" y="200" width="48" height="48" fill="#005587" stroke-width="3"/>
|
||||
```
|
||||
|
||||
> ⚠️ **Color**: ALWAYS use `fill="#HEX"` on `<use data-icon="...">`. NEVER use `stroke` or `fill="none"`, even for stroke-style libraries.
|
||||
>
|
||||
> **stroke-width** (stroke-style libraries only, currently `tabler-outline`): allowed values `{1.5, 2, 3}`. If `spec_lock.md icons.stroke_width` is declared, all placeholders MUST use that value deck-wide. Default `2` if absent (legacy). Ignored on non-stroke libraries.
|
||||
>
|
||||
> Icons are auto-embedded by `finalize_svg.py` — no need to run `embed_icons.py` manually.
|
||||
|
||||
**Searching for icons** — use terminal, zero token cost:
|
||||
```bash
|
||||
ls skills/ppt-master/templates/icons/chunk-filled/ | grep home
|
||||
ls skills/ppt-master/templates/icons/tabler-filled/ | grep home
|
||||
ls skills/ppt-master/templates/icons/tabler-outline/ | grep chart
|
||||
ls skills/ppt-master/templates/icons/phosphor-duotone/ | grep house
|
||||
ls skills/ppt-master/templates/icons/simple-icons/ | grep github
|
||||
```
|
||||
|
||||
**Abstract concept → icon name** (names for `chunk-filled`; tabler libraries use their own equivalents — verify with `ls | grep`):
|
||||
|
||||
| Concept | chunk-filled | tabler-filled / tabler-outline |
|
||||
|---------|-------|-------------------------------|
|
||||
| Growth / Increase | `arrow-trend-up` | same |
|
||||
| Decline / Decrease | `arrow-trend-down` | same |
|
||||
| Success / Complete | `circle-checkmark` | `circle-check` |
|
||||
| Warning / Risk | `triangle-exclamation` | `alert-triangle` |
|
||||
| Innovation / Idea | `lightbulb` | `bulb` |
|
||||
| Strategy / Goal | `target` | same |
|
||||
| Efficiency / Speed | `bolt` | same |
|
||||
| Collaboration / Team | `users` | same |
|
||||
| Settings / Config | `cog` | `settings` |
|
||||
| Security / Trust | `shield` | same |
|
||||
| Money / Finance | `dollar` | `currency-dollar` |
|
||||
| Time / Deadline | `clock` | same |
|
||||
| Location / Region | `map-pin` | same |
|
||||
| Communication | `comment` | `message` |
|
||||
| Analysis / Data | `chart-bar` | same |
|
||||
| Process / Flow | `arrows-rotate-clockwise` | `refresh` |
|
||||
| Global / World | `globe` | `world` |
|
||||
| Excellence / Award | `star` | same |
|
||||
| Expand / Scale | `maximize` | same |
|
||||
| Problem / Issue | `bug` | same |
|
||||
|
||||
> For self-evident names (home, user, file, search, arrow, etc.) — just `grep chunk-filled/` directly without consulting the table.
|
||||
|
||||
> ⚠️ **Icon validation**: only use icons from the Design Spec's approved inventory. Verify each via `ls | grep` before use. Mixing libraries within one deck is FORBIDDEN.
|
||||
|
||||
---
|
||||
|
||||
## 5. Visualization Reference
|
||||
|
||||
Chart SVGs referenced in **VII. Visualization Reference List** are loaded once via the §1.0 batch read. This section governs adaptation only.
|
||||
|
||||
**Hard rule**: adapt the loaded chart SVG; do not improvise from memory and do not replicate verbatim. Apply project colors, typography, content; preserve visualization type.
|
||||
|
||||
**Adaptation rules**:
|
||||
- **Preserve**: visualization type (bar/line/pie/timeline/process/framework…) as specified
|
||||
- **Adapt**: data, labels, colors (project scheme), dimensions
|
||||
- **Freely adjust**: composition, axis ranges, grid, legend, spacing, decoration — as long as the chart stays accurate and readable
|
||||
- **Forbidden**: changing visualization type without spec justification; omitting data points or structural elements from the outline
|
||||
|
||||
> Templates: `templates/charts/` (70 types). Index: `templates/charts/charts_index.json`
|
||||
|
||||
### 5.1 Chart Coordinate Calibration
|
||||
|
||||
Coordinate calibration runs as a **standalone post-generation workflow**, not inside the executor pipeline. After SVG generation completes, if the deck contains data charts, run [`workflows/verify-charts.md`](../workflows/verify-charts.md) before post-processing.
|
||||
|
||||
The executor's only obligation here is upstream: embed the `<!-- chart-plot-area ... -->` marker on every chart page during initial draft (§3.1). Verify-charts enumerates chart pages from `design_spec.md §VII` (authoritative deck plan) and uses the marker to feed `svg_position_calculator.py`.
|
||||
|
||||
> Do NOT run `svg_position_calculator.py` during the initial draft. The calculator calibrates already-generated SVGs against their declared plot areas; running it before the SVG exists has nothing to compare against.
|
||||
|
||||
---
|
||||
|
||||
## 6. Image Handling
|
||||
|
||||
Handle images by their status in the Design Spec's Image Resource List. Status enum and lifecycle: [`svg-image-embedding.md`](svg-image-embedding.md).
|
||||
|
||||
| Status | Source | Handling |
|
||||
|--------|--------|----------|
|
||||
| **Existing** | User-provided | Reference images directly from `../images/` directory |
|
||||
| **Generated** | Generated by Image_Generator | Reference images directly from `../images/` directory |
|
||||
| **Sourced** | Web-acquired by Image_Searcher | Reference from `../images/`. **Read [`image_sources.json`](image-searcher.md) to decide attribution** — see §6.1 below. |
|
||||
| **Rendered** | Deterministic formula PNG | Reference from `../images/`; use `preserveAspectRatio="xMidYMid meet"` |
|
||||
| **Needs-Manual** | Acquisition failed and file is absent | Use dashed border placeholder unless the expected file exists |
|
||||
| **Placeholder** | Not yet prepared | Use dashed border placeholder |
|
||||
|
||||
**Reference syntax**: see [`svg-image-embedding.md`](svg-image-embedding.md).
|
||||
|
||||
**Placeholder**: Dashed border `<rect stroke-dasharray="8,4" .../>` + description text
|
||||
|
||||
**`no-crop` images**: when a `spec_lock.md images` entry ends with ` | no-crop`, size the container to the image's native ratio (from `analyze_images.py` or file dims) and use `preserveAspectRatio="xMidYMid meet"`. Untagged entries are croppable — default to `slice`.
|
||||
|
||||
**Formula images**: rows with `Acquire Via: formula` or `Type: Latex Formula` MUST be treated as no-crop even if a legacy `spec_lock.md` forgot the flag. Use the dimensions from `design_spec.md §VIII`, `image_analysis.csv`, or `images/formula_manifest.json`; do not normalize all formulas to one height unless the spec explicitly states that layout choice.
|
||||
|
||||
### 6.1 Inline Attribution for Sourced Images (web path)
|
||||
|
||||
Whenever the slide uses an image with `Status: Sourced`, look up the corresponding entry in `project/images/image_sources.json` and act on `license_tier`:
|
||||
|
||||
| `license_tier` | Action on this slide |
|
||||
|---|---|
|
||||
| `no-attribution` | Embed the `<image>` element only. **No credit element needed.** |
|
||||
| `attribution-required` | Embed the `<image>` element **plus** a small inline `<text>` credit element per the visual spec in [image-searcher.md §7](./image-searcher.md). |
|
||||
|
||||
The credit text is **not** rendered by post-processing or export — it must be present in the SVG you produce. The shape of the credit element (size, position, color, multi-image source line, hero gradient overlay) is specified in [image-searcher.md §7](./image-searcher.md). Do not invent a different style.
|
||||
|
||||
Use `attribution_text` from the manifest entry as the **starting point**, then compress for the small-text constraint (drop URL, drop filename, keep "via Provider / License"). For CC0/PD images that landed in the `attribution-required` tier only because of upstream metadata quirks (rare), credits are still safe to render.
|
||||
|
||||
`svg_quality_checker.py` treats missing CC BY / CC BY-SA inline attribution as an **error**. Fix the offending SVG before post-processing.
|
||||
|
||||
**The manifest is the single source of truth for credits.** Do not duplicate license info into speaker notes or any other artifact.
|
||||
|
||||
---
|
||||
|
||||
## 7. Font Usage
|
||||
|
||||
Source of truth: `spec_lock.md typography`. Use `font_family` as default; override per role with `title_family` / `body_family` / `emphasis_family` / `code_family` if declared. LaTeX formulas that Strategist rendered are PNG images, not a `code_family` text role.
|
||||
|
||||
If `spec_lock.md` is absent, consult [`strategist.md`](strategist.md) §g — do not invent a stack.
|
||||
|
||||
**Hard rule**: every SVG `font-family` stack MUST end with a pre-installed family (Microsoft YaHei / SimHei / SimSun / Arial / Calibri / Segoe UI / Times New Roman / Georgia / Consolas / Courier New / Impact / Arial Black). PPTX has no runtime fallback — missing fonts degrade to Calibri.
|
||||
|
||||
---
|
||||
|
||||
## 8. Speaker Notes Generation Framework
|
||||
|
||||
### Task 1. Generate Complete Speaker Notes Document
|
||||
|
||||
After all SVG pages are finalized, enter Logic Construction Phase and write the full notes to `notes/total.md`. Batch-writing (not per-page) lets transitions plan coherently.
|
||||
|
||||
**Pure spoken narration**: notes are read aloud verbatim by `notes_to_audio.py` (TTS). Write only what should be spoken. No visible markers, no labeled meta-lines, no enumerated key-point lists, no duration annotations — anything you write outside the heading will be vocalized.
|
||||
|
||||
**Per-page structure**: `# <number>_<page_title>` heading (the `#` heading line is the only thing stripped before TTS), pages separated by `---`. Body is 2–5 natural sentences carrying the page's core message. Page-to-page transitions live inside the opening sentence as natural prose ("接下来……" / "Having framed X, let's turn to Y") — no bracketed `[过渡]` / `[Transition]` tags.
|
||||
|
||||
**Concrete examples** — same shape applies to any language; just write naturally in that language.
|
||||
|
||||
中文 deck:
|
||||
|
||||
```
|
||||
# 02_市场格局
|
||||
|
||||
在明确了行业背景之后,我们来看具体的市场格局。当前线上零售集中度持续上升,前三大平台合计份额已经达到百分之六十八,腰部玩家正在被快速挤压,留给新进入者的窗口期不超过十八个月。这意味着我们的策略必须聚焦,而不是铺开。
|
||||
```
|
||||
|
||||
英文 deck:
|
||||
|
||||
```
|
||||
# 02_market_landscape
|
||||
|
||||
Having framed the industry backdrop, let's look at the actual market landscape. Online retail concentration keeps rising — the top three platforms now hold sixty-eight percent of combined share, mid-tier players are being squeezed fast, and the window for new entrants is under eighteen months. This means our strategy has to focus, not spread.
|
||||
```
|
||||
|
||||
> 日本語 / 한국어 / 其他语言:照搬同样的结构,用对应语言自然书写即可。
|
||||
|
||||
**Number readability**: TTS reads digits and symbols literally. Prefer fully-spelled forms in the language being spoken when literal pronunciation would be awkward (e.g. Chinese "百分之六十八" reads better than "68%"; "1-2分钟" reads as "一减二分钟"). Plain integers and percentages in English are fine as-is.
|
||||
|
||||
**Common mistakes to avoid**:
|
||||
- Leaving any bracketed stage marker (`[过渡]` / `[Transition]` / `[Pause]` / `[Data]` / `[Scan Room]` / `[Interactive]` / `[Benchmark]` etc.) in the text — they will be read aloud literally.
|
||||
- Adding `要点:① …` / `Key points: (1) …` / `时长:2分钟` / `Duration: 2 minutes` / `Flex: …` lines — TTS will speak "要点 一 …".
|
||||
- Mixing languages within one deck's notes.
|
||||
|
||||
### Task 2. Split Into Per-Page Note Files
|
||||
|
||||
Auto-split `notes/total.md` into per-page files in `notes/`.
|
||||
|
||||
**Naming**: match SVG names (`01_cover.svg` → `notes/01_cover.md`); `slide01.md` also supported (legacy).
|
||||
|
||||
---
|
||||
|
||||
## 9. Next Steps After Completion
|
||||
|
||||
> **Auto-continuation**: After Visual Construction Phase (all SVG pages) and Logic Construction Phase (all notes) are complete, the Executor proceeds directly to the post-processing pipeline.
|
||||
|
||||
**Post-processing & Export** (same canonical pipeline as [shared-standards.md §5](shared-standards.md)):
|
||||
|
||||
```bash
|
||||
# 1. Split speaker notes
|
||||
python3 scripts/total_md_split.py <project_path>
|
||||
|
||||
# 2. SVG post-processing (auto-embed icons, images, etc.)
|
||||
python3 scripts/finalize_svg.py <project_path>
|
||||
|
||||
# 3. Export PPTX
|
||||
python3 scripts/svg_to_pptx.py <project_path>
|
||||
# Output (default-flow mode):
|
||||
# exports/<project_name>_<timestamp>.pptx ← native pptx (canonical output)
|
||||
# backup/<timestamp>/svg_output/ ← Executor SVG source backup (always written)
|
||||
#
|
||||
# Add --svg-snapshot to additionally emit:
|
||||
# exports/<project_name>_<timestamp>_svg.pptx ← SVG snapshot pptx (sibling of native pptx)
|
||||
```
|
||||
@@ -0,0 +1,199 @@
|
||||
# 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
|
||||
@@ -0,0 +1,187 @@
|
||||
# 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)
|
||||
@@ -0,0 +1,109 @@
|
||||
# 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)
|
||||
@@ -0,0 +1,135 @@
|
||||
> See [`image-generator.md`](./image-generator.md) and [`image-searcher.md`](./image-searcher.md) for path-specific behavior.
|
||||
|
||||
# Image Acquisition Common Reference
|
||||
|
||||
Shared baseline for both acquisition paths. Path-specific behavior lives in the path's own reference.
|
||||
|
||||
---
|
||||
|
||||
## 1. Trigger Condition
|
||||
|
||||
Active when at least one resource list row has `Acquire Via: ai` or `Acquire Via: web`. Rows with `user` / `formula` / `placeholder` are skipped.
|
||||
|
||||
| Mode | Trigger |
|
||||
|---|---|
|
||||
| In-pipeline | `generate-ppt` workflow, image rows present |
|
||||
| Standalone | Direct request against an existing project |
|
||||
|
||||
---
|
||||
|
||||
## 2. Image Resource List Format
|
||||
|
||||
Defined in `design_spec.md §VIII`. Status enum: see [`svg-image-embedding.md`](svg-image-embedding.md).
|
||||
|
||||
| Filename | Dimensions | Purpose | Type | Acquire Via | Status | Reference |
|
||||
|---|---|---|---|---|---|---|
|
||||
| cover.png | 1280x720 | Cover background | Background | `ai` | Pending | Modern tech abstract, deep blue gradient #0A2540 |
|
||||
| team.jpg | 800x600 | Team photo | Photography | `web` | Pending | Diverse engineering team in modern office |
|
||||
| formula_001.png | 736x168 | Block equation on P03 | Latex Formula | `formula` | Rendered | `E = mc^2` |
|
||||
|
||||
**Required per non-skipped row**: `Acquire Via`, `Status`, `Reference`.
|
||||
|
||||
---
|
||||
|
||||
## 3. Path Dispatch
|
||||
|
||||
For each row with `Status: Pending`:
|
||||
|
||||
| Acquire Via | Load reference | Run | Success status |
|
||||
|---|---|---|---|
|
||||
| `ai` | [`image-generator.md`](./image-generator.md) | `image_gen.py` | `Generated` |
|
||||
| `web` | [`image-searcher.md`](./image-searcher.md) | `image_search.py` | `Sourced` |
|
||||
| `user` | — | — | (already `Existing`) |
|
||||
| `formula` | — | — | (already `Rendered`) |
|
||||
| `placeholder` | — | — | (already `Placeholder`) |
|
||||
|
||||
> Lazy load: an all-`web` deck never reads `image-generator.md`, and vice versa.
|
||||
|
||||
---
|
||||
|
||||
## 4. Analysis Phase
|
||||
|
||||
Before processing any row:
|
||||
|
||||
1. `read_file <project_path>/design_spec.md` — extract color scheme, canvas format, target audience
|
||||
2. Group resource list rows by `Acquire Via`
|
||||
3. Confirm `project/images/` exists
|
||||
|
||||
---
|
||||
|
||||
## 5. Verification Phase
|
||||
|
||||
After all rows reach terminal status:
|
||||
|
||||
- Every non-skipped row has a file at `project/images/<filename>`, or is marked `Needs-Manual`
|
||||
- No `Pending` rows remain
|
||||
- `image_prompts.json` exists when ≥1 ai row processed; every entry has `status ∈ {Generated, Failed, Needs-Manual}` (no `Pending` remaining)
|
||||
- `image_sources.json` exists when ≥1 web row processed; every entry has `license_tier ∈ {no-attribution, attribution-required}`
|
||||
|
||||
> `Needs-Manual` is a legitimate terminal state for ai rows — Step 7 entry waits for the user to place the file. See [`image-generator.md`](./image-generator.md) §3.2 Offline Manual Mode.
|
||||
|
||||
---
|
||||
|
||||
## 6. Failure Handling
|
||||
|
||||
**Hard rule**: acquisition failures MUST NOT halt the pipeline.
|
||||
|
||||
1. Try once
|
||||
2. On recoverable failure (network, no candidates, license rejection, rate limit), retry once with broadened parameters
|
||||
3. On second failure, set `Status: Needs-Manual`, log the reason in conversation, continue
|
||||
4. After the phase completes, summarize all `Needs-Manual` rows for the user — list filenames, where prompts live (`images/image_prompts.md` paste-ready blocks for ai rows; refresh via `image_gen.py --render-md` if stale), and where to place generated files (`project/images/<filename>`)
|
||||
|
||||
`Needs-Manual` is also the entry status for **Offline Manual Mode** (no `IMAGE_BACKEND` configured, no host-native image tool in use). Affected ai rows are marked `Needs-Manual` from the start without a failed attempt — see [`image-generator.md`](./image-generator.md) §3.2.
|
||||
|
||||
Path-specific retry policies (provider chain, backend chain) live in the path's own reference.
|
||||
|
||||
---
|
||||
|
||||
## 7. Credits — Single Source of Truth
|
||||
|
||||
License / attribution data lives **only** in `project/images/image_sources.json`.
|
||||
|
||||
**Forbidden — credits anywhere else**:
|
||||
|
||||
- `notes/*.md` (TTS would speak them in the audio export)
|
||||
- `total.md` (gets split, then overwritten)
|
||||
- SVG `<title>` / `<desc>` (stripped by `svg_to_pptx.py`)
|
||||
- A separate "Image Credits" appendix slide (lost on single-page sharing)
|
||||
|
||||
Executor reads the manifest per slide and renders inline credits when needed — see [`executor-base.md`](./executor-base.md) §6.1 and [`image-searcher.md`](./image-searcher.md) §7.
|
||||
|
||||
---
|
||||
|
||||
## 8. Handoff with Strategist
|
||||
|
||||
The `Reference` field is **intent**, not a query. Strategist writes free-form intent; the receiving role translates.
|
||||
|
||||
| ✅ Intent | ❌ Pre-processed |
|
||||
|---|---|
|
||||
| `"Diverse engineering team in modern office, natural light"` | `"team office light"` |
|
||||
| `"Abstract digital waves, deep navy gradient #0A2540"` | `"use openverse, search 'waves'"` |
|
||||
|
||||
---
|
||||
|
||||
## 9. Handoff with Executor
|
||||
|
||||
Executor consumes the resource list plus:
|
||||
|
||||
| Artifact | Path | Purpose |
|
||||
|---|---|---|
|
||||
| Image files | `project/images/*.{jpg,png,webp}` | `<image>` references |
|
||||
| Manifest | `project/images/image_sources.json` | `license_tier` per Sourced image |
|
||||
|
||||
Executor does NOT invoke `image_gen.py` / `image_search.py`.
|
||||
|
||||
---
|
||||
|
||||
## 10. Task Completion Checkpoint
|
||||
|
||||
```markdown
|
||||
## ✅ Image Acquisition Phase Complete
|
||||
- [x] {N} rows processed (`ai`: {a} / `web`: {b})
|
||||
- [x] {a} `Generated`, {b} `Sourced`, {c} `Needs-Manual`
|
||||
- [x] image_prompts.json / image_sources.json written
|
||||
- [ ] **Next**: Auto-proceed to Executor phase
|
||||
```
|
||||
@@ -0,0 +1,590 @@
|
||||
> See [`image-base.md`](./image-base.md) for the common framework. For the web sourcing path, see [`image-searcher.md`](./image-searcher.md).
|
||||
|
||||
# Image_Generator Reference Manual
|
||||
|
||||
Role definition for the **AI image generation path**: convert each `Acquire Via: ai` row into an optimized prompt, generate the image, and save it to `project/images/`.
|
||||
|
||||
**Trigger**: resource list rows with `Acquire Via: ai`. The role is loaded only when at least one such row exists.
|
||||
|
||||
---
|
||||
|
||||
## 1. Core Principle — Maximize AI Image Capability in Service of the Deck
|
||||
|
||||
AI images exist to serve the deck's communication goal. Pick whatever combination of `page_role` and `text_policy` makes the page work best.
|
||||
|
||||
**Two page roles** (orthogonal to type):
|
||||
|
||||
| `page_role` | Use |
|
||||
|---|---|
|
||||
| `local` | Image occupies a region of an SVG page (left half, right column, hero band, accent corner). Composition is the AI's call — fill the region as the page design wants |
|
||||
| `hero_page` | Image is the page's main voice — cover, chapter divider, mood transition, single-number hero, closing quote. SVG above may be minimal or empty |
|
||||
|
||||
**Two text policies** (orthogonal to page_role):
|
||||
|
||||
| `text_policy` | Use |
|
||||
|---|---|
|
||||
| `none` | No text inside the image |
|
||||
| `embedded` | Image contains text as part of the artwork — decorative lettering, designed title, hand-lettered keywords, infographic labels, anything the page needs |
|
||||
|
||||
**Hard rule — only what's actually hard**:
|
||||
|
||||
- Same `deck_rendering` + same `deck_palette` for every image in the deck
|
||||
- HEX codes and color names are rendering guidance — never visible text in the image
|
||||
- Long body copy / data points / bulleted lists / long quotes stay in SVG (improving them later means regenerating the image, which is expensive)
|
||||
- **In-image text is only for words that will not need editing later** — visual keywords, decorative lettering, mood words. Editable text (titles that may be reworded, subtitles, dates, authors, captions, body) belongs in SVG. Changing one in-image word costs an image regeneration; one SVG word costs a keystroke.
|
||||
- Prompts are one coherent prose paragraph, not tag soup (a model-output reality, not an aesthetic choice)
|
||||
|
||||
Everything else is the AI's judgment per page. No mandated padding, no type-locked text_policy, no scenario whitelists for hero_page.
|
||||
|
||||
---
|
||||
|
||||
## 2. Three Dimensions
|
||||
|
||||
Every AI image is described by three orthogonal dimensions. Lock them in this order: **Rendering** (deck-wide) → **Palette** (deck-wide) → **Type** (per image).
|
||||
|
||||
| Dimension | Decides | When fixed |
|
||||
|---|---|---|
|
||||
| **Rendering** | Visual style family (vector / sketch-notes / 3d-isometric / corporate-photo / …) | Once per deck — every AI image in the deck shares one rendering |
|
||||
| **Palette** | How the deck's HEX colors are *used* (proportion + role + temperament). HEX values come from `design_spec.colors`, not from the palette | Once per deck |
|
||||
| **Type** | What the image's internal composition skeleton looks like — geometric layout of a local infographic block (infographic / flowchart / framework / matrix / cycle / funnel / pyramid / comparison / timeline / map / scene). Only applies to `page_role: local`; for `page_role: hero_page`, describe composition with §4.1 primitives instead of picking a type. | Per image |
|
||||
|
||||
> **What rendering vs palette means**: rendering is *how the image is drawn* (line quality, texture, depth). Palette is *how colors are distributed and behave* (which color dominates, which is accent, what proportion). The HEX values come from Strategist; palette is the **usage contract** for those HEX values.
|
||||
|
||||
### 2.1 Where to find each dimension
|
||||
|
||||
| Reference | Loaded |
|
||||
|---|---|
|
||||
| [`image-renderings/_index.md`](./image-renderings/_index.md) — rendering catalog + auto-selection table | Always (Step 1 below) |
|
||||
| [`image-palettes/_index.md`](./image-palettes/_index.md) — palette catalog + auto-selection table | Always (Step 1 below) |
|
||||
| [`image-type-templates/_index.md`](./image-type-templates/_index.md) — type catalog + auto-selection table | Always (Step 1 below) |
|
||||
| `image-renderings/<chosen>.md` | After Step 2 picks the rendering — only the chosen one |
|
||||
| `image-palettes/<chosen>.md` | After Step 2 picks the palette — only the chosen one |
|
||||
| `image-type-templates/<chosen>.md` | After Step 3 picks the type per image — only the types actually used |
|
||||
|
||||
**Hard rule — on-demand loading**:
|
||||
|
||||
- Read the three `_index.md` files once at role entry.
|
||||
- After locking dimensions, read **only** the specific rendering / palette / type files you selected.
|
||||
- **Never** glob-read an entire subdirectory (`image-renderings/*.md` is forbidden). Token cost balloons and the AI loses focus.
|
||||
|
||||
---
|
||||
|
||||
## 3. Workflow
|
||||
|
||||
### Step 1 — Load the dimension indices
|
||||
|
||||
Read all three index files. They are short (~50 lines each) and contain auto-selection tables that let you map `design_spec` signals → dimension values without reading every detail file.
|
||||
|
||||
```
|
||||
read_file references/image-renderings/_index.md
|
||||
read_file references/image-palettes/_index.md
|
||||
read_file references/image-type-templates/_index.md
|
||||
```
|
||||
|
||||
### Step 2 — Resolve deck-wide rendering + palette
|
||||
|
||||
**Primary path — Strategist already locked these in `spec_lock.md colors`**:
|
||||
|
||||
```
|
||||
image_rendering: vector-illustration
|
||||
image_palette: cool-corporate
|
||||
```
|
||||
|
||||
If both fields are present, use them directly — Strategist made the decision in h.5 with full d-e-f-g-h linkage context. Do NOT re-decide.
|
||||
|
||||
**Hard rule — `custom` escape hatch**: when either value is the literal string `custom`, do NOT `read_file` the preset library for that dimension. Read the sibling `*_behavior` line from `spec_lock.md colors` and splice that prose into the prompt in place of the preset's fewshot snippet. The behavior prose owns the style paragraph (for `custom` rendering) or the proportion/role rules (for `custom` palette). See [`image-renderings/_index.md`](./image-renderings/_index.md) §1.5 / [`image-palettes/_index.md`](./image-palettes/_index.md) §2 for the invocation rules.
|
||||
|
||||
**Fallback path — when `spec_lock.md` lacks both fields** (legacy decks or pipelines that skipped h.5):
|
||||
|
||||
| Signal | Maps to |
|
||||
|---|---|
|
||||
| `design_spec.md d. Style` mode + descriptor | Rendering (consult renderings `_index.md` auto-selection table) |
|
||||
| `design_spec.md e. Color Scheme` (HEX) + content vibe | Palette (consult palettes `_index.md` auto-selection table) |
|
||||
| `design_spec.md f. Icon library` | Sanity check: chosen rendering should be compatible with the icon library's visual weight |
|
||||
|
||||
If the auto-selection table surfaces multiple candidates, pick the first; do not present a choice to the user.
|
||||
|
||||
> **Tell the user**: when falling back, print one line "spec_lock.md missing `image_rendering`/`image_palette` — inferring `<X>` / `<Y>` from design_spec. For optimal deck consistency, lock these in Strategist h.5." Then proceed.
|
||||
|
||||
Then `read_file` the **single resolved** rendering file and the **single resolved** palette file. These two files give you:
|
||||
|
||||
- The 80-120 word style paragraph (rendering)
|
||||
- The proportion / role / temperament rules for the deck's three HEX values (palette)
|
||||
- Two ready-to-paste prompt snippets per file (fewshot)
|
||||
|
||||
### Step 3 — Per-image type + assembly
|
||||
|
||||
For each `Acquire Via: ai` row in `design_spec.md §VIII`:
|
||||
|
||||
1. **Determine type** — only when `page_role: local` (the image sits as a region block on an SVG page). Match the row's `Purpose` against the `_index.md` auto-selection table (methodology visualization → `framework`; process steps → `flowchart`; SWOT/Eisenhower → `matrix`; PDCA / flywheel → `cycle`; etc.). `Purpose` is authoritative for picking among the 11 internal-composition types. **When `page_role: hero_page`, skip type selection** and describe composition directly using §4.1 primitives (single-subject / portrait / typographic / atmospheric).
|
||||
2. **Determine `text_policy`** — Strategist's value wins when set. Otherwise pick `none` or `embedded` based on whether in-image text serves the page. Long body / data / lists stay in SVG.
|
||||
3. **Determine `page_role`** — Strategist's value wins when set. Otherwise pick `local` or `hero_page` based on whether the image carries the page or sits inside one.
|
||||
4. `read_file references/image-type-templates/<type>.md` (only if not already read — types are commonly reused across images in one deck)
|
||||
5. **Assemble the prompt** by combining:
|
||||
- The rendering's style paragraph (from Step 2)
|
||||
- The palette's proportion + role rules applied to the deck's HEX values (from Step 2)
|
||||
- The type's structural layout (from Step 3)
|
||||
- The image's specific `Reference` intent (from `design_spec.md §VIII`)
|
||||
- The container sizing guidance from the type file (so the model knows it's painting a local block, not a full canvas)
|
||||
- The hard rules from §5 below (HEX-not-as-text, simplified figures, text policy)
|
||||
|
||||
The assembled prompt is **one cohesive paragraph**, not a bulleted list of tags. See §4 for the assembly template.
|
||||
|
||||
### Step 4 — Write the manifest and generate
|
||||
|
||||
Write `project/images/image_prompts.json` per §6. Then run `image_gen.py --manifest` (§7 Path A). The CLI iterates `items[]`, writes status back, and re-renders the Markdown sidecar.
|
||||
|
||||
---
|
||||
|
||||
## 4. Prompt Assembly Template
|
||||
|
||||
Every assembled prompt follows this paragraph structure. **Write prose, not tag soup**.
|
||||
|
||||
```
|
||||
[Rendering style paragraph — 80-120 words from the chosen rendering file].
|
||||
[Palette behavior — apply the chosen palette's proportion + role rules to the deck's HEX values, e.g. "primary #1E3A5F dominates as the main shape, secondary #F8F9FA provides 60% breathing space, accent #D4AF37 appears in one or two emphasis points only"].
|
||||
[Type-specific composition — from the chosen type file, e.g. "central hub node with four radiating satellite nodes connected by clean lines"].
|
||||
[Image-specific subject — translated from the row's Reference intent into concrete visual nouns].
|
||||
[Container note — "composed as a {W}x{H}px image for {page_role} use"; add composition cues only when the page actually needs them. SVG-overlay-reservation cues ("leave the lower band calm — SVG title overlays it", "keep the right third calmer for SVG text") are valid **only** when `page_role: hero_page` (SVG sits on top of the image). For `page_role: local`, the image sits inside a region block and the SVG layer never overlays its interior — never reserve overlay space in a local prompt].
|
||||
[Hard rules — see §5].
|
||||
```
|
||||
|
||||
**Word budget**: 150-300 words. Embedded-text prompts skew longer; pure background prompts can be shorter.
|
||||
|
||||
**Forbidden — tag-soup prompts**:
|
||||
|
||||
```
|
||||
❌ "modern, flat design, gradient, vibrant, professional, clean, 4K, high quality"
|
||||
```
|
||||
|
||||
This produces generic, model-average output. The model is not weighting your tags — write **one coherent visual scene** instead.
|
||||
|
||||
### 4.1 Hero-page composition primitives
|
||||
|
||||
When `page_role: hero_page` (the image is the page's main voice — cover, chapter divider, mood transition, signature stat, closing quote), the image's internal composition does not need its own structural `type` (matrix / cycle / framework etc. are for *local* infographic blocks). Instead, describe the composition directly in the prompt using one of the four primitives below.
|
||||
|
||||
**Primitive A — single dominant subject (product / object / concept hero)**
|
||||
|
||||
> One dominant subject occupying 60-70% of the canvas, positioned with intent (centered, rule-of-thirds offset, or slight left/right). Supporting context <30% of canvas weight. Generous negative space — at least 15% padding on the subject's "open" side. No second-place subject competing.
|
||||
|
||||
Use for: product reveal, concept introduction, chapter title visual, brand statement.
|
||||
|
||||
**Primitive B — single human subject (portrait)**
|
||||
|
||||
> One person, frontal or three-quarter turn, head + upper body. Subject occupies 50-65% of canvas height, centered or rule-of-thirds offset. Eyes at the upper-third horizontal line. Background neutral, minimal, or softly blurred. No competing foreground objects. At least 15% padding above the crown.
|
||||
|
||||
Use for: founder profile, speaker bio, testimonial page, executive intro. Pair with `rendering: corporate-photo` for photographic realism; otherwise the §5.2 simplified-figures rule applies.
|
||||
|
||||
**Primitive C — typographic hero (the text *is* the image)**
|
||||
|
||||
> The image's central content is one large text element — a short headline, big number, or single word — rendered as art, occupying 40-60% of canvas height. Minimal supporting visual (small icon, geometric anchor, accent line) at <25% weight. At least 20% padding around the text.
|
||||
|
||||
Use with `text_policy: embedded`. Must obey the §5.3 rule — text that is part of the artwork and stable can be embedded; copy that must stay exact or editable goes to SVG overlay (switch to Primitive D).
|
||||
|
||||
**Primitive D — atmospheric backdrop (no subject)**
|
||||
|
||||
> Atmospheric field with no dominant subject — gradients, subtle patterns, or restrained color blocks. Small geometric anchor optional, placed in a corner or along an edge, never centered. The center 60-70% of the canvas must stay calm to receive SVG title/text overlay.
|
||||
|
||||
**Applies to `page_role: hero_page` only.** The "calm center for SVG overlay" contract is the defining feature of this primitive — and it only holds when SVG actually sits on top of the image. `page_role: local` images live inside a region block; the SVG layer never overlays their interior, so Primitive D is not a valid choice for local. Local schematic / scene / chart images use the §3 type templates instead.
|
||||
|
||||
Use for: cover background, chapter divider background, breathing-page background, any page where the SVG layer carries the words and the image only sets tone.
|
||||
|
||||
**Primitive E — custom (escape hatch)**
|
||||
|
||||
When none of A/B/C/D describe the page's intended layout (triptych, asymmetric multi-focal, narrative diorama, etc.), write the composition description directly into the prompt's composition sentence — same paragraph slot A/B/C/D occupy, but in your own words. No new field; the freedom is in the prose.
|
||||
|
||||
**Hard rule — custom composition prose**:
|
||||
|
||||
| Rule | Value |
|
||||
|---|---|
|
||||
| Length | One paragraph, 2-5 sentences, replacing A/B/C/D's opening paragraph |
|
||||
| Required content | subject count, layout structure, where breathing room sits, where SVG overlay can claim canvas |
|
||||
| Forbidden | Naming a competing primitive ("like A but two subjects") |
|
||||
|
||||
Example opening for a triptych hero:
|
||||
|
||||
> Triptych — three equal vertical bands of canvas, each holding one symbolic object centered in its band; objects share a low horizon line; bands separated by 2px hairline rules; collectively reads as a single composed page. [...rest of prompt continues with rendering paragraph + color behavior + container note...]
|
||||
|
||||
**Fewshot examples per primitive** (one each, deck-context placeholders intact):
|
||||
|
||||
> **A — 3d-isometric + tech-neon product reveal, text_policy: none, 600×600**
|
||||
>
|
||||
> 3D isometric illustration in true 30°/30°/30° projection. One dominant product-form subject — a stylized device or sleek tech object — occupies the center of the canvas at roughly 65% of the area. The subject is rendered in primary electric blue `#0EA5E9` on its lit faces, with 15% darker tonal shift on shadowed faces. A subtle 8%-opacity outer glow halo surrounds the subject. Small supporting context: three thin connecting lines in accent vivid cyan `#06B6D4` arcing from the subject toward the canvas edges (suggesting connectivity), and a soft 8% drop shadow grounding the subject. Background is deep secondary navy `#0A0E27` (about 30% of canvas, including shadowed plane). The subject is clearly the singular focal element. Composed as a 600×600 hero block with 15% padding around the subject. NO text, letters, numbers, or labels anywhere. Color values are rendering guidance only.
|
||||
|
||||
> **B — corporate-photo + cool-corporate executive headshot, text_policy: none, 600×800**
|
||||
>
|
||||
> Editorial corporate portrait photograph of one professional executive. The person is centered slightly left of canvas center, photographed from chest-up at eye level, looking confidently toward the camera with a relaxed natural expression — not posed-stiff, not over-smiling. Professionally attired in a contemporary business setting (a tailored blazer, neutral palette clothing). Soft natural light from the upper left, gentle shadow on the right side of the face. Diverse, professionally attired subject, photorealistically rendered, contemporary styling. Background is a softly out-of-focus office context — secondary light gray `#F8F9FA` wall with a subtle hint of primary deep navy `#1E3A5F` in a blurred architectural element. Color grading is cool-corporate — restrained, professional. Shallow depth of field — subject sharp, background gently blurred. Subject's eyes positioned at the upper-third horizontal line. Composed as a 600×800 bio portrait with 10% padding. NO text, name tags, or captions in the image. Color values are rendering guidance only.
|
||||
|
||||
> **C — ink-notes + mono-ink big-number stat, text_policy: embedded, 800×500**
|
||||
>
|
||||
> Professional hand-drawn visual-note style on pure white background. The image's central content is the hand-lettered number "100x" — rendered in bold confident ink strokes occupying about 50% of the canvas height, centered with deliberate slight wobble characteristic of hand-lettering. Text is in English/Latin characters only. Beneath the number, a thin hand-drawn underline in ink. To the side of the number, one small hand-drawn doodle decoration — a star or upward arrow — adds visual rhythm. Accent coral `#E8655A` (from the deck's accent) appears only as a tiny emphasis dot, totaling under 4% of canvas. Background is pure white `#FFFFFF`. Composed as an 800×500 typographic hero block with 20% padding around the number. No other text or labels in the image — just the "100x" headline and the small doodle.
|
||||
|
||||
> **D — vector-illustration + cool-corporate cover background, text_policy: none, 1280×720**
|
||||
>
|
||||
> Clean flat vector illustration backdrop. Atmospheric composition with no central subject — bold geometric shapes arranged along the canvas edges to leave the center calm. Primary deep navy `#1E3A5F` forms a confident diagonal block across the lower-left third; secondary light gray `#F8F9FA` occupies the upper two-thirds as breathing space; accent gold `#D4AF37` appears only as one thin geometric line near the lower right corner (under 5% of canvas). Crisp 2px outlines, no gradients, single 8% soft drop shadow under the navy block. The central 60% of the canvas is deliberately calm and unbusy — designed to receive a slide title overlaid in SVG. Composed as a 1280×720 full-bleed PPT background. NO text, letters, numbers, signs, watermarks, or written symbols anywhere in the image. Color values are rendering guidance only — do not display HEX codes or color names as text. Simplified geometric shapes only.
|
||||
|
||||
### 4.2 Prompt depth — expand for subject-domain accuracy
|
||||
|
||||
**Hard rule**: For images whose deck purpose calls for subject-domain accuracy (scientific figures, academic paper figures, engineering schematics, medical / legal / regulated content), expand the prompt without budget ceiling — 500-1000+ words is normal. The §4 word budget (150-300) is the routine-illustration default, not a cap.
|
||||
|
||||
**Forbidden — pre-emptive shortening**: never trim a subject-domain prompt to fit §4's budget. Name the field's visual conventions explicitly in the prompt.
|
||||
|
||||
**Detail to name in the prompt** (illustrative, not an enumeration to match):
|
||||
|
||||
| Domain | Conventions to spell out |
|
||||
|---|---|
|
||||
| chemistry / materials | IUPAC atom colors, bond conventions, lattice type, Å / ps units, subplot labeling (A / B / C circles), view angle |
|
||||
| biology | cell compartment colors, scale bars, organelle conventions, staining palette |
|
||||
| physics | axis labels with proper symbols, signature curve shapes, unit annotations, peak labeling format |
|
||||
| engineering | schematic notation, dimension callouts, section-cut conventions |
|
||||
|
||||
**When uncertain about field conventions**: read `sources/` before drafting the prompt.
|
||||
|
||||
---
|
||||
|
||||
## 5. Global Hard Rules
|
||||
|
||||
These rules apply to **every** prompt regardless of dimension choices. Append them as a closing sentence to every assembled prompt.
|
||||
|
||||
### 5.1 HEX is rendering guidance, not text
|
||||
|
||||
Image generation models occasionally paint color names and HEX values as **visible labels in the image** (a `#1E3A5F` swatch literally drawn as the string "#1E3A5F"). This destroys the image.
|
||||
|
||||
**Append to every prompt**:
|
||||
|
||||
> Color values (HEX codes like #1E3A5F) and color names are rendering guidance only — do NOT display HEX codes, color names, or palette labels as visible text anywhere in the image.
|
||||
|
||||
### 5.2 Simplified human figures, no realistic faces
|
||||
|
||||
When the image contains people:
|
||||
|
||||
> Human figures appear as simplified stylized silhouettes or symbolic representations — no photorealistic faces, no detailed anatomy, no celebrity likeness. Express role/emotion through posture, attire, and simple gestures.
|
||||
|
||||
Exception: when the chosen rendering is `corporate-photo`, photorealism is intentional — replace the above with: `Diverse, professionally attired subjects. Editorial photography style, natural composition`.
|
||||
|
||||
### 5.3 Text policy — two-layer ownership
|
||||
|
||||
Every AI-image page carries text in two layers:
|
||||
|
||||
| Layer | Owned by | Examples |
|
||||
|---|---|---|
|
||||
| Layer 1 (image-owned) | the prompt — baked into the raster | figure-internal annotations (axis labels, A / B / C markers, units, scale bars, panel labels); architecture / schematic module names, node labels, signal-path identifiers; hero typographic or decorative lettering that *is* the visual |
|
||||
| Layer 2 (SVG-owned) | `<text>` overlay — fully editable | page-level chrome (title, navigation, footer, body bullets, conclusion callout); readable copy, captions |
|
||||
|
||||
`text_policy` controls only Layer 1. AI judges per image; no global default bias.
|
||||
|
||||
**When `embedded` is the right call — positive triggers** (any one match flips the row from a `none` starting point to `embedded`; the editability rule at the tail of §5.3 still has final say):
|
||||
|
||||
| Trigger | Typical Layer 1 text |
|
||||
|---|---|
|
||||
| Paper-figure panel comparison (A/B/C, before/after) | Panel labels — `A` / `B` / `C`, or short panel descriptors |
|
||||
| Textbook math / signal figure | Curve names (`sin` / `cos`), axis labels, unit symbols |
|
||||
| Architecture / schematic following discipline conventions | Module names (`Self-Attention`, `FFN`, `Add & Norm`), node ids, signal-path tags |
|
||||
| Data figure with stable axes | Axis labels, units, scale bars |
|
||||
| Typographic hero (§4.1 Primitive C) | The designed word / number that *is* the image |
|
||||
|
||||
Defaulting an entire `ai` resource list to `none` because "SVG can always overlay" is the failure mode this table exists to break. When any row matches a trigger, start at `embedded` and verify the editability filter below still holds.
|
||||
|
||||
| `text_policy` | Prompt cue |
|
||||
|---|---|
|
||||
| `none` | "NO text of any kind anywhere in the image — no letters, numbers, signs, watermarks, labels, or written symbols." |
|
||||
| `embedded` | Describe the Layer 1 text directly inside the visual scene: the word(s), how they're rendered, and the artistic treatment. |
|
||||
|
||||
**Hard rule — cross-cutting**: Layer 2 chrome stays SVG regardless of `text_policy`. Never bake the deck title, navigation, footer, body bullets, or conclusion callout into the image, even when `embedded`.
|
||||
|
||||
**Forbidden — text that may be reworded**: any word that may later change belongs in Layer 2, not Layer 1. Layer 1 is for stable visual identifiers and designed lettering that is part of the image itself.
|
||||
|
||||
**Font choice for in-image text — free description, with the deck typography as one optional reference**
|
||||
|
||||
The font for in-image text is a free natural-language description, not an enum. Pick whatever serves the image: blackletter for a heritage cover, hand-brushed for a manifesto poster, retro chrome 3D for Y2K, art-deco display for a luxury hero, ribbon script for a bookstore zine — any artistic treatment the image earns.
|
||||
|
||||
The table below is **a reference for the one case where you want the in-image lettering to read as the same typographic family as the SVG body** (e.g. a clean editorial deck where the cover title in the image should feel like the body Helvetica, not a surprise blackletter). Use it as a starting point, not a constraint.
|
||||
|
||||
| `spec_lock typography.font_family` contains | Optional descriptor if you want to echo the SVG body |
|
||||
|---|---|
|
||||
| `KaiTi` / `FangSong` / `Georgia` / serif families | "elegant serif lettering, refined letterforms" |
|
||||
| `Microsoft YaHei` / `PingFang SC` / `Arial` / sans-serif families | "clean geometric sans-serif, modern letterforms" |
|
||||
| `SimHei` / `Impact` / `Arial Black` / display families | "bold display lettering, heavy expressive strokes" |
|
||||
| `Consolas` / `Courier New` / monospace families | "monospace technical lettering, fixed-width" |
|
||||
| sketch-notes / ink-notes rendering, or no family specified | "hand-lettered organic strokes, natural variation" |
|
||||
|
||||
**When to ignore the table**:
|
||||
|
||||
- Decorative / background lettering, posters, large mood words → describe the artistic treatment freely
|
||||
- Cover hero title that wants its own visual identity (blackletter, retro chrome, art-deco display, brushed script) → describe freely
|
||||
- Sketch-notes / ink-notes / hand-drawn renderings where the lettering is part of the rendering itself → describe freely
|
||||
- Any case where rendering + palette already imply a font character (e.g. `vintage-poster` rendering implies period display lettering) → trust the rendering, no need to echo SVG body
|
||||
|
||||
**When to use the table**: a designed title (cover main title, chapter heading) on a deck whose visual identity is grounded in the SVG body typography, and where a surprise font choice would feel out of place.
|
||||
|
||||
**In-image text vs SVG text — decide by editability, not by model capability**
|
||||
|
||||
Layer 1 text is rasterized into the artwork — once generated it cannot be edited, corrected, searched, restyled, or reflowed. That is the durable reason to choose where text lives, independent of any backend's rendering ability or the script / length involved:
|
||||
|
||||
| Text | Layer |
|
||||
|---|---|
|
||||
| Part of the artwork and stable — decorative lettering, designed title, hand-lettered keyword, figure-internal identifiers (axis labels, panel letters, units) | Layer 1 (image) OK |
|
||||
| Page chrome, body copy, captions, data values — anything that must stay exact, searchable, or may be reworded | Layer 2 (SVG) |
|
||||
|
||||
Generation is non-deterministic on every backend, but **do not pre-judge by script or length** — never push text to SVG, shorten a headline, or downgrade `embedded` to `none` on the assumption that a particular script or a long string "won't render". Decide where text lives by the editability rule above, not by guessed rendering ability. Name the exact characters to bake literally in the prompt; do not re-read the generated image to verify them.
|
||||
|
||||
**Prefer in-image**: text that is genuinely part of the artwork and will not be edited — a designed word, a stat lettering, a figure-internal label.
|
||||
|
||||
**Push to SVG overlay instead**: page chrome, captions, data values, or any copy that must stay exact or editable. When the headline must remain editable, switch to **Primitive D (atmospheric backdrop)** and overlay it as SVG text.
|
||||
|
||||
### 5.4 No brand names or trademarks in the subject
|
||||
|
||||
> The image must not depict identifiable brand logos, trademarks, or product likenesses unless the row's Reference explicitly names a real brand asset the user owns.
|
||||
|
||||
---
|
||||
|
||||
## 6. Manifest Schema
|
||||
|
||||
Write `project/images/image_prompts.json` with this shape:
|
||||
|
||||
```json
|
||||
{
|
||||
"project": "{project_name}",
|
||||
"generated_at": "{ISO-8601 date}",
|
||||
"deck_rendering": "vector-illustration",
|
||||
"deck_palette": "cool-corporate",
|
||||
"color_scheme": {
|
||||
"primary": "#1E3A5F",
|
||||
"secondary": "#F8F9FA",
|
||||
"accent": "#D4AF37"
|
||||
},
|
||||
"items": [
|
||||
{
|
||||
"filename": "cover_bg.png",
|
||||
"purpose": "Cover background (Slide 01)",
|
||||
"page_role": "hero_page",
|
||||
"text_policy": "none",
|
||||
"aspect_ratio": "16:9",
|
||||
"image_size": "2K",
|
||||
"prompt": "{fully assembled paragraph per §4 — use §4.1 Primitive D for atmospheric cover}",
|
||||
"alt_text": "Modern tech abstract background with deep blue gradient and digital waves",
|
||||
"status": "Pending"
|
||||
},
|
||||
{
|
||||
"filename": "framework_p05.png",
|
||||
"purpose": "Methodology framework (Slide 05)",
|
||||
"type": "framework",
|
||||
"page_role": "local",
|
||||
"text_policy": "none",
|
||||
"aspect_ratio": "4:3",
|
||||
"image_size": "1K",
|
||||
"prompt": "{fully assembled paragraph per §4}",
|
||||
"status": "Pending"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### Field reference
|
||||
|
||||
| Field | Required | Source | Description |
|
||||
|---|---|---|---|
|
||||
| `deck_rendering` | yes | Step 2 lock | Single rendering name shared by all items in this deck |
|
||||
| `deck_palette` | yes | Step 2 lock | Single palette name shared by all items |
|
||||
| `color_scheme` | yes | `design_spec.md §III` | HEX triplet from Strategist |
|
||||
| `items[].filename` | yes | `§VIII` resource list | Output filename with extension |
|
||||
| `items[].type` | conditional | Step 3 per-image (only when `page_role: local`) | One of 11 internal-composition types: `infographic`, `flowchart`, `framework`, `matrix`, `cycle`, `funnel`, `pyramid`, `comparison`, `timeline`, `map`, `scene`. **Omit `type` entirely when `page_role: hero_page`** — the composition comes from §4.1 primitives written directly into the prompt, not from a type file. |
|
||||
| `items[].page_role` | yes | Step 3 per-image | `local` (default — region block on SVG page) or `hero_page` (image is page's main voice; SVG overlay minimal or empty) |
|
||||
| `items[].text_policy` | yes | Step 3 per-image | `none` (image carries no text — explicit visual rule) or `embedded` (image contains decorative lettering, designed title, hand-lettered keywords, or stable visual identifiers like axis labels / subplot letters / unit symbols). AI judges per image; no global default bias — see §5.3. |
|
||||
| `items[].aspect_ratio` | yes | Container sizing | Passed to `image_gen.py --aspect_ratio` |
|
||||
| `items[].prompt` | yes | §4 assembly | The full assembled paragraph |
|
||||
| `items[].image_size` | no | Container sizing | `512px` / `1K` / `2K` / `4K` |
|
||||
| `items[].alt_text` | no | Accessibility | Short caption |
|
||||
| `items[].status` | yes | CLI manages | `Pending` initially; CLI updates to `Generated` / `Failed` / `Needs-Manual` |
|
||||
|
||||
> **Back-compat for legacy `type` values**: existing manifests using `background` / `hero` / `portrait` / `typography` (the four removed pseudo-types) remain readable. Read them as: `background` → `page_role: hero_page` + no type; `hero` → `page_role: hero_page` + no type (use §4.1 Primitive A in prompt); `portrait` → `page_role: local` + no type (use §4.1 Primitive B); `typography` → `page_role: hero_page` + `text_policy: embedded` + no type (use §4.1 Primitive C). New manifests should follow the rule above (omit `type` when `page_role: hero_page`).
|
||||
>
|
||||
> Existing manifests without `deck_rendering` / `deck_palette` / `type` / `page_role` / `text_policy` remain valid — older items default to `page_role: local`, `text_policy: none`. Legacy `page_role: full_page` (pre-2026-05-15) is read as `hero_page`.
|
||||
|
||||
---
|
||||
|
||||
## 7. Generation Execution
|
||||
|
||||
> Prerequisite: §3 Steps 1-3 complete; `images/image_prompts.json` exists and validates.
|
||||
|
||||
### Path Selection (Deterministic)
|
||||
|
||||
C (AI-generated) supports three implementation modes sharing one `image_prompts.json` source:
|
||||
|
||||
| Trigger | Mode | Mechanism |
|
||||
|---|---|---|
|
||||
| **Default** — `IMAGE_BACKEND` configured | **Path A**: `image_gen.py --manifest` | One command runs the whole manifest with concurrency; status writes back per item |
|
||||
| `IMAGE_BACKEND` not configured (or Path A fails) AND host has a native image tool | **Path B**: Host-native tool | Agent invokes the host's image capability; outputs land at `project/images/<filename>` |
|
||||
| **Both Path A and Path B fail/unavailable** | **Offline Manual Mode** | Manifest stays on disk; user generates externally from `items[].prompt` and places files at `project/images/<filename>` |
|
||||
|
||||
**Selection logic** — monotonic A → B → C fallback chain (automatic, no user prompting):
|
||||
|
||||
1. **Try Path A** — if `IMAGE_BACKEND` is configured (env or `.env`), run `image_gen.py --manifest`. If it fails twice in a row, fall to Path B.
|
||||
2. **Try Path B** — if `IMAGE_BACKEND` was not configured (A skipped), or A failed, and the host has a native image tool (Codex / Antigravity / Claude Code / similar), the agent invokes the host's image capability directly.
|
||||
3. **Fall to C (Offline Manual)** — if B is also unavailable (no host-native tool) or fails, write prompts to `images/image_prompts.json` and hand off to the user.
|
||||
|
||||
**User override**: If the user explicitly names Path B ("use Codex's image tool"), skip A and start at B. Explicit naming is the only way to bypass an earlier path in the chain; otherwise the chain is monotonic.
|
||||
|
||||
**Hard rule**: Step 4 is execution, not re-decision. Never present an interactive choice between paths here — image strategy was locked in Strategist Step 4 h item.
|
||||
|
||||
> All three modes share one output contract: file at `project/images/<filename>`. Step 6 SVG references are mode-agnostic.
|
||||
|
||||
### Path A — `image_gen.py --manifest` (Default)
|
||||
|
||||
```bash
|
||||
python3 scripts/image_gen.py \
|
||||
--manifest project/images/image_prompts.json \
|
||||
--output project/images
|
||||
```
|
||||
|
||||
The CLI iterates `items[]` with adaptive concurrency, writes `status` back per item, and is **idempotent**: re-running only re-processes entries whose status is `Pending` or `Failed`.
|
||||
|
||||
**Parameters**:
|
||||
|
||||
| Parameter | Short | Description | Default |
|
||||
|---|---|---|---|
|
||||
| `--manifest` | - | Path to `image_prompts.json` | — |
|
||||
| `--concurrency` | - | Max concurrent requests; halves on rate-limit, min 1 | `IMAGE_CONCURRENCY` env or `3` |
|
||||
| `--image_size` | - | Default size (`512px`/`1K`/`2K`/`4K`); per-item `image_size` wins | `1K` |
|
||||
| `--output` | `-o` | Output directory | Manifest's parent dir |
|
||||
| `--backend` | `-b` | Override `IMAGE_BACKEND` for this run | env |
|
||||
| `--model` | `-m` | Default model; per-item `model` wins | Backend default |
|
||||
| `--list-backends` | - | Print support tiers and exit | — |
|
||||
|
||||
> The single-image form `image_gen.py "prompt" --filename ...` is preserved for ad-hoc one-offs (re-rolling a single image) but is no longer the primary path.
|
||||
|
||||
**Configuration sources**:
|
||||
- Current process environment variables
|
||||
- First `.env` found in this order: current working directory, skill directory (e.g. `~/.agents/skills/ppt-master/.env`), clone repo root, `~/.ppt-master/.env`
|
||||
|
||||
Precedence:
|
||||
- Current process environment wins
|
||||
- `.env` fills missing values only
|
||||
|
||||
| Variable | Required | Description |
|
||||
|----------|----------|-------------|
|
||||
| `IMAGE_BACKEND` | Required | Backend identifier; run `image_gen.py --list-backends` for the current set |
|
||||
| `IMAGE_CONCURRENCY` | Optional | Manifest-mode default concurrency (CLI `--concurrency` wins) |
|
||||
| `{PROVIDER}_API_KEY` | Required | Provider-specific API key, e.g. `GEMINI_API_KEY`, `ZHIPU_API_KEY` |
|
||||
| `{PROVIDER}_BASE_URL` | Optional | Provider-specific custom endpoint |
|
||||
| `{PROVIDER}_MODEL` | Optional | Provider-specific model override |
|
||||
| `OPENAI_SIZE_PRESET` | Optional | OpenAI-compatible size mapping: `auto`, `legacy`, `gpt-image`, `gpt-image-2`, `dall-e-2` |
|
||||
| `OPENAI_RESPONSE_FORMAT` | Optional | OpenAI-compatible response field: `auto`, `b64_json`, `url`, `omit` |
|
||||
| `OPENAI_QUALITY` | Optional | OpenAI-compatible quality field: `auto`, `omit`, `low`, `medium`, `high`, `standard`, `hd` |
|
||||
|
||||
> Use provider-specific names only (e.g. `GEMINI_API_KEY`, `OPENAI_API_KEY`). See `.env.example` in clone mode or `${SKILL_DIR}/.env.example` in skill-install mode for the full set per backend.
|
||||
|
||||
> Note: OpenAI-compatible platforms that reject OpenAI-specific fields stay under `IMAGE_BACKEND=openai`; configure the `OPENAI_*` compatibility knobs instead of adding a provider-specific backend.
|
||||
|
||||
> `IMAGE_API_KEY`, `IMAGE_MODEL`, and `IMAGE_BASE_URL` are intentionally unsupported.
|
||||
|
||||
> If `.env` or the current environment contains multiple provider configs, `IMAGE_BACKEND` explicitly selects the active one.
|
||||
|
||||
**Support tiers (recommended usage)**: Core / Extended / Experimental. Run `image_gen.py --list-backends` for the current assignments.
|
||||
|
||||
**Concurrency (manifest mode)**:
|
||||
- Default 3 concurrent requests, halves on the first rate-limit response, minimum 1 (= serial fallback)
|
||||
- Rate-limited items requeue automatically; per-item failures are recorded with `last_error` and skipped
|
||||
- Interrupting mid-run is safe — completed items keep `status: Generated` and are skipped on re-run
|
||||
- On normal completion the Markdown sidecar is re-rendered automatically; if the run is interrupted, run `--render-md` manually to refresh the sidecar
|
||||
|
||||
### Path B — Host-Native Image Tool
|
||||
|
||||
Triggered automatically when `IMAGE_BACKEND` is not configured (or Path A fails) **and** the host provides a native image generation tool (Codex, Antigravity, Claude Code's image tool, and similar). No user prompting required — the agent detects the host capability and proceeds. The user may also explicitly name this path ("use Codex's image tool") to force it even when `IMAGE_BACKEND` is configured.
|
||||
|
||||
- Agent invokes the host's native image tool directly; prompts come from `items[].prompt`
|
||||
- Outputs **must** land at `project/images/<filename-from-resource-list>` with dimensions matching the Image Resource List
|
||||
- After each placement, set the corresponding item's `status` to `Generated` in the manifest
|
||||
- Executor downstream is path-agnostic — no spec change required between Path A and Path B
|
||||
|
||||
### Offline Manual Mode (C's third implementation mode)
|
||||
|
||||
**Trigger**: Both Path A and Path B fail or are unavailable.
|
||||
|
||||
**Workflow** (no user prompting; system enters this mode automatically):
|
||||
|
||||
1. Verify `images/image_prompts.json` was written
|
||||
2. Set `status: "Needs-Manual"` on every affected item per [`image-base.md`](./image-base.md) §6
|
||||
3. Continue to Step 6 — SVG references `images/<filename>` optimistically; Step 7 entry verifies presence
|
||||
4. Print one consolidated handoff to the user:
|
||||
- Filenames awaiting manual generation
|
||||
- Pointer to `images/image_prompts.md` (paste-ready `### Image N:` block per item) or `image_prompts.json` (`items[].prompt`)
|
||||
- Target placement: `project/images/<filename>` matching the resource list exactly
|
||||
- Resume command: re-run Step 7 once all expected files exist
|
||||
|
||||
**User-initiated**: When Strategist Step 4 captured "user wants manual generation" up front, Path A is skipped from the start; the workflow above runs as a planned mode.
|
||||
|
||||
> The pipeline tolerates `Needs-Manual` rows end-to-end. The user can leave the project, generate offline at their own pace, then resume Step 7.
|
||||
|
||||
#### AI-specific Failure Handling (extends image-base.md §6)
|
||||
|
||||
If Path A's backend fails twice in a row:
|
||||
|
||||
1. Do not halt. Automatically attempt to fall back to **Path B (Host-Native Tool)**.
|
||||
2. If Path B also fails or is unavailable, mark the row `Needs-Manual`.
|
||||
3. Report to user: filename, prompt used, error message.
|
||||
4. Fall through to **Offline Manual Mode** above.
|
||||
|
||||
> If the alternate platform watermarks outputs (e.g. Gemini web), the repository includes `scripts/gemini_watermark_remover.py`.
|
||||
|
||||
#### Guardrails (All Modes)
|
||||
|
||||
**Hard rule**:
|
||||
|
||||
- Do not claim an image is generated without an actual file at the expected path
|
||||
- `Needs-Manual` is set after a failed attempt OR on entering Offline Manual Mode — not as a way to skip work that automation could have done
|
||||
- Status transitions are evidence-driven: `Pending` → `Generated` (file exists) or `Pending` → `Needs-Manual` (no automation, or attempt failed once)
|
||||
|
||||
---
|
||||
|
||||
## 8. Common Issues & Variant Workflow
|
||||
|
||||
### Reference field is blank — quick examples
|
||||
|
||||
When the Resource List row has no `Reference`, infer a reasonable image from `Purpose`. Examples (not prescriptions):
|
||||
|
||||
| Purpose | A reasonable starting point |
|
||||
|---------|-----------------------------|
|
||||
| Cover | `page_role: hero_page` + §4.1 Primitive A (single-subject) or D (atmospheric); choose `text_policy` by what the cover should communicate |
|
||||
| Chapter divider | `page_role: hero_page` + Primitive D (atmospheric) or A (single-subject); often `text_policy: embedded` with a designed chapter title |
|
||||
| Methodology / framework illustration | `type: framework`, `page_role: local` |
|
||||
| Process / workflow illustration | `type: flowchart`, `page_role: local` |
|
||||
| Before/After or two-option page | `type: comparison`, `page_role: local` |
|
||||
| Team / lifestyle photo (group) | `type: scene`, `page_role: local`; rendering = `corporate-photo` or `warm-scene` |
|
||||
| Single-person headshot / bio | `page_role: local` + §4.1 Primitive B (portrait); rendering = `corporate-photo` for photo realism |
|
||||
| Big-number / hero quote block | `page_role: hero_page` + §4.1 Primitive C (typographic); `text_policy: embedded` |
|
||||
| Mood transition / atmosphere | `page_role: hero_page` + Primitive D (atmospheric), or `type: scene` if narrative |
|
||||
|
||||
### When Images Are Unsatisfactory
|
||||
|
||||
Diagnose the failure category, adjust the **one specific dimension** responsible, do not rewrite the whole prompt.
|
||||
|
||||
| Symptom | Most likely cause | Adjustment |
|
||||
|---|---|---|
|
||||
| Image looks generic, model-average | Tag-soup prompt | Rewrite as one coherent paragraph per §4 |
|
||||
| Wrong style family (looks photorealistic when flat was intended) | Rendering mismatch or rendering paragraph diluted | Reaffirm chosen rendering's style paragraph at the top of the prompt |
|
||||
| Colors don't match deck | HEX not echoed in prompt, or palette proportion rule omitted | Repeat HEX values 2-3 times in the prompt; restate palette proportion rule |
|
||||
| Hex code or color name visible as text in image | Missing §5.1 closing sentence | Append the §5.1 hard rule verbatim |
|
||||
| Garbled letters in supposedly text-free image | `text_policy: none` rule too weak | Strengthen with explicit list: "no letters, no numbers, no words, no signs, no labels, no captions, no watermarks" |
|
||||
| SVG text overlay clashes with busy image area | Page design needs negative space the prompt didn't request | Add a composition cue like "leave the {center / left third / lower band} relatively calm for text overlay" — only when the page actually overlays text on top of the image |
|
||||
| Subject vague | Reference field too abstract | Rewrite reference with concrete nouns (verbs + objects) |
|
||||
| Faces too realistic / uncanny | §5.2 rule omitted, or rendering is photo-incompatible | Either append §5.2, or switch rendering to a non-photo family |
|
||||
|
||||
**Variant workflow**:
|
||||
|
||||
1. Set the unsatisfactory item's `status` back to `Pending` and update its `prompt` in place
|
||||
2. Re-run `image_gen.py --manifest` — only that item is re-processed
|
||||
3. To try multiple stylistic approaches, append additional items with distinct filenames (e.g. `cover_bg_v2.png`) rather than overwriting
|
||||
|
||||
---
|
||||
|
||||
## 9. Forbidden
|
||||
|
||||
- Generating prompts for `web` rows — those go through [`image-searcher.md`](./image-searcher.md)
|
||||
- Brand names or HEX codes inside the subject description (degrades output)
|
||||
- Mixing renderings or palettes across images in the same deck
|
||||
- Tag-soup prompts (keyword lists separated by commas without a coherent visual scene)
|
||||
- Globbing `image-renderings/*.md` or any subdirectory — read only the chosen file
|
||||
- Placing an image without updating its `image_prompts.json` `status` and the resource list status
|
||||
- Switching rendering or palette for a single image — `hero_page` is not an exception to deck-wide coherence
|
||||
- Embedding body copy, data points, bullet lists, or long quotes inside an image — those route to SVG
|
||||
@@ -0,0 +1,222 @@
|
||||
# Image-Text Layout Patterns
|
||||
|
||||
A vocabulary registry of ways images can be placed on a slide. The point of this file is to **expand the mental list of options** so that when you reach for an image layout, you do not default to the same three patterns (left/right, top/bottom, full-bleed cover).
|
||||
|
||||
Every entry has a name plus a short technical hint. Common techniques get a single line. Less obvious or easily forgotten techniques get a short paragraph — not a full tutorial, but enough that a model unfamiliar with the project can implement it without guessing. This is a registry, not a teaching document; no use-case prescriptions, no decision tables.
|
||||
|
||||
> **Numbers are stable identifiers, not sequence.** The file is split into **Part 1 — Primary Structures** (#1–#19, #38–#56) and **Part 2 — Modifier Layers** (#20–#37, #57–#72). Numbers jump within each Part because Primary structures were grouped first; existing references to `#38`, `#48`, etc. anywhere in the project still resolve correctly.
|
||||
|
||||
---
|
||||
|
||||
## Core Principle — Two Layers
|
||||
|
||||
Almost every pattern below is an instance of one underlying split:
|
||||
|
||||
> **The image carries atmosphere, world-building, emotional weight. Native SVG shapes carry information, data, editable text.**
|
||||
|
||||
This is the single most underused move in image-heavy decks. The default reflex is to place image and text in adjacent rectangles. The far more powerful move — especially for content-rich pages — is to let the image **be the canvas** (often full-bleed) and draw native vector elements (annotation cards, flow nodes, KPI tiles, leader lines, network diagrams, dashboards) directly on top.
|
||||
|
||||
Anything that must be editable, numerically accurate, contain Chinese, or be styled to the deck's exact palette belongs in the SVG layer regardless of what the image looks like underneath.
|
||||
|
||||
---
|
||||
|
||||
# Part 1 — Primary Structures
|
||||
|
||||
Pick one or more of these as the page's bones. Cross-primary combinations are encouraged (see Composition Guidance).
|
||||
|
||||
## Container Layouts (where the image sits)
|
||||
|
||||
1. **Full-bleed background with floating title** — `<image x=0 y=0 width=1280 height=720 preserveAspectRatio="xMidYMid slice"/>` + scrim `<rect>` for legibility + overlay `<text>`.
|
||||
|
||||
2. **Left-third image + right text body** — `<image x=0 y=0 width=~427 height=720>` on the left; text area in the remaining width; optional right-edge gradient fade for smooth transition.
|
||||
|
||||
3. **Right-third image + left text body** — mirror of #2.
|
||||
|
||||
4. **Right image bleeding off the canvas edge** — `<image>` width extended past viewBox; text on left with a rightward gradient fade so the image emerges from the text area without a visible boundary.
|
||||
|
||||
5. **Top-band image + bottom multi-column text** — `<image x=0 y=0 width=1280 height=~340>` at the top + bottom-fade gradient + 2–3 evenly spaced text columns below.
|
||||
|
||||
6. **Bottom-band image + top title + middle text** — mirror of #5 with the image at the bottom and a top-fade gradient.
|
||||
|
||||
7. **Top-and-bottom symmetric split** — image occupies 50% (top or bottom) with a divider line or thin gradient band separating the halves.
|
||||
|
||||
8. **Z-pattern serpentine** — three rows, image on the left in rows 1 and 3, on the right in row 2 (or alternating). Each row roughly 1/3 canvas height; visual flow zigzags down the page.
|
||||
|
||||
9. **3×3 grid with central image** — nine cells; center cell holds the image, the other 8 hold text blocks, color swatches, or small data widgets.
|
||||
|
||||
10. **Centered image with radial callouts pointing outward** — image (often circular via `clipPath`) at canvas center; multiple `<line>` leader lines + small `<circle>` endpoints + offset text labels in surrounding space.
|
||||
|
||||
11. **Diagonal split with directional gradient (not hard polygon cut)** — full-bleed `<image>` (do NOT hard-clip) + overlay `<rect fill="url(#grad)">` whose `<linearGradient>` axis runs along the desired diagonal + a `<line>` on the diagonal to make the divider visible. The gradient does the "splitting" softly; hard polygon clipping produces ugly stair-step edges on text panels.
|
||||
|
||||
12. **Faded image as backdrop with oversized overlay text** — `<image>` + heavy semi-transparent `<rect fill="bg-color" fill-opacity="0.5–0.7">` over it + huge `<text>` (80–120px) on top. Image becomes texture; text is the subject.
|
||||
|
||||
13. **Narrow vertical image strip + giant horizontal title** — `<image x=0 y=0 width=200–280 height=720>` + thick divider `<rect>` + large `<text>` (60–90px) in the remaining width.
|
||||
|
||||
14. **Horizontal banner strip cutting through mid-section** — `<image y=middle width=1280 height=200–280>` with edge fades; text blocks above and below the band.
|
||||
|
||||
15. **Multi-image montage with bold text spanning across** — multiple `<image>` tiled with 2–4px gaps + large `<text>` (60–100px) in a darkened band spanning the full montage. The band uses `<rect fill-opacity="0.5–0.7">` to keep text legible across all underlying images.
|
||||
|
||||
16. **Negative-space dominant — small image, mostly whitespace** — image and text together occupy less than 40% of the canvas; rest is empty.
|
||||
|
||||
17. **Picture-in-picture inset** — large `<image>` background + small `<image>` overlaid inside it with a `<rect>` frame.
|
||||
|
||||
18. **Image as full-height sidebar column** — narrow `<image x=0 y=0 width=~200–280 height=720>`; rest of canvas is content area.
|
||||
|
||||
19. **Image floating in whitespace with thin frame and caption** — `<image>` + thin `<rect fill="none" stroke="…">` frame around it + `<text>` caption below.
|
||||
|
||||
## Image-as-Canvas + Native Overlay (the most underused family)
|
||||
|
||||
This is the family that opens up the largest design space and the one AI is most likely to skip. The shared pattern: image fills the slide (or a large region), native SVG elements are layered on top to carry the actual information. None of the overlay elements need to be generated by the image model — they are vector primitives you draw yourself.
|
||||
|
||||
38. **Background image + annotation cards with bezier leader lines** — full-bleed `<image>` + 2–4 small info cards (`<rect rx>` + icon + title + one-line text) placed in the image's calm regions. From each card, draw a bezier `<path>` ending in a `marker-end` arrow that points to the specific object in the image being annotated. Card text and leader lines are editable; image is the scene.
|
||||
|
||||
39. **Background image + flow nodes drawn over the scene** — the image is a real or rendered scene (workshop, control room, landscape). On top, draw a dashed `<path>` route that traces a workflow through the scene, with numbered `<circle>` nodes at each stop. Each node = number + icon + label. The flow is fully editable; the image is atmosphere.
|
||||
|
||||
40. **Background image + floating KPI metric cards** — full-bleed image (often an operations photo) + dark scrim + multiple `<rect>` cards in negative-space regions. Each card = icon + small label + large metric number. Image gives context; cards give the data.
|
||||
|
||||
41. **Background image + measurement lines and module tags (engineering overlay)** — used on technical / blueprint / cross-section images. Draw measurement lines with end-caps (`<line>` + perpendicular ticks) spanning a feature, with a centered label box reading dimensions or part names. Add tagged callouts with `<rect>` + monospace text. Reads as engineering drawing markup.
|
||||
|
||||
42. **Background image + glassmorphism UI panels** — image is the visual world; on top, draw UI elements (semi-transparent panels, progress arcs, status badges, indicators). Panels use `fill-opacity="0.6–0.8"` + thin light-color strokes; arcs via `<path d="…A…">`. Looks like a live dashboard floating above the scene.
|
||||
|
||||
43. **Background image + native data chart on top** — AI image generation cannot produce accurate data charts. Solution: use an AI-generated dashboard image as **visual reference only** (clearly labeled as such in a caption), and draw the actual chart with native SVG primitives (`<line>` axes, `<path>` series, `<circle>` data points) directly on or next to it. Required marker if exporting: `<!-- chart-plot-area: x_min,y_min,x_max,y_max -->` inside the chart group.
|
||||
|
||||
44. **Background image + native network/architecture diagram** — same logic as #43 but for structural diagrams. Image provides atmosphere or visual anchor; the actual nodes, connections, and labels are SVG circles, lines, icons, and text — all editable.
|
||||
|
||||
45. **Background image + numbered hotspots with sidebar legend** — small numbered `<circle>` markers placed on the image at points of interest. A sidebar (left or right) lists "1. … 2. … 3. …" with corresponding descriptions.
|
||||
|
||||
46. **Background image + bordered "lens" rectangle highlighting a sub-region** — full-bleed image + a bordered `<rect fill="none" stroke="accent" stroke-width="3"/>` framing a sub-region + caption nearby. Frame draws the eye to one detail without occluding the surrounding context.
|
||||
|
||||
## Multi-Image Compositions
|
||||
|
||||
47. **Small multiples — 3–6 same-kind images in an evenly spaced row** — each in identical container, each with identical caption block underneath (title + one-line description). This is **not** a generic grid: the identical framing is itself the message — readers compare across panels because the structure is the same. Useful for style comparisons, time-series snapshots, product variations.
|
||||
|
||||
48. **Side-by-side comparison (before/after, A/B, then/now)** — two `<image>` of equal size in 50/50 split with thin divider `<line>` and "before" / "after" labels.
|
||||
|
||||
49. **Asymmetric collage** — one large `<image>` + 2–3 smaller `<image>` arranged around it; sizes vary, gaps consistent.
|
||||
|
||||
50. **Tiled grid (2×2, 2×3, 3×3) with equal cells** — `cell_size = (canvas - total_gap) / cols`; consistent `gap=2–20px`.
|
||||
|
||||
51. **Mosaic** — irregular tile sizes packed together with or without thin gaps; each image clipped to its tile's rect.
|
||||
|
||||
52. **Image strip / filmstrip** — horizontal sequence of `<image>` elements with thin gaps; same height, varying widths allowed.
|
||||
|
||||
53. **Vertical image stack** — column of `<image>` aligned by width, shared annotations on one side.
|
||||
|
||||
54. **Overlapping image stack** — `<image>` elements with overlapping `x/y` positions; each subsequent one in front (z-order by document order); often combined with slight rotation for layered photo-print look.
|
||||
|
||||
55. **Diptych split — two images abutting at 50/50** — vertical or horizontal split with optional thin divider `<line>`.
|
||||
|
||||
56. **Image triptych** — three independent `<image>` side-by-side, equal widths or 2:1:2 etc. (distinct from #26 baked-in triptych, where the three scenes are inside one image file).
|
||||
|
||||
---
|
||||
|
||||
# Part 2 — Modifier Layers
|
||||
|
||||
Stack any of these freely on top of a Primary structure. Multiple Modifiers per page is the expected case, not the exception.
|
||||
|
||||
## Non-rectangular Image Shapes
|
||||
|
||||
20. **Circular crop** — `<clipPath><circle cx cy r/></clipPath>` referenced by `<image clip-path="url(#id)"/>`.
|
||||
|
||||
21. **Rounded rectangle crop** — `<clipPath><rect rx ry/></clipPath>`; the `rx` value controls roundness.
|
||||
|
||||
22. **Ellipse / oval crop** — `<clipPath><ellipse cx cy rx ry/></clipPath>`.
|
||||
|
||||
23. **Hexagonal / polygonal crop** — `<clipPath><polygon points="x1,y1 x2,y2 …"/></clipPath>`; remember to keep all vertices inside the image's display rectangle.
|
||||
|
||||
24. **Custom path crop (blob, arrow, leaf, silhouette)** — `<clipPath><path d="…"/></clipPath>`; allows any curved or organic shape. PowerPoint export translates this to `custGeom` and survives roundtrip.
|
||||
|
||||
25. **Layered paper-cut stack** — multiple image or shape layers each with `clipPath` + a small `<feDropShadow>` offset to fake physical layering depth. Each layer casts a shadow onto the next, producing real-looking craft depth.
|
||||
|
||||
26. **Triptych baked into a single wide image** — one wide `<image width=1160 height=334>` whose internal composition already contains 2–3 scenes. Generate the triptych as one image (not three separate calls) when scene-to-scene consistency matters — the model preserves character identity, lighting continuity, and color grading far more reliably when panels are produced together.
|
||||
|
||||
## Overlay & Masking Treatments
|
||||
|
||||
27. **Linear gradient mask for text legibility** — `<linearGradient>` in `<defs>` (set `x1/y1/x2/y2` for direction) + overlay `<rect fill="url(#grad)">`. Most common is top-to-bottom darkening on full-bleed cover images.
|
||||
|
||||
28. **Radial gradient vignette** — `<radialGradient cx cy r>` with dark outer stops; overlay `<rect>`. Focuses attention by darkening the periphery.
|
||||
|
||||
29. **Two-stop scrim — opaque on text side, transparent on focal side** — `<linearGradient>` with one stop at `stop-opacity="0.9"` and another at `stop-opacity="0"`. Use when text sits on one side and the image's subject on the other.
|
||||
|
||||
30. **Flat semi-transparent rectangle overlay** — `<rect fill="#000" fill-opacity="0.4"/>` over the image. Uniform darkening/lightening; simplest scrim.
|
||||
|
||||
31. **Color-tinted overlay** — `<rect fill="#brandColor" fill-opacity="0.15–0.25"/>`. Pushes a foreign-looking image toward the deck's palette without regenerating it.
|
||||
|
||||
32. **Multi-stop scrim with hue shift** — three-or-more-stop `<linearGradient>` where stops are different colors (e.g. dark navy → transparent → warm orange). This re-grades the image's color world without regenerating — particularly useful when an AI image came back with the right composition but wrong color temperature.
|
||||
|
||||
33. **Spotlight mask — clear region surrounded by darkness** — cover the canvas with `<rect>` filled by a `<radialGradient>` whose inner stop is fully transparent and outer stop is opaque dark. Reads as a flashlight beam on the focal area. Use sparingly — it kills everything outside the spotlight.
|
||||
|
||||
34. **Gaussian-blur backdrop** — `<filter><feGaussianBlur stdDeviation="8–15"/></filter>` applied to the background image, with sharp content layered on top unblurred. Reads as depth-of-field. Be aware that filters have inconsistent PPT export support — if fidelity matters, bake the blur into the source image instead.
|
||||
|
||||
35. **Duotone treatment** — two-color mapping of a photograph (e.g. deep navy shadows + warm cream highlights). Most reliable when baked into the source image at generation time. Runtime SVG duotone via `<feColorMatrix>` + `<feComponentTransfer>` is possible but the filter chain is fragile through PPT export — only attempt if you control the renderer.
|
||||
|
||||
36. **Drop shadow under image panel** — `<filter><feDropShadow dx dy stdDeviation flood-color flood-opacity/></filter>` applied to the image's container `<rect>` (or to the `<image>` itself). Standard depth lift.
|
||||
|
||||
37. **Inner / outer glow on overlay shape** — `<filter><feGaussianBlur/><feMerge/></filter>` on a shape, or simply a slightly larger blurred `<rect>` underneath the target.
|
||||
|
||||
## Image as Texture / Atmosphere
|
||||
|
||||
57. **Full-bleed image with extreme low opacity as texture wash** — full-bleed `<image>` + overlay `<rect fill="bg-color" fill-opacity="0.7–0.85"/>` so the image only barely shows through.
|
||||
|
||||
58. **Image fragment as decorative corner element** — small `<image>` (often with `clipPath`) placed in one corner; not the focus, just visual seasoning.
|
||||
|
||||
59. **Image as horizontal divider band** — narrow `<image height=80–150>` placed between two text sections instead of a `<line>` divider.
|
||||
|
||||
60. **Image as ambient noise** — visible but low contrast; mood-setting only, not informational.
|
||||
|
||||
61. **Image as watermark behind body content** — large `<image>` at very low opacity behind body text. Use either a pre-baked low-alpha image or a high-opacity overlay `<rect>` to suppress visibility.
|
||||
|
||||
## Special Techniques
|
||||
|
||||
62. **Same image, two references — full view + zoom-callout** — reference the same image file twice in two `<image>` elements: one shows the full scene at normal size; the second uses `clipPath` (circle or rectangle) plus a larger display size to "zoom into" a sub-region. Connect them with a bezier `<path>` ending in `marker-end`; ring the zoom with a `<circle stroke>` so it reads as a magnifying lens. No special asset needed — the zoom effect comes from same-source-different-display.
|
||||
|
||||
63. **Transparent PNG sticker / cutout** — an RGBA PNG (with alpha channel) placed via standard `<image>` — no `clipPath` required, the transparency lives in the file itself. Useful for subjects that should not appear inside a rectangular frame (people cutouts, product shots, decorative motifs floating over backgrounds). Producing transparent PNGs is **not** a standard ppt-master pipeline step — three paths: (a) AI backend that supports transparent output natively, (b) generate a chroma-key (solid green background) image then strip the green with a separate tool, (c) user-supplied transparent asset. SVG-side usage is trivial; asset preparation is the work.
|
||||
|
||||
64. **Image with embedded text rendered by the AI** — text becomes part of the artwork: decorative lettering, designed title, hand-lettered keyword. Prompt with explicit text content — name the exact characters literally. Use for text that is part of the artwork and will not change. Anything that must be correct or editable goes in the SVG `<text>` layer (#65).
|
||||
|
||||
65. **Image with NO text — labels added as native SVG** — generate the image with explicit "no text, no letters, no numbers, no signs" instruction (`text_policy: none`), then place all labels as `<text>` overlays. The right call when labels will be reworded, must stay exact, or carry data that must stay editable — pair with `#64` when stable visual identifiers (axis labels, subplot letters, unit symbols) belong inside the image instead.
|
||||
|
||||
66. **Image fading into the solid background** — soften the image's edge into the deck's background color via a `<linearGradient>` overlay whose end-stop matches the background hex exactly. The image's rectangular boundary disappears, producing seamless integration.
|
||||
|
||||
67. **Image with knock-out / cut-out shape** — overlay a shape filled with the background color or another image, creating the impression of a hole punched through the underlying image.
|
||||
|
||||
68. **Text-as-mask over image** — letterforms revealing image through them. SVG-level `<mask>` is forbidden in this project (PPT export breaks). The only reliable way: bake this effect into the image at generation time by prompting for "large lettering revealing the underlying scene through letterforms." Treat as a pre-rendered artistic choice, not a runtime effect.
|
||||
|
||||
69. **Image rotated at a slight angle for editorial feel** — `transform="rotate(angle cx cy)"` on the `<image>` or its container `<g>`; 2–6 degrees typical. Adds dynamism without breaking layout.
|
||||
|
||||
70. **Image with thin colored matte frame** — `<rect fill="none" stroke="#color" stroke-width="2–6"/>` over or around the image edge. Single rule, single color.
|
||||
|
||||
71. **Image with multiple stacked frames for "photo print" aesthetic** — nested `<rect>` outlines or `<rect>` containers of slightly different sizes giving a "framed photograph" look.
|
||||
|
||||
72. **Image-to-image transition / merge** — two `<image>` elements with overlapping regions, one or both with gradient masks (from group C) creating a soft blend between them.
|
||||
|
||||
---
|
||||
|
||||
## Composition Guidance
|
||||
|
||||
A page is built by layering. Pick one or more **Primary Structures** (Part 1) as the page's bones, then add any number of **Modifier Layers** (Part 2) for finish. Both stack — the question on each page is "is the next layer still earning its place", not "have I exceeded a quota".
|
||||
|
||||
**Cross-primary combinations are encouraged.** A side-by-side comparison (#48) where each side is annotated with bezier-leader cards (#38) is one page, not a violation. A 3×3 grid (#9) whose center cell is upgraded to an image-as-canvas with KPI overlay (#40) reads as one composition. The old reflex "one primary per page" tends to under-use the catalog — combine when the page asks for it.
|
||||
|
||||
**Modifier stacking pattern that works in practice** — observed on real content pages combining one Primary with four Modifiers:
|
||||
|
||||
- one Primary from Part 1 (e.g. #48 side-by-side comparison)
|
||||
- `#21` rounded-rectangle clipPath on the image (rx=6 or circle)
|
||||
- `#27` top-edge linearGradient in the deck's accent color, opacity 0.55 → 0
|
||||
- `#66` bottom-edge linearGradient fading to background color, opacity 0 → 0.95
|
||||
- small color-block badge + reversed-out label replacing any opaque color bar that would otherwise sit over the image
|
||||
|
||||
Combine freely. The "AI-default" failure mode is the opposite: defaulting to bare #2 / #3 (left/right split) with no Modifier at all.
|
||||
|
||||
**Skip-detection signal** — if every page's `Layout pattern` column resolves to bare #2 / #3 / #5 / #6 with no Modifier ids, the catalog was not consulted. Re-read and reconsider.
|
||||
|
||||
## Hard Constraints
|
||||
|
||||
- Long body copy, data points, numeric labels, and Chinese text always go in the SVG layer — never baked into the image.
|
||||
- `<clipPath>` on `<image>` and transparency encoding (`fill-opacity` / `stop-opacity`, never `rgba()`) — authoritative form in [`shared-standards.md`](shared-standards.md) §1.2 and §2; do not restate or relax here.
|
||||
- No `<mask>`, no `<feComposite>` for alpha compositing. Alpha-effect routing (gradient overlays, clipPath crops, filter shadows, baked-in source image) is the table in [`shared-standards.md`](shared-standards.md) §1.0.
|
||||
- `<feDropShadow>` / `<feGaussianBlur>` are accepted but PPT export is inconsistent — bake into the source image when fidelity is critical.
|
||||
|
||||
---
|
||||
|
||||
For sizing math (calculating container dimensions from image aspect ratio when using side-by-side intent), see [`image-layout-spec.md`](image-layout-spec.md). This file is the design vocabulary; that file is the dimension calculator.
|
||||
@@ -0,0 +1,235 @@
|
||||
> See shared-standards.md for common technical constraints.
|
||||
|
||||
# Image Layout Specification
|
||||
|
||||
Layout rules for pages where the image is placed **side-by-side with body text** as a container block. Strategist and Executor both follow these rules when the image's narrative intent is *side-by-side*.
|
||||
|
||||
**Core principle (side-by-side)**: compute container layout from the image's original aspect ratio so the image displays completely — no excess whitespace, no cropping.
|
||||
|
||||
> **Scope**: this spec applies to *side-by-side* intent only. Other intents (hero / full-bleed, atmosphere / background, accent / inline) use full-bleed placement where ratio alignment is not a constraint and cropping is expected — the ratio→split table below does NOT apply. See `references/strategist.md` §h for intent selection.
|
||||
|
||||
---
|
||||
|
||||
## Layout Decision Flow
|
||||
|
||||
```
|
||||
1. Decide narrative intent (hero / atmosphere / side-by-side / accent) — see strategist.md §h
|
||||
2. If intent = side-by-side: continue below. Otherwise: compose per narrative; this spec does not apply.
|
||||
3. Get image original dimensions → Calculate ratio (width/height)
|
||||
4. Select layout type based on ratio
|
||||
5. Calculate maximum display size for the image
|
||||
6. Allocate remaining space for text area
|
||||
7. Fill results into the Design Specification's image resource list
|
||||
```
|
||||
|
||||
**When to run**: if image approach includes "B) User-provided", run the scan and populate the image resource list after the Strategist's Eight Confirmations and before content analysis / outlining.
|
||||
|
||||
---
|
||||
|
||||
## Layout Type Selection (side-by-side intent)
|
||||
|
||||
| Image Ratio | Layout Type | Image Position | Description |
|
||||
|-------------|-------------|----------------|-------------|
|
||||
| > 2.0 (ultra-wide) | Top-bottom split | Top full-width | Image spans canvas width, height proportional |
|
||||
| 1.5-2.0 (wide) | Top-bottom split | Top | Image width = content area width, height proportional |
|
||||
| 1.2-1.5 (standard) | Left-right split | Left | Image height-first fit, width proportional |
|
||||
| 0.8-1.2 (square) | Left-right split | Left | Image takes content area height, width proportional |
|
||||
| < 0.8 (portrait) | Left-right split | Left | Image height = content area height, width proportional |
|
||||
|
||||
> Boundary ratio (e.g., 1.5): decide by text volume — more text → left-right; less text → top-bottom.
|
||||
|
||||
---
|
||||
|
||||
## Dimension Calculation Formulas
|
||||
|
||||
### Canvas Parameters (All Formats)
|
||||
|
||||
| Format | Canvas | Margins (L/R, T/B) | Content Area (W x H) | Title Height | Content Start Y |
|
||||
|--------|--------|--------------------|-----------------------|-------------|----------------|
|
||||
| PPT 16:9 | 1280x720 | 60, 60 | 1160 x 600 | 60px | 80px |
|
||||
| PPT 4:3 | 1024x768 | 50, 50 | 924 x 608 | 60px | 70px |
|
||||
| Xiaohongshu | 1242x1660 | 60, 80 | 1122 x 1500 | 80px | 100px |
|
||||
| WeChat Moments | 1080x1080 | 60, 60 | 960 x 960 | 60px | 80px |
|
||||
| Story | 1080x1920 | 60, 120/180 | 960 x 1620 | 80px | 140px |
|
||||
| WeChat Article | 900x383 | 40, 40 | 820 x 303 | 40px | 50px |
|
||||
|
||||
> Below, **W** = content area width, **H** = content area height (excludes title). PPT 16:9 example: W=1160, H=600.
|
||||
|
||||
### Top-Bottom Layout Calculation
|
||||
|
||||
```
|
||||
Image width = W = 1160 px
|
||||
Image height = W / R = 1160 / R px
|
||||
Text area height = H - image height - gap(20px)
|
||||
|
||||
Validation: Text area height >= 150px (at least 3-4 lines of text)
|
||||
If not satisfied → Switch to left-right layout
|
||||
```
|
||||
|
||||
### Left-Right Layout Calculation
|
||||
|
||||
**Method 1 (height-first, suitable for portrait images)**:
|
||||
```
|
||||
Image height = H = 600 px
|
||||
Image width = H x R = 600 x R px
|
||||
Text area width = W - image width - gap(20px)
|
||||
```
|
||||
|
||||
**Method 2 (width-constrained, for wide images converted to left-right)**:
|
||||
```
|
||||
Image width = W x 0.7 = 812 px
|
||||
Image height = image width / R
|
||||
Text area width = W - image width - gap(20px)
|
||||
```
|
||||
|
||||
**Validation**: Text area width >= 280px; otherwise reduce image area width.
|
||||
|
||||
---
|
||||
|
||||
## Layout Examples
|
||||
|
||||
### Ultra-wide Image (ratio 2.45)
|
||||
|
||||
```
|
||||
Original: 1960x800, R=2.45 → Top-bottom split
|
||||
Image: 1160x473, Text area: 1160x147 → 7:3 top-bottom
|
||||
```
|
||||
|
||||
### Standard Landscape (ratio 1.38)
|
||||
|
||||
```
|
||||
Original: 1614x1171, R=1.38 → Left-right split
|
||||
Image: 773x560 (left), Text area: 367x560 (right) → 7:3 left-right
|
||||
```
|
||||
|
||||
### Wide Image Edge Case (ratio 1.75)
|
||||
|
||||
```
|
||||
Original: 1820x1040, R=1.75
|
||||
Try top-bottom: image height=663, text area=-43 ❌
|
||||
Switch to left-right: image 780x446 (left), text area 360x600 (right) → 7:3 left-right
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Portrait Canvas Override
|
||||
|
||||
Default selection table assumes **landscape or square canvas**. For portrait canvases (height > width), left-right splits leave both columns too narrow — use the override below.
|
||||
|
||||
| Canvas Orientation | Image Ratio | Recommended Layout | Reason |
|
||||
|-------------------|-------------|-------------------|--------|
|
||||
| Portrait (Xiaohongshu, Story) | > 1.5 (wide) | Top-bottom | Same as landscape canvas |
|
||||
| Portrait (Xiaohongshu, Story) | 1.2-1.5 (standard) | Top-bottom | Left-right too narrow on tall canvas |
|
||||
| Portrait (Xiaohongshu, Story) | 0.8-1.2 (square) | Top-bottom | Image fits well in top half |
|
||||
| Portrait (Xiaohongshu, Story) | 0.5-0.8 (portrait) | Left-right | Portrait image on tall canvas works |
|
||||
| Portrait (Xiaohongshu, Story) | < 0.5 (extreme portrait) | Left-right | Image takes one side, text the other |
|
||||
|
||||
> Square canvases (WeChat Moments 1:1): use the standard landscape rules.
|
||||
|
||||
---
|
||||
|
||||
## Multi-Image Layout
|
||||
|
||||
For slides with multiple images, divide the content area evenly using the formulas below.
|
||||
|
||||
### Grid Formulas
|
||||
|
||||
```
|
||||
columns = number of columns
|
||||
rows = number of rows
|
||||
gap = 20px (PPT formats) or 30px (social formats)
|
||||
|
||||
cell_width = (W - (columns - 1) * gap) / columns
|
||||
cell_height = (H - (rows - 1) * gap) / rows
|
||||
```
|
||||
|
||||
### Common Patterns
|
||||
|
||||
| Image Count | Layout | Grid | Description |
|
||||
|-------------|--------|------|-------------|
|
||||
| 2 (both landscape) | Side-by-side | 2x1 | Two equal columns |
|
||||
| 2 (both portrait) | Stacked | 1x2 | Two equal rows |
|
||||
| 2 (mixed) | 1 large + 1 small | Custom | Landscape top (full-width), portrait right-bottom |
|
||||
| 3 | 1 large + 2 small | 1+2 | Left large (50% width), right column with 2 stacked |
|
||||
| 4 | Grid | 2x2 | Equal-sized cells |
|
||||
|
||||
### Example: 2x2 Grid on PPT 16:9
|
||||
|
||||
```
|
||||
W=1160, H=600, gap=20
|
||||
cell_width = (1160 - 20) / 2 = 570
|
||||
cell_height = (600 - 20) / 2 = 290
|
||||
|
||||
Image positions:
|
||||
(60, 80) 570x290 (650, 80) 570x290
|
||||
(60, 390) 570x290 (650, 390) 570x290
|
||||
```
|
||||
|
||||
> Multi-image slides: use `preserveAspectRatio="xMidYMid meet"` on all images for consistent in-cell display.
|
||||
|
||||
---
|
||||
|
||||
## Prohibited Practices
|
||||
|
||||
| Prohibited | Correct Approach |
|
||||
|-----------|-----------------|
|
||||
| Fixed 50:50 or arbitrary ratios | Dynamic calculation based on image ratio |
|
||||
| Forcing wide image into square container | Use top-bottom layout or increase image area width |
|
||||
| Placing portrait image in narrow horizontal strip | Use left-right layout, image on left |
|
||||
| Image whitespace exceeding 10% | Recalculate layout or choose alternative approach |
|
||||
| Cropping key image content | Use `preserveAspectRatio="xMidYMid meet"` |
|
||||
| Text area too small to read | Ensure text area >= 150px (top-bottom) or >= 280px (left-right) |
|
||||
|
||||
---
|
||||
|
||||
## Handoff Fields
|
||||
|
||||
This spec only defines layout calculation. Write computed fields into the Image Resource List defined in [`svg-image-embedding.md`](svg-image-embedding.md):
|
||||
|
||||
| Field | Meaning |
|
||||
|-------|---------|
|
||||
| `Ratio` | Original image width / height |
|
||||
| `Layout plan` | Top-bottom / left-right / grid, including split ratio when relevant |
|
||||
| `Image area` | Computed display rectangle size |
|
||||
| `Text area` | Computed remaining text area size |
|
||||
|
||||
For SVG `<image>` syntax, path rules, `preserveAspectRatio`, external refs, and Base64 embedding: see [`svg-image-embedding.md`](svg-image-embedding.md).
|
||||
|
||||
### SVG Image Embedding Examples
|
||||
|
||||
Complete display (data charts, side-by-side — must not crop):
|
||||
|
||||
```xml
|
||||
<image href="../images/xxx.png"
|
||||
x="60" y="80" width="780" height="446"
|
||||
preserveAspectRatio="xMidYMid meet"/>
|
||||
```
|
||||
|
||||
Crop-to-fill (backgrounds and hero images only):
|
||||
|
||||
```xml
|
||||
<image href="../images/bg.png"
|
||||
x="0" y="0" width="1280" height="720"
|
||||
preserveAspectRatio="xMidYMid slice"/>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Automation Tool
|
||||
|
||||
```bash
|
||||
python3 scripts/analyze_images.py <project_path>/images # Default: PPT 16:9
|
||||
python3 scripts/analyze_images.py <project_path>/images --canvas ppt43 # PPT 4:3
|
||||
python3 scripts/analyze_images.py <project_path>/images --canvas xiaohongshu # Xiaohongshu
|
||||
```
|
||||
|
||||
`--canvas` selects target format (default `ppt169`). The tool computes layout type (top-bottom / left-right), image display area, and text area per the formulas above. Output is a Markdown table — paste directly into the image resource list.
|
||||
|
||||
---
|
||||
|
||||
## Role Responsibilities
|
||||
|
||||
| Role | Responsibility |
|
||||
|------|---------------|
|
||||
| **Strategist** | Run analyze_images.py, calculate layout per this spec, populate image resource list |
|
||||
| **Executor** | Strictly follow the layout plan and dimensions in the image resource list when generating SVGs |
|
||||
@@ -0,0 +1,127 @@
|
||||
# Palettes — Index
|
||||
|
||||
A **palette** is the deck's **color behavior** — proportion, role, temperament. It does **not** supply HEX values; those come from `design_spec.colors`. The palette tells the model how to use the HEX values: which dominates, which carries accent, what proportion the background occupies, what the overall temperament feels like.
|
||||
|
||||
> Why this split: SVG renders the HEX precisely from `design_spec`. The AI image must use the **same HEX values** so the image visually belongs in the deck — but the image needs more than a HEX list; it needs a **usage rule**. That's the palette.
|
||||
|
||||
---
|
||||
|
||||
## 1. Catalog (14 palettes)
|
||||
|
||||
Each palette has its own file with: rendering compatibility matrix and a fewshot prompt snippet.
|
||||
|
||||
| Palette | Temperament | Best for |
|
||||
|---|---|---|
|
||||
| [`cool-corporate`](./cool-corporate.md) | Stable, professional, restrained | Consulting / B2B / finance |
|
||||
| [`warm-earth`](./warm-earth.md) | Friendly, grounded, human | Brand / lifestyle / education |
|
||||
| [`tech-neon`](./tech-neon.md) | Energetic, futuristic, high-contrast | AI / SaaS / product launch |
|
||||
| [`editorial-classic`](./editorial-classic.md) | Refined, magazine, balanced | Journalism / opinion / culture |
|
||||
| [`macaron`](./macaron.md) | Soft pastel, gentle, approachable | Education / children / onboarding |
|
||||
| [`mono-ink`](./mono-ink.md) | High-contrast monochrome with sparse accents | Methodology / Before-After / manifesto |
|
||||
| [`vivid-launch`](./vivid-launch.md) | Bold, saturated, attention-grabbing | Product launch / marketing / event |
|
||||
| [`dark-cinematic`](./dark-cinematic.md) | Premium, atmospheric, low-light | Premium product / film / entertainment |
|
||||
| [`duotone`](./duotone.md) | Two-color limited, poster-like | Cultural / cover hero / cinematic |
|
||||
| [`nature-organic`](./nature-organic.md) | Earthy, natural, wellness | Environment / wellness / outdoor |
|
||||
| [`jewel-tone`](./jewel-tone.md) | Deep saturated gemstone — emerald/sapphire/ruby + gold | Luxury / fashion / premium product / heritage |
|
||||
| [`frost-ice`](./frost-ice.md) | Near-white field with pale cool accents | Health / medical / beauty / premium SaaS |
|
||||
| [`sunset-gradient`](./sunset-gradient.md) | Warm gradient flow (pink → orange → purple) | Lifestyle / creative / travel / event |
|
||||
| [`earthy-dusty`](./earthy-dusty.md) | Muted desaturated earth tones, Morandi-adjacent | Interior / wellness / mindfulness / slow living |
|
||||
|
||||
---
|
||||
|
||||
## 2. Escape hatch — `custom`
|
||||
|
||||
When no preset temperament matches (brand HEX outside preset ranges, ceremonial / cultural / niche aesthetic), set `image_palette: custom` and supply a one-paragraph `image_palette_behavior`.
|
||||
|
||||
**Trigger** — all of:
|
||||
|
||||
| Condition | Check against |
|
||||
|---|---|
|
||||
| No preset temperament fits | `design_spec.e Color Scheme` |
|
||||
| Brand / template / chat names no preset | truth-precedence inputs |
|
||||
| Not expressible as "preset X + small HEX swap" | Strategist confirmation chat |
|
||||
|
||||
**Hard rule — `palette_behavior` prose**:
|
||||
|
||||
| Rule | Value |
|
||||
|---|---|
|
||||
| Length | One paragraph, 2-5 sentences |
|
||||
| Per-HEX content | role + approximate area share (proportion follows information weight; no fixed % menu) |
|
||||
| HEX source | Quote `design_spec.colors` values verbatim with backticks; never invent HEX |
|
||||
| Forbidden | Naming a competing preset ("like macaron but darker") |
|
||||
|
||||
```yaml
|
||||
- image_palette: custom
|
||||
- image_palette_behavior: "Primary deep aubergine `#4C1D95` anchors the dominant ~35% of canvas; secondary warm cream `#FEF3C7` carries ~55% as breathing field; accent burnished gold `#D4AF37` appears only in 5-10% as small ceremonial accents. Restrained, ceremonial gravitas — no fourth color."
|
||||
```
|
||||
|
||||
> Note: §4's rendering × palette matrix only covers the 14 presets. When `palette: custom`, Strategist owns the compatibility judgment in h.5.
|
||||
|
||||
**Hard rule**: `custom` is a tail-case, not a default. See [`strategist.md`](../strategist.md) h.5 for the one-`custom`-per-dimension limit.
|
||||
|
||||
---
|
||||
|
||||
## 3. Auto-selection table — `design_spec` → palette
|
||||
|
||||
Match `design_spec.md d. Style` + `e. Color Scheme` content vibe. First match wins. **No row matches** → use `custom` per §2 rather than force-fitting `cool-corporate`.
|
||||
|
||||
| Content vibe / industry | Recommended palette | Alternates |
|
||||
|---|---|---|
|
||||
| Consulting / finance / B2B / corporate | `cool-corporate` | `editorial-classic`, `frost-ice` |
|
||||
| Tech / SaaS / AI | `tech-neon` | `cool-corporate`, `dark-cinematic` |
|
||||
| Modern SaaS / fintech / health-tech | `frost-ice` | `cool-corporate`, `tech-neon` |
|
||||
| Health / medical / beauty / skincare | `frost-ice` | `nature-organic`, `earthy-dusty` |
|
||||
| Education / training / onboarding | `macaron` | `warm-earth` |
|
||||
| Methodology / Before-After / mindset shift | `mono-ink` | `editorial-classic` |
|
||||
| Personal / lifestyle / brand story | `warm-earth` | `nature-organic`, `earthy-dusty` |
|
||||
| Interior / wellness / mindfulness / slow living | `earthy-dusty` | `warm-earth`, `nature-organic` |
|
||||
| Product launch / marketing / event | `vivid-launch` | `tech-neon`, `sunset-gradient` |
|
||||
| Creative agency / travel / music / lifestyle | `sunset-gradient` | `vivid-launch`, `warm-earth` |
|
||||
| Luxury / fashion / jewelry / premium / heritage | `jewel-tone` | `dark-cinematic`, `editorial-classic` |
|
||||
| Children / storybook | `macaron` | `warm-earth` |
|
||||
| Premium / entertainment / film | `dark-cinematic` | `jewel-tone`, `duotone` |
|
||||
| Cultural / media / cover-art | `duotone` | `editorial-classic` |
|
||||
| Environment / wellness / outdoor | `nature-organic` | `warm-earth`, `earthy-dusty` |
|
||||
| Finance / journalism / explainer | `editorial-classic` | `cool-corporate` |
|
||||
| Government / formal | `cool-corporate` | `editorial-classic` |
|
||||
|
||||
---
|
||||
|
||||
## 4. Rendering × Palette compatibility
|
||||
|
||||
Some combinations clash. Use this matrix as a sanity check after auto-selection.
|
||||
|
||||
| | cool-corp | warm-earth | tech-neon | editorial | macaron | mono-ink | vivid-launch | dark-cinem | duotone | nature-org | jewel-tone | frost-ice | sunset-grad | earthy-dusty |
|
||||
|---|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|
|
||||
| vector-illustration | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓✓ |
|
||||
| flat | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓✓ |
|
||||
| minimalist-swiss | ✓✓ | ✓ | ✓ | ✓✓ | ✓ | ✓✓ | ✗ | ✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✗ | ✓ |
|
||||
| glassmorphism | ✓✓ | ✓ | ✓✓ | ✓ | ✓✓ | ✗ | ✓ | ✓✓ | ✗ | ✓ | ✓ | ✓✓ | ✓ | ✓ |
|
||||
| 3d-isometric | ✓✓ | ✓ | ✓✓ | ✓ | ✓ | ✗ | ✓✓ | ✓✓ | ✗ | ✓ | ✓ | ✓ | ✓ | ✓ |
|
||||
| digital-dashboard | ✓✓ | ✗ | ✓✓ | ✓✓ | ✗ | ✓ | ✓ | ✓✓ | ✗ | ✗ | ✗ | ✓✓ | ✗ | ✗ |
|
||||
| corporate-photo | ✓✓ | ✓✓ | ✓ | ✓✓ | ✗ | ✗ | ✓ | ✓✓ | ✗ | ✓✓ | ✓✓ | ✓ | ✗ | ✓✓ |
|
||||
| blueprint | ✓✓ | ✗ | ✓✓ | ✓ | ✗ | ✓✓ | ✗ | ✓✓ | ✓ | ✗ | ✗ | ✓ | ✗ | ✗ |
|
||||
| editorial | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓ | ✓✓ |
|
||||
| sketch-notes | ✓ | ✓✓ | ✗ | ✓ | ✓✓ | ✓ | ✓ | ✗ | ✗ | ✓✓ | ✗ | ✗ | ✗ | ✓ |
|
||||
| ink-notes | ✓ | ✓ | ✗ | ✓✓ | ✗ | ✓✓ | ✗ | ✗ | ✓ | ✗ | ✗ | ✓ | ✗ | ✓ |
|
||||
| chalkboard | ✗ | ✓ | ✗ | ✗ | ✓ | ✓ | ✗ | ✓✓ | ✓ | ✓ | ✗ | ✗ | ✗ | ✓ |
|
||||
| paper-cut | ✓ | ✓✓ | ✗ | ✓ | ✓✓ | ✗ | ✓ | ✗ | ✓ | ✓✓ | ✗ | ✓ | ✗ | ✓✓ |
|
||||
| watercolor | ✓ | ✓✓ | ✗ | ✓ | ✓✓ | ✗ | ✓ | ✓ | ✗ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓✓ |
|
||||
| warm-scene | ✓ | ✓✓ | ✗ | ✓ | ✓ | ✗ | ✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✗ | ✓✓ | ✓ |
|
||||
| screen-print | ✓ | ✓ | ✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
|
||||
| vintage-poster | ✓ | ✓✓ | ✗ | ✓✓ | ✓ | ✓ | ✓ | ✓ | ✓✓ | ✓ | ✗ | ✗ | ✓ | ✓✓ |
|
||||
| fantasy-animation | ✗ | ✓✓ | ✗ | ✗ | ✓✓ | ✗ | ✓ | ✗ | ✗ | ✓✓ | ✗ | ✗ | ✓ | ✗ |
|
||||
| pixel-art | ✗ | ✓ | ✓✓ | ✗ | ✓ | ✓ | ✓✓ | ✓ | ✓ | ✗ | ✗ | ✗ | ✗ | ✗ |
|
||||
| nature | ✓ | ✓✓ | ✗ | ✓ | ✓ | ✗ | ✓ | ✗ | ✗ | ✓✓ | ✓ | ✓ | ✓ | ✓✓ |
|
||||
|
||||
✓✓ recommended | ✓ acceptable | ✗ avoid
|
||||
|
||||
---
|
||||
|
||||
## 5. How to use
|
||||
|
||||
1. After picking rendering, look up your candidate palette in the auto-selection table.
|
||||
2. Cross-check the compatibility matrix — if `✗`, pick the alternate.
|
||||
3. `read_file image-palettes/<chosen>.md` and apply its proportion + role rules to the deck's HEX values when assembling prompts. (For `custom`, this step is replaced by the consumption branch in [`image-generator.md`](../image-generator.md) Step 2 — no preset file to read.)
|
||||
|
||||
**Lock for the whole deck.**
|
||||
@@ -0,0 +1,27 @@
|
||||
# Palette: cool-corporate
|
||||
|
||||
Stable, professional, restrained. The default palette for consulting / finance / B2B / corporate decks where credibility is the primary visual signal.
|
||||
|
||||
> This file describes **color behavior**, not HEX values. The deck's HEX triplet comes from `design_spec.colors` (set by Strategist). cool-corporate tells the model **how to use** those HEX values.
|
||||
|
||||
## 1. Compatible renderings
|
||||
|
||||
| Rendering | Notes |
|
||||
|---|---|
|
||||
| ✓✓ vector-illustration | Default pairing — flat shapes carry the restraint |
|
||||
| ✓✓ flat | Similar feel, slightly more decorative |
|
||||
| ✓✓ 3d-isometric | Works well — keep shadows soft and 8% opacity |
|
||||
| ✓✓ digital-dashboard | Natural fit for data products |
|
||||
| ✓✓ blueprint | Good for technical architecture |
|
||||
| ✓✓ corporate-photo | Photography with cool color grading |
|
||||
| ✓✓ editorial | Magazine restraint matches palette restraint |
|
||||
| ✗ sketch-notes / fantasy-animation / pixel-art | Temperament conflict — choose `warm-earth` or `macaron` for those renderings |
|
||||
| ✗ dark-cinematic combinations | Dark-cinematic is a different palette — don't try to merge |
|
||||
|
||||
---
|
||||
|
||||
## 2. Fewshot prompt snippets
|
||||
|
||||
**Snippet A — applied to a vector-illustration background**
|
||||
|
||||
> [...rendering paragraph...] Color behavior is restrained-corporate: secondary light gray `#F8F9FA` carries 65% of the canvas as calm breathing space across the upper two-thirds; primary deep navy `#1E3A5F` forms a confident diagonal block across the lower portion (about 28% area); accent gold `#D4AF37` appears only as one thin horizontal line and a single small geometric dot, together under 5% of the area. No additional colors. [...container guidance...]
|
||||
@@ -0,0 +1,33 @@
|
||||
# Palette: dark-cinematic
|
||||
|
||||
Premium, atmospheric, low-light. The "dark mode" palette — used for premium product launches, film / entertainment decks, evening / nightlife themes, sophisticated tech that wants cinema mood. Distinguished by **deep dark background** with carefully placed bright accents.
|
||||
|
||||
> This file describes **color behavior**, not HEX values.
|
||||
|
||||
## 1. Special: dark-cinematic may override deck background
|
||||
|
||||
dark-cinematic, like mono-ink, may **override `design_spec.colors.secondary`** if the deck's secondary is light. The dark background is essential to the palette identity. Note this in the prompt:
|
||||
|
||||
> "dark-cinematic palette uses a deep dark background `#0A0E27` regardless of deck's secondary HEX — the dark cinema field is the identity. The deck's primary `#XXX` is used as the bright lit subject; the deck's accent `#XXX` carries the glow accent."
|
||||
|
||||
## 2. Compatible renderings
|
||||
|
||||
| Rendering | Notes |
|
||||
|---|---|
|
||||
| ✓✓ 3d-isometric | Premium dark-mode architecture |
|
||||
| ✓✓ digital-dashboard | Dark-mode SaaS product |
|
||||
| ✓✓ corporate-photo | Low-light photography |
|
||||
| ✓✓ warm-scene | Evening / nightlight scenes |
|
||||
| ✓✓ screen-print | Cinematic poster |
|
||||
| ✓ blueprint | Dark-mode schematic |
|
||||
| ✓ vector-illustration | Acceptable |
|
||||
| ✗ sketch-notes / fantasy-animation / nature / chalkboard | Wrong temperament |
|
||||
| ✗ macaron / warm-earth | Wrong brightness identity |
|
||||
|
||||
---
|
||||
|
||||
## 3. Fewshot prompt snippets
|
||||
|
||||
**Snippet A — applied to a digital-dashboard premium product**
|
||||
|
||||
> [...rendering paragraph...] Color behavior is dark-cinematic dashboard: deep dark `#0A0E27` covers about 65% of the surface as the cinema background. Primary bright teal `#14B8A6` carries the main chart bars with implied 8%-opacity glow halo (about 25%). Accent gold `#D4AF37` reserved for one highlighted KPI with stronger glow (about 10%). Card backgrounds are slightly lighter dark `#1E293B` separating cards from the deeper void. Premium, cinematic, sophisticated. [...container guidance...]
|
||||
@@ -0,0 +1,28 @@
|
||||
# Palette: duotone
|
||||
|
||||
Two-color limited, poster-like. The constrained palette — only two colors plus a background, used for cultural / cover hero / cinematic poster decks where chromatic discipline carries the page.
|
||||
|
||||
> This file describes **color behavior**, not HEX values.
|
||||
|
||||
## 1. Compatible renderings
|
||||
|
||||
| Rendering | Notes |
|
||||
|---|---|
|
||||
| ✓✓ screen-print | Direct alignment — duotone is screen-print's signature |
|
||||
| ✓✓ flat | Bold two-color flat |
|
||||
| ✓ vector-illustration | Two-color vector |
|
||||
| ✓ editorial | Two-color editorial spread |
|
||||
| ✓ blueprint | Two-color schematic |
|
||||
| ✓ pixel-art | Limited-color retro |
|
||||
| ✓ chalkboard | Pastel two-color chalk |
|
||||
| ✗ corporate-photo | Photography can't be duotone (unless duotone-graded) |
|
||||
| ✗ sketch-notes / fantasy-animation / nature / watercolor | Wrong temperament |
|
||||
| ✗ digital-dashboard / 3d-isometric | Need more chromatic depth |
|
||||
|
||||
---
|
||||
|
||||
## 2. Fewshot prompt snippets
|
||||
|
||||
**Snippet A — applied to a screen-print cover poster**
|
||||
|
||||
> [...rendering paragraph...] Color behavior is duotone: deep navy `#1E3A5F` carries the lower 55% as a confident block including the silhouette of a stylized mountain. Burnt orange `#C2410C` carries the upper 45% as the sky, with one small near-white circular sun (under 3%). Only these two colors appear in the composition — no third hue. Halftone dot texture at the horizon between the two color zones. Slight color misregistration adds silkscreen authenticity. [...container guidance...]
|
||||
@@ -0,0 +1,27 @@
|
||||
# Palette: earthy-dusty
|
||||
|
||||
Muted desaturated earth tones — dusty pink, sage green, faded terracotta, muted ochre. Calm, sophisticated, refined-minimal — Morandi-adjacent. Used for lifestyle / interior design / wellness / mindfulness / slow living / contemporary minimal brand decks where understatement is the visual signal.
|
||||
|
||||
> This file describes **color behavior**, not HEX values. earthy-dusty tells the model how to apply the deck's HEX values **at reduced saturation** — every color appears slightly desaturated, even when the HEX itself is more vivid.
|
||||
|
||||
## 1. Compatible renderings
|
||||
|
||||
| Rendering | Notes |
|
||||
|---|---|
|
||||
| ✓✓ watercolor | Watercolor's muted material aligns naturally |
|
||||
| ✓✓ editorial | Magazine restraint pairs well with muted discipline |
|
||||
| ✓✓ corporate-photo | Photography graded toward dusty / Morandi palette (lifestyle, interior, wellness) |
|
||||
| ✓✓ flat | Muted flat geometric blocks |
|
||||
| ✓✓ vector-illustration | Dusty vector restraint |
|
||||
| ✓ paper-cut | Muted paper craft |
|
||||
| ✓ warm-scene | Warm scene with dusted grading |
|
||||
| ✗ tech-neon / vivid-launch / pixel-art / digital-dashboard | Wrong temperament — those rely on saturation |
|
||||
| ✗ chalkboard | Wrong material |
|
||||
|
||||
---
|
||||
|
||||
## 2. Fewshot prompt snippets
|
||||
|
||||
**Snippet A — applied to an editorial lifestyle spread**
|
||||
|
||||
> [...rendering paragraph...] Color behavior is earthy-dusty Morandi-adjacent: every color appears desaturated 30% from its source HEX. Secondary muted oat `#E8E0D5` carries the upper 60% of the canvas as calm field. Primary muted dusty terracotta `#C9A38C` (desaturated translation of the deck's primary) forms a confident block across the lower 30%. Accent muted sage `#A8B5A0` appears as one thin horizontal line near the meeting point and one small dusty dot in the upper right (totaling about 10%). No vivid color anywhere. Refined, contemplative. [...container guidance...]
|
||||
@@ -0,0 +1,26 @@
|
||||
# Palette: editorial-classic
|
||||
|
||||
Refined, magazine-style, balanced. The premium-restrained palette — used in finance journalism, opinion pieces, sophisticated B2B content, longform commentary. Distinguished from cool-corporate by slightly richer primary tones and more deliberate accent rules.
|
||||
|
||||
> This file describes **color behavior**, not HEX values.
|
||||
|
||||
## 1. Compatible renderings
|
||||
|
||||
| Rendering | Notes |
|
||||
|---|---|
|
||||
| ✓✓ editorial | Perfect alignment |
|
||||
| ✓✓ vector-illustration | Restrained vector with magazine pacing |
|
||||
| ✓✓ ink-notes | Editorial restraint + ink-notes formality |
|
||||
| ✓✓ corporate-photo | Magazine photography |
|
||||
| ✓ flat | Acceptable — flat is slightly more decorative |
|
||||
| ✓ blueprint | Works for technical magazine content |
|
||||
| ✓ screen-print | Editorial poster style |
|
||||
| ✗ sketch-notes / fantasy-animation / pixel-art | Too playful for editorial restraint |
|
||||
|
||||
---
|
||||
|
||||
## 2. Fewshot prompt snippets
|
||||
|
||||
**Snippet A — applied to an editorial finance explainer**
|
||||
|
||||
> [...rendering paragraph...] Color behavior is editorial-classic: secondary warm cream `#FAF7F2` covers about 55% of the canvas with subtle paper-grain at 8% opacity; primary deep navy `#0F2C4C` carries the dominant data block on the left (about 32%); accent burnt orange `#C2410C` appears as one thin horizontal rule and a single small data marker at the highlighted point (about 12% total). Magazine-spread composition with deliberate gutters. [...container guidance...]
|
||||
@@ -0,0 +1,27 @@
|
||||
# Palette: frost-ice
|
||||
|
||||
Near-white field with pale cool accents — icy blue, pale silver-gray, hint of crystalline. Clean, clinical, premium-minimal, calming. Used for health / medical / beauty / skincare / wellness / premium SaaS / B2B tech where serenity and clarity are the primary visual signal.
|
||||
|
||||
> This file describes **color behavior**, not HEX values. frost-ice tells the model how to apply the deck's HEX values with **maximum breathing room and cool restraint**.
|
||||
|
||||
## 1. Compatible renderings
|
||||
|
||||
| Rendering | Notes |
|
||||
|---|---|
|
||||
| ✓✓ digital-dashboard | Clean clinical UI — natural pairing |
|
||||
| ✓✓ vector-illustration | Light vector with cool restraint |
|
||||
| ✓✓ flat | Pale flat geometric |
|
||||
| ✓✓ minimalist-swiss | Field-and-grid pairing |
|
||||
| ✓✓ glassmorphism | Soft polished cool aesthetic |
|
||||
| ✓ corporate-photo | Photography with cool clinical grading (medical, beauty, spa) |
|
||||
| ✓ blueprint | Pale schematic |
|
||||
| ✗ sketch-notes / chalkboard / fantasy-animation / pixel-art | Wrong temperament — those are warm |
|
||||
| ✗ dark-cinematic combinations | Dark mood is opposite of frost identity |
|
||||
|
||||
---
|
||||
|
||||
## 2. Fewshot prompt snippets
|
||||
|
||||
**Snippet A — applied to a vector-illustration health/spa hero**
|
||||
|
||||
> [...rendering paragraph...] Color behavior is frost-ice: secondary near-white `#F8FBFD` occupies about 80% of the canvas as vast calm field. A single soft pale cool primary `#DBEAFE` rounded shape appears in the lower third (about 12%). Accent steel blue `#3B82F6` appears as one small deliberate dot or thin line at a rule-of-thirds intersection (about 5%). No warm tones, no saturated colors. Maximum breathing room. [...container guidance...]
|
||||
@@ -0,0 +1,26 @@
|
||||
# Palette: jewel-tone
|
||||
|
||||
Deep saturated gemstone colors — emerald, sapphire, ruby, amethyst, gold. Premium, luxurious, evening-elegant. Used for luxury / fashion / jewelry / premium product / evening events / heritage brands where richness is the visual signal.
|
||||
|
||||
> This file describes **color behavior**, not HEX values. The deck's HEX triplet comes from `design_spec.colors`. jewel-tone tells the model how to apply those HEX values with **jewel-rich saturation discipline**.
|
||||
|
||||
## 1. Compatible renderings
|
||||
|
||||
| Rendering | Notes |
|
||||
|---|---|
|
||||
| ✓✓ editorial | Magazine luxury — natural pairing |
|
||||
| ✓✓ corporate-photo | High-end product/lifestyle photography graded toward jewel tones |
|
||||
| ✓✓ dark-cinematic combinations are handled by `dark-cinematic` palette; jewel-tone is the *richer alternative* — use jewel-tone when you want saturation, dark-cinematic when you want atmospheric |
|
||||
| ✓ flat | Bold flat jewel blocks |
|
||||
| ✓ vector-illustration | Acceptable but loses material implication |
|
||||
| ✓ screen-print | Limited-color poster luxury |
|
||||
| ✗ sketch-notes / chalkboard / pixel-art / fantasy-animation | Wrong temperament |
|
||||
| ✗ digital-dashboard | Data UI conflicts with luxury |
|
||||
|
||||
---
|
||||
|
||||
## 2. Fewshot prompt snippets
|
||||
|
||||
**Snippet A — applied to an editorial luxury hero**
|
||||
|
||||
> [...rendering paragraph...] Color behavior is jewel-tone: rich primary deep emerald `#047857` forms a confident block across the lower 40% of the canvas with high saturation. Secondary deep cream `#FEF3C7` carries the upper 48% as velvet field. Accent gold `#D4AF37` appears as a single thin metallic horizontal line at the meeting point and one small polished gold dot in the upper right (totaling about 10%). No muted tints. No additional colors. Premium evening feel. [...container guidance...]
|
||||
@@ -0,0 +1,28 @@
|
||||
# Palette: macaron
|
||||
|
||||
Soft pastel, gentle, approachable. The signature palette for education, onboarding, children's content, knowledge cards, and warm friendly explainers. Distinguished by **pastel-tinted** versions of the deck's HEX values on a warm cream field.
|
||||
|
||||
> This file describes **color behavior**, not HEX values. HEX comes from `design_spec.colors`, but rendered as pastel tints.
|
||||
|
||||
## 1. Compatible renderings
|
||||
|
||||
| Rendering | Notes |
|
||||
|---|---|
|
||||
| ✓✓ sketch-notes | Direct alignment — macaron is the default sketch-notes palette |
|
||||
| ✓✓ flat | Pastel flat blocks for friendly content |
|
||||
| ✓✓ vector-illustration | Pastel vector for educational warmth |
|
||||
| ✓✓ watercolor | Pastel washes pair naturally |
|
||||
| ✓✓ fantasy-animation | Storybook pastels |
|
||||
| ✓✓ chalkboard | Pastel chalk on dark slate |
|
||||
| ✓ pixel-art | Pastel retro |
|
||||
| ✗ tech-neon / dark-cinematic / blueprint | Wrong temperament |
|
||||
| ✗ corporate-photo | Photography wants natural color |
|
||||
| ✗ digital-dashboard | Dashboards want vivid not pastel |
|
||||
|
||||
---
|
||||
|
||||
## 2. Fewshot prompt snippets
|
||||
|
||||
**Snippet A — applied to a sketch-notes infographic**
|
||||
|
||||
> [...rendering paragraph...] Color behavior is macaron pastel: warm cream paper background `#F5F0E8` covers about 50%. Four rounded info boxes filled with soft pastels — light blue (pastel tint of primary `#1E3A5F`), mint (pastel tint of secondary `#F8F9FA` shifted greener), lavender, peach. Each fill has slight hand-painted overshoot beyond its black ink outline. Accent warm coral `#F97316` appears only on one highlighted hand-drawn arrow connecting two boxes (about 6%). Friendly educational temperament. [...container guidance...]
|
||||
@@ -0,0 +1,36 @@
|
||||
# Palette: mono-ink
|
||||
|
||||
High-contrast monochrome with sparse semantic accents. The most disciplined palette — used for methodology, manifestos, Before-After essays, mindset-shift narratives, professional visual-notes. Distinguished by **black ink on white**, with the deck's accent reserved for semantic meaning only.
|
||||
|
||||
> This file describes **color behavior**, not HEX values. mono-ink overrides much of the deck's HEX usage — read carefully.
|
||||
|
||||
## 1. Special: deviates from deck HEX
|
||||
|
||||
mono-ink is the palette **most likely to override `design_spec.colors`**:
|
||||
|
||||
- The deck's `primary` HEX is typically **not used** as ink color (mono-ink ink is always near-black, not the deck's brand color)
|
||||
- The deck's `secondary` HEX is typically **not used** as background (mono-ink background is always pure white)
|
||||
- The deck's `accent` HEX **is used** — but only in the semantic accent role, with strict <10% area constraint
|
||||
|
||||
When proposing mono-ink, the assembled prompt should explicitly note: "mono-ink palette intentionally uses near-black on white as the structural language; the deck's primary `#XXX` and secondary `#XXX` are not represented as image colors. The deck's accent `#XXX` is reserved for the semantic emphasis role under 10% of canvas."
|
||||
|
||||
## 2. Compatible renderings
|
||||
|
||||
| Rendering | Notes |
|
||||
|---|---|
|
||||
| ✓✓ ink-notes | Direct alignment — mono-ink is the default ink-notes palette |
|
||||
| ✓✓ editorial | Magazine restraint + ink discipline |
|
||||
| ✓ vector-illustration | Acceptable but loses the hand-drawn quality |
|
||||
| ✓ blueprint | Schematic restraint |
|
||||
| ✗ sketch-notes / watercolor / fantasy-animation / nature | Wrong temperament — those are warm |
|
||||
| ✗ tech-neon / digital-dashboard | Mono-ink is intentionally non-digital |
|
||||
| ✗ corporate-photo | Photography can't be mono-ink |
|
||||
| ✗ chalkboard | Mono-ink is white-paper-black-ink; chalkboard is opposite |
|
||||
|
||||
---
|
||||
|
||||
## 3. Fewshot prompt snippets
|
||||
|
||||
**Snippet A — applied to an ink-notes Before/After comparison**
|
||||
|
||||
> [...rendering paragraph...] Color behavior is mono-ink with semantic accents: pure white background `#FFFFFF` (about 55%); all line work, figures, and hand-lettered text in near-black ink `#1A1A1A` (about 38%). Left "Before" side carries coral red accent `#E8655A` on its pain-point markers only (about 4% of total canvas). Right "After" side carries muted teal `#5FA8A8` on solution markers only (about 3%). Total color accent stays under 8%. Deck's primary `#1E3A5F` and secondary `#F8F9FA` are intentionally not used here — mono-ink's discipline is the visual point. [...container guidance...]
|
||||
@@ -0,0 +1,27 @@
|
||||
# Palette: nature-organic
|
||||
|
||||
Earthy, natural, wellness. The palette for environment / sustainability / wellness / outdoor / food / agriculture decks. Distinguished by **earth-toned warm and cool greens**, with cream and earth-brown backgrounds.
|
||||
|
||||
> This file describes **color behavior**, not HEX values.
|
||||
|
||||
## 1. Compatible renderings
|
||||
|
||||
| Rendering | Notes |
|
||||
|---|---|
|
||||
| ✓✓ nature | Direct alignment |
|
||||
| ✓✓ watercolor | Natural washes |
|
||||
| ✓✓ warm-scene | Outdoor warm cinematic |
|
||||
| ✓✓ fantasy-animation | Storybook nature |
|
||||
| ✓✓ sketch-notes | Educational nature content |
|
||||
| ✓✓ corporate-photo | Outdoor / wellness photography |
|
||||
| ✓ vector-illustration | Natural vector |
|
||||
| ✗ tech-neon / dark-cinematic / digital-dashboard / blueprint | Wrong temperament |
|
||||
| ✗ pixel-art | Earth feel doesn't fit pixel grid |
|
||||
|
||||
---
|
||||
|
||||
## 2. Fewshot prompt snippets
|
||||
|
||||
**Snippet A — applied to a nature illustration**
|
||||
|
||||
> [...rendering paragraph...] Color behavior is nature-organic: soft cream background `#FEF3C7` (about 50%); primary deep forest green `#166534` in stylized leaves and a central tree silhouette (about 35%); accent warm honey-amber `#D4AF37` in small detail pops — a few hand-drawn flowers at the base, sunlit highlights on leaf tips (about 13%). Earth-toned and slightly desaturated. [...container guidance...]
|
||||
@@ -0,0 +1,29 @@
|
||||
# Palette: sunset-gradient
|
||||
|
||||
Warm gradient flow — pink → orange → purple, atmospheric and energetic. Used for lifestyle / creative agencies / travel / music / event / modern brand decks where mood and warmth carry the page. Distinguished by being the **one palette built around transitions**, not flat blocks.
|
||||
|
||||
> This file describes **color behavior**, not HEX values. sunset-gradient tells the model how to apply the deck's HEX values **as gradient stops**, not as discrete fills.
|
||||
|
||||
## 1. Compatible renderings
|
||||
|
||||
| Rendering | Notes |
|
||||
|---|---|
|
||||
| ✓✓ flat | Smooth gradient on flat geometry |
|
||||
| ✓✓ watercolor | Gradient is watercolor's native language |
|
||||
| ✓✓ warm-scene | Sunset-grade cinematic atmosphere |
|
||||
| ✓ vector-illustration | Acceptable but requires the gradient exception (vector-illustration normally bans gradients — sunset-gradient explicitly overrides for the background) |
|
||||
| ✓ glassmorphism | Soft cool gradient under glass panels (use a tame variant) |
|
||||
| ✓ 3d-isometric | Gradient sky behind isometric forms |
|
||||
| ✗ minimalist-swiss / blueprint / mono-ink | Wrong temperament |
|
||||
| ✗ pixel-art / sketch-notes / ink-notes / chalkboard | Wrong material |
|
||||
| ✗ corporate-photo | Photography uses real grading, not painted gradient |
|
||||
|
||||
> **Override**: sunset-gradient is the palette that **forces a gradient** into the image. When the chosen rendering normally bans gradients (e.g. vector-illustration), the gradient applies to the **background field only**, while shapes on top remain flat per the rendering's rules.
|
||||
|
||||
---
|
||||
|
||||
## 2. Fewshot prompt snippets
|
||||
|
||||
**Snippet A — applied to a flat lifestyle hero**
|
||||
|
||||
> [...rendering paragraph...] Color behavior is sunset-gradient: smooth diagonal gradient flowing from primary deep pink `#EC4899` in the lower-left corner, transitioning through secondary warm orange `#F97316` across the middle band, into accent purple `#9333EA` in the upper-right corner. Smooth blending — no hard color edges. Above the gradient field, one stylized flat near-black silhouette of a stylized palm tree sits at the lower right as a focal rest point (about 6% of canvas). Atmospheric, energetic, optimistic. [...container guidance...]
|
||||
@@ -0,0 +1,26 @@
|
||||
# Palette: tech-neon
|
||||
|
||||
Energetic, futuristic, high-contrast. The signature look for AI / SaaS / product launch / cyber / cutting-edge tech decks. Distinguished by saturated brand color on a darker or contrasted field, with a glow / luminance quality.
|
||||
|
||||
> This file describes **color behavior**, not HEX values. HEX comes from `design_spec.colors`.
|
||||
|
||||
## 1. Compatible renderings
|
||||
|
||||
| Rendering | Notes |
|
||||
|---|---|
|
||||
| ✓✓ 3d-isometric | Tech architecture with glowing edges |
|
||||
| ✓✓ digital-dashboard | Product UI with neon highlights |
|
||||
| ✓✓ flat | Bold flat blocks with neon accent |
|
||||
| ✓ vector-illustration | Works but feels more muted than expected |
|
||||
| ✓✓ blueprint | Technical schematic with luminance |
|
||||
| ✓ pixel-art | Retro neon gaming |
|
||||
| ✗ sketch-notes / watercolor / fantasy-animation / nature | Temperament conflict — warm vs cyber |
|
||||
| ✗ corporate-photo | Photography wants natural color, not neon |
|
||||
|
||||
---
|
||||
|
||||
## 2. Fewshot prompt snippets
|
||||
|
||||
**Snippet A — applied to a 3d-isometric architecture**
|
||||
|
||||
> [...rendering paragraph...] Color behavior is tech-neon: secondary deep navy `#0A0E27` covers the background plane and shadowed faces (about 50% of canvas); primary electric blue `#0EA5E9` carries the lit faces of the stacked blocks in saturated solid fills (about 35%) with a subtle 8%-opacity outer glow around each block's edge; accent vivid cyan `#06B6D4` appears on connecting lines and one highlighted block's lit face (about 12% area total) with stronger implied glow. High contrast throughout. [...container guidance...]
|
||||
@@ -0,0 +1,27 @@
|
||||
# Palette: vivid-launch
|
||||
|
||||
Bold, saturated, attention-grabbing. The palette for product launches, marketing campaigns, event keynotes, promotional decks. Distinguished from tech-neon by **richer warm-cool balance** and more confident multi-color presence.
|
||||
|
||||
> This file describes **color behavior**, not HEX values.
|
||||
|
||||
## 1. Compatible renderings
|
||||
|
||||
| Rendering | Notes |
|
||||
|---|---|
|
||||
| ✓✓ flat | Vivid flat blocks for marketing |
|
||||
| ✓✓ vector-illustration | Bold vector launch visuals |
|
||||
| ✓✓ 3d-isometric | Vivid product 3D |
|
||||
| ✓✓ screen-print | Vivid promotional poster |
|
||||
| ✓✓ pixel-art | Retro vivid gaming launch |
|
||||
| ✓ digital-dashboard | Acceptable if launch product is software |
|
||||
| ✓ corporate-photo | Vivid-graded photography |
|
||||
| ✗ sketch-notes / ink-notes / nature | Wrong temperament — those are restrained |
|
||||
| ✗ watercolor / warm-scene | Wrong saturation level |
|
||||
|
||||
---
|
||||
|
||||
## 2. Fewshot prompt snippets
|
||||
|
||||
**Snippet A — applied to a flat marketing hero**
|
||||
|
||||
> [...rendering paragraph...] Color behavior is vivid-launch: secondary near-white `#FAFAFA` background (about 38%); primary saturated brand magenta `#E11D48` carries the dominant central shape — a bold geometric burst (about 35%); accent vivid orange `#F97316` is co-star — a large supporting block or burst in the upper right (about 25%). One small detail in deep neutral `#171717` for definition (about 2%). All colors confident and saturated. Promotional energy. [...container guidance...]
|
||||
@@ -0,0 +1,29 @@
|
||||
# Palette: warm-earth
|
||||
|
||||
Friendly, grounded, human. The warm counterpart to cool-corporate — used in brand storytelling, lifestyle, education, wellness, and any deck where human warmth matters more than corporate restraint.
|
||||
|
||||
> This file describes **color behavior**, not HEX values. HEX comes from `design_spec.colors`.
|
||||
|
||||
## 1. Compatible renderings
|
||||
|
||||
| Rendering | Notes |
|
||||
|---|---|
|
||||
| ✓✓ vector-illustration | Warm vector forms work well |
|
||||
| ✓✓ flat | Warm flat blocks are friendly |
|
||||
| ✓✓ sketch-notes | Natural pairing — both warm-earth and sketch-notes share warmth |
|
||||
| ✓✓ watercolor | Warm washes pair perfectly |
|
||||
| ✓✓ warm-scene | Direct alignment |
|
||||
| ✓✓ fantasy-animation | Storybook warmth |
|
||||
| ✓✓ nature | Earth-tone alignment |
|
||||
| ✓✓ corporate-photo | Warm-graded photography |
|
||||
| ✓ editorial | Acceptable — editorial restraint sometimes prefers cool |
|
||||
| ✗ tech-neon themes / dark-cinematic | Temperament conflict |
|
||||
| ✗ blueprint | Blueprint wants restraint; warm-earth wants warmth |
|
||||
|
||||
---
|
||||
|
||||
## 2. Fewshot prompt snippets
|
||||
|
||||
**Snippet A — applied to a watercolor narrative scene**
|
||||
|
||||
> [...rendering paragraph...] Color behavior is warm-grounded: secondary cream `#FEF3C7` occupies the upper third as soft sky and breathing space (about 50% of canvas); primary deep terracotta `#9A3412` carries the midground hills and foreground earth in confident warm washes (about 35%); accent warm gold `#D4AF37` appears as a small concentrated glow near the horizon and a single golden bird shape in the foreground (totaling under 15%). All tones warm, no cool blues or greens beyond a barely-perceptible suggestion in the sky. [...container guidance...]
|
||||
@@ -0,0 +1,34 @@
|
||||
# Rendering: 3d-isometric
|
||||
|
||||
Isometric 3D forms with controlled depth — boxes, layers, devices, stacks rendered in 30°/30°/30° projection. The dominant choice for tech architecture, product structure, and system composition visuals in modern decks.
|
||||
|
||||
## 1. Style paragraph (paste-ready, 105 words)
|
||||
|
||||
> 3D isometric illustration with clean geometric forms rendered in true 30°/30°/30° projection. All edges are crisp and uniform — no perspective distortion, no vanishing points. Surfaces use flat solid fills with subtle tonal shifts (a single darker shade for shadowed faces, ~15% darker than the light-facing face) to convey volume without painterly rendering. Edges may have thin uniform outlines or use direct color contrast. Composition emphasizes stackable, modular forms — boxes, blocks, layers, cards floating in arrangement. Soft 8% drop shadows beneath floating elements anchor them in space. Overall feel is technical, structured, contemporary — common in SaaS product diagrams, cloud architecture visuals, system component breakdowns.
|
||||
|
||||
---
|
||||
|
||||
## 2. Line, texture, depth
|
||||
|
||||
| Aspect | Treatment |
|
||||
|---|---|
|
||||
| Line quality | Thin uniform edges, or no edges relying on color contrast |
|
||||
| Texture | None on surfaces — flat fills |
|
||||
| Depth | True isometric projection (30°/30°/30°), tonal shading on shadowed faces, optional 8% drop shadow under floating elements |
|
||||
| Material | Flat with tonal shading — not glossy, not photorealistic |
|
||||
| Mood | Technical, modular, contemporary |
|
||||
|
||||
## 3. Using the deck's HEX values
|
||||
|
||||
- Primary HEX: main block face fills (the "lit" face)
|
||||
- Secondary HEX: background field
|
||||
- Accent HEX: a single highlighted block or connecting line
|
||||
- Shadowed faces: ~15% darker shade of the primary (automatic from prompt phrasing — no extra HEX needed)
|
||||
|
||||
---
|
||||
|
||||
## 4. Fewshot prompt snippets
|
||||
|
||||
**Snippet A — half-page system architecture, text_policy: none**
|
||||
|
||||
> 3D isometric illustration in true 30°/30°/30° projection. Three stacked blocks rise from a clean isometric plane — a wide foundation block in primary deep blue `#1E40AF`, a medium block in slightly darker blue stacked on top, and a smaller block on top of that. To the right, two floating cards in the same blue family hover above the stack, connected by thin diagonal lines. The "lit" faces of all blocks use the primary blue; the shadowed faces use a 15% darker tonal shift of the same blue. Accent gold `#D4AF37` appears as one thin line connecting the top block to a floating card. Background is calm secondary `#F8FAFC`. Soft 8% drop shadows beneath the floating cards. Composed as a 600×500 half-page block with 15% inner padding. NO text, no labels, no numbers anywhere in the image. Color values are rendering guidance only.
|
||||
@@ -0,0 +1,116 @@
|
||||
# Renderings — Index
|
||||
|
||||
A **rendering** is a visual style family: line quality, texture, depth, material, mood. Lock one rendering per deck — every AI image in the deck shares it.
|
||||
|
||||
> **HEX values are not in renderings**. The deck's HEX triplet comes from `design_spec.colors`. Rendering describes *how* the image is drawn; palette describes *how* the HEX values are distributed. See [`image-generator.md`](../image-generator.md) §2.
|
||||
|
||||
---
|
||||
|
||||
## 1. Catalog (20 renderings)
|
||||
|
||||
Each rendering has its own file with: style paragraph, line / texture / depth notes, deck HEX usage, and a fewshot prompt snippet. **Read only the file for the rendering you pick** — never glob the directory.
|
||||
|
||||
### 1.1 Modern / commercial (the corporate-PPT main field)
|
||||
|
||||
| Rendering | One-liner | Best for |
|
||||
|---|---|---|
|
||||
| [`vector-illustration`](./vector-illustration.md) | Clean flat vector with bold shapes, no gradients | Consulting / SaaS / general professional decks |
|
||||
| [`flat`](./flat.md) | Modern geometric blocks, slightly more design-forward than vector | Brand / product showcase decks |
|
||||
| [`minimalist-swiss`](./minimalist-swiss.md) | Swiss-grid Bauhaus austerity, aggressive whitespace | High-end consulting / architecture / luxury / type foundries |
|
||||
| [`glassmorphism`](./glassmorphism.md) | Frosted-glass translucent panels, soft shadows | Modern SaaS / fintech / health-tech / premium apps |
|
||||
| [`3d-isometric`](./3d-isometric.md) | Isometric 3D forms with subtle shadows | Tech architecture / product structure |
|
||||
| [`digital-dashboard`](./digital-dashboard.md) | Polished UI / data-viz aesthetic | SaaS demos / data products |
|
||||
| [`corporate-photo`](./corporate-photo.md) | Editorial photography, real subjects | Team / lifestyle / product shots |
|
||||
| [`blueprint`](./blueprint.md) | Technical schematic with grid, monospace cues | Architecture / engineering / AI systems |
|
||||
| [`editorial`](./editorial.md) | Magazine-style infographic look | Finance / journalism / explainers |
|
||||
|
||||
### 1.2 Hand-drawn / educational
|
||||
|
||||
| Rendering | One-liner | Best for |
|
||||
|---|---|---|
|
||||
| [`sketch-notes`](./sketch-notes.md) | Warm cream paper, black hand-drawn lines, pastel fills | Education / training / onboarding |
|
||||
| [`ink-notes`](./ink-notes.md) | Pure white, black ink, sparse semantic color | Methodology / Before-After / manifestos |
|
||||
| [`chalkboard`](./chalkboard.md) | Chalk on board, classroom feel | Teaching / tutorials / classroom decks |
|
||||
| [`paper-cut`](./paper-cut.md) | Layered paper craft, scissor-cut edges, soft shadows | Education / children / cultural / festival / sustainability |
|
||||
|
||||
### 1.3 Narrative / atmospheric
|
||||
|
||||
| Rendering | One-liner | Best for |
|
||||
|---|---|---|
|
||||
| [`watercolor`](./watercolor.md) | Painterly soft edges, color bleeding | Lifestyle / travel / brand story |
|
||||
| [`warm-scene`](./warm-scene.md) | Golden-hour cinematic warmth | Personal growth / origin story |
|
||||
| [`screen-print`](./screen-print.md) | Halftone poster art, 2-5 flat colors | Cultural / media / cinematic covers |
|
||||
| [`vintage-poster`](./vintage-poster.md) | Mid-century modern poster, halftone + paper grain | Cultural / brand heritage / hospitality / anniversaries |
|
||||
|
||||
### 1.4 Specialty
|
||||
|
||||
| Rendering | One-liner | Best for |
|
||||
|---|---|---|
|
||||
| [`fantasy-animation`](./fantasy-animation.md) | Ghibli/Disney hand-drawn warmth | Children / storybook / brand fable |
|
||||
| [`pixel-art`](./pixel-art.md) | 8-bit retro game aesthetic | Gaming / retro tech / nostalgic |
|
||||
| [`nature`](./nature.md) | Organic earthy illustration | Environment / wellness / sustainability |
|
||||
|
||||
### 1.5 Escape hatch — `custom`
|
||||
|
||||
When no preset carries the deck's temperament, set `image_rendering: custom` and supply a one-paragraph `image_rendering_behavior`.
|
||||
|
||||
**Trigger** — all of:
|
||||
|
||||
| Condition | Check against |
|
||||
|---|---|
|
||||
| No preset style fits | `design_spec.d Style` |
|
||||
| Brand / template / chat names no preset | truth-precedence inputs |
|
||||
| Not expressible as "preset X + small adjustment" | Strategist confirmation chat |
|
||||
|
||||
**Hard rule — `rendering_behavior` prose**:
|
||||
|
||||
| Rule | Value |
|
||||
|---|---|
|
||||
| Length | One paragraph, 2-5 sentences |
|
||||
| Axes covered | line / texture / depth / material / mood (same as preset files) |
|
||||
| Forbidden | Naming a competing preset ("like blueprint but warmer") |
|
||||
|
||||
```yaml
|
||||
- image_rendering: custom
|
||||
- image_rendering_behavior: "Hand-screened poster aesthetic — slightly misregistered halftone overlays, 3 flat ink colors with visible dot pattern at 12% opacity, no gradients, no anti-aliased edges; reads as silkscreen print."
|
||||
```
|
||||
|
||||
**Hard rule**: `custom` is a tail-case, not a default. See [`strategist.md`](../strategist.md) h.5 for the one-`custom`-per-dimension limit.
|
||||
|
||||
---
|
||||
|
||||
## 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`.
|
||||
|
||||
| `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` |
|
||||
| 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` |
|
||||
| Product launch / brand / marketing | `flat`, `3d-isometric`, or `corporate-photo` | `vector-illustration` |
|
||||
| Education / training / onboarding / 教学 | `sketch-notes` | `vector-illustration` (if school is corporate), `paper-cut` |
|
||||
| Children / story / storybook / 儿童 | `fantasy-animation` | `paper-cut`, `watercolor`, `sketch-notes` |
|
||||
| Cultural / folk / festival / 文化 / 节日 | `paper-cut` | `vintage-poster`, `screen-print` |
|
||||
| Methodology / Before-After / manifesto / 方法论 | `ink-notes` | `editorial` |
|
||||
| Government / formal / official report | `editorial` or `corporate-photo` | `vector-illustration` |
|
||||
| Finance / data journalism / 财经 | `editorial` or `digital-dashboard` | `vector-illustration` |
|
||||
| Personal story / 个人成长 / lifestyle | `watercolor`, `warm-scene` | `corporate-photo`, `paper-cut` |
|
||||
| Cultural / media / opinion / cinematic | `screen-print`, `vintage-poster` | `editorial`, `warm-scene` |
|
||||
| Brand heritage / hospitality / 老字号 / 周年 | `vintage-poster` | `screen-print`, `editorial` |
|
||||
| Gaming / retro / 8-bit / 复古 | `pixel-art` | `vintage-poster` |
|
||||
| Environment / wellness / 环保 / 户外 | `nature` | `watercolor`, `paper-cut` |
|
||||
| Classroom / blackboard / 课堂 | `chalkboard` | `sketch-notes` |
|
||||
| Team / company / product photo | `corporate-photo` | — |
|
||||
|
||||
---
|
||||
|
||||
## 3. How to use
|
||||
|
||||
1. From `design_spec.md` extract `d. Style` mode + descriptor.
|
||||
2. Find the matching row above; pick the primary recommendation.
|
||||
3. `read_file image-renderings/<chosen>.md` and apply its style paragraph when assembling each prompt per [`image-generator.md`](../image-generator.md) §4. (For `custom`, this step is replaced by the consumption branch in [`image-generator.md`](../image-generator.md) Step 2 — no preset file to read.)
|
||||
|
||||
**Lock for the whole deck.** Don't change rendering between images in the same deck.
|
||||
@@ -0,0 +1,34 @@
|
||||
# Rendering: blueprint
|
||||
|
||||
Technical schematic aesthetic — clean lines on a grid, monospace cues, restrained color. Conveys engineering precision and analytical depth. Used for architecture diagrams, AI systems, engineering decks, technical deep-dives.
|
||||
|
||||
## 1. Style paragraph (paste-ready, 95 words)
|
||||
|
||||
> Technical blueprint schematic style. Clean precise lines on an implied or subtle grid, with deliberate geometric rigor — right angles, parallel rules, measured spacing. Elements are simplified to essential schematic forms — boxes, rounded rectangles, connector lines, anchor dots, callout markers. Color is restrained, often near-monochrome with one or two semantic accents (one color for "primary path", one for "alternate" or "warning"). Optional subtle grid background at very low opacity (5-8%) reinforces the schematic feel. No textures, no shading, no painterly artifacts. Overall feel is engineering-precise, analytical, intentional — common in system design and architecture briefings.
|
||||
|
||||
---
|
||||
|
||||
## 2. Line, texture, depth
|
||||
|
||||
| Aspect | Treatment |
|
||||
|---|---|
|
||||
| Line quality | Crisp uniform stroke, often 1-1.5px feel; perfectly straight or precisely curved |
|
||||
| Texture | None; optional very-low-opacity grid background |
|
||||
| Depth | Flat — schematic, not perspectival |
|
||||
| Material | None — abstract schematic |
|
||||
| Mood | Analytical, engineering-precise, restrained |
|
||||
|
||||
## 3. Using the deck's HEX values
|
||||
|
||||
- Primary HEX: main schematic lines and primary boxes
|
||||
- Secondary HEX: background (often near-white, or very pale blue if a blueprint mood is wanted)
|
||||
- Accent HEX: highlighted path / warning / focus element
|
||||
- Optional grid: secondary HEX at 5-8% opacity
|
||||
|
||||
---
|
||||
|
||||
## 4. Fewshot prompt snippets
|
||||
|
||||
**Snippet A — half-page system architecture, text_policy: none**
|
||||
|
||||
> Technical blueprint schematic. Six rounded rectangles arranged in a clean two-row layout, connected by precise straight lines with small arrow heads. All rectangles use crisp 1.5px uniform stroke in primary deep blue `#1E40AF` on a near-white secondary background `#FAFAFA`. A subtle grid pattern in primary blue at 6% opacity provides a schematic feel. One rectangle is highlighted by replacing its stroke with accent orange `#F97316` — the focus component. Each rectangle contains a single simple iconic symbol — a database cylinder, a gear, a chat bubble, an upward arrow, a lock, a network node — rendered in the same primary blue, no fill. Connector lines route at right angles, with small dot anchors at junctions. Composed as a 600×500 half-page block with 14% inner padding. NO text, no labels, no numbers — pure schematic structure. Color values are rendering guidance only.
|
||||
@@ -0,0 +1,35 @@
|
||||
# Rendering: chalkboard
|
||||
|
||||
Chalk on a dark green or black board — classroom aesthetic. Used in teaching-focused decks, tutorials, school / academic content, retro educational atmosphere.
|
||||
|
||||
## 1. Style paragraph (paste-ready, 95 words)
|
||||
|
||||
> Classroom chalkboard aesthetic. Dark green or near-black slate background with visible subtle chalk-dust texture. All marks appear as soft chalk strokes — slightly diffused edges, off-white or pastel colors that look powdery rather than saturated. Hand-drawn lines are confident but with the characteristic dry-medium quality of real chalk. Composition follows blackboard pedagogy — central or organized layout, clear sections, occasional underlines and emphasis marks. Color is restrained: white chalk dominates, one or two pastel accents (yellow, soft pink, light cyan) appear sparingly. Overall feel is nostalgic, instructional, warm-classroom — common in teaching content and tutorial decks.
|
||||
|
||||
---
|
||||
|
||||
## 2. Line, texture, depth
|
||||
|
||||
| Aspect | Treatment |
|
||||
|---|---|
|
||||
| Line quality | Soft chalk strokes with slightly diffused edges, dry-medium look |
|
||||
| Texture | Visible chalk-dust grain at 15-25% opacity across the board |
|
||||
| Depth | Flat |
|
||||
| Material | Slate board (dark green or near-black) + chalk |
|
||||
| Mood | Nostalgic, instructional, classroom-warm |
|
||||
|
||||
## 3. Using the deck's HEX values
|
||||
|
||||
chalkboard has a strong **fixed-palette tendency**: dark slate background + white chalk + pastel accents.
|
||||
|
||||
- Background: dark slate green `#1F3A2E` or near-black `#1A1A1A` (does not use the deck's secondary)
|
||||
- Primary chalk: off-white `#F5F5F0` (the chalk itself); the deck's primary HEX may appear as a tinted pastel accent
|
||||
- Accent: the deck's accent HEX rendered as a soft pastel chalk shade
|
||||
|
||||
---
|
||||
|
||||
## 4. Fewshot prompt snippets
|
||||
|
||||
**Snippet A — half-page lesson visual, text_policy: embedded**
|
||||
|
||||
> Classroom chalkboard aesthetic. Dark slate green background `#1F3A2E` with visible chalk-dust texture at 20% opacity. Three rounded boxes drawn in soft white chalk strokes arranged in a row, each containing a simple chalk-drawn icon (a tree, a lightbulb, a paper plane). Above the boxes, a hand-lettered chalk title in confident white lettering reads "GROWTH" in English block caps. Hand-drawn chalk arrows connect the boxes left-to-right. Small chalk star and dot decorations sprinkled sparingly. One soft pastel-yellow chalk underline below the title, drawn with deliberate dry-medium quality. Composed as a 600×500 half-page block with 14% inner padding. Chalk text kept to short keywords. Color values are rendering guidance only.
|
||||
@@ -0,0 +1,46 @@
|
||||
# Rendering: corporate-photo
|
||||
|
||||
Editorial photography style — real subjects, natural composition, professional grading. The only rendering where photorealism is intentional. Used for team photos, lifestyle shots, product photography, real-world scenarios.
|
||||
|
||||
## 1. Style paragraph (paste-ready, 100 words)
|
||||
|
||||
> Editorial photography style with natural composition and professional color grading. Subjects appear as real people, real products, real environments — captured with depth-of-field and intentional lighting. Composition follows photographic principles: rule of thirds, leading lines, deliberate foreground/background separation. Lighting is natural or studio-soft, never harsh. Color grading matches the deck's palette temperament — corporate decks lean cool and restrained, lifestyle decks lean warm and golden. Subjects in team or workplace contexts appear diverse and professionally attired. Background is contextual and slightly blurred to keep focus on the subject. Overall feel is authentic, premium, magazine-quality.
|
||||
|
||||
---
|
||||
|
||||
## 2. Line, texture, depth
|
||||
|
||||
| Aspect | Treatment |
|
||||
|---|---|
|
||||
| Line quality | N/A — photographic |
|
||||
| Texture | Natural — skin, fabric, environment textures preserved |
|
||||
| Depth | True depth-of-field — subject sharp, background subtly blurred |
|
||||
| Material | Real-world physical materials, professionally lit |
|
||||
| Mood | Authentic, premium, magazine-editorial |
|
||||
|
||||
---
|
||||
|
||||
## 3. Exception to global hard rule §5.2
|
||||
|
||||
corporate-photo **overrides** the global "simplified silhouettes / no realistic faces" rule (image-generator.md §5.2). For this rendering, append instead:
|
||||
|
||||
> Diverse, professionally attired subjects rendered photorealistically. Editorial photography composition, natural light or soft studio lighting. Subjects appear authentic and contemporary — no posed stock-photo stiffness, no exaggerated expressions, no fashion-shoot artificiality.
|
||||
|
||||
All other renderings keep the simplified-figure rule.
|
||||
|
||||
## 4. Using the deck's HEX values
|
||||
|
||||
corporate-photo's relationship to HEX is **color grading**, not color fills:
|
||||
|
||||
- Primary HEX: dominant tone the image is graded toward (cool grade for navy primary, warm grade for terracotta primary)
|
||||
- Secondary HEX: highlight tone in the lit areas
|
||||
- Accent HEX: a subtle environment color (a sweater, a wall accent, a product detail) that picks up the deck's accent
|
||||
- HEX values appear as **color cues** in the description, not as literal HEX strings in the image
|
||||
|
||||
---
|
||||
|
||||
## 5. Fewshot prompt snippets
|
||||
|
||||
**Snippet A — team workplace photo, text_policy: none**
|
||||
|
||||
> Editorial photography of a small modern team collaborating around a laptop in a contemporary office. Three to four diverse, professionally attired adults — varied ethnicities, varied ages — engaged in genuine conversation, no posed stock-photo stiffness. Natural window light from the side, soft shadows. Color grading is cool-corporate — image is subtly graded toward deep blue tones echoing the deck's primary `#1E3A5F`, with the background carrying soft light gray `#F8F9FA` walls and a single accent of warm wood or amber from a desk lamp echoing the accent `#D4AF37`. Shallow depth of field — subjects sharp, background gently blurred. Composed as a 1200×600 hero band with 8% inner padding. Diverse, professionally attired subjects rendered photorealistically. Editorial photography composition. Authentic, not stock-photo artificial. Color values are rendering guidance — HEX codes themselves do not appear in the image as text.
|
||||
@@ -0,0 +1,34 @@
|
||||
# Rendering: digital-dashboard
|
||||
|
||||
Polished UI / data-visualization aesthetic. The image looks like a screenshot of a product or analytics dashboard — clean cards, soft shadows, restrained type, chart-like visual elements. Used in SaaS demos, data product showcases, B2B analytics decks.
|
||||
|
||||
## 1. Style paragraph (paste-ready, 105 words)
|
||||
|
||||
> Polished digital UI / dashboard aesthetic. Clean card-based layout with rounded corners (8-12px radius), uniform soft shadows (8% opacity, slight Y-offset), and crisp pixel-aligned edges. Surfaces are flat with restrained color — primarily one neutral background, several brand-color cards or chart elements, and a single accent for the focal data point. Chart-like visual elements (bar graphs, line graphs, sparklines, donut segments, KPI tiles) appear stylized — recognizable as charts but without specific data values. Typography would be small, neutral, almost-text-as-texture if any appeared, but defaults to no-text. Overall feel is product-screenshot — modern, restrained, data-fluent.
|
||||
|
||||
---
|
||||
|
||||
## 2. Line, texture, depth
|
||||
|
||||
| Aspect | Treatment |
|
||||
|---|---|
|
||||
| Line quality | No outlines on cards; chart elements use thin uniform strokes (1-1.5px feel) |
|
||||
| Texture | None — clean digital surfaces |
|
||||
| Depth | Uniform 8% soft drop shadows under cards; no inset/raised effects |
|
||||
| Material | Flat with deliberate elevation hierarchy via shadows |
|
||||
| Mood | Polished, restrained, product-fluent |
|
||||
|
||||
## 3. Using the deck's HEX values
|
||||
|
||||
- Primary HEX: dominant chart element / featured card header
|
||||
- Secondary HEX: background canvas (usually pale or near-white)
|
||||
- Accent HEX: the single highlighted data point or focal metric
|
||||
- Optional 4th: a muted neutral for secondary chart elements (gray bars, faded sparklines)
|
||||
|
||||
---
|
||||
|
||||
## 4. Fewshot prompt snippets
|
||||
|
||||
**Snippet A — half-page product demo, text_policy: none**
|
||||
|
||||
> Polished digital dashboard UI aesthetic. Three rounded-corner cards arranged in a clean grid on a soft secondary background `#F8FAFC`. The largest card (top, occupying 60% of the area) shows a stylized line chart trending upward in primary blue `#0EA5E9` — three line segments, smooth curve, anchor dots at peaks. Two smaller cards below show: (left) a stylized donut chart with the primary color filling about 70% of the ring, (right) a simple KPI tile with a large iconic upward arrow in accent green `#10B981`. All cards have 8-12px rounded corners and uniform 8% soft drop shadows. Pixel-aligned edges. Composed as a 600×500 half-page block with 10% inner padding. NO text, no numbers, no chart labels, no axes — pure visual chart elements only. Color values are rendering guidance only.
|
||||
@@ -0,0 +1,33 @@
|
||||
# Rendering: editorial
|
||||
|
||||
Magazine-style infographic look — sophisticated layout, refined type-as-shape elements, restrained color, editorial pacing. The default choice for finance, journalism, explainers, opinion pieces, sophisticated B2B content.
|
||||
|
||||
## 1. Style paragraph (paste-ready, 100 words)
|
||||
|
||||
> Magazine-style editorial illustration with sophisticated visual hierarchy and confident negative space. Elements are arranged with editorial pacing — one dominant focal area, deliberate alignment to invisible columns, generous gutters between blocks. Color is restrained and balanced — typically one rich brand tone, one neutral, one subtle accent. Geometric forms are simple but rendered with editorial confidence: bold blocks, refined dividers, accent rules. Optional duotone or limited-color treatment reinforces the magazine feel. Composition feels like a thoughtful magazine spread — not loud, not minimal, but considered. Overall mood is intelligent, premium, restrained, suitable for analytical and opinion content.
|
||||
|
||||
---
|
||||
|
||||
## 2. Line, texture, depth
|
||||
|
||||
| Aspect | Treatment |
|
||||
|---|---|
|
||||
| Line quality | Refined — thin precise rules as dividers; clean filled shapes |
|
||||
| Texture | Minimal — optional very subtle paper grain at 5-10% opacity |
|
||||
| Depth | Flat with intentional layering; no shadows |
|
||||
| Material | None — abstract editorial composition |
|
||||
| Mood | Refined, intelligent, premium-restrained |
|
||||
|
||||
## 3. Using the deck's HEX values
|
||||
|
||||
- Primary HEX: dominant block or background field if a saturated editorial mood is wanted
|
||||
- Secondary HEX: gutters, dividers, background field (usually neutral)
|
||||
- Accent HEX: one accent rule, one highlighted element
|
||||
|
||||
---
|
||||
|
||||
## 4. Fewshot prompt snippets
|
||||
|
||||
**Snippet A — half-page financial explainer, text_policy: none**
|
||||
|
||||
> Magazine-style editorial illustration. The canvas is divided into a deliberate two-column composition — a tall block on the left occupying 40% of the width filled with primary deep navy `#0F2C4C`, and the right 60% as a calm secondary cream `#FAF7F2` field. Within the cream field, three stylized bar-chart elements rise from a baseline, each bar a different height, rendered in primary navy with thin uniform width. A thin accent rule in burnt orange `#C2410C` runs horizontally across the lower third connecting the navy block to the bars. One small circular accent marker in the same orange sits at the peak of the tallest bar. Subtle paper grain at 8% opacity across the canvas. Composed as a 600×500 half-page block with 15% inner padding. NO text, no labels, no numbers anywhere. Color values are rendering guidance only.
|
||||
@@ -0,0 +1,35 @@
|
||||
# Rendering: fantasy-animation
|
||||
|
||||
Ghibli/Disney-inspired hand-drawn animation warmth. Soft painterly forms, gentle lighting, expressive but simplified characters, dreamy atmosphere. Used for children's content, storybook brand narratives, healing/comforting themes, fairy-tale or whimsical decks.
|
||||
|
||||
## 1. Style paragraph (paste-ready, 110 words)
|
||||
|
||||
> Hand-drawn animation style inspired by Ghibli and classic Disney storybook aesthetics. Forms are softly rendered with painterly fills and gentle outlines — never harsh, always warm. Color palette is warm and slightly desaturated, with pastel skies, soft greens, warm earth tones, occasional accents of magical color. Lighting is dreamy and atmospheric — soft window light, golden-hour glow, gentle morning haze. Characters (when present) are stylized in a friendly cartoon manner — large expressive eyes, simplified anatomy, warm body language. Subtle painterly brush texture across the image. Atmospheric perspective creates depth — foreground richer, background softer. Overall feel is dreamy, magical, comforting — children's storybook quality.
|
||||
|
||||
---
|
||||
|
||||
## 2. Line, texture, depth
|
||||
|
||||
| Aspect | Treatment |
|
||||
|---|---|
|
||||
| Line quality | Soft hand-drawn outlines or no outlines, with painterly fills inside |
|
||||
| Texture | Subtle painterly brush quality + atmospheric softness |
|
||||
| Depth | Strong atmospheric perspective — distant elements paler and softer |
|
||||
| Material | Hand-painted animation cel |
|
||||
| Mood | Dreamy, magical, comforting, storybook |
|
||||
|
||||
## 3. Using the deck's HEX values
|
||||
|
||||
fantasy-animation reads HEX values through a **warm storybook filter**:
|
||||
|
||||
- Primary HEX: dominant warm scene color (sky, foliage, environment)
|
||||
- Secondary HEX: lighter atmospheric tone (cream, soft sky, morning haze)
|
||||
- Accent HEX: a small magical pop — perhaps the glow of a window, a flower, a key character element
|
||||
|
||||
---
|
||||
|
||||
## 4. Fewshot prompt snippets
|
||||
|
||||
**Snippet A — half-page storybook scene, text_policy: none**
|
||||
|
||||
> Hand-drawn animation style inspired by Ghibli storybook aesthetics. A soft warm scene of a small cottage on a hillside with a winding path leading down to the foreground. Sky in warm cream-amber `#FEF3C7` transitions to a soft accent peach `#FED7AA` at the horizon. Hillside in gentle warm green-amber blending the deck's primary tone, with painterly brush texture. A simplified storybook tree in the foreground left, hand-drawn cartoon-warm style. A small warm-glowing window in the cottage adds a magical accent color. Atmospheric perspective — distant hills are paler and softer, foreground has more saturated color. Subtle painterly brush quality throughout. Composed as a 600×800 half-page block with 10% inner padding. Simplified storybook style — any figures are gentle cartoon silhouettes, no realistic faces. NO text or labels. Color values are rendering guidance only.
|
||||
@@ -0,0 +1,34 @@
|
||||
# Rendering: flat
|
||||
|
||||
Modern flat design with bolder geometric blocks than `vector-illustration`. More design-forward, slightly more decorative confidence. Used when a deck wants to feel "brand-aware" rather than purely utilitarian.
|
||||
|
||||
## 1. Style paragraph (paste-ready, 90 words)
|
||||
|
||||
> Modern flat design illustration with bold geometric blocks and confident color zones. Forms are simplified to essential silhouettes — circles, rectangles, triangles, rounded squares. No outlines, or very thin uniform outlines as a deliberate accent. Color is applied as flat solid fills with deliberate juxtaposition (one block of saturated color against a large field of neutral). Subtle layered overlap creates flat depth without shadows. Composition has clear visual hierarchy — one dominant block, one secondary, one accent. Overall feel is contemporary, brand-aware, designed with intention — common in product launch and marketing decks.
|
||||
|
||||
---
|
||||
|
||||
## 2. Line, texture, depth
|
||||
|
||||
| Aspect | Treatment |
|
||||
|---|---|
|
||||
| Line quality | Often no outlines; when used, thin uniform stroke as accent only |
|
||||
| Texture | None — flat color blocks |
|
||||
| Depth | Through layered overlap and color contrast, not shadow |
|
||||
| Material | Flat — color is brand identity, not material |
|
||||
| Mood | Designed, intentional, slightly more expressive than vector-illustration |
|
||||
|
||||
## 3. Using the deck's HEX values
|
||||
|
||||
- Primary HEX: largest filled block, the dominant brand voice
|
||||
- Secondary HEX: secondary block or large negative space
|
||||
- Accent HEX: a single saturated callout block or geometric anchor
|
||||
- Optional 4th neutral: dark text/anchor color (near-black or deck's text color)
|
||||
|
||||
---
|
||||
|
||||
## 4. Fewshot prompt snippets
|
||||
|
||||
**Snippet A — half-page product visual, text_policy: none**
|
||||
|
||||
> Modern flat design illustration. One large rounded rectangle in primary deep teal `#0F766E` occupying the lower-left two-thirds of the canvas, slightly overlapped by a smaller circle in accent coral `#F97316` positioned upper-right. The remaining area is calm secondary cream `#FAFAF9`. No outlines, no shadows. A simple iconic symbol — a stylized package, rendered as a flat silhouette — sits within the teal block, white on teal. Composed as a 600×500 half-page block with 12% inner padding. NO text, letters, numbers, or labels anywhere. Color values are rendering guidance only — do not display HEX codes or color names as text.
|
||||
@@ -0,0 +1,38 @@
|
||||
# Rendering: glassmorphism
|
||||
|
||||
Frosted-glass / soft-UI aesthetic — translucent layered panels, blurred background, soft shadows, depth via transparency. The "modern app UI" rendering — used for modern SaaS, fintech, health-tech, premium app showcases, product launches.
|
||||
|
||||
---
|
||||
|
||||
## 1. Style paragraph (paste-ready, 105 words)
|
||||
|
||||
> Modern glassmorphism aesthetic. Composition built on layered semi-transparent panels with frosted-glass blur — each panel reads as a sheet of polished glass floating slightly above a soft gradient background. Panel edges are subtly defined with thin 1px highlight strokes (whitespace at top/left, slight shadow at bottom/right) suggesting refraction. Background is a soft pastel-cool gradient that blurs through the panels. Drop shadows under panels are large and soft (15-25% opacity, generous spread) to create real depth. Interior content of each panel uses crisp solid color shapes and clean typography character. Overall feel is premium, futuristic-friendly, polished — the aesthetic of contemporary fintech and Apple-style product showcases.
|
||||
|
||||
---
|
||||
|
||||
## 2. Line, texture, depth
|
||||
|
||||
| Aspect | Treatment |
|
||||
|---|---|
|
||||
| Line quality | Thin 1px highlight strokes on panel top/left edges (glass refraction cue) |
|
||||
| Texture | Frosted blur on panels (gaussian blur ~10-15px over background) |
|
||||
| Depth | Real layered depth — large soft drop shadows, parallax-suggesting offsets |
|
||||
| Material | Translucent polished glass on soft gradient background |
|
||||
| Mood | Premium, polished, futuristic-friendly, optimistic |
|
||||
|
||||
## 3. Using the deck's HEX values
|
||||
|
||||
glassmorphism treats the deck's HEX as **panel content + background gradient stops**:
|
||||
|
||||
- Background gradient: a soft transition from a lighter tint of `primary` toward `secondary` (e.g., pale blue → pale gray)
|
||||
- Panel fills: semi-transparent (~40-60% opacity) tints of `primary` or near-white
|
||||
- Panel content shapes: solid `primary`, with `accent` reserved for the single most-emphasized data point or CTA element
|
||||
- Avoid heavy saturation — glassmorphism feels best with mid-light tones; if the deck's primary is very dark, use it only in interior content shapes, not in the gradient
|
||||
|
||||
---
|
||||
|
||||
## 4. Fewshot prompt snippets
|
||||
|
||||
**Snippet A — fintech product showcase, text_policy: none**
|
||||
|
||||
> Modern glassmorphism product showcase. Soft pastel-cool background gradient transitioning from light tint of primary `#1E3A5F` (about 30% opacity) in the upper-left to near-white `#F8F9FA` in the lower-right. Two layered frosted-glass panels float above — a larger main panel (about 55% of canvas, centered with slight rotation suggesting 3D depth) and a smaller card peeking from behind the main panel. Each panel has subtle 1px white highlight on its top-left edge and soft 20%-opacity drop shadow beneath (generous spread, suggesting real depth). Interior content: clean solid shapes — a stylized chart bar in primary `#1E3A5F`, a small accent gold `#D4AF37` indicator marking one data point. Crisp, polished, premium. Composed as a 600×500 half-page UI showcase with 12% padding. Color values are rendering guidance only — do not display HEX codes as text. NO text or labels anywhere; SVG will overlay copy.
|
||||
@@ -0,0 +1,37 @@
|
||||
# Rendering: ink-notes
|
||||
|
||||
Pure white paper, black ink, sparse semantic color accents — the Mike Rohde sketchnote tradition. Sharper, more professional, more "manifesto" than `sketch-notes`. Used for methodology, Before-After essays, mindset-shift narratives, technical manifestos, professional visual-note style.
|
||||
|
||||
## 1. Style paragraph (paste-ready, 105 words)
|
||||
|
||||
> Professional hand-drawn visual-note style on pure white paper. All line work is black ink with slight wobble — confident, intentional, with the human-hand quality of a thoughtful whiteboard session. Hand-lettered titles appear bold and slightly oversized (when text policy allows). Color is intentionally sparse — black ink dominates ~85% of the visible content, with one or two semantic accent colors (coral red for risk/emphasis, muted teal for positive/solution, dusty lavender for neutral categories) covering less than 10% of canvas combined. Backgrounds and shape fills are mostly empty white. Small doodle decorations — stars, dashes, dots — are minimal. Overall feel is professional, considered, manifesto-quality.
|
||||
|
||||
---
|
||||
|
||||
## 2. Line, texture, depth
|
||||
|
||||
| Aspect | Treatment |
|
||||
|---|---|
|
||||
| Line quality | Black ink with slight wobble; confident medium weight |
|
||||
| Texture | Pure white background; no paper grain |
|
||||
| Depth | Flat |
|
||||
| Material | Pen-on-paper |
|
||||
| Mood | Professional, considered, manifesto |
|
||||
|
||||
## 3. Using the deck's HEX values
|
||||
|
||||
ink-notes has a near-fixed visual language: **black ink + white background + 1-2 semantic accents**. This palette tendency may override `design_spec.colors`:
|
||||
|
||||
- Background: pure white `#FFFFFF` (do not replace with the deck's secondary unless it's already near-white)
|
||||
- Lines and text: near-black `#1A1A1A` (do not replace with the deck's primary)
|
||||
- Semantic accents: ink-notes traditionally uses coral red, muted teal, dusty lavender. The deck's `accent` HEX can serve as the emphasis color, but consider whether it carries the right semantic weight (red=risk, teal=positive, gold=highlight)
|
||||
|
||||
This makes ink-notes **the rendering most likely to deviate from the deck's HEX**. Reaffirm in the prompt that the ink-notes natural palette is intentional and the deck's primary HEX is reserved for the accent role.
|
||||
|
||||
---
|
||||
|
||||
## 4. Fewshot prompt snippets
|
||||
|
||||
**Snippet A — Before/After methodology (comparison type), text_policy: embedded**
|
||||
|
||||
> Professional hand-drawn visual-note style on pure white background. Composition is a Before/After split — vertical hand-drawn divider down the center. Both sides use black ink line work with slight wobble. Left side ("Before") shows a simple stick-figure character with a frustrated posture, a speech bubble with hand-lettered "OLD WAY" in English block caps, and a small list of three hand-drawn dashes with brief 1-2 word annotations (e.g. "manual", "slow", "fragile"). Right side ("After") shows a confident stick-figure character with a clean checkmark above, hand-lettered "NEW WAY" in English block caps, and three checkbox-style annotations (e.g. "automated", "fast", "reliable"). A curved hand-drawn "mindset shift" arrow bridges left to right with a small hand-lettered label "the shift". Sparse semantic color: coral red `#E8655A` (the deck's accent) appears only on the left side's pain points; muted teal `#5FA8A8` appears only on the right side's positives. Total color accent area under 10% of canvas. All hand-lettered text is short keywords. Composed as a 1200×500 hero banner with 14% inner padding.
|
||||
@@ -0,0 +1,38 @@
|
||||
# Rendering: minimalist-swiss
|
||||
|
||||
Swiss-grid / Bauhaus-adjacent visual discipline. Grid-locked geometry, generous negative space, sans-serif typographic character, no decoration. The most restrained rendering — used for high-end consulting, architecture, design firms, luxury brands, type foundries.
|
||||
|
||||
---
|
||||
|
||||
## 1. Style paragraph (paste-ready, 100 words)
|
||||
|
||||
> Strict Swiss-grid minimalism. Composition is built on a visible or implied modular grid — every element snaps to grid lines, deliberate column-and-row alignment carries the whole page. Forms are reduced to essential geometric primitives — clean rectangles, perfect circles, single-weight lines. Typographic character is sans-serif, often Helvetica-adjacent, set with rigorous spacing. Color is applied sparingly — usually one primary block, large fields of white or near-white, single accent. No gradients, no shadows, no texture, no decoration. Negative space carries as much weight as filled areas. Overall feel is rigorous, considered, almost academic — the aesthetic of Müller-Brockmann posters and Vignelli design systems.
|
||||
|
||||
---
|
||||
|
||||
## 2. Line, texture, depth
|
||||
|
||||
| Aspect | Treatment |
|
||||
|---|---|
|
||||
| Line quality | Single uniform stroke weight; mathematically straight or perfectly circular |
|
||||
| Texture | None — flat fills only |
|
||||
| Depth | None — strictly 2D; no shadows, no perspective |
|
||||
| Material | None — color is conceptual zone |
|
||||
| Mood | Rigorous, considered, austere, academic |
|
||||
|
||||
## 3. Using the deck's HEX values
|
||||
|
||||
minimalist-swiss treats colors as **conceptual zones**, not decoration. Apply HEX exactly — one color dominates a deliberate grid cell, secondary fills the field, accent appears at one rule-of-thirds intersection only.
|
||||
|
||||
- Primary HEX: one large grid block (typically a square or rectangle covering 20-30% of canvas)
|
||||
- Secondary HEX: the field (most of the canvas — usually near-white)
|
||||
- Accent HEX: a single thin line or a single small dot — never more than 2-3% of canvas
|
||||
- Outlines: rarely used; when needed, the deck's primary in 1px
|
||||
|
||||
---
|
||||
|
||||
## 4. Fewshot prompt snippets
|
||||
|
||||
**Snippet A — half-page composition, text_policy: none**
|
||||
|
||||
> Strict Swiss-grid minimalist composition. The canvas is built on an invisible 6-column grid. One large primary deep navy `#1E3A5F` square occupies the lower-left grid cells (about 25% of canvas area), positioned with rigorous alignment to the grid. The rest of the canvas is secondary near-white `#F8F9FA` — calm, vast, deliberate negative space. One thin horizontal accent gold `#D4AF37` line sits at the upper rule-of-thirds, spanning four grid columns (about 2% of canvas area). No other elements. No gradients, no shadows, no texture, no decoration. Composed as a 600×600 half-page block with 18% inner padding. Color values are rendering guidance only — do not display HEX codes or color names as text in the image. NO text of any kind anywhere in the image.
|
||||
@@ -0,0 +1,37 @@
|
||||
# Rendering: nature
|
||||
|
||||
Organic earthy illustration with botanical and natural motifs. Soft curves, organic shapes, earth-toned palette by default. Used for environmental / sustainability / wellness / outdoor / food / agriculture decks.
|
||||
|
||||
## 1. Style paragraph (paste-ready, 95 words)
|
||||
|
||||
> Organic illustration style with botanical and natural motifs. Forms are softly curved and asymmetric — leaves, branches, organic curves, irregular shapes that feel grown rather than drawn. Color palette leans earthy and slightly muted — forest greens, warm earth browns, terracotta, soft cream, occasional sky blue. Outlines are minimal or absent; forms are defined by color and texture. Subtle organic textures (leaf veins, wood grain, stone speckle) appear sparingly. Composition emphasizes natural balance and breathing room — never grid-aligned. Overall feel is grounded, contemplative, sustainable — well suited to wellness, environmental, and outdoor content.
|
||||
|
||||
---
|
||||
|
||||
## 2. Line, texture, depth
|
||||
|
||||
| Aspect | Treatment |
|
||||
|---|---|
|
||||
| Line quality | Minimal — forms defined by color, occasional thin organic line as accent |
|
||||
| Texture | Subtle organic textures (leaf veins, wood grain) sparingly |
|
||||
| Depth | Soft layering of natural elements, atmospheric perspective |
|
||||
| Material | Earth-toned illustration |
|
||||
| Mood | Grounded, contemplative, sustainable |
|
||||
|
||||
## 3. Using the deck's HEX values
|
||||
|
||||
nature has a strong tendency toward **earth-toned natural palette**. When the deck's HEX aligns (warm-earth, nature-organic palette), use directly:
|
||||
|
||||
- Primary HEX: dominant nature color (deep green, deep earth brown)
|
||||
- Secondary HEX: light atmospheric tone (cream, soft sky)
|
||||
- Accent HEX: a small natural pop (a flower, a fruit, a leaf vein)
|
||||
|
||||
If the deck's HEX is cool / corporate, nature may be the wrong rendering — consult the compatibility matrix.
|
||||
|
||||
---
|
||||
|
||||
## 4. Fewshot prompt snippets
|
||||
|
||||
**Snippet A — half-page sustainability scene, text_policy: none**
|
||||
|
||||
> Organic illustration style with botanical motifs. A soft natural scene of a single tree on a gentle hill, with curving organic forms and earthy color palette. Tree foliage in primary deep forest green `#166534` with subtle leaf-vein texture at 12% opacity. Tree trunk in warm earth brown using a darker shade. Hill in soft secondary cream `#FEF3C7` with very gentle curve. Sky in pale soft blue suggesting morning. A small accent of warm yellow `#D4AF37` flowers at the base of the tree. No hard outlines — forms defined by color contrast and soft organic edges. Composed as a 600×800 half-page block with 12% inner padding. NO text or labels. Color values are rendering guidance only.
|
||||
@@ -0,0 +1,38 @@
|
||||
# Rendering: paper-cut
|
||||
|
||||
Layered paper-craft aesthetic — crisp scissor-cut edges, subtle paper shadows where layers overlap, hand-cut character. Used for education, children's content, cultural/folk topics, sustainability/environment, gift/festival contexts, storytelling decks.
|
||||
|
||||
---
|
||||
|
||||
## 1. Style paragraph (paste-ready, 100 words)
|
||||
|
||||
> Layered paper-cut craft aesthetic. The composition is built as if cut from colored construction paper and stacked in layers — each shape has crisp scissor-cut edges (slightly irregular, hand-aware, not mathematically perfect) and casts a soft 8-12% drop shadow onto the layer beneath, giving real tactile depth. Each color appears as its own paper sheet with subtle paper grain at 10-15% opacity. Forms are simplified and stylized — recognizable as paper craft rather than illustration. Composition reads as cozy, warm, made-by-hand. Overall feel is approachable, tactile, child-friendly without being childish — the aesthetic of Eric Carle storybooks and contemporary folk illustration.
|
||||
|
||||
---
|
||||
|
||||
## 2. Line, texture, depth
|
||||
|
||||
| Aspect | Treatment |
|
||||
|---|---|
|
||||
| Line quality | No outlines — shapes are defined by paper edges (slightly irregular cuts) |
|
||||
| Texture | Paper grain at 10-15% opacity over each color sheet |
|
||||
| Depth | Real layered depth via soft 8-12% drop shadow under each cut-paper layer |
|
||||
| Material | Construction paper / cardstock — matte, slightly fibrous |
|
||||
| Mood | Warm, tactile, approachable, hand-made |
|
||||
|
||||
## 3. Using the deck's HEX values
|
||||
|
||||
paper-cut treats each HEX value as **one color of paper**:
|
||||
|
||||
- Primary HEX: the dominant paper layer (largest or most-foreground sheet)
|
||||
- Secondary HEX: background paper (the lowest layer / "table" behind the cut shapes)
|
||||
- Accent HEX: a small cut-out shape on the top layer
|
||||
- Layering matters more than proportion — even a small primary sheet placed in front of a large secondary feels primary-led
|
||||
|
||||
---
|
||||
|
||||
## 4. Fewshot prompt snippets
|
||||
|
||||
**Snippet A — educational scene, text_policy: none**
|
||||
|
||||
> Layered paper-cut craft scene. Background sheet: secondary warm cream `#FEF3C7` paper with subtle grain at 12% opacity (the "table" the composition sits on). On top: a simplified paper-cut tree made of two layered cut shapes — a primary deep green `#0F766E` rounded foliage shape with slightly irregular scissor-cut edge, casting a soft 10% drop shadow onto the cream background; below it, a darker brown trunk cut shape. To the side of the tree: a small accent ochre `#D4A017` cut sun in a corner, with its own soft shadow. No outlines anywhere — shapes are defined by paper edges only. Every layer has paper grain at 12% opacity. Composed as a 600×600 half-page paper scene with 12% padding. NO text in the image. Color values are rendering guidance only.
|
||||
@@ -0,0 +1,36 @@
|
||||
# Rendering: pixel-art
|
||||
|
||||
8-bit / 16-bit retro game aesthetic. Sharp pixel grid, limited palette, no anti-aliasing. Used for gaming decks, retro tech decks, nostalgic content, and game-flavored education/entertainment.
|
||||
|
||||
## 1. Style paragraph (paste-ready, 90 words)
|
||||
|
||||
> 8-bit pixel art style with strict pixel-grid alignment and no anti-aliasing. All elements are constructed from discrete colored pixels — visible chunky pixel edges, sharp transitions between color blocks, no soft gradients. Color palette is limited and intentionally retro (often 16-32 distinct colors total). Forms are simplified to fit a low-resolution grid — small character sprites, blocky environments, iconic items. Optional 1-pixel-wide outlines in darker shades of the fill color add definition. Composition often references classic NES / SNES / arcade game framing. Overall feel is nostalgic, playful, retro-game — instantly recognizable.
|
||||
|
||||
---
|
||||
|
||||
## 2. Line, texture, depth
|
||||
|
||||
| Aspect | Treatment |
|
||||
|---|---|
|
||||
| Line quality | Pixel-stepped — outlines built from individual pixels, no smooth lines |
|
||||
| Texture | None beyond the pixel grid itself |
|
||||
| Depth | Achieved through palette layering (lighter top pixels, darker bottom for shading) |
|
||||
| Material | Pixel grid |
|
||||
| Mood | Nostalgic, retro-game, playful |
|
||||
|
||||
## 3. Using the deck's HEX values
|
||||
|
||||
pixel-art uses HEX values as **palette slots**:
|
||||
|
||||
- Primary HEX: dominant character / object color
|
||||
- Secondary HEX: background or terrain
|
||||
- Accent HEX: highlight items, important markers, magical effects
|
||||
- Optional 4th: a darker shade of primary used as outline pixels (typically 25% darker)
|
||||
|
||||
---
|
||||
|
||||
## 4. Fewshot prompt snippets
|
||||
|
||||
**Snippet A — hero retro banner, text_policy: none**
|
||||
|
||||
> 8-bit pixel art hero banner with strict pixel-grid alignment and no anti-aliasing. A retro-game-style scene — small pixel character sprite standing on a tile floor in the foreground center, with a stylized pixel-art mountain in the background and a pixel sun in the upper right. Character outfit in primary deep blue `#1E40AF`, with 1-pixel outlines in a darker shade of the same blue. Background mountain in muted gray pixel blocks. Sky in soft secondary peach `#FED7AA`. Sun in accent gold `#D4AF37` rendered as a chunky pixel circle. All elements visibly pixel-stepped — no smooth curves. Limited color palette (around 12-16 distinct colors total). Composed for a 1200×500 hero band with 12% inner padding. Simplified pixel character — no detailed face. NO text or labels. Color values are rendering guidance only.
|
||||
@@ -0,0 +1,37 @@
|
||||
# Rendering: screen-print
|
||||
|
||||
Bold silkscreen poster art — flat color blocks, halftone textures, limited colors, bold silhouettes. Used for cultural / media / opinion / cinematic decks where a poster aesthetic carries the page.
|
||||
|
||||
## 1. Style paragraph (paste-ready, 110 words)
|
||||
|
||||
> Bold silkscreen poster art with limited flat color palette and characteristic print textures. The composition uses 2-5 flat colors maximum — no gradients within shapes, just confident solid color blocks. Halftone dot patterns add texture in transition zones (dot density varying from dense to sparse). Slight color layer misregistration (one color block offset by 1-2 pixels from where it "should" be) gives an authentic silkscreen feel. Subjects are rendered as bold silhouettes with stencil-cut edges — no fine detail, no realistic anatomy. Subtle paper grain texture at 15% opacity. Composition emphasizes negative space and geometric framing. Overall feel is vintage poster art, cinematic, editorial-bold — suitable for cultural commentary and dramatic cover work.
|
||||
|
||||
---
|
||||
|
||||
## 2. Line, texture, depth
|
||||
|
||||
| Aspect | Treatment |
|
||||
|---|---|
|
||||
| Line quality | Stencil-cut edges, slight roughness; no outlines on solid color blocks |
|
||||
| Texture | Halftone dot patterns in transition zones; paper grain at 15% across canvas |
|
||||
| Depth | Flat with figure-ground inversion — negative space tells secondary story |
|
||||
| Material | Silkscreen + paper |
|
||||
| Mood | Vintage poster, cinematic, editorial-bold |
|
||||
|
||||
## 3. Using the deck's HEX values
|
||||
|
||||
screen-print works best with **2-5 colors maximum**. The deck's HEX triplet maps directly:
|
||||
|
||||
- Primary HEX: the dominant flat color block (often 40-50% of canvas)
|
||||
- Secondary HEX: the background or contrasting block (40% of canvas)
|
||||
- Accent HEX: emphasis color for a single focal element
|
||||
|
||||
For two-color (duotone) poster mood, drop secondary and use primary + accent only.
|
||||
|
||||
---
|
||||
|
||||
## 4. Fewshot prompt snippets
|
||||
|
||||
**Snippet A — hero chapter divider poster, text_policy: none**
|
||||
|
||||
> Bold silkscreen poster art in cinematic style. Composition is a strong central silhouette of a single iconic shape — perhaps a stylized mountain or a confident geometric form — rendered as a flat block in primary deep teal `#0F766E` occupying the lower 60% of the canvas. Above the silhouette, a contrasting sky in accent orange `#F97316` fills the upper 40% with a single small circular sun shape near the upper right in cream `#FEF3C7`. The horizon line has slight halftone dot texture transitioning between the two color zones. Slight color misregistration — the orange block offset by about 2px from the teal silhouette. Subtle paper grain at 15% opacity across the canvas. Composed for a 1200×400 chapter divider banner with 10% inner padding. NO text or labels. Color values are rendering guidance only — do not display HEX codes or color names as text.
|
||||
@@ -0,0 +1,36 @@
|
||||
# Rendering: sketch-notes
|
||||
|
||||
Warm cream paper with black hand-drawn lines and soft pastel color blocks. The most "approachable" rendering — used in education, training, onboarding, science communication, knowledge content where warmth and friendliness matter more than corporate precision.
|
||||
|
||||
## 1. Style paragraph (paste-ready, 110 words)
|
||||
|
||||
> Warm hand-drawn sketchnote style on cream paper background. All lines are drawn with deliberate slight wobble — black ink on cream, never perfectly straight, with the human-hand quality that makes the image feel like a thoughtful teacher's whiteboard. Color blocks are soft pastels — light blue, mint, lavender, peach — filled into rounded shapes that don't quite reach their outlines (a deliberate "hand-painted overshoot" feel). Simple cartoon icons and small doodle decorations (stars, sparkles, dots, underlines) appear sparingly to add warmth. Composition is airy and well-organized, with generous white space between elements. Overall feel is warm, instructional, friendly — the visual language of educational explainer videos and knowledge cards.
|
||||
|
||||
---
|
||||
|
||||
## 2. Line, texture, depth
|
||||
|
||||
| Aspect | Treatment |
|
||||
|---|---|
|
||||
| Line quality | Hand-drawn black ink with slight wobble; uniform medium weight |
|
||||
| Texture | Subtle paper grain at 8-12% opacity over cream background |
|
||||
| Depth | Flat — sketchnote is intentionally 2D |
|
||||
| Material | Paper + ink + pastel block (hand-painted overshoot) |
|
||||
| Mood | Warm, instructional, friendly |
|
||||
|
||||
## 3. Using the deck's HEX values
|
||||
|
||||
sketch-notes has a strong **built-in palette tendency** toward warm cream + black ink + soft pastels. When the deck's `design_spec.colors` align (warm-earth or macaron palette family), use them directly. When they don't align (cool-corporate primary), sketch-notes may be the wrong rendering — consult the compatibility matrix in `image-palettes/_index.md`.
|
||||
|
||||
- Cream paper background: keep close to the rendering's natural `#F5F0E8` even if `design_spec.secondary` differs slightly (the cream **is** part of sketch-notes)
|
||||
- Black ink lines: keep at `#1A1A1A` or near-black — do not replace with the deck's primary
|
||||
- Pastel color blocks: the deck's primary / secondary / accent HEX values, **rendered as soft pastel tints** rather than full saturation
|
||||
- Single emphasis accent: the deck's accent HEX, used in 1-2 strong sparing places (a key arrow, an emphasized doodle)
|
||||
|
||||
---
|
||||
|
||||
## 4. Fewshot prompt snippets
|
||||
|
||||
**Snippet A — half-page educational concept, text_policy: embedded**
|
||||
|
||||
> Warm hand-drawn sketchnote on warm cream paper background. Black ink lines with slight wobble define three rounded rectangle info boxes arranged in a soft triangle layout. Each box is filled with a soft pastel block color: top box in light blue (a pastel tint of the deck's primary `#1E3A5F`), bottom-left box in mint, bottom-right box in lavender. Color fills don't completely reach the outlines (slight hand-painted overshoot). Hand-drawn wavy arrows connect the boxes — each arrow with a small inline hand-lettered keyword like "leads to", "becomes", "supports" (≤2 words per arrow). Each box contains one simple hand-drawn cartoon icon — a lightbulb, a plant, a gear — in black ink. Small doodle decorations (a few stars, dots, sparkles) sparingly around the composition. Composed as a 600×600 half-page block with 14% inner padding. Generous white space. Color values are rendering guidance only — do not display HEX codes or color names as text.
|
||||