{"id":"5b174498-6893-473b-b21b-f240438cbbf6","entityType":"agent","slug":"clawhub-qomob-xdesign","name":"X Design","canonicalUrl":"https://www.xpersona.co/agent/clawhub-qomob-xdesign","canonicalPath":"/agent/clawhub-qomob-xdesign","generatedAt":"2026-10-10T13:32:00.612Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-10T10:00:59.665Z","emptyReason":null},"description":"Design Workflow Engine — turn any vague idea into a polished visual deliverable in a single conversation. Use this skill WHENEVER the user wants to create, d... Skill: X Design Owner: qomob Summary: Design Workflow Engine — turn any vague idea into a polished visual deliverable in a single conversation. Use this skill WHENEVER the user wants to create, d... Tags: latest:1.0.5 Version history: v1.0.5 | 2026-07-12T08:14:23.054Z | auto - Removed the file skill-card.md from the skill package. - No changes to functionality or workflow. - Documentation and workflow remain unaffect","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 1.5K downloads reported by the source. Last updated 10/10/2026.","installCommand":"clawhub skill install s1712hx0t1qgg41g18p2bb0d6583ms02:xdesign","sourceUrl":"https://clawhub.ai/qomob/xdesign","homepage":"https://clawhub.ai/qomob/skills/xdesign","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/qomob/xdesign","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/qomob/skills/xdesign","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":64,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"Design Workflow Engine — turn any vague idea into a polished visual deliverable in a single conversation. Use this skill WHENEVER the user wants to create, d..."},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-10T10:00:59.665Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-10T10:00:59.665Z","emptyReason":null},"stars":null,"forks":null,"downloads":1509,"packageName":null,"latestVersion":"1.0.5","tractionLabel":"1.5K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-10T10:00:59.665Z","emptyReason":null},"lastUpdatedAt":"2026-10-10T10:00:59.665Z","lastCrawledAt":"2026-10-10T10:00:59.665Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-11T10:00:59.665Z","lastVerifiedAt":null,"highlights":[{"version":"1.0.5","createdAt":"2026-07-12T08:14:23.054Z","changelog":"- Removed the file `skill-card.md` from the skill package. - No changes to functionality or workflow. - Documentation and workflow remain unaffected.","fileCount":25,"zipByteSize":135682},{"version":"1.0.4","createdAt":"2026-07-10T04:32:12.064Z","changelog":"xdesign 1.0.4 — Major reorganization with new references, streamlined guidance, and improved review workflows. - Added key reference docs: agent playbook, animation standards, brand asset protocol, design direction advisor, reusable patterns, and structured review passes. - Consolidated and extensively updated core docs (SKILL.md, mode guides, workflow guide). - Removed 200+ legacy or example design assets (brand DESIGN.md files, unused markdowns) for a leaner, system-first repo. - Enhanced intent routing: now supports explicit review/audit requests with a dedicated review mode and reference. - Updated verification and validation-first guidelines to prevent large-scale rework and ensure direction lock-in early. - All references and runtime rules now serve both human and agent audiences for unified guidance.","fileCount":25,"zipByteSize":135482},{"version":"1.0.3","createdAt":"2026-06-29T00:27:03.745Z","changelog":"XDesign 1.0.3 expands themes and templates, improves routing, and adds structured data detection: - Added 36 themes and 15 full-deck templates to deck-studio (previously 18 and 5 respectively) - Enhanced presentation template organization with scenario/tags/recommended frontmatter for smarter template selection - Implemented fast-path structured data (CSV, JSON, SQL, Markdown table) detection: skips design-system extraction, renders directly as a table or chart - Updated output/export options: now supports PPTX, PDF, self-contained HTML, WeChat, Xiaohongshu/X (2× PNG) - Improved user prompts, defaults, and detection for ambiguous or vague requests","fileCount":233,"zipByteSize":647110},{"version":"1.0.2","createdAt":"2026-06-08T02:02:52.118Z","changelog":"**XDesign 1.0.1 — Major Update with Bundled Design References and Themes** - Added 179 new files with curated design documentation and resources (e.g., assets/design-md/ for 30+ popular brands and tools). - Bundled `deck-studio/` submodule, offering 18 slide themes, 5 deck templates, 31 layouts, and 47 animations for rapid deck creation and export (PPTX, PDF, HTML). - Updated SKILL.md: clearer usage instructions, guidance for intent-based routing (deck, prototype, animation), and expanded design workflow details. - Expanded visual design and prototyping guidance; strengthened question-asking strategies for ambiguous or underspecified user requests. - Clarified when to use XDesign vs. other tools; restrictions added for non-visual or backend/textwork tasks. - Removed legacy file: skill-card.md.","fileCount":182,"zipByteSize":592506},{"version":"1.0.1","createdAt":"2026-04-30T06:06:24.588Z","changelog":"x-design v1.0.1 Changelog - Added a new \"快速开始\" (Quick Start) section for easier onboarding, including a structured prompt template and 3-step process. - Introduced a \"User Persona / 用户画像\" table to clarify typical user roles and their distinct design priorities. - No changes to core logic or guardrails; documentation improvements only. - Other sections remain unchanged.","fileCount":4,"zipByteSize":17846},{"version":"1.0.0","createdAt":"2026-04-21T01:02:25.292Z","changelog":"x-design 1.0.0 - Initial release of the x-design skill: an end-to-end design workflow engine that turns ideas into deliverables via conversation. - Supports creating, designing, and iterating on visual artifacts (slides, prototypes, UI, landing pages, design systems) using HTML. - Implements a structured PPAF (Perception → Planning → Action → Feedback) design loop for iterative design. - Emphasizes extracting structured requirements, building from existing context, and always beginning with a design system and wireframe phase. - Includes robust safety and quality guardrails, including design reasoning explanations, strict IP protection, and a detailed self-check checklist before output.","fileCount":5,"zipByteSize":17976}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s1712hx0t1qgg41g18p2bb0d6583ms02:xdesign","setupComplexity":"low","setupSteps":["Setup complexity is classified as HIGH. You must provision dedicated cloud infrastructure or an isolated VM. Do not run this directly on your local workstation.","Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-qomob-xdesign/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-qomob-xdesign/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-qomob-xdesign/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-qomob-xdesign/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-qomob-xdesign/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-qomob-xdesign/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-10T13:32:00.608Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-qomob-xdesign/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-qomob-xdesign/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-qomob-xdesign/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-qomob-xdesign/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-10T10:00:59.665Z","emptyReason":null},"readme":"Skill: X Design\n\nOwner: qomob\n\nSummary: Design Workflow Engine — turn any vague idea into a polished visual deliverable in a single conversation. Use this skill WHENEVER the user wants to create, d...\n\nTags: latest:1.0.5\n\nVersion history:\n\nv1.0.5 | 2026-07-12T08:14:23.054Z | auto\n\n- Removed the file `skill-card.md` from the skill package.\n- No changes to functionality or workflow.\n- Documentation and workflow remain unaffected.\n\nv1.0.4 | 2026-07-10T04:32:12.064Z | auto\n\nxdesign 1.0.4 — Major reorganization with new references, streamlined guidance, and improved review workflows.\n\n- Added key reference docs: agent playbook, animation standards, brand asset protocol, design direction advisor, reusable patterns, and structured review passes.\n- Consolidated and extensively updated core docs (SKILL.md, mode guides, workflow guide).\n- Removed 200+ legacy or example design assets (brand DESIGN.md files, unused markdowns) for a leaner, system-first repo.\n- Enhanced intent routing: now supports explicit review/audit requests with a dedicated review mode and reference.\n- Updated verification and validation-first guidelines to prevent large-scale rework and ensure direction lock-in early.\n- All references and runtime rules now serve both human and agent audiences for unified guidance.\n\nv1.0.3 | 2026-06-29T00:27:03.745Z | user\n\nXDesign 1.0.3 expands themes and templates, improves routing, and adds structured data detection:\n\n- Added 36 themes and 15 full-deck templates to deck-studio (previously 18 and 5 respectively)\n- Enhanced presentation template organization with scenario/tags/recommended frontmatter for smarter template selection\n- Implemented fast-path structured data (CSV, JSON, SQL, Markdown table) detection: skips design-system extraction, renders directly as a table or chart\n- Updated output/export options: now supports PPTX, PDF, self-contained HTML, WeChat, Xiaohongshu/X (2× PNG)\n- Improved user prompts, defaults, and detection for ambiguous or vague requests\n\nv1.0.2 | 2026-06-08T02:02:52.118Z | user\n\n**XDesign 1.0.1 — Major Update with Bundled Design References and Themes**\n\n- Added 179 new files with curated design documentation and resources (e.g., assets/design-md/ for 30+ popular brands and tools).\n- Bundled `deck-studio/` submodule, offering 18 slide themes, 5 deck templates, 31 layouts, and 47 animations for rapid deck creation and export (PPTX, PDF, HTML).\n- Updated SKILL.md: clearer usage instructions, guidance for intent-based routing (deck, prototype, animation), and expanded design workflow details.\n- Expanded visual design and prototyping guidance; strengthened question-asking strategies for ambiguous or underspecified user requests.\n- Clarified when to use XDesign vs. other tools; restrictions added for non-visual or backend/textwork tasks.\n- Removed legacy file: skill-card.md.\n\nv1.0.1 | 2026-04-30T06:06:24.588Z | user\n\nx-design v1.0.1 Changelog\n\n- Added a new \"快速开始\" (Quick Start) section for easier onboarding, including a structured prompt template and 3-step process.\n- Introduced a \"User Persona / 用户画像\" table to clarify typical user roles and their distinct design priorities.\n- No changes to core logic or guardrails; documentation improvements only.\n- Other sections remain unchanged.\n\nv1.0.0 | 2026-04-21T01:02:25.292Z | user\n\nx-design 1.0.0\n\n- Initial release of the x-design skill: an end-to-end design workflow engine that turns ideas into deliverables via conversation.\n- Supports creating, designing, and iterating on visual artifacts (slides, prototypes, UI, landing pages, design systems) using HTML.\n- Implements a structured PPAF (Perception → Planning → Action → Feedback) design loop for iterative design.\n- Emphasizes extracting structured requirements, building from existing context, and always beginning with a design system and wireframe phase.\n- Includes robust safety and quality guardrails, including design reasoning explanations, strict IP protection, and a detailed self-check checklist before output.\n\nArchive index:\n\nArchive v1.0.5: 25 files, 135682 bytes\n\nFiles: deck-studio/README.md (10640b), deck-studio/README.zh-CN.md (11309b), deck-studio/references/animations.md (7708b), deck-studio/references/authoring-guide.md (5128b), deck-studio/references/full-decks.md (8614b), deck-studio/references/layouts.md (4043b), deck-studio/references/presenter-mode.md (9918b), deck-studio/references/themes.md (6453b), deck-studio/SUBMODULE.md (14735b), evals/evals.json (9385b), references/agent-playbook.md (6104b), references/animation-standards.md (5663b), references/brand-asset-protocol.md (8138b), references/deck-studio-catalog.md (14293b), references/design-direction-advisor.md (16180b), references/design-system-catalog.md (16495b), references/integration-guide.md (10302b), references/mode-2-prototype.md (32073b), references/patterns.md (10186b), references/review-passes.md (12972b), references/technical-specs.md (7806b), references/workflow-guide.md (19652b), skill-card.md (3081b), SKILL.md (37473b), _meta.json (126b)\n\nFile v1.0.5:SKILL.md\n\n---\nname: x-design\ndescription: \"Design Workflow Engine — turn any vague idea into a polished visual deliverable in a single conversation. Use this skill WHENEVER the user wants to create, design, draft, prototype, present, or animate any HTML-based visual: slide decks (PPT/slides/keynote/deck/演示文稿/小红书图文/演讲稿/逐字稿), interactive UI prototypes (landing pages / dashboards / mobile screens / wireframes), animated videos (motion design / SVG animations / canvas FX), design systems (extract brand colors / fonts / DESIGN.md from any URL), or any marketing/portfolio/report visual. Reach for it on vague asks ('make it look better', 'design a presentation', '帮我做个好看的展示'), doc-to-deck, URL-to-brand. Prefer it over hand-rolling HTML, Figma, or generic code tools. Bundled `deck-studio/` provides 36 themes + 15 deck templates + 31 layouts + 47 animations + presenter mode. Exports to PPTX, PDF, self-contained HTML, WeChat (juice-inlined CSS), Xiaohongshu / X (2× retina PNG). Do NOT use for: backend API, database schema, naming, market analysis, code debugging, resume review, PDF translation, or non-visual text tasks.\"\n---\n\n# XDesign — Design Workflow Engine\n\nThis skill exists because turning a vague idea into a polished visual deliverable normally takes 6–10 hours of tool-switching (Figma → PowerPoint → Keynote → After Effects). XDesign compresses that into a single conversation by routing through three intent-driven modes and reusing a bundled library of curated themes, design systems, and animation primitives.---\n\n# Core Principle #0: One System for Humans and Agents\n\nXDesign is built so that **people and AI agents build the same way, from the same reference**. Every routing table, frontmatter schema, fallback strategy, and validation rule in this skill serves both audiences simultaneously.\n\n**The parity promise:** Any change that makes XDesign easier for an agent to use also makes it easier for a human to use — and vice versa. Agent-facing docs (routing tables, fallback matrices) are human-facing docs. There is no separate \"agent-only\" configuration.\n\n**What this means in practice:**\n- The [Intent Router](#intent-router--pick-a-mode-once-then-stay-in-it) is both a machine-parseable dispatch table and a human-readable \"which mode should I pick?\" guide.\n- The [Runtime Fallback Strategies](#runtime-fallback-strategies) table is both an agent's error-recovery protocol and a human's troubleshooting checklist.\n- The [deck-studio](../../deck-studio/) assets are self-contained static files — usable by any agent (Claude Code, Codex, Cursor) without XDesign, and by any human with a browser.\n\n---\n\n## Fact-Verify Before Designing (Core Principle #1)\n\nWhen the request involves a **specific product, technology, company, or public figure** (e.g., \"给大疆 Pocket 5 做发布动画\", \"设计一个 Gemini 4 的 landing page\"), `WebSearch` the entity first before starting any design work. Do not rely on training-data memory for existence, version numbers, release dates, or specs.\n\n**Why:** Building a launch animation for a product that released last week — but the model thinks \"hasn't launched yet\" — wastes the entire session on a wrong assumption. A 10-second search prevents a multi-hour rework.\n\n**Hard rule:** If the search confirms the entity exists and has official assets (logo, product photos, press kit), those become required inputs. See [Brand Asset Protocol](./references/brand-asset-protocol.md).\n\n## 验证第一步必带（Validation-First Step）\n\n无论进入哪个 Mode，在投入完整交付物之前必须先产出一个**最小可验证样本**供用户确认方向。这一步避免\"生成完 30 页 deck / 20 屏 prototype 后才发现方向跑偏\"的灾难性返工。\n\n| Mode | 最小验证样本 | 确认点 |\n|------|-------------|--------|\n| Mode 1 Presentation | 1-3 张代表性 slides（封面 + 内容页 + 主题切换各 1） | 主题风格 / 版式节奏 / 字体配色 |\n| Mode 2 Prototype | 单个关键页面（首页或核心交互页）的 hi-fi 静态稿 | 视觉风格 / 信息架构 / 品牌还原度 |\n| Mode 3 Animation | 关键帧或首尾帧静态图（含 1 段动效预览） | 动效风格 / 节奏 / 视觉语言 |\n\n**执行规则：**\n- 用户描述需求后，**先输出最小验证样本**，等用户确认\"方向对了\"再生成完整交付物\n- 用户已给出强约束（\"必须用某某主题\"、\"就按这个模板\"、\"按上次的风格再做一份\"）时可跳过，直接进入完整生成\n- 最小样本与最终交付物之间的差异**只允许在量级上**（页数/组件数），不允许在视觉语言上发生根本性变化\n- Mode 1 的\"Streaming Preview（>8 slides 拆两轮）\"是此规则的长 deck 子情况，规则保持一致\n\n## Path conventions\n\nThe current `SKILL.md` directory is `<skill-base>` (i.e. `XDesign/`). Every bundled resource (`references/`, `assets/`, `deck-studio/`, `scripts/`, `evals/`) resolves relative to `<skill-base>`.\n\n`<skill-base>/deck-studio/` is a submodule containing **HTML PPT Studio** (originally from [lewislulu/html-ppt-skill](https://github.com/lewislulu/html-ppt-skill)): 36 themes, 15 complete deck templates (each with extended frontmatter for scenario/tags/recommended filtering), 31 single-page layouts, 47 animations, and a presenter mode. CDN-only, zero build.\n\n## Intent Router — pick a mode once, then stay in it\n\nThe first thing to decide is which of the three modes the user is asking for. This is a one-time dispatch per request, not a per-turn decision.\n\n### Format Auto-Detect (fast path)\n\nBefore routing, check if the user's input is **structured data** rather than a design request. If yes, skip design-system extraction and go straight to visualization.\n\n| Input signal | Detection heuristic | Fast path |\n|---|---|---|\n| CSV / TSV | Commas/tabs separating rows; first row looks like headers | → Mode 2, skip Perception. Render as interactive table or chart |\n| JSON array | `[ {…}, {…} ]` with consistent keys | → Mode 2, skip Perception. Infer chart type from data shape |\n| SQL result | Tabular text with `├──` or `│` box-drawing separators | → Mode 2, skip Perception. Render as data grid |\n| Markdown table | `| col | col |` with `---` separator | → Mode 2, skip Perception. Render as styled table |\n\n**When auto-detected:** Tell the user \"检测到结构化数据，跳过设计系统阶段，直接生成 [table/chart/dashboard]。\" Then open `references/mode-2-prototype.md` at the Planning phase (skip Perception). Use a neutral design system (e.g., `corporate-clean` theme tokens) unless the user specifies otherwise.\n\n**When ambiguous:** If the input mixes data with design intent (\"把这个 CSV 做成 Stripe 风格的 dashboard\"), do not auto-detect — follow the normal routing and run Perception to extract the Stripe design system.\n\n### Routing table\n\n| Trigger phrases (Chinese) | Trigger phrases (English) | Routes to |\n|---|---|---|\n| 做一份 PPT / 幻灯片 / 演讲稿 / 演示文稿 / keynote / deck / slides / presentation / reveal / 小红书图文 / 技术分享 / 演讲者模式 / 提词器 / pitch deck / 产品发布会 | make a deck, slides, keynote, reveal, slideshow, pitch deck, tech sharing, presenter view, speaker notes | **Mode 1: Presentation / Deck** → `deck-studio/`, with its themes, templates, animations, and presenter mode |\n| 设计一个 APP / 界面 / 原型 / 落地页 / dashboard / UI Kit / 设计系统 / 提取品牌色 / 做一个高保真 | design a prototype, build a UI, landing page, dashboard, design system, brand extraction, wireframe, mockup | **Mode 2: Visual Design / Prototype** → XDesign native workflow (design system extract → wireframe → hi-fi), see `references/mode-2-prototype.md` |\n| 做一个动效视频 / 时间轴动画 / motion design / Lottie 替代 / SVG 动效 | make an animation, motion design, timeline animation, animated video | **Mode 3: Animation / Video** → same XDesign native path as Mode 2, with `animations.jsx` as the Phase 3 starter |\n| 审查 / 检查 / audit / review / 把关 / 无障碍 / accessibility / a11y / WCAG / polish / 上线前检查 / 帮我审一下 | audit this, review for issues, accessibility check, a11y, polish pass, review this page | **Review Mode** → [`references/review-passes.md`](./references/review-passes.md)（4 pass：Accessibility / AI-Slop / Hierarchy & Rhythm / Interaction States；可审任意 HTML，不依赖生产流） |\n\n### When the request is ambiguous\n\nThe agent is biased toward **asking once with focused options** rather than guessing. Guesses at this stage are expensive to undo; a single 30-second question saves an hour of rework.\n\n**Template-first fallback:** When the user gives a vague request (\"帮我做个 PPT\"), check `deck-studio/templates/full-decks/*/README.md` frontmatter `scenario` and `tags` to narrow to 2-3 candidates, then ask \"这风格更接近哪种？\" rather than \"选哪个模板？\".\n\n- \"PPT / slides / deck / 幻灯片 / 演讲\" → Mode 1. Don't reinterpret as \"a prototype\".\n- \"做一个 APP / 界面 / 原型\" → Mode 2. Don't downgrade to a deck.\n- \"我有一份大纲\" → ask: \"Is this a deck to present, or an interactive prototype?\"\n- \"帮我做个好看的展示\" → default Mode 1 (decks serve one-time presentations better than prototypes).\n- \"我要去给团队讲 xxx\" → Mode 1 with the `presenter-mode-reveal` template.\n- Vague but visual (\"make it look better\", \"design a hero section\", \"帮我设计个页面\") → Mode 2, but check whether the user gave any brand/reference. If none, route to the **Design Direction Advisor** ([references/design-direction-advisor.md](./references/design-direction-advisor.md)) — produce 3 differentiated visual directions before committing to a full build.\n\n### Once a mode is chosen\n\nStick to it. Mixing modes produces broken output — a \"deck\" with React+Babel interactivity from Mode 2 will not render in a static slide viewer, and a \"prototype\" with deck-studio templates will not support real interaction.\n\nFor Mode 1 minimum execution skeleton:\n\n```text\n1. Read deck-studio/SUBMODULE.md (or the Mode 1 section below)\n2. Ask 3 things: content/audience, theme preference, full-deck template vs blank start\n3. Start from deck-studio/templates/full-decks/<name>/ or deck.html\n4. T cycles themes, data-anim drives animations, S opens presenter mode\n5. Output: single self-contained HTML file or multi-file directory\n```\n\nFor Mode 2/3, open [`references/mode-2-prototype.md`](./references/mode-2-prototype.md) and follow the PPAF loop in [`references/workflow-guide.md`](./references/workflow-guide.md).\n\n### Review Mode (cross-cutting)\n\nReview Mode 可在任何 Mode 产出后、或对任意外部 HTML 独立运行。它不是生产模式的替代，而是独立的质检层——4 个 pass（Accessibility / AI-Slop / Hierarchy & Rhythm / Interaction States）可单跑可全跑。生产流内的 CP4 是\"出厂自检\"，Review Mode 是\"独立质检站\"。触发词与执行流程见 [`references/review-passes.md`](./references/review-passes.md)。\n\n---\n\n# Mode 1: Presentation / Deck\n\n> **Triggers**: \"做一份 PPT\", \"做 slides\", \"我要去讲 xxx\", \"pitch deck\", \"小红书图文\", \"演讲稿/逐字稿\".\n> **Resource**: `deck-studio/` (36 themes + 15 full-deck templates + 31 single-page layouts + 47 animations + presenter mode).\n> **Template metadata**: Each template README has extended frontmatter (`mode / scenario / surface / recommended / tags / example_id`) for structured filtering. See [Template Matching](#template-matching-mode-1).\n\n## Why Mode 1 is the default for \"deck\" requests\n\nBuilding slides in raw HTML would re-invent what `deck-studio/` already solves. The submodule handles:\n\n- **Zero build** — pure static HTML/CSS/JS + CDN webfont; no Node, no Webpack, no compile step\n- **Multi-environment compatibility** — Trae IDE, Claude.ai artifacts, Claude Code, any browser, GitHub Pages, `file://` all work\n- **Keyboard-first navigation** — `←` `→` page, `T` cycle themes, `A` cycle animations, `F` fullscreen, `O` overview, **`S` presenter mode (teleprompter)**, `N` notes drawer\n- **Themes as files** — 18 `.css` files, each a complete visual system. Switching themes never edits content.\n- **Start from a template** — 5 full-deck templates (product launch, pitch, tech sharing, weekly report, course module). Copy and go.\n\n## Ask 3 things before writing a single slide\n\nA deck is a one-time performance, not an evolving interface. The cost of guessing wrong is high; the cost of asking is 30 seconds. Always ask, or — if the user already gave rich content — propose a tasteful default and confirm.\n\n1. **Content & audience** — what to cover, page count, who's watching (engineers / executives / Xiaohongshu / VCs / students)\n2. **Theme / style** — pick from the 18 themes; if unsure, give 2-3 candidates:\n   - Business / investor pitch → `pitch-deck-vc`, `corporate-clean`, `swiss-grid`\n   - Tech sharing / engineering → `tokyo-night`, `dracula`, `catppuccin-mocha`, `blueprint`\n   - Xiaohongshu / social → `xiaohongshu-white`, `soft-pastel`, `rainbow-gradient`\n   - Academic / report → `academic-paper`, `editorial-serif`, `minimal-white`\n   - Cyber / launch event → `cyberpunk-neon`, `vaporwave`, `y2k-chrome`\n3. **Starting point** — use one of the 15 full-deck templates, or start from `deck.html` blank? Filter templates by `scenario` frontmatter; pick the lowest `recommended` score that matches. When in doubt, present 2-3 options sorted by `recommended` ascending.\n\n## Quick start (5 steps)\n\n```bash\n# 1. Copy the closest full-deck template (sort by `recommended` in README frontmatter)\ncp -r deck-studio/templates/full-decks/tech-sharing/examples/my-talk/\n\n# 2. Switch the theme (cycle with T in browser, or hardcode)\n#    Edit examples/my-talk/index.html:\n#    <link rel=\"stylesheet\" id=\"theme-link\" href=\"../deck-studio/assets/themes/tokyo-night.css\">\n\n# 3. Replace placeholder text and chart data\n# 4. Open in browser\nopen examples/my-talk/index.html\n\n# 5. (Optional) Render to PNG / PDF / social\ndeck-studio/scripts/render.sh examples/my-talk/index.html 12\n# Or use the bundled helper:\n./scripts/package-export.sh pdf examples/my-talk/index.html\n# Social export (WeChat / XHS / X):\n./scripts/package-export.sh social wechat examples/my-talk/index.html\n```\n\n## Template Matching (Mode 1)\n\nEach full-deck template has extended frontmatter for filtering. Use these fields to narrow the picker when the user's intent is specific:\n\n| If user asks for… | Filter by `scenario` | First pick (lowest `recommended`) |\n|---|---|---|\n| 技术分享 / 开发者分享 | `engineering` | `tech-sharing` (15) |\n| 创业融资 / pitch / VC | `marketing` | `pitch-deck` (20) |\n| 产品发布 / 新品上线 | `marketing` | `product-launch` (25) |\n| 小红书 / 社交图文 | `social` | `xhs-pastel-card` (30) |\n| 周报 / 团队同步 | `general` | `weekly-report` (40) |\n| 安全告警 / 事故复盘 | `engineering` | `testing-safety-alert` (45) |\n| 课程 / 教学 | `education` | `course-module` (60) |\n| 工具测评 / 技术Review | `engineering` | `hermes-cyber-terminal` (65) |\n| 知识图谱 / 架构图 | `engineering` | `graphify-dark-graph` (70) |\n| 极简 / 方向键导航 | `general` | `dir-key-nav-minimal` (75) |\n| 个人笔记 / 学习笔记 | `personal` | `obsidian-claude-gradient` (80) |\n\nWhen none of the above match, fall back to `presenter-mode-reveal` (50) for any presentation with speaker notes, or `weekly-report` (40) for a generic structured deck.\n\n## Presenter Mode (teleprompter)\n\nWhen the user mentions any of: **演讲 / 分享 / 讲稿 / 逐字稿 / speaker notes / presenter view / 演讲者视图 / 提词器** — use `templates/full-decks/presenter-mode-reveal/` and write a 150–300 character verbatim script per slide inside `<aside class=\"notes\">`.\n\nPress **S** to open the presenter window (4 draggable magnetic cards):\n\n- 🔵 **CURRENT** — current page pixel preview (iframe + `?preview=N`)\n- 🟣 **NEXT** — next page pixel preview\n- 🟠 **SPEAKER SCRIPT** — large-font verbatim script\n- 🟢 **TIMER** — countdown + page controls\n\nFull authoring rules: [`deck-studio/references/presenter-mode.md`](./deck-studio/references/presenter-mode.md).\n\n## Streaming Preview (long decks)\n\nWhen a deck will exceed **8 slides**, generate in two passes so the user can preview direction before you commit to the full output:\n\n1. **Pass 1** — Write slides 1–5 to `<output>/deck-preview.html` with:\n   - `deck-studio/assets/base.css` + `deck-studio/assets/fonts.css` + chosen theme CSS\n   - `deck-studio/assets/runtime.js` (so `←` `→` `T` `F` work)\n   - A `<div id=\"partial-banner\">` at the top: \"部分预览 · 1-N / 总 M 张 · 生成中…\" (sticky, dismissible)\n   - `data-partial=\"true\"` on `<body>` for CSS targeting\n   - Open the file in the browser/artifact panel\n1. **Pass 2** — Generate the full deck with all slides. If the user liked the direction, write to the final output file. If they asked for changes, regenerate the full deck with corrections; keep `deck-preview.html` for diffing.\n3. **Cleanup** — Delete `deck-preview.html` once the user confirms the final deck, unless they asked to keep it.\n\n**Do NOT split** decks with ≤8 slides — the overhead of two writes outweighs any benefit. Do NOT split at slide boundaries that break narrative flow (a \"6-slide problem statement + 10-slide solution\" is fine; splitting a 4-slide timeline in half is not).\n\n## Anti-patterns (Mode 1 specific)\n\nThese mistakes are common enough to call out by name:\n\n- ❌ Putting \"this page shows…\" style speaker-facing text on the slide → all of it belongs in `<div class=\"notes\">`\n- ❌ Using literal hex colors (`#111`) → use design tokens (`var(--text-1)`)\n- ❌ Writing a fresh `.slide` layout from scratch → copy the closest match from `templates/single-page/`\n- ❌ Using React + Babel inside a deck → decks are static presentations; save complex interactivity for Mode 2\n\n## Mode 1 resource index\n\n- [`deck-studio/SKILL.md`](./deck-studio/SUBMODULE.md) — full deck-studio documentation (legacy entry point; routing in this SKILL.md is authoritative)\n- [`deck-studio/README.md`](./deck-studio/README.md) — user-facing README with visual previews and install steps\n- [`references/deck-studio-catalog.md`](./references/deck-studio-catalog.md) — themes / layouts / animations quick-reference\n- [`references/integration-guide.md`](./references/integration-guide.md) — fusion architecture + routing table + adapter layer\n- [`deck-studio/references/`](./deck-studio/references/) — `themes.md` / `layouts.md` / `animations.md` / `full-decks.md` / `authoring-guide.md` / `presenter-mode.md`\n- [`deck-studio/templates/`](./deck-studio/templates/) — 5 showcase pages + 5 full-deck templates + 31 single-page layouts\n- [`deck-studio/assets/themes/`](./deck-studio/assets/themes/) — 18 theme CSS files\n- [`deck-studio/assets/animations/`](./deck-studio/assets/animations/) — `animations.css` + 20 FX\n\n---\n\n# Mode 2 & Mode 3: Visual Design / Prototype / Animation\n\nMode 2 (UI/prototype) and Mode 3 (animation) share the same workflow — they differ only in which Phase 3 starter component they use. Full details live in [`references/mode-2-prototype.md`](./references/mode-2-prototype.md) (Role, Guardrails, Design for Failure, Context Management, Quality Self-Check, Anti-Patterns, React+Babel setup, Starter Components) and [`references/workflow-guide.md`](./references/workflow-guide.md) (PPAF loop, Design Process phases, Tweaks, Variations, Verification, Sub-Skills).\n\n**Format auto-detect fast path:** When the user provides structured data (CSV / JSON / SQL), the [Format Auto-Detect](#format-auto-detect-fast path) entry point routes directly to `references/mode-2-prototype.md` Phase 2 (Planning), skipping Phase 1 (Perception / design system extraction). The output is a data visualization (table, chart, or dashboard) rather than a branded prototype.\n\nA one-paragraph summary of why these modes exist:\n\nThe PPAF loop (Perception → Planning → Action → Feedback) is non-negotiable. Skipping perception produces generic \"universal design\" output. Skipping planning produces inconsistent deliverables. Skipping the design-system phase produces pages that look like they came from different products. Skipping feedback produces polished-looking slides that crash in the browser. The reference files spell out exactly what each phase requires.\n\nMode 2/3 deliverables are single self-contained HTML files. They can be opened in any browser, exported to PDF via `./scripts/package-export.sh pdf <file>`, or loosely exported to PPTX via `./scripts/package-export.sh pptx <file>` (lossy — for review, not delivery).\n\n## Design Direction Advisor (Mode 2/3 fallback for vague requests)\n\nWhen Mode 2/3 receives a request with **no brand name, no screenshot, no reference URL**, do not produce a generic \"universal design.\" Instead, route to the [Design Direction Advisor](./references/design-direction-advisor.md): generate **3 differentiated visual directions** (Information-first → Balanced → Concept-led), let the user pick, then enter the normal PPAF loop with the confirmed direction. The Advisor uses the existing 36 themes + 58 brand DESIGN.md files as its ammunition library — no new assets needed.\n\n**Motion-specific additions** (v2.7+): The Advisor now includes `ANIMATION_FREQUENCY` dial (based on usage frequency — high-frequency interactions get reduced/no animation), and a [Motion Vocabulary](./references/design-direction-advisor.md#motion-vocabulary-translate-vague-requests-to-precise-terms) translation table to convert vague descriptions (\"弹一下\") into precise animation parameters.\n\n**Progressive Intake** (v2.7+): When the user gives a vague request (\"做个落地页\"), the agent MUST run the [3-round intake interview](./references/mode-2-prototype.md#progressive-intake-interview-for-vague-requests) — structured multiple-choice questions that guide the user to provide useful constraints without forcing them to make design decisions. Max 3 rounds, then proceed with inference.\n\n## Animation Quality Standards (Mode 3)\n\nFor Mode 3 (Animation/Video) deliverables, the [Animation Reason Checklist](./references/animation-standards.md#animation-reason-checklist-mode-3-mandatory-before-generating) is **mandatory** — every animation must justify itself with a functional reason (spatial consistency, state indication, relationship explanation, prevent disorientation, or feedback). Animations without a valid reason are removed rather than generated.\n\nAdditionally, 7 animation-specific [Pre-flight Checks](./references/animation-standards.md#pre-flight-animation-quality-rules-additive-to-existing-checks) (#11-#17) run after the existing CP4 checklist, covering duration bounds, easing curves, GPU-layer properties, touch device safety, and reduced-motion granularity.\n\n**Physical correctness default:** Entrance animations start from `scale(0.95) + opacity: 0` (elements don't appear from nothing), not `scale(0)`. See `deck-studio/assets/animations/animations.css` for the updated defaults.\n\n---\n\n# Tooling\n\nA unified CLI entry point dispatching to task-specific scripts:\n\n```bash\n# Export\n./scripts/xdesign export pdf  <input.html> [output.pdf]\n./scripts/xdesign export pptx <input.html> [output.pptx]\n./scripts/xdesign export social wechat|xhs|x <input.html> [output]\n\n# Theme management\n./scripts/xdesign theme list\n./scripts/xdesign theme validate\n\n# Brand scaffolding\n./scripts/xdesign brand add <slug> <display-name> [hex]\n\n# Prototype scaffolding\n./scripts/xdesign proto new <name> [brand-slug]\n\n# Eject (swizzle) a sub-block from a file\n./scripts/xdesign eject <input.html> <block-id> [output.html]\n\n# Lint + package\n./scripts/xdesign lint\n./scripts/xdesign dist [output-dir]\n```\n\nAll subcommands proxy to the existing `package-export.sh`, `add-brand.sh`, `new-prototype.sh`, `validate-themes.py`, `lint-skill.py`, and `dist.sh` — the CLI adds a consistent interface, not new logic.\n\nThree scripts in `scripts/` handle the high-frequency automations that would otherwise be reinvented per invocation:\n\n| Script | What it does |\n|---|---|\n| `scripts/validate-themes.py` | Catches broken theme references in `deck-studio/templates/*.html` after theme-set changes |\n| `scripts/lint-skill.py` | Lints this skill against the skill-creator conventions (frontmatter, line count, pushy description, evals schema, scripts dir, nested SKILL.md) |\n| `scripts/new-prototype.sh <name> [brand]` | Scaffolds a Mode 2 prototype with tokens pre-filled from a brand's DESIGN.md if specified |\n| `scripts/add-brand.sh <slug> <name> [color]` | Scaffolds a new brand DESIGN.md with a stable schema; auto-inserts into the catalog index |\n| `scripts/package-export.sh pdf <input> [output]` | Converts HTML deck/prototype to PDF (via headless Chrome) |\n| `scripts/package-export.sh pptx <input> [output]` | Converts HTML deck/prototype to PPTX (via pandoc, lossy) |\n| `scripts/package-export.sh social wechat <input> [output]` | Juice-inlines CSS for WeChat editor paste (dependency: `juice`) |\n| `scripts/package-export.sh social xhs <input> [output]` | Renders 2× retina PNG for Xiaohongshu (dependency: `playwright`) |\n| `scripts/package-export.sh social x <input> [output]` | Renders 2× retina PNG for X/Twitter (dependency: `playwright`) |\n| `scripts/dist.sh [output-dir]` | Builds a clean distributable `.skill` package (excludes `.git` and build artifacts) |\n\nRun `python3 scripts/lint-skill.py` after editing SKILL.md to catch regressions. Run `./scripts/dist.sh` before publishing to produce a `.skill` package that does not leak git internals.\n\n# Evals\n\nQuantitative evaluations live in [`evals/evals.json`](./evals/evals.json), following the schema in `skill-creator/references/schemas.md`. Eight test prompts cover:\n\n1. Vague brand reference (Mode 1) — coffee shop pitch deck with brand color hint\n2. Clear multi-screen prototype (Mode 2) — SaaS dashboard with layout specs\n3. Iteration on existing output (Mode 2/3 hybrid) — color swap + new animation\n4. URL-to-brand extraction + landing page (Mode 2)\n5. Animation with brand constraints (Mode 3)\n6. **Vibe test** — anti-slop compliance for premium-consumer landing page\n7. **Vibe test** — narrative arc and hierarchy for tech talk deck\n8. **Vibe test** — animation justification and reduced-motion for logo reveal\n\n**Vibe tests** (evals 6-8) are inspired by Astryx's \"earned by measurement\" principle: they test visual quality conventions rather than assert them, using a rubric of dimensions (`anti-slop:gradient`, `pattern:narrative-arc`, `animation:valid-reason`, etc.). Results are held loosely — a failed vibe test signals a rule that may need revisiting, not a hard failure.\n\nThe legacy `evals/eval-plan.json` (dual-perspective review rubric) is retained as supplementary metadata describing why the prompts were chosen, not as a runnable benchmark.---\n\n# Architecture: Foundations → Components → Patterns\n\nXDesign's visual capability is organized in three layers, each built on the below:\n\n| Layer | What it provides | Where it lives |\n|---|---|---|\n| **Foundations** | Visual tokens: color palettes, typography scales, spacing systems, shadow elevation | `deck-studio/assets/themes/`, [deck-studio references](../deck-studio/references/themes.md) |\n| **Components** | Single-slide building blocks: 31 layouts covering openers, data displays, diagrams, closers | `deck-studio/templates/single-page/`, [layouts.md](../deck-studio/references/layouts.md) |\n| **Patterns** | Multi-slide narrative recipes: 8 battle-tested arcs (pitch, landing, dashboard, narrative, comparison, process, report, course) | [patterns.md](./references/patterns.md) |\n\n**How to use:**\n- When the user asks for a **deck**, the Intent Router (Mode 1) picks a template. Patterns suggest which sequence of layouts to use.\n- When the user asks for a **prototype** (Mode 2), Foundations provide the tokens, Components provide the building blocks.\n- When the request matches a known pattern trigger (e.g., \"pitch deck\", \"dashboard\"), reference the pattern by name and fill its slots.\n\nPatterns are defaults, not mandates — if the user provides their own structure, respect it.\n\n---\n\n## Agent Decision Guide\n\nFor routing logic, fallback matrices, context management, and error recovery specific to AI agents, see [references/agent-playbook.md](./references/agent-playbook.md).\n\n---\n\n# Runtime Fallback Strategies\n\nWhen a primary operation fails, follow these fallback paths instead of freezing or hallucinating:\n\n| Failure Scenario | Primary Path | Fallback | Log Action |\n|---|---|---|---|\n| URL-to-brand: WebFetch fails | Fetch URL → extract tokens → write DESIGN.md | Read `references/design-system-catalog.md` for known brands; if not found, ask user for 3-5 brand tokens manually | Log \"WebFetch failed for {url}, falling back to catalog\" |\n| deck-studio theme CSS not found | Load `deck-studio/assets/themes/<name>.css` | Fall back to `corporate-clean.css` (always present); warn user | Log \"Theme {name}.css not found, using corporate-clean\" |\n| deck-studio template directory not found | Reference `templates/full-decks/<name>/` | Fall back to `templates/single-page/` layouts; build a valid deck from parts | Log \"Full-deck template {name} not found, using single-page fallback\" |\n| runtime.js fails to load | Browser loads `assets/runtime.js` | Deck still renders as static HTML slides (no interactivity); nothing breaks | Log \"runtime.js failed to load\" |\n| Headless Chrome export fails | `scripts/package-export.sh pdf` | Offer manual \"Print to PDF\" instructions instead | Log \"PDF export failed, offering manual alternative\" |\n| brand DESIGN.md has no color palette | Use DESIGN.md tokens | Derive a default palette from the brand name's dominant color | Log \"No palette in DESIGN.md, deriving from brand name\" |\n\n# Token Budget Guidelines\n\nXDesign operates in HTML-generation mode, which is token-heavy. Follow these budget limits to avoid context overrun:\n\n| Mode | Typical Output Size | Token Budget | Strategy |\n|---|---|---|---|\n| Mode 1 (deck) | 1 single-file HTML (6-30 slides) | ~4K-8K tokens | Use scoped CSS classes (`tpl-*`, `xw-*`) to avoid class-name bloat; reuse existing theme CSS instead of inlining |\n| Mode 2 (prototype/dashboard) | 1 HTML file with JS interactivity | ~6K-12K tokens | Prefer CSS Grid/Flexbox over repetitive div structures; use CSS variables for consistent theming |\n| Mode 3 (animation) | 1 HTML file with Canvas/JS | ~4K-10K tokens | Avoid long keyframe definitions; use JS-driven animation with requestAnimationFrame |\n| URL-to-brand (extract) | 1 small DESIGN.md | ~500-1K tokens | Only extract essential tokens (6 colors, 2 fonts, 3 radii, 2 spacing); skip verbose descriptions |\n| Iteration (edit) | Incremental diff | ~500-2K tokens | Read target file first; output only changed sections; avoid full-file rewrite |\n\n> **Rule**: If token budget for a mode is exceeded, split the output into multiple responses (e.g., generate the CSS file separately from the HTML body).\n\n# Cross-Agent Compatibility\n\n`deck-studio/` is **self-contained**: every file is static HTML + CSS + JS + CDN webfonts. You can use it from any coding agent (Claude Code, Codex, Cursor, etc.) without XDesign.\n\n**From another agent:**\n\n1. Copy or symlink the `deck-studio/` directory into your project:\n   ```bash\n   ln -s ~/.trae/skills/XDesign/deck-studio ./deck-studio-assets\n   ```\n2. Reference assets by relative path in your generated HTML:\n   ```html\n   <link rel=\"stylesheet\" href=\"./deck-studio-assets/assets/base.css\">\n   <link rel=\"stylesheet\" href=\"./deck-studio-assets/assets/themes/tokyo-night.css\">\n   <script src=\"./deck-studio-assets/assets/runtime.js\"></script>\n   ```\n3. Use `deck-studio/templates/full-decks/<name>/index.html` as your starting point — copy and edit.\n\n**Why this works:** No build step, no Node, no bundler. The runtime is vanilla JS toggling `<section class=\"slide\">` visibility. All dependencies are CDN (Google Fonts) or local (themes, animations).\n\n**Limitations:** Without XDesign's routing layer, you lose scenario-based template matching and streaming preview. You pick the template manually. The `README.md` frontmatter in each template still lists `scenario` and `tags` to help you choose.\n\n# Changelog\n\n| Version | Date | Changes |\n|---|---|---|\n| v2.7 | 2026-07 | **Animation Quality System** + **Progressive Intake**: **#1 Animation Reason Checklist** (mandatory for Mode 3): every animation must justify itself with a functional reason. **#2 Animation Frequency Dial**: `ANIMATION_FREQUENCY` in Design Direction Advisor. **#3 Motion Vocabulary**: vague→precise translation table. **#4 Pre-flight Animation Rules (#11-17)**: duration bounds, easing curves, GPU-layer only, touch safety, reduced-motion granularity. **#5 Physical Correctness Defaults**: `kf-zoom` changed from `scale(.6)` to `scale(.96)`. **#6 Reduced-Motion Granularity**: color-only (always) + transform (suppressed). **#7 Progressive Intake Interview**: 3-round max structured questions for vague requests — guides users to provide constraints without forcing design decisions. |\n| v2.6 | 2026-06 | **Anti-Slop Deepening** — inspired by taste-skill methodology research (MIT,理念借鉴/文本原创), added 4 improvements: **#1 Design Preference Layer (P1)**: New section in `mode-2-prototype.md` — deeper bias correction across typography (serif-as-creative-tell, Inter-everywhere), color (premium-consumer farmhouse palette, mid-design drift), layout (centered-hero-over-mesh, equal-card-filler), and motion (purposeless marquee, ambient particles). Each rule has WHY + deliberate alternative. **#2 Three Dials (P2)**: New internal config system in `design-direction-advisor.md` — `DESIGN_VARIANCE / MOTION_INTENSITY / VISUAL_DENSITY` (1-10), inferred from user signals, drives layout/motion/density decisions. Invisible to user, recorded in HTML reasoning block. **#3 Brief Inference 6-Signal (P3)**: Upgraded Phase 1 from 3-question dump to 6-dimension signal scan (page kind / vibe words / references / audience / brand assets / quiet constraints) + one-line \"Design Read\" output. Ask only when genuinely ambiguous. **#4 Pre-flight Check (P4)**: 10-item mechanical checklist in `mode-2-prototype.md` CP4 — color consistency lock, saturation <80%, italic descender clearance, no orphaned placeholders, marquee ≤1, prefers-reduced-motion, mobile hit targets ≥44px, etc. All content originally authored; no external text reproduced. |\n| v2.5 | 2026-06 | **Decision-Support Layer upgrade** — inspired by design methodology research, added 5 new mechanisms: **#1 Design Direction Advisor (P0)**: New `references/design-direction-advisor.md` — when Mode 2/3 receives vague requests with no brand/reference, generates 3 differentiated visual directions (Information-first → Balanced → Concept-led) before committing to full build. Uses existing 36 themes + 58 DESIGN.md as ammunition library. **#2 Brand Asset Protocol (P1)**: New `references/brand-asset-protocol.md` — 5-step hard flow (Ask → Search → Download → Verify → Freeze) for acquiring real brand assets. Two trigger types: designing FOR a brand, and designing WITH identifiable brands. **#3 Anti-AI-Slop Rules (P1)**: Expanded `mode-2-prototype.md` with WHY explanations and legitimate-exception boundaries for each slop pattern. **#4 Image Pre-flight Checkpoint (P2)**: New Phase 1.5 in PPAF loop — content-essential designs must fetch real images before designing, never substitute with CSS blocks. **#5 Fact-Verify Principle #0 (P2)**: WebSearch specific products/technologies before designing — prevents building on wrong assumptions. **#6 Tweaks Template (P3)**: Full HTML/JS implementation template for in-design variation controls with localStorage persistence. **#7 Junior Designer Workflow (P3)**: 4-checkpoint rhythm (Assumptions → Wireframe → First hi-fi → Full) with mandatory HTML reasoning block. All content originally authored; no external text reproduced. |\n| v2.4 | 2026-06 | **#1 Extended Frontmatter**: Added mode/scenario/surface/recommended/tags/example_id to all 15 deck template READMEs. Added Template Matching table and scenario-based fallback to SKILL.md routing. Updated deck count 5→15 in path conventions. **#2 Streaming Preview**: Added two-pass generation for decks >8 slides with partial HTML preview + dismissible banner. **#3 Social Export**: Added `social wechat|xhs|x` subcommands to package-export.sh. WeChat = juice-inlined CSS; XHS/X = 2× retina PNG via Playwright. Updated Tooling table. **#4 Format Auto-Detect**: Added fast path for CSV/JSON/SQL/Markdown-table input. Structured data skips Perception phase and routes directly to Mode 2 data visualization. **#5 Cross-Agent Compatibility**: Documented deck-studio as self-contained static assets usable from any coding agent (Claude Code / Codex / Cursor). Added symlink + path reference guide. |\n| v2.3 | 2026-06 | Synced deck-studio to 36 themes + 15 full-decks from upstream. Added evals for Mode 3 and URL-to-brand. Created automated eval pipeline (`evals/run-evals.sh`). Added Runtime Fallback Strategies & Token Budget Guidelines. Updated all reference docs to match resource counts. |\n\nFile v1.0.5:deck-studio/README.md\n\n# html-ppt — HTML PPT Studio\n\n> A world-class AgentSkill for producing professional HTML presentations in\n> **36 themes**, **15 full-deck templates**, **31 page layouts**,\n> **47 animations** (27 CSS + 20 canvas FX), and a **true presenter mode**\n> with pixel-perfect previews + speaker script + timer — all pure static\n> HTML/CSS/JS, no build step.\n\n**Author:** lewis &lt;sudolewis@gmail.com&gt;\n**License:** MIT\n**中文文档:** [README.zh-CN.md](README.zh-CN.md)\n\n![html-ppt — cover with live previews](docs/readme/hero.gif)\n\n> One command installs **36 themes × 20 canvas FX × 31 layouts × 15 full decks + presenter mode**. Every preview above is a live iframe of a real template file rendering inside the deck — no screenshots, no mock-ups.\n\n## 🎤 Presenter Mode (new!)\n\nPress `S` on any deck to pop open a dedicated presenter window with four\ndraggable, resizable **magnetic cards**: current slide, next slide preview,\nspeaker script (逐字稿), and timer. Two windows stay in sync via\n`BroadcastChannel`.\n\n![Presenter mode with 4 magnetic cards](docs/readme/presenter-mode.png)\n\n**Why previews are pixel-perfect:** each card is an `<iframe>` that loads the\nsame deck HTML with a `?preview=N` query param. The runtime detects this and\nrenders only slide N with no chrome — so the preview uses the **same CSS,\ntheme, fonts and viewport** as the audience view. Colors and layout are\nguaranteed identical.\n\n**Smooth (no-reload) navigation:** on slide change, the presenter window\nsends `postMessage({type:'preview-goto', idx:N})` to each iframe. The iframe\njust toggles `.is-active` between slides — **no reload, no flicker**.\n\n**Speaker script rules (3 golden):**\n1. **Prompt signals, not lines to read** — bold the keywords, separate\n   transition sentences into their own paragraphs\n2. **150–300 words per slide** — that's the ~2–3 min/page pace\n3. **Write it like you speak** — conversational, not written prose\n\nSee [`references/presenter-mode.md`](references/presenter-mode.md) for the\nfull authoring guide, or copy the ready-made template at\n`templates/full-decks/presenter-mode-reveal/` which ships with full 150-300\nword speaker scripts on every slide.\n\n## Install (one command)\n\n```bash\nnpx skills add https://github.com/lewislulu/html-ppt-skill\n```\n\nThat registers the skill with your agent runtime. After install, any agent\nthat supports AgentSkills can author presentations by asking things like:\n\n> \"做一份 8 页的技术分享 slides，用 cyberpunk 主题\"\n> \"turn this outline into a pitch deck\"\n> \"做一个小红书图文，9 张，白底柔和风\"\n\n## What's in the box\n\n| | Count | Where |\n|---|---|---|\n| 🎤 **Presenter mode** | **NEW** | `S` key / `?preview=N` |\n| 🎨 **Themes** | **36** | `assets/themes/*.css` |\n| 📑 **Full-deck templates** | **15** | `templates/full-decks/<name>/` |\n| 🧩 **Single-page layouts** | **31** | `templates/single-page/*.html` |\n| ✨ **CSS animations** | **27** | `assets/animations/animations.css` |\n| 💥 **Canvas FX animations** | **20** | `assets/animations/fx/*.js` |\n| 🖼️ **Showcase decks** | 4 | `templates/*-showcase.html` |\n| 📸 **Verification screenshots** | 56 | `scripts/verify-output/` |\n\n### 36 Themes\n\n`minimal-white`, `editorial-serif`, `soft-pastel`, `sharp-mono`, `arctic-cool`,\n`sunset-warm`, `catppuccin-latte`, `catppuccin-mocha`, `dracula`, `tokyo-night`,\n`nord`, `solarized-light`, `gruvbox-dark`, `rose-pine`, `neo-brutalism`,\n`glassmorphism`, `bauhaus`, `swiss-grid`, `terminal-green`, `xiaohongshu-white`,\n`rainbow-gradient`, `aurora`, `blueprint`, `memphis-pop`, `cyberpunk-neon`,\n`y2k-chrome`, `retro-tv`, `japanese-minimal`, `vaporwave`, `midcentury`,\n`corporate-clean`, `academic-paper`, `news-broadcast`, `pitch-deck-vc`,\n`magazine-bold`, `engineering-whiteprint`.\n\n![36 themes · 8 of them](docs/readme/themes.png)\n\nEach is a pure CSS-tokens file — swap one `<link>` to reskin the entire deck.\nBrowse them all in `templates/theme-showcase.html` (each slide rendered in an\nisolated iframe so theme ≠ theme is visually guaranteed).\n\n![14 full-deck templates](docs/readme/templates.png)\n\n### 15 Full-deck templates\n\nEight extracted from real-world decks, seven generic scenario scaffolds:\n\n**Extracted looks**\n- `xhs-white-editorial` — 小红书白底杂志风\n- `graphify-dark-graph` — 暗底 + 力导向知识图谱\n- `knowledge-arch-blueprint` — 蓝图 / 架构图风\n- `hermes-cyber-terminal` — 终端 cyberpunk\n- `obsidian-claude-gradient` — 紫色渐变卡\n- `testing-safety-alert` — 红 / 琥珀警示风\n- `xhs-pastel-card` — 柔和马卡龙图文\n- `dir-key-nav-minimal` — 方向键极简\n\n**Scenario decks**\n- `pitch-deck`, `product-launch`, `tech-sharing`, `weekly-report`,\n  `xhs-post` (9-slide 3:4), `course-module`,\n  **`presenter-mode-reveal`** 🎤 — complete talk template with full 150-300\n  word speaker scripts on every slide, designed around the `S` key presenter mode\n\nEach is a self-contained folder with scoped `.tpl-<name>` CSS so multiple\ndecks can be previewed side-by-side without collisions. Browse the full\ngallery in `templates/full-decks-index.html`.\n\n![31 single-page layouts](docs/readme/layouts.png)\n\n### 31 Single-page layouts\n\ncover · toc · section-divider · bullets · two-column · three-column ·\nbig-quote · stat-highlight · kpi-grid · table · code · diff · terminal ·\nflow-diagram · timeline · roadmap · mindmap · comparison · pros-cons ·\ntodo-checklist · gantt · image-hero · image-grid · chart-bar · chart-line ·\nchart-pie · chart-radar · arch-diagram · process-steps · cta · thanks\n\nEvery layout ships with realistic demo data so you can drop it into a deck\nand immediately see it render.\n\n![31 layouts auto-cycling through real template files](docs/readme/layouts-live.gif)\n\n*The big iframe is loading `templates/single-page/<name>.html` directly and cycling through all 31 layouts every 2.8 seconds.*\n\n![47 animations — 27 CSS + 20 canvas FX](docs/readme/animations.png)\n\n### 27 CSS animations + 20 Canvas FX\n\n**CSS (lightweight)** — directional fades, `rise-in`, `zoom-pop`, `blur-in`,\n`glitch-in`, `typewriter`, `neon-glow`, `shimmer-sweep`, `gradient-flow`,\n`stagger-list`, `counter-up`, `path-draw`, `morph-shape`, `parallax-tilt`,\n`card-flip-3d`, `cube-rotate-3d`, `page-turn-3d`, `perspective-zoom`,\n`marquee-scroll`, `kenburns`, `ripple-reveal`, `spotlight`, …\n\n**Canvas FX (cinematic)** — `particle-burst`, `confetti-cannon`, `firework`,\n`starfield`, `matrix-rain`, `knowledge-graph` (force-directed physics),\n`neural-net` (signal pulses), `constellation`, `orbit-ring`, `galaxy-swirl`,\n`word-cascade`, `letter-explode`, `chain-react`, `magnetic-field`,\n`data-stream`, `gradient-blob`, `sparkle-trail`, `shockwave`,\n`typewriter-multi`, `counter-explosion`. Each is a real hand-rolled canvas\nmodule auto-initialised on slide enter via `fx-runtime.js`.\n\n## Quick start (manual, after install or git clone)\n\n```bash\n# Scaffold a new deck from the base template\n./scripts/new-deck.sh my-talk\n\n# Browse everything\nopen templates/theme-showcase.html         # all 36 themes (iframe-isolated)\nopen templates/layout-showcase.html        # all 31 layouts\nopen templates/animation-showcase.html     # all 47 animations\nopen templates/full-decks-index.html       # all 14 full decks\n\n# Render any template to PNG via headless Chrome\n./scripts/render.sh templates/theme-showcase.html\n./scripts/render.sh examples/my-talk/index.html 12\n```\n\n## Keyboard cheat sheet\n\n```\n← → Space PgUp PgDn Home End   navigate\nF                               fullscreen\nS                               open presenter window (magnetic cards)\nN                               quick notes drawer (bottom)\nR                               reset timer (in presenter window)\nO                               slide overview grid\nT                               cycle themes (syncs to presenter)\nA                               cycle a demo animation on current slide\n#/N (URL)                       deep-link to slide N\n?preview=N (URL)                preview-only mode (single slide, no chrome)\n```\n\n## Project structure\n\n```\nhtml-ppt-skill/\n├── SKILL.md                      agent-facing dispatcher\n├── README.md                     this file\n├── references/                   detailed catalogs\n│   ├── themes.md                 36 themes with when-to-use\n│   ├── layouts.md                31 layout types\n│   ├── animations.md             27 CSS + 20 FX catalog\n│   ├── full-decks.md             14 full-deck templates\n│   └── authoring-guide.md        full workflow\n├── assets/\n│   ├── base.css                  shared tokens + primitives\n│   ├── fonts.css                 webfont imports\n│   ├── runtime.js                keyboard + presenter + overview\n│   ├── themes/*.css              36 theme token files\n│   └── animations/\n│       ├── animations.css        27 named CSS animations\n│       ├── fx-runtime.js         auto-init [data-fx] on slide enter\n│       └── fx/*.js               20 canvas FX modules\n├── templates/\n│   ├── deck.html                 minimal starter\n│   ├── theme-showcase.html       iframe-isolated theme tour\n│   ├── layout-showcase.html      all 31 layouts\n│   ├── animation-showcase.html   47 animation slides\n│   ├── full-decks-index.html     14-deck gallery\n│   ├── full-decks/<name>/        14 scoped multi-slide decks\n│   └── single-page/*.html        31 layout files with demo data\n├── scripts/\n│   ├── new-deck.sh               scaffold\n│   ├── render.sh                 headless Chrome → PNG\n│   └── verify-output/            56 self-test screenshots\n└── examples/demo-deck/           complete working deck\n```\n\n## Philosophy\n\n- **Token-driven design system.** All color, radius, shadow, font decisions\n  live in `assets/base.css` + the current theme file. Change one variable,\n  the whole deck reflows tastefully.\n- **Iframe isolation for previews.** Theme / layout / full-deck showcases all\n  use `<iframe>` per slide so each preview is a real, independent render.\n- **Zero build.** Pure static HTML/CSS/JS. CDN only for webfonts, highlight.js\n  and chart.js (optional).\n- **Senior-designer defaults.** Opinionated type scale, spacing rhythm,\n  gradients and card treatments — no \"Corporate PowerPoint 2006\" vibes.\n- **Chinese + English first-class.** Noto Sans SC / Noto Serif SC pre-imported.\n\n## License\n\nMIT © 2026 lewis &lt;sudolewis@gmail.com&gt;.\n\nFile v1.0.5:_meta.json\n\n{\n  \"ownerId\": \"kn72r3ww47r1qyfaf233sf7q1982rh5f\",\n  \"slug\": \"xdesign\",\n  \"version\": \"1.0.5\",\n  \"publishedAt\": 1783844063054\n}\n\nFile v1.0.5:deck-studio/references/animations.md\n\n# Animations catalog\n\nAll animations live in `assets/animations/animations.css`. Apply them by\nadding `class=\"anim-<name>\"` OR `data-anim=\"<name>\"` to any element\n(`runtime.js` re-triggers `data-anim` elements whenever a slide becomes\nactive, so you get the entry effect every time you navigate onto the slide).\n\nOpen `templates/animation-showcase.html` to browse all of them — one slide\nper animation, auto-playing on slide enter. Press **A** on any slide to cycle\na random animation on the current page.\n\n## Directional fades\n\n| name | effect | use for |\n|---|---|---|\n| `fade-up` | Translate from +32 px, fade. | Default for paragraph + card entry. |\n| `fade-down` | Translate from -32 px, fade. | Headers / banners / callouts. |\n| `fade-left` | Translate from -40 px. | Left column in a two-column layout. |\n| `fade-right` | Translate from +40 px. | Right column in a two-column layout. |\n\n## Dramatic entries\n\n| name | effect | use for |\n|---|---|---|\n| `rise-in` | +60 px rise + blur-off. | Slide titles, hero headlines. |\n| `drop-in` | -60 px drop + slight scale. | Banners, alert bars. |\n| `zoom-pop` | Scale 0.6 → 1.04 → 1. | Buttons, stat numbers, CTAs. |\n| `blur-in` | 18 px blur clears. | Cover page reveal. |\n| `glitch-in` | Clip-path steps + jitter. | Tech / cyber / error states. |\n\n## Text effects\n\n| name | effect | use for |\n|---|---|---|\n| `typewriter` | Monospace-like type reveal. | One-liners, slogans. |\n| `neon-glow` | Cyclic text-shadow pulse. | Terminal-green / dracula themes. |\n| `shimmer-sweep` | White sheen passes across. | Metallic buttons, premium cards. |\n| `gradient-flow` | Infinite horizontal gradient slide. | Brand wordmarks. |\n\n## Lists & numbers\n\n| name | effect | use for |\n|---|---|---|\n| `stagger-list` | Children rise-in one-by-one. | Any `<ul>` or `.grid`. |\n| `counter-up` | Number ticks 0 → target. | KPI, stat-highlight pages. |\n\nCounter markup:\n```html\n<span class=\"counter\" data-to=\"1248\">0</span>\n```\n\n## SVG / geometry\n\n| name | effect | use for |\n|---|---|---|\n| `path-draw` | Strokes draw themselves. | Lines, arrows, diagrams. |\n| `morph-shape` | Path `d` morph. | Background shapes. |\n\nPut `class=\"anim-path-draw\"` on `<svg>`; every path/line/circle inside gets drawn.\n\n## 3D & perspective\n\n| name | effect | use for |\n|---|---|---|\n| `parallax-tilt` | Hover → 3D tilt. | Hero cards, product shots. |\n| `card-flip-3d` | Y-axis 90° flip. | Before/after reveal. |\n| `cube-rotate-3d` | Rotate in from a cube side. | Section dividers. |\n| `page-turn-3d` | Left-hinge page turn. | Editorial / story flows. |\n| `perspective-zoom` | Pull from -400 Z. | Cover openings. |\n\n## Ambient / continuous\n\n| name | effect | use for |\n|---|---|---|\n| `marquee-scroll` | Infinite horizontal loop. | Client logo strips. |\n| `kenburns` | 14 s slow zoom on images. | Hero backgrounds. |\n| `confetti-burst` | Pseudo-element sparkle burst. | Thanks / win pages. |\n| `spotlight` | Circular clip-path reveal. | Big reveal moments. |\n| `ripple-reveal` | Corner-origin ripple reveal. | Section transitions. |\n\n## Respecting motion preferences\n\nAll animations are disabled automatically when\n`prefers-reduced-motion: reduce` is set. Do not override this.\n\n## Tips\n\n- Prefer `data-anim=\"...\"` over `class=\"anim-...\"` so that the runtime\n  re-triggers the animation whenever the slide becomes active.\n- Use at most 1-2 distinct animation types on a single slide. Mixing 5 looks\n  messy.\n- Stagger lists + a single hero entry = clean rhythm.\n- For counter-up, pair with `stat-highlight.html` or `kpi-grid.html`.\n\n## FX (canvas)\n\nCSS animations are fire-and-forget entry effects. **FX** are live, continuously\nrunning canvas/DOM effects that start when their slide becomes active and stop\nwhen it leaves. They are loaded by `assets/animations/fx-runtime.js`, which\ndynamically pulls every module under `assets/animations/fx/*.js` and watches\n`.slide.is-active` to run lifecycle.\n\nAdd to any page:\n```html\n<script src=\"../assets/animations/fx-runtime.js\"></script>\n```\n\nThen drop one of these into any slide:\n```html\n<div data-fx=\"particle-burst\" style=\"width:100%;height:360px;\"></div>\n```\n\nThe container just needs a size — the FX auto-sizes a canvas to fit with\n`ResizeObserver` + DPR correction. Colors read your theme (`--accent`,\n`--accent-2`, `--ok`, `--warn`, `--danger`).\n\n| name | effect | use case | trigger |\n|---|---|---|---|\n| `particle-burst` | Particles explode from center, gravity + fade, re-bursts every 2.5s. | Reveal moments, stat pages. | `<div data-fx=\"particle-burst\">` |\n| `confetti-cannon` | Colored rotating rects arcing from both bottom corners. | Thank you / success pages. | `<div data-fx=\"confetti-cannon\">` |\n| `firework` | Rockets from bottom explode into colored sparks, continuous. | Celebration, launch slides. | `<div data-fx=\"firework\">` |\n| `starfield` | 3D perspective starfield flying outward. | Sci-fi / deep space backgrounds. | `<div data-fx=\"starfield\">` |\n| `matrix-rain` | Falling green katakana + hex columns. | Cyber / security / data theme. | `<div data-fx=\"matrix-rain\">` |\n| `knowledge-graph` | Force-directed graph, 28 labeled nodes, ~50 edges, live physics. | Knowledge / RAG / graph slides. | `<div data-fx=\"knowledge-graph\">` |\n| `neural-net` | 4-6-6-3 feedforward net with pulses traveling along edges. | ML / model architecture slides. | `<div data-fx=\"neural-net\">` |\n| `constellation` | Drifting points, linked when within 150 px, opacity by distance. | Ambient hero backgrounds. | `<div data-fx=\"constellation\">` |\n| `orbit-ring` | 5 concentric rings with dots at different speeds, radial glow. | System / planet / layered concepts. | `<div data-fx=\"orbit-ring\">` |\n| `galaxy-swirl` | Logarithmic spiral of ~800 particles, slow rotation. | Cover pages, intros. | `<div data-fx=\"galaxy-swirl\">` |\n| `word-cascade` | Words fall from top, pile up at bottom. | Vocabulary / concept cloud slides. | `<div data-fx=\"word-cascade\">` |\n| `letter-explode` | Heading letters fly in from random directions, loops every ~4.5s. | Big titles, hero text. | `<div data-fx=\"letter-explode\" data-fx-text-value=\"EXPLODE\">` |\n| `chain-react` | 8 circles with a domino pulse wave traveling across. | Pipeline / sequential flow. | `<div data-fx=\"chain-react\">` |\n| `magnetic-field` | Particles travel bezier/sin curves leaving trails. | Energy / flow / abstract. | `<div data-fx=\"magnetic-field\">` |\n| `data-stream` | Rows of scrolling hex/binary text, cyberpunk. | Data, API, security. | `<div data-fx=\"data-stream\">` |\n| `gradient-blob` | 4 drifting blurred radial gradients (additive). | Soft hero backgrounds. | `<div data-fx=\"gradient-blob\">` |\n| `sparkle-trail` | Pointer-driven sparkle emitter (auto-wiggles if idle). | Interactive reveal, hover canvases. | `<div data-fx=\"sparkle-trail\">` |\n| `shockwave` | Expanding rings from center on loop. | Impact, launch, alert. | `<div data-fx=\"shockwave\">` |\n| `typewriter-multi` | 3 lines typing concurrently with blinking block cursors (DOM). | Terminal, agent boot log. | `<div data-fx=\"typewriter-multi\" data-fx-line1=\"> boot...\">` |\n| `counter-explosion` | Number counts 0 → target, bursts particles, resets after 4s. | KPI reveal, record highs. | `<div data-fx=\"counter-explosion\" data-fx-to=\"2400\">` |\n\nFX tips:\n- One FX per slide is almost always enough. Mix with regular CSS `data-anim`\n  effects for layered polish.\n- The container needs an explicit size (height) — the canvas fills 100%.\n- Every module respects theme custom properties. Set `--accent` / `--accent-2`\n  on the slide or element to recolor on the fly.\n- Lifecycle is automatic: entering a slide starts the FX, leaving stops it and\n  frees the canvas. You can also call `window.__hpxReinit(el)` manually.\n\nFile v1.0.5:deck-studio/references/authoring-guide.md\n\n# Authoring guide\n\nHow to turn a user request (\"make me a deck about X\") into a finished\nhtml-ppt deck. Follow these steps in order.\n\n## 1. Understand the deck\n\nBefore touching files, clarify:\n\n1. **Audience** — engineers? designers? executives? consumers?\n2. **Length** — 5 min lightning? 20 min share? 45 min talk?\n3. **Language** — Chinese, English, bilingual? (Noto Sans SC is preloaded.)\n4. **Format** — on-screen live, PDF export, 小红书图文?\n5. **Tone** — clinical / playful / editorial / cyber?\n\nThe audience + tone map to a theme; the length maps to slide count; the\nformat maps to runtime features (live → notes + T-cycle; PDF → page-break\nCSS, already handled in `base.css`).\n\n## 2. Pick a theme\n\nUse `references/themes.md`. When in doubt:\n\n- **Engineers** → `catppuccin-mocha` / `tokyo-night` / `dracula`.\n- **Designers / product** → `editorial-serif` / `aurora` / `soft-pastel`.\n- **Execs** → `minimal-white` / `arctic-cool` / `swiss-grid`.\n- **Consumers** → `xiaohongshu-white` / `sunset-warm` / `soft-pastel`.\n- **Cyber / CLI / infra** → `terminal-green` / `blueprint` / `gruvbox-dark`.\n- **Pitch / bold** → `neo-brutalism` / `sharp-mono` / `bauhaus`.\n- **Launch / product reveal** → `glassmorphism` / `aurora`.\n\nWire the theme as `<link id=\"theme-link\" href=\"../assets/themes/NAME.css\">`\nand list 3-5 alternatives in `data-themes` so the user can press T to audition.\n\n## 3. Outline the deck\n\nA solid 20-minute deck is usually:\n\n```\ncover → toc → section-divider #1 → [2-4 body pages] →\nsection-divider #2 → [2-4 body pages] → section-divider #3 →\n[2-4 body pages] → cta → thanks\n```\n\nPick 1 layout per page from `references/layouts.md`. Don't repeat the same\nlayout twice in a row.\n\n## 4. Scaffold the deck\n\n```bash\n./scripts/new-deck.sh my-talk\n```\n\nThis copies `templates/deck.html` into `examples/my-talk/index.html` with\npaths rewritten. Add/remove `<section class=\"slide\">` blocks to match your\noutline.\n\n## 5. Author each slide\n\nFor each outline item:\n\n1. Open the matching single-page layout, e.g. `templates/single-page/kpi-grid.html`.\n2. Copy the `<section class=\"slide\">…</section>` block.\n3. Paste into your deck.\n4. Replace demo data with real data. Keep the class structure intact.\n5. Set `data-title=\"...\"` (used by the Overview grid).\n6. Add `<div class=\"notes\">…</div>` with speaker notes.\n\n## 6. Add animations sparingly\n\nRules of thumb:\n\n- Cover/title: `rise-in` or `blur-in`.\n- Body content: `fade-up` for the hero element, `stagger-list` for grids/lists.\n- Stat pages: `counter-up`.\n- Section dividers: `perspective-zoom` or `cube-rotate-3d`.\n- Closer: `confetti-burst` on the \"Thanks\" text.\n\nPick **one** accent animation per slide. Everything else should be calm.\n\n## 7. Chinese + English decks\n\n- Fonts are already imported in `fonts.css` (Noto Sans SC + Noto Serif SC).\n- Use `lang=\"zh-CN\"` on `<html>`.\n- For bilingual titles, stack lines: `<h1 class=\"h1\">主标题<br><span class=\"dim\">English subtitle</span></h1>`.\n- Keep English subtitles in a lighter weight (300) and dim color to avoid\n  visual competition.\n\n## 8. Review in-browser\n\n```bash\nopen examples/my-talk/index.html\n```\n\nWalk through every slide with ← →. Press:\n\n- **O** — overview grid; catch any layout clipping.\n- **T** — cycle themes; make sure nothing looks broken in any theme.\n- **S** — open speaker notes; verify every slide has notes.\n\n## 9. Export to PNG\n\n```bash\n# single slide\n./scripts/render.sh examples/my-talk/index.html\n\n# all slides (autodetect count by looking for .slide sections)\n./scripts/render.sh examples/my-talk/index.html all\n\n# explicit slide count + output dir\n./scripts/render.sh examples/my-talk/index.html 12 out/my-talk-png\n```\n\nOutput is 1920×1080 by default. Change in `render.sh` if the user wants 3:4\nfor 小红书图文 (1242×1660).\n\n## 10. What to NOT do\n\n- Don't hand-author from a blank file.\n- Don't use raw hex colors in slide markup. Use tokens.\n- Don't load heavy animation frameworks. Everything should stay within the\n  CSS/JS that already ships.\n- Don't add more than one new template file unless a genuinely new layout\n  type is needed. Prefer composition.\n- Don't delete slides from the showcase decks.\n- **Don't put presenter-only text on the slide.** Any descriptive text,\n  narration cues, or explanations meant for the speaker (e.g. \"这一页的重点是…\",\n  \"Note: mention X here\", small grey captions explaining the slide's purpose)\n  MUST go inside `<div class=\"notes\">`, not as visible elements. The `.notes`\n  div is hidden (`display:none`) and only shown via the S overlay. Slides\n  should contain ONLY audience-facing content.\n\n## Troubleshooting\n\n- **Theme doesn't switch with T**: check `data-themes` on `<body>` and\n  `data-theme-base` pointing to the themes directory relative to the HTML\n  file.\n- **Fonts fall back**: make sure `fonts.css` is linked before the theme.\n- **Chart.js colors wrong**: charts read CSS vars in JS; make sure they run\n  after the DOM is ready (`addEventListener('DOMContentLoaded', …)`).\n- **PNG too small**: bump `--window-size` in `scripts/render.sh`.\n\nFile v1.0.5:deck-studio/references/full-decks.md\n\n# Full-Deck Templates\n\nSelf-contained multi-slide HTML decks under `templates/full-decks/<name>/`. Each folder contains:\n\n- `index.html` — complete multi-slide deck (cover / section / content / code / chart or diagram / CTA / thanks, 7+ slides)\n- `style.css` — scoped with `.tpl-<name>` class prefix so multiple templates can coexist\n- `README.md` — short rationale, inspiration, and use guidance\n\nAll templates pull the shared `assets/fonts.css`, `assets/base.css`, and `assets/runtime.js` from the skill root. Navigate with `← →` / `space`, use `F` for fullscreen, `O` for overview.\n\nUse these when you want a coherent, opinionated look for an entire deck — not a mix-and-match of layouts. Each template is visually distinctive enough to be identified at a glance.\n\n---\n\n## 1. xhs-white-editorial — 白底杂志风\n\n- **Source inspiration:** `20260409 升级版知识库/小红书图文/v2-白底版/slide_01_cover.html` + `20260412-AI测试与安全/html/xhs-ai-testing-safety-v2.html`\n- **Key visual traits:** pure-white background, top 10-color rainbow bar, 80-110px display headlines, purple→blue→green→orange→pink gradient text, macaron soft-card set (soft-purple/pink/blue/green/orange), black-on-white `.focus` pills, hero quote box.\n- **When to use:** dual-purpose XHS image + horizontal deck; dense text with strong emphasis; Chinese-first audience.\n- **Path:** `templates/full-decks/xhs-white-editorial/index.html`\n\n## 2. graphify-dark-graph — 暗底知识图谱\n\n- **Source inspiration:** `20260413-graphify/ppt/graphify.html`\n- **Key visual traits:** `#06060c→#0e1020` deep-night gradient, drifting blur orbs, SVG force-directed graph overlay on cover, rainbow-shift gradient headlines, JetBrains Mono command-line glow, glass-morphism cards (warm/blue/green/purple/danger). Accent palette: amber `#e8a87c`, mint `#7ed3a4`, mist-blue `#7eb8da`, lilac `#b8a4d6`.\n- **When to use:** dev-tool / CLI / knowledge-graph / data-viz launches; live-demo decks that want an \"AI-native + sci-fi + warm\" vibe.\n- **Path:** `templates/full-decks/graphify-dark-graph/index.html`\n\n## 3. knowledge-arch-blueprint — 奶油蓝图架构\n\n- **Source inspiration:** `20260405-Karpathy-知识库/20260405 架构图v2.html`\n- **Key visual traits:** cream paper `#F0EAE0` base, single rust accent `#B5392A`, 48px blueprint grid mask, hard 2px black border cards, pipeline step-boxes with one hero raised, right-side rust insight callout, Playfair serif big numbers, SVG dashed feedback-loop arrows. Zero gradients, zero soft shadows.\n- **When to use:** system architecture diagrams, data-flow maps, engineering white-papers; you want a serious, printable, README-friendly feel.\n- **Path:** `templates/full-decks/knowledge-arch-blueprint/index.html`\n\n## 4. hermes-cyber-terminal — 暗终端 honest-review\n\n- **Source inspiration:** `20260414-hermes-agent/ppt/hermes-record.html` + `hermes-vs-openclaw.html`\n- **Key visual traits:** `#0a0c10` black, 56px cyber grid + CRT vignette + scanlines, window traffic-light chrome, `$ prompt` command-line headlines, mint-green `#7ed3a4` glow big text, JetBrains Mono throughout, stroke-only bar charts, blinking cursor, amber/green/red tag hierarchy, dark code box.\n- **When to use:** reviews of CLI / agent / dev tools with trace, diff, and benchmarks; when you want the \"honest technical reviewer\" voice.\n- **Path:** `templates/full-decks/hermes-cyber-terminal/index.html`\n\n## 5. obsidian-claude-gradient — GitHub 暗紫渐变\n\n- **Source inspiration:** `20260406-obsidian-claude/slides.html`\n- **Key visual traits:** GitHub-dark `#0d1117`, purple+blue radial ambient plus 60px masked grid, center-aligned layout, purple pill tags, three-stop gradient text `#a855f7→#60a5fa→#34d399`, GitHub-ish code palette (`#010409` bg + purple/blue/orange/green tokens), purple-left-border highlight block.\n- **When to use:** developer workflow / MCP / Agent / dev-tool tutorials; feels like GitHub Blog / Linear Changelog; config + steps heavy content.\n- **Path:** `templates/full-decks/obsidian-claude-gradient/index.html`\n\n## 6. testing-safety-alert — 红琥珀警示\n\n- **Source inspiration:** `20260412-AI测试与安全/html/xhs-ai-testing-safety-v2.html`\n- **Key visual traits:** top and bottom 45° red-black hazard stripes, red strike-through negation headlines, L1/L2/L3 green/amber/red tier cards, alert-box with circular status dot, policy-yaml code block with red left border and `bad` keyword highlighting, red/green checklist, Q1 incident stacked bar chart.\n- **When to use:** safety / risk / incident post-mortem / red-team / pre-launch AI review / policy-as-code; when the audience needs to feel \"this is serious, don't skim\".\n- **Path:** `templates/full-decks/testing-safety-alert/index.html`\n\n## 7. xhs-pastel-card — 柔和马卡龙慢生活\n\n- **Source inspiration:** `20260412-obsidian-skills/html/xhs-obsidian-skills.html` + pastel patterns shared with `20260409` v2-白底版\n- **Key visual traits:** cream `#fef8f1` base, three soft blurred blobs, Playfair italic serif display headlines mixed with sans body, full-color 28px rounded macaron cards (peach / mint / sky / lilac / lemon / rose), italic Playfair `01-04` numerals, SVG donut chart, chip+page topbar.\n- **When to use:** lifestyle / personal-growth / slow-living / emotional content; when you want a \"magazine, handmade, not-so-techy\" feel; themes like rest, pause, softness.\n- **Path:** `templates/full-decks/xhs-pastel-card/index.html`\n\n## 8. dir-key-nav-minimal — 方向键 8 色极简\n\n- **Source inspiration:** `20260405-Karpathy-知识库/20260405 演示幻灯片【方向键版】.html`\n- **Key visual traits:** 8 slides each on its own mono background (indigo / cream / crimson / emerald / slate / violet / white / charcoal), each with its own accent color, 160px display headline + 4px stubby accent line divider, arrow `→` prefixed Mono list, bottom-left `← →` kbd hint plus bottom-right page label, huge breathing negative space.\n- **When to use:** keynote-style minimalist talk where you have something to say and not much to show; one idea per slide; talks / launches / public presentations.\n- **Path:** `templates/full-decks/dir-key-nav-minimal/index.html`\n\n---\n\n## Scenario decks (generic, reusable)\n\nThese are not extracted from a single source — they are generic scaffolds for the most common presentation jobs. Each is visually distinctive and content-rich out of the box.\n\n| # | Name | Slides | Feel | When to use |\n|---|---|---|---|---|\n| 9  | `pitch-deck`       | 10 | White + blue→purple gradient, YC/VC vibe, big numbers, traction chart | Fundraising, startup pitch, investor meeting |\n| 10 | `product-launch`   | 8  | Dark hero + light content, warm orange→peach, feature cards, pricing tiers, CTA | Announcing a product, launch keynote |\n| 11 | `tech-sharing`     | 8  | GitHub-dark, JetBrains Mono, terminal code blocks, agenda + Q&A | 技术分享, internal tech talk, conference talk |\n| 12 | `weekly-report`    | 7  | Corporate clarity, 8-cell KPI grid, shipped list, 8-week bar chart, next-week table | 周报, team status update, business review |\n| 13 | `xhs-post`         | 9  | **3:4 @ 810×1080**, warm pastel, dashed sticker cards, page dots | 小红书 图文 post, Instagram carousel |\n| 14 | `course-module`    | 7  | Warm paper + Playfair serif, persistent left sidebar of learning objectives, MCQ self-check | 教学模块, online course, workshop module |\n| 15 | `presenter-mode-reveal` 🎤 | 6  | **演讲者模式专用** · tokyo-night 默认 · 5 主题 T 键切换 · 每页带 150–300 字逐字稿示例 | **技术分享/演讲/课程**—需要按 S 键看逐字稿的场景 ✨ |\n\nEach folder: `index.html`, scoped `style.css` (prefixed `.tpl-<name>`), `README.md`. The `xhs-post` template overrides the default `.slide` box to fixed `810×1080` for 3:4 portrait.\n\n> 🎤 **任何演讲场景（技术分享 / 课程 / 路演）都推荐用 `presenter-mode-reveal`**，或者参考 [presenter-mode.md](./presenter-mode.md) 指南给其他模板加 `<aside class=\"notes\">` 逐字稿。\n\n---\n\n## Authoring notes\n\n- Every template scopes its CSS under `.tpl-<name>` so two or more templates can load on the same page without collisions.\n- Swap demo content, but keep the structural classes — they are what gives each template its identity.\n- The shared runtime (`assets/runtime.js`) provides keyboard nav, fullscreen, overview grid, theme cycling — you don't need to add any JS.\n- Charts are hand-rolled SVG (no CDN dependency). Feel free to replace with chart.js / echarts if you need interactive data.\n\nFile v1.0.5:deck-studio/references/layouts.md\n\n# Layouts catalog\n\nEvery layout lives in `templates/single-page/<name>.html` as a fully\nfunctional standalone page with realistic demo data. Open any file directly\nin Chrome to see it working.\n\nTo compose a new deck: open the file, copy the `<section class=\"slide\">…</section>`\nblock (or multiple blocks) into your deck HTML, and replace the demo data.\nShared CSS (base, theme, animations) is already wired by `deck.html`.\n\n## Openers & transitions\n\n| file | purpose |\n|---|---|\n| `cover.html` | Deck cover. Kicker + huge title + lede + pill row. |\n| `toc.html` | Table of contents. 2×3 grid of numbered cards. |\n| `section-divider.html` | Big numbered section break (02 · Theme). |\n\n## Text-centric\n\n| file | purpose |\n|---|---|\n| `bullets.html` | Classic bullet list with card-wrapped items. |\n| `two-column.html` | Concept + example side by side. |\n| `three-column.html` | Three equal pillars with icons. |\n| `big-quote.html` | Full-bleed pull quote in editorial-serif style. |\n\n## Numbers & data\n\n| file | purpose |\n|---|---|\n| `stat-highlight.html` | One giant number + subtitle (uses `.counter` animation). |\n| `kpi-grid.html` | 4 KPIs in a row with up/down deltas. |\n| `table.html` | Data table with hover rows, right-aligned numerics. |\n| `chart-bar.html` | Chart.js bar chart, theme-aware colors. |\n| `chart-line.html` | Chart.js dual-line chart with filled area. |\n| `chart-pie.html` | Chart.js doughnut + takeaways card. |\n| `chart-radar.html` | Chart.js radar comparing 2 products on 6 axes. |\n\n## Code & terminal\n\n| file | purpose |\n|---|---|\n| `code.html` | Syntax-highlighted code via highlight.js (JS example). |\n| `diff.html` | Hand-rolled +/- diff view. |\n| `terminal.html` | Terminal window mock with traffic-light header. |\n\n## Diagrams & flows\n\n| file | purpose |\n|---|---|\n| `flow-diagram.html` | 5-node pipeline with arrows and one highlighted node. |\n| `arch-diagram.html` | 3-tier architecture grid. |\n| `process-steps.html` | 4 numbered steps in cards. |\n| `mindmap.html` | Radial mindmap with SVG path-draw animation. |\n\n## Plans & comparisons\n\n| file | purpose |\n|---|---|\n| `timeline.html` | 5-point horizontal timeline with dots. |\n| `roadmap.html` | 4-column NOW / NEXT / LATER / VISION. |\n| `gantt.html` | 12-week gantt chart with 5 parallel tracks. |\n| `comparison.html` | Before vs After two-panel card. |\n| `pros-cons.html` | Pros and cons two-card layout. |\n| `todo-checklist.html` | Checklist with checked/unchecked states. |\n\n## Visuals\n\n| file | purpose |\n|---|---|\n| `image-hero.html` | Full-bleed hero with Ken Burns gradient background. |\n| `image-grid.html` | 7-cell bento grid with gradient placeholders. |\n\n## Closers\n\n| file | purpose |\n|---|---|\n| `cta.html` | Call-to-action with big gradient headline + buttons. |\n| `thanks.html` | Final \"Thanks\" page with confetti burst. |\n\n## Picking a layout\n\n- **Opener**: `cover.html`, often followed by `toc.html`.\n- **Section break**: `section-divider.html` before every major section.\n- **Core content**: `bullets.html`, `two-column.html`, `three-column.html`.\n- **Show numbers**: `stat-highlight.html` (single) or `kpi-grid.html` (4-up).\n- **Show plot**: `chart-bar.html` / `chart-line.html` / `chart-pie.html` / `chart-radar.html`.\n- **Show a diff or change**: `comparison.html`, `diff.html`, `pros-cons.html`.\n- **Show a plan**: `timeline.html`, `roadmap.html`, `gantt.html`, `process-steps.html`.\n- **Show architecture**: `arch-diagram.html`, `flow-diagram.html`, `mindmap.html`.\n- **Code / demo**: `code.html`, `terminal.html`.\n- **Closer**: `cta.html` → `thanks.html`.\n\n## Naming / structure conventions\n\n- Each slide is `<section class=\"slide\" data-title=\"...\">`.\n- Header pills: `<p class=\"kicker\">…</p>`, eyebrow: `<p class=\"eyebrow\">…</p>`.\n- Titles: `<h1 class=\"h1\">…</h1>` / `<h2 class=\"h2\">…</h2>`.\n- Lede: `<p class=\"lede\">…</p>`.\n- Cards: `<div class=\"card\">…</div>` (variants: `card-soft`, `card-outline`, `card-accent`).\n- Grids: `.grid.g2`, `.grid.g3`, `.grid.g4`.\n- Notes: `<div class=\"notes\">…</div>` per slide.\n\nFile v1.0.5:deck-studio/references/presenter-mode.md\n\n# Presenter Mode Guide · 演讲者模式指南\n\n这份文档说明如何在 html-ppt skill 里做出**带逐字稿的演讲者模式 PPT**。\n\n## 何时使用演讲者模式\n\n当用户的需求涉及以下任何一项时，**优先使用演讲者模式**：\n\n- 提到\"**演讲**\"、\"**分享**\"、\"**讲稿**\"、\"**逐字稿**\"、\"**speaker notes**\"\n- 提到\"**presenter view**\"、\"**演讲者视图**\"、\"**演讲者模式**\"\n- 需要\"**30 分钟 / 45 分钟 / 1 小时**的分享\"\n- 说\"我要去给团队讲 xxx\"、\"要做一场技术分享\"、\"要做路演\"\n- 强调\"**不想忘词**\"、\"**怕讲不流畅**\"、\"**需要提词器**\"\n\n如果用户只要做一份\"静态好看的 PPT\"（例如小红书图文、产品图册、汇报 slides 自己不讲），**不需要**演讲者模式。\n\n## 两种做法\n\n### ✅ 推荐做法：直接用 `presenter-mode-reveal` 模板\n\n```bash\ncp -r templates/full-decks/presenter-mode-reveal examples/my-talk\n```\n\n这个模板已经预设好所有必需元素：\n- 支持 S 键切换演讲者视图\n- 5 个主题可用 T 键循环（tokyo-night / dracula / catppuccin-mocha / nord / corporate-clean）\n- 左右键翻页\n- 每一页都有 150–300 字的示例逐字稿\n- 底部有键位提示\n\n直接改内容即可。\n\n### 🔧 进阶做法：给任意已有模板加演讲者模式\n\nhtml-ppt 的 **S 键演讲者视图是 `runtime.js` 内置的，所有 full-deck 模板都自动支持**。你只需要做两件事：\n\n1. **每张 slide 末尾加 `<aside class=\"notes\">`**（或 `<div class=\"notes\">`），里面写逐字稿\n2. **确认 HTML 引入了 `assets/runtime.js`**\n\n```html\n<section class=\"slide\">\n  <h2>你的标题</h2>\n  <p>内容...</p>\n  <aside class=\"notes\">\n    <p>这里是演讲时要说的话，150-300 字...</p>\n  </aside>\n</section>\n```\n\n## 逐字稿写作三铁律\n\n这是整个方法论的核心。AI 在帮用户写逐字稿时必须遵守：\n\n### 铁律 1：不是讲稿，是\"提示信号\"\n\n❌ **错误写法**（像在念稿）：\n```\n大家好，欢迎来到今天的分享。今天我将要给大家介绍一下我们团队在过去三个月做的工作。\n首先，我们来看一下背景情况。在过去的三个月中，我们遇到了以下几个问题……\n```\n\n✅ **正确写法**（提示信号 + 加粗核心）：\n```\n<p>欢迎！今天分享我们团队<strong>过去 3 个月</strong>的工作。</p>\n<p>先说<em>背景</em>——三个月前我们遇到了<strong>三个核心问题</strong>：\n延迟高、成本炸、稳定性差。</p>\n<p>接下来逐个讲解怎么解的。</p>\n```\n\n**差别**：正确版本把关键词加粗，过渡句独立成段，看一眼就能接上。\n\n### 铁律 2：每页 150–300 字\n\n- **少于 150 字**：提示不够，讲到一半会卡\n- **多于 300 字**：你根本来不及扫完\n- **2–3 分钟/页** 是最舒服的节奏\n\n### 铁律 3：用口语，不用书面语\n\n| ❌ 书面语 | ✅ 口语 |\n|---|---|\n| 因此 | 所以 |\n| 该方案 | 这个方案 |\n| 然而 | 但是 / 不过 |\n| 进行优化 | 优化一下 |\n| 我们将会 | 我们会 / 接下来 |\n| 综上所述 | 所以简单来说 |\n\n**检查方法**：写完读一遍，听起来像说话才对。\n\n## 必备 HTML 结构\n\n```html\n<!DOCTYPE html>\n<html lang=\"zh-CN\" data-themes=\"tokyo-night,dracula,corporate-clean\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>...</title>\n  <link rel=\"stylesheet\" href=\"../../../assets/fonts.css\">\n  <link rel=\"stylesheet\" href=\"../../../assets/base.css\">\n  <link rel=\"stylesheet\" id=\"theme-link\" href=\"../../../assets/themes/tokyo-night.css\">\n  <link rel=\"stylesheet\" href=\"../../../assets/animations/animations.css\">\n  <link rel=\"stylesheet\" href=\"style.css\">\n</head>\n<body>\n<div class=\"deck\">\n\n  <section class=\"slide\" data-title=\"Cover\">\n    <h1>你的标题</h1>\n    <p>副标题</p>\n    <aside class=\"notes\">\n      <p>讲稿段落 1（加<strong>加粗关键词</strong>）。</p>\n      <p>讲稿段落 2（过渡句独立成段）。</p>\n      <p>讲稿段落 3（自然收尾，引出下一页）。</p>\n    </aside>\n  </section>\n\n  <!-- 更多 slide ... -->\n\n</div>\n<script src=\"../../../assets/runtime.js\"></script>\n</body>\n</html>\n```\n\n## 演讲者视图显示的内容\n\n按 `S` 键后，**弹出一个独立的演讲者窗口**（原页面保持观众视图不变）。演讲者窗口是 **4 个独立的磁吸卡片**：\n\n```\n 观众窗口（原页面）           演讲者窗口（磁吸卡片）\n┌─────────────────┐   ┌─────────────────────┬──────────────────┐\n│                 │   │ 🔵 CURRENT         │ 🟣 NEXT            │\n│  正常 slide     │   │ ━━━━━━━━━━━━━━━━ │ ━━━━━━━━━━━━━ │\n│  全屏展示       │◄►│                   │  iframe preview   │\n│                 │   │  iframe preview   │  （下一页）         │\n│                 │   │  （当前页）        ├──────────────────┤\n│                 │   │                   │ 🟠 SPEAKER SCRIPT  │\n│                 │   │                   │ ━━━━━━━━━━━━━ │\n│                 │   ├─────────────────────┤  [大字号逐字稿]   │\n│                 │   │ 🟢 TIMER           │  [可滚动]         │\n│                 │   │ ⏱ 12:34   3 / 8 │                   │\n│                 │   │ [← Prev][Next →]  │                   │\n└─────────────────┘   └─────────────────────┴──────────────────┘\n       ↑ BroadcastChannel 双向同步翻页 ↑\n```\n\n卡片交互规则：\n- **拖动卡片 header**（带彩色圆点和标题的顶部条）→ 移动卡片位置\n- **拖动卡片右下角的三角手柄** → 调整卡片大小\n- **位置/尺寸自动保存到 localStorage**，下次打开恢复\n- 底部 \"重置布局\" 按钮恢复默认排列\n\n卡片内容：\n- 🔵 **CURRENT** — 当前页 **像素级完美预览**（iframe 加载原 HTML 文件的 `?preview=N` 模式，错色不可能）\n- 🟣 **NEXT** — 下一页预览，同样像素级完美\n- 🟠 **SPEAKER SCRIPT** — 逐字稿，字号 18px，支持 `<strong>` (橘色加粗)、`<em>` (蓝色强调)、`<code>` 等 inline 样式\n- 🟢 **TIMER** — 计时器不会丢失焦点，带切页按钮\n\n两窗口同步：在任一窗口按 ← → 翻页，另一个窗口自动同步（BroadcastChannel）。\n\n丝滑翻页：iframe 只加载一次，后续翻页用 `postMessage` 切换可见的 slide，**不重新加载、不闪烁**。\n\n## 键盘快捷键（演讲者模式）\n\n| 键 | 动作 |\n|---|---|\n| `S` | 打开演讲者窗口（弹出新窗口，原页面保持观众视图） |\n| `←` `→` / Space / PgDn | 翻页（即使在演讲者视图里） |\n| `T` | 切换主题 |\n| `R` | 重置计时器（仅演讲者视图下） |\n| `F` | 全屏 |\n| `O` | 总览 |\n| `Esc` | 关闭所有浮层 |\n\n## 双屏演讲的标准流程\n\n1. 打开 `index.html`，按 `S` → 弹出演讲者窗口\n2. 把**观众窗口**（原页面）拖到投影 / 外接屏，按 `F` 全屏\n3. 把**演讲者窗口**（弹窗）留在你面前的屏幕\n4. 在任一窗口按 ← → 翻页，两边自动同步\n5. 演讲者窗口里看逐字稿 + 下一页 + 计时器\n\n> 💡 **为什么预览像素级完美**：每个预览是一个 `<iframe>`，它加载的就是同一个 deck HTML 文件，只是 URL 多了 `?preview=N` 参数。`runtime.js` 检测到这个参数时只渲染第 N 页、隐藏所有 chrome。**iframe 使用与观众视图完全相同的 CSS、主题、字体和 viewport**——颜色和排版保证一致。外层用 CSS `transform: scale()` 把 1920×1080 缩到卡片宽高，等比缩放不变形。\n\n> 💡 **为什么不闪烁**：iframe 初次加载后就常驻，翻页时 presenter 窗口通过 `postMessage({type:'preview-goto', idx:N})` 告诉 iframe 切换到第 N 页。iframe 内的 runtime.js 只切换 `.is-active` class，**不重新加载、不渲染白屏**。\n\n## 常见错误\n\n### ❌ 把逐字稿写在 slide 可见位置\n\n```html\n<!-- 错误：这段文字观众会看到 -->\n<p style=\"font-size:12px;color:gray\">\n  这里讲 xxx，然后讲 yyy...\n</p>\n```\n\n✅ 正确：\n```html\n<aside class=\"notes\">\n  <p>这里讲 xxx，然后讲 yyy...</p>\n</aside>\n```\n\n`.notes` 类默认 `display:none`，只在演讲者视图可见。\n\n### ❌ 忘记引入 runtime.js\n\n没有 `<script src=\"../../../assets/runtime.js\"></script>` = 没有 S 键、没有演讲者视图、没有翻页。\n\n### ❌ 逐字稿用书面语\n\n念出来像 AI 机器人。**写完一定读一遍**。\n\n### ❌ 每页 50 字\n\n提示不够，照样忘词。\n\n### ❌ 每页 500 字\n\n眼睛根本扫不过来，等于没写。\n\n## 用 AI 生成逐字稿的标准 prompt\n\n> \"请为每一张 slide 写一段 **150-300 字**的逐字稿，放在 `<aside class=\"notes\">` 里。\n> 要求：\n> 1. 用**口语**，不要书面语（所以/但是/接下来，不是因此/然而/综上所述）\n> 2. 把**核心关键词**用 `<strong>` 加粗\n> 3. 过渡句独立成段（每段 1-3 句）\n> 4. 读起来像说话，不像念稿\n> 5. 结尾要有自然的过渡，引出下一页\"\n\n## 推荐搭配\n\n- **主题**：`tokyo-night`（深色，技术分享首选）、`corporate-clean`（浅色，商务汇报）、`dracula`（深色备选）\n- **字体**：默认 Noto Sans SC + JetBrains Mono，无需更改\n- **动效**：克制使用，`fade-up` / `rise-in` 最自然，不要用 `glitch-in` / `confetti-burst` 之类花哨的\n- **页数**：30 分钟分享 = 8–12 页；45 分钟 = 12–16 页；1 小时 = 16–22 页\n\nFile v1.0.5:deck-studio/references/themes.md\n\n# Themes catalog\n\nEvery theme is a short CSS file in `assets/themes/` that overrides tokens\ndefined in `assets/base.css`. Switch themes by changing the `href` of\n`<link id=\"theme-link\">` or by pressing **T** if the deck has a\n`data-themes=\"a,b,c\"` attribute on `<body>` or `<html>`.\n\nAll themes define the same variables: `--bg`, `--bg-soft`, `--surface`,\n`--surface-2`, `--border`, `--text-1/2/3`, `--accent`, `--accent-2/3`,\n`--good`, `--warn`, `--bad`, `--grad`, `--grad-soft`, `--radius*`, `--shadow*`,\n`--font-sans`, `--font-display`.\n\n## Light & calm\n\n| name | description | when to use |\n|---|---|---|\n| `minimal-white` | 极简白，克制高级。Inter，强文字层级，极低阴影。 | 内部汇报、一对一技术评审、不抢内容的严肃话题 |\n| `editorial-serif` | 杂志风 Playfair 衬线 + 奶油底。 | 品牌故事、文字密度大的长文演讲 |\n| `soft-pastel` | 柔和马卡龙三色渐变。 | 产品发布、面向消费者、轻松话题 |\n| `xiaohongshu-white` | 小红书白底 + 暖红 accent + 衬线标题。 | 小红书图文、生活/美学类内容 |\n| `solarized-light` | 经典低眩光配色。 | 长时间观看的工作坊、教学 |\n| `catppuccin-latte` | catppuccin 浅色。 | 开发者、极客友好的技术分享 |\n\n## Bold & statement\n\n| name | description | when to use |\n|---|---|---|\n| `sharp-mono` | 纯黑白 + Archivo Black + 硬阴影。 | 宣言类、极具冲击力的视觉 |\n| `neo-brutalism` | 厚描边、硬阴影、明黄 accent。 | 创业路演、敢说敢做的调性 |\n| `bauhaus` | 几何 + 红黄蓝原色。 | 设计 talk、艺术史/产品美学主题 |\n| `swiss-grid` | 瑞士网格 + Helvetica 感 + 12 栏底纹。 | 严肃排版、设计行业 |\n| `memphis-pop` | 孟菲斯波普背景点 + 大字标题。 | 年轻、潮流、品牌合作 |\n\n## Cool & dark\n\n| name | description | when to use |\n|---|---|---|\n| `catppuccin-mocha` | catppuccin 深。 | 开发者内部分享、长时间观看 |\n| `dracula` | 经典 Dracula 紫红主色。 | 代码密集的技术分享 |\n| `tokyo-night` | Tokyo Night 蓝夜。 | 偏冷技术分享、基础设施 |\n| `nord` | 北欧清冷蓝白。 | 基础设施、云产品 |\n| `gruvbox-dark` | 温暖复古深色。 | Terminal / vim / *nix 社群 |\n| `rose-pine` | 玫瑰松，柔和暗色。 | 设计+开发交界、审美向技术 |\n| `arctic-cool` | 蓝/青/石板灰 浅色版。 | 商业分析、金融、冷静理性 |\n\n## Warm & vibrant\n\n| name | description | when to use |\n|---|---|---|\n| `sunset-warm` | 橘 / 珊瑚 / 琥珀三色渐变。 | 生活方式、奖项颁发、情绪正向 |\n\n## Effect-heavy\n\n| name | description | when to use |\n|---|---|---|\n| `glassmorphism` | 毛玻璃 + 多色光斑背景。 | Apple 式发布会、产品特性展示 |\n| `aurora` | 极光渐变 + blur + saturate。 | 封面 / CTA / 结语页 |\n| `rainbow-gradient` | 白底 + 彩虹流动渐变 accent。 | 欢乐向、节日、庆祝页 |\n| `blueprint` | 蓝图工程 + 网格底纹 + 蒙太奇字体。 | 系统架构、工程蓝图 |\n| `terminal-green` | 绿屏终端 + 等宽 + 发光文字。 | CLI/black-hat/复古朋克 |\n\n## v2 additions\n\n### Light & professional\n\n| name | description | when to use |\n|---|---|---|\n| `corporate-clean` | 纯白 + 海军蓝 accent + Inter + 保守边框。 | 董事会汇报、B2B 销售、金融保险 |\n| `pitch-deck-vc` | YC 风白底 + 蓝紫渐变 accent + 大留白。 | 融资路演、种子轮、VC meeting |\n| `academic-paper` | 论文白 + 衬线正文 + 黑墨 + 蓝链接。 | 学术报告、研究分享、会议论文 |\n| `japanese-minimal` | 象牙白 + 朱红 accent + 极大留白 + Noto Serif。 | 品牌升级、匠人故事、禅意叙事 |\n| `engineering-whiteprint` | 白底 + 坐标纸网格 + 海军墨线 + 等宽字。 | 系统设计、API 文档、架构白皮书 |\n\n### Bold & editorial\n\n| name | description | when to use |\n|---|---|---|\n| `magazine-bold` | 奶油底 + 超大 Playfair 衬线 + 橙色 spot。 | 专栏文章、封面故事、品牌月刊 |\n| `news-broadcast` | 白底 + 红色竖条 + Oswald 大写 + 硬阴影。 | 突发新闻、发布通稿、数据播报 |\n| `midcentury` | 奶油底 + 芥末/青/焦橙 + 锐利几何。 | 设计史、家居美学、复古品牌 |\n| `retro-tv` | 暖奶油 + CRT 扫描线 + 琥珀橙 accent。 | 怀旧叙事、八零九零年代主题 |\n\n### Effect-heavy / dramatic\n\n| name | description | when to use |\n|---|---|---|\n| `cyberpunk-neon` | 纯黑 + 霓虹粉青黄 + 发光 + JetBrains Mono。 | 黑客、地下文化、赛博 talk |\n| `vaporwave` | 深紫 + 粉红青蓝渐变 + 晕染光斑。 | 音乐、潮流艺术、A E S T H E T I C |\n| `y2k-chrome` | 银铬渐变 + 彩虹 accent + 大圆角 + Space Grotesk。 | 千禧怀旧、时尚品牌、Gen-Z |\n\n## How to apply\n\n```html\n<link rel=\"stylesheet\" id=\"theme-link\" href=\"../assets/themes/aurora.css\">\n```\n\nOr enable `T`-cycling by listing themes on the body:\n\n```html\n<body data-themes=\"minimal-white,aurora,catppuccin-mocha\" data-theme-base=\"../assets/themes/\">\n```\n\n## How to extend\n\n### Full theme (override everything)\n\nCopy an existing theme, rename it, and override only the variables you want to change. Keep each theme under ~200 lines. Prefer adjusting tokens to adding new selectors.\n\n### Delta theme (override only what changes)\n\nFor brand-specific customizations, create a **delta theme** — a small CSS file that overrides only the tokens that differ from `base.css` defaults. See `_delta-example.css` for the template.\n\n```css\n/* my-brand-delta.css */\n:root {\n  --accent: #YOUR_BRAND_COLOR;\n  --accent-2: #DARKER_VARIANT;\n  /* Only override what changes — everything else inherits from base.css */\n}\n```\n\n**When to use delta vs full:**\n- **Delta** when you just need to swap colors/fonts into an existing theme structure (most brand customizations).\n- **Full** when you need to change the overall mood (light → dark, add background patterns, change border-radius philosophy).\n\n**How to apply a delta on top of an existing theme:**\n\n```html\n<!-- Load base theme first -->\n<link rel=\"stylesheet\" href=\"../assets/themes/minimal-white.css\">\n<!-- Then apply delta overrides -->\n<link rel=\"stylesheet\" href=\"../assets/themes/my-brand-delta.css\">\n```\n\nThe delta file's `:root` block runs after the base theme's, so its values win. This lets you customize any of the 36 themes with a 10-line file instead of copying the entire theme.\n\nFile v1.0.5:references/agent-playbook.md\n\n# Agent Playbook — Decision Guide for AI Agents\n\n> This file is the **agent-specific** decision layer. It extracts the \"how should an agent think about this?\" guidance from SKILL.md into one place.\n> Humans can read it too — it doubles as a transparency document showing how the agent makes decisions.\n\n---\n\n## Routing decision tree\n\nWhen the user sends a message, follow this order:\n\n```\n1. Is it a structured data input (CSV/JSON/SQL/MD-table)?\n   YES → Format Auto-Detect fast path (Mode 2, skip Perception)\n   NO ↓\n\n2. Does it match a Review trigger (审查/audit/polish/a11y)?\n   YES → Review Mode (independent of production modes)\n   NO ↓\n\n3. Does it match Mode 1 triggers (PPT/slides/deck/演讲)?\n   YES → Mode 1 (Presentation)\n   NO ↓\n\n4. Does it match Mode 2 triggers (APP/界面/原型/landing)?\n   YES → Mode 2 (Prototype)\n   NO ↓\n\n5. Does it match Mode 3 triggers (动效/动画/motion)?\n   YES → Mode 3 (Animation)\n   NO ↓\n\n6. Ambiguous → Ask once with focused options (see below)\n```\n\n**Key principle:** Ask once, not repeatedly. A 30-second question saves an hour of rework.\n\n---\n\n## When to ask vs infer\n\n### Ask when:\n- The request is genuinely ambiguous between two modes (\"帮我做个展示\" could be deck or prototype)\n- Critical information is missing AND cannot be safely inferred (audience, brand, content scope)\n- The user's request could map to 3+ distinct visual directions\n\n### Infer when:\n- The request has a clear dominant signal (\"做一份 PPT\" → Mode 1, no question needed)\n- The user has provided partial constraints that narrow the space (\"像 Linear 的 dashboard\" → Mode 2 + Linear tokens)\n- The cost of asking exceeds the cost of a wrong guess (trivial tweaks, follow-up edits)\n\n### The \"Design Read\" pattern\n\nWhen you infer, **state your inference** before generating:\n\n```\nReading this as: [product landing] for [technical buyers],\nwith a [conversion-first] visual language,\nleaning toward [swiss-grid theme + Stripe tokens].\n```\n\nThis lets the user correct a wrong assumption before any heavy generation happens.\n\n---\n\n## Fallback decision matrix\n\n| Situation | Primary action | Fallback | When to escalate |\n|---|---|---|---|\n| WebFetch fails for URL-to-brand | Try catalog lookup | Ask user for 3-5 brand tokens manually | User can't provide tokens |\n| Theme CSS not found | Use `corporate-clean` | — | — |\n| Template directory not found | Build from single-page layouts | — | — |\n| runtime.js fails to load | Deck still works as static slides | — | — |\n| PDF export fails | Offer manual \"Print to PDF\" | — | — |\n| Brand DESIGN.md has no palette | Derive from brand name dominant color | Ask user for primary color | — |\n| Generation produces syntax errors | Auto-retry with fix | Swap simplified component | 3 failures → escalate to user |\n| User asks for non-design task | Explain scope, redirect | — | — |\n\n**Escalation rule:** After 3 consecutive failures on the same issue, stop. The problem is likely conceptual (wrong approach), not a typo. Ask the user.\n\n---\n\n## Context management for long sessions\n\nWhen context window is tight, drop in this order:\n\n1. **Keep** — current task goal, active design system tokens, user's latest request\n2. **Keep** — technical constraints (React version hashes, component APIs)\n3. **Compress** — earlier exploration steps after a phase completes\n4. **Drop** — rejected design variations, superseded planning notes, duplicated information\n\n**State separation:** Treat yourself as stateless. All persistent state lives in files (HTML, JSON, localStorage), not in conversation memory. When resuming work, re-read the files.\n\n---\n\n## Error recovery hierarchy\n\n1. **Auto-retry on syntax errors** — console output points at the line; fix and re-render immediately\n2. **Graceful degradation** — if a component refuses to render, swap in a simplified fallback\n3. **State checkpoint** — before destructive edits, copy the file\n4. **Escalate after 3 failures** — conceptual issue, not a typo\n\n---\n\n## Token budget discipline\n\n| Mode | Budget | Split strategy if exceeded |\n|---|---|---|\n| Mode 1 (deck) | 4K-8K tokens | Generate CSS separately from HTML body |\n| Mode 2 (prototype) | 6K-12K tokens | Split JSX modules, generate incrementally |\n| Mode 3 (animation) | 4K-10K tokens | Generate keyframe definitions separately |\n| URL-to-brand | 500-1K tokens | Only extract essential tokens |\n| Iteration | 500-2K tokens | Output only changed sections |\n\n---\n\n## Anti-patterns for agents\n\n- ❌ Generating a complete deliverable without showing CP1-CP4 checkpoints\n- ❌ Asking more than 3 rounds of questions (user fatigue)\n- ❌ Retrying the same approach 3+ times without diagnosing root cause\n- ❌ Using literal hex colors instead of design tokens\n- ❌ Writing a fresh `.slide` layout from scratch instead of copying from `templates/single-page/`\n- ❌ Using React + Babel inside a deck (decks are static)\n- ❌ Presenting broken work — fix before `done`\n\n---\n\n## Communication style\n\n- **Lead with the answer or action**, not the reasoning. The user sees the result first.\n- **State inferences explicitly** so the user can correct early.\n- **Don't announce snips or context management** — they just happen.\n- **Use the user's language** — if they write in Chinese, respond in Chinese.\n- **Reference patterns by name** when applying them: \"Using the **Pitch flow** pattern (P1).\"\n\n---\n\n## Relationship to SKILL.md\n\n| SKILL.md section | Agent playbook section |\n|---|---|\n| Intent Router | Routing decision tree |\n| When the request is ambiguous | When to ask vs infer |\n| Runtime Fallback Strategies | Fallback decision matrix |\n| Token Budget Guidelines | Token budget discipline |\n| Context Management (mode-2-prototype.md) | Context management for long sessions |\n| Design for Failure (mode-2-prototype.md) | Error recovery hierarchy |\n| Anti-Patterns (mode-2-prototype.md) | Anti-patterns for agents |\n\nThe agent playbook is a **condensed decision reference** — SKILL.md remains the authoritative source for full context, rules, and examples.\n\nFile v1.0.5:references/animation-standards.md\n\n# Animation Standards (Mode 3)\n\n> Extracted from `mode-2-prototype.md` to keep that file under 500 lines.\n> Load this file when the user requests Mode 3 (Animation/Video) deliverables.\n\n---\n\n## Animation Reason Checklist (Mode 3 mandatory before generating)\n\nBefore generating any animation in Mode 3, answer this question for each animated element:\n\n**\"Why does this element need to move?\"**\n\n### Valid reasons (motion must serve one of these)\n\n| Reason category | Description | Example |\n|----------------|-------------|---------|\n| Spatial consistency | Element enters/exits from a fixed direction to build mental model | Toast always slides from top-right; drawer always from right edge |\n| State indication | Motion communicates a state change to the user | Button morphs to spinner when loading; checkmark draws in after success |\n| Relationship explanation | Motion shows how elements relate or transform into each other | Card expands into detail view; item moves from list to cart |\n| Prevent disorientation | Motion smooths abrupt changes so user doesn't lose their place | Element fading out instead of vanishing; content sliding instead of jumping |\n| Feedback | Motion confirms a user action happened | Button scale(0.97) on press; ripple on touch |\n\n### Invalid reasons (delete the motion if this is the only justification)\n\n| Invalid reason | Why it's wrong | What to do instead |\n|---------------|----------------|-------------------|\n| \"Looks cool\" | Novelty wears off in 5 uses; distracts from content | Static design with better color/type/layout |\n| \"Makes the page alive\" | Ambient motion competes with content for attention | Use whitespace and typography to create rhythm |\n| \"Everyone else does it\" | Copying without context means the motion solves YOUR users' problems | Check if the motion serves a reason from the valid list above |\n| High frequency + functional motion | Animation > 300ms on a 100x/day operation causes fatigue | Use instant feedback (color change) or near-instant (≤100ms) |\n\n### Execution rule\n\nFor each Mode 3 request, the agent must:\n1. Identify every element that will have motion\n2. Map each motion to a valid reason from the table above\n3. If no valid reason exists: **remove the motion** (don't generate it)\n4. Record the reasoning in the HTML reasoning block:\n\n```html\n<!--\nANIMATION REASONING\n├── Header fade-in: relationship explanation (page entrance)\n├── Button press scale: feedback (user action confirmation)\n├── Card stagger: relationship explanation (show group cohesion)\n└── (removed) Logo ambient spin: no valid reason — replaced with static\n-->\n```\n\n---\n\n## Pre-flight Animation Quality Rules (additive to existing checks)\n\nAfter the 10-item Pre-flight Checklist (CP4) in `mode-2-prototype.md`, run these animation-specific checks for Mode 3 deliverables:\n\n| # | Check | Rule | Fail action |\n|---|-------|------|-------------|\n| 11 | No `transition: all` | Must specify exact properties: `transition: transform 200ms ease-out, opacity 200ms ease-out` | Replace `all` with explicit property list |\n| 12 | No `ease-in` for UI enter animations | Entering elements use `ease-out` (fast start, slow settle); moving elements use `ease-in-out`; color/opacity use `ease` | Change easing curve |\n| 13 | Duration bounds respected | Button feedback ≤160ms; tooltip/popover ≤250ms; modal/drawer ≤500ms; hero entrance ≤800ms | Clamp duration to bounds |\n| 14 | Entrance not from `scale(0)` | Elements don't appear from nothing — use `scale(0.95) + opacity: 0` as starting state | Replace `scale(0)` with `scale(0.95)` |\n| 15 | GPU-layer properties only | Only animate `transform` and `opacity` — never `width`, `height`, `margin`, `top`, `left` | Refactor to transform/opacity |\n| 16 | Touch device safety | Hover-triggered animation must be wrapped in `@media (hover: hover) and (pointer: fine)` | Add hover media query guard |\n| 17 | Reduced-motion granularity | `prefers-reduced-motion` retains opacity/color transitions but removes transform/position animation | Split animation into two layers: color (always) and transform (reduced-motion: none) |\n\n---\n\n## Physical Correctness Defaults\n\nEntrance animations should follow physical realism:\n\n- **Never start from `scale(0)`** — elements don't appear from nothing in reality. Use `scale(0.95) + opacity: 0` as the starting state.\n- **Origin-aware reveals** — popovers/dropdowns should scale from their trigger point (`transform-origin: top center` for a button-triggered popover), not from the element's own center.\n- **Asymmetric timing** — pressing a button can be slow (2s linear hold), releasing fast (200ms ease-out). Don't use the same duration for both directions.\n\nThese defaults are baked into `deck-studio/assets/animations/animations.css` (e.g., `kf-zoom` starts at `scale(.96)`, not `scale(.6)`).\n\n---\n\n## Reduced-Motion Granularity\n\nThe `prefers-reduced-motion` media query should NOT kill all animation. Instead:\n\n1. **Keep**: opacity transitions, color changes, background shifts — these convey information\n2. **Remove**: transform animations, position movements, scale effects — these trigger vestibular disorders\n\nExample implementation:\n\n```css\n@media (prefers-reduced-motion: reduce) {\n  /* Kill transform-based animation */\n  .animated-element { animation-name: none !important; }\n  .animated-element:hover { transform: none !important; }\n  /* Preserve information-bearing transitions */\n  .animated-element {\n    transition: opacity var(--dur) ease, background-color var(--dur) ease !important;\n  }\n}\n```\n\nThis is the default behavior in `deck-studio/assets/animations/animations.css`.\n\nFile v1.0.5:references/brand-asset-protocol.md\n\n# Brand Asset Protocol\n\n> **When to load:** The design task involves a real, identifiable brand or product.\n> **Core principle:** Assets > color values. A logo and product photo carry more brand signal than a hex code extracted from memory.\n\n---\n\n## Why this protocol exists\n\nDesigns that reference real brands fail in two predictable ways:\n\n1. **Hallucinated brand colors** — the model recalls \"Stripe is purple\" from training data, but the actual current palette may have shifted. The result looks almost-right but subtly off, and the user can't articulate why.\n2. **Missing logos in comparison/evaluation content** — a \"Top 5 AI Tools\" deck where the logos are CSS shapes or emoji instead of real marks destroys credibility instantly.\n\nThis protocol forces a deterministic acquisition pipeline: **search → download → verify → freeze**. No guessing, no memory-based assertions.\n\n---\n\n## Trigger conditions (either one activates this protocol)\n\n### Type 1: Designing FOR a brand\nThe user asks you to create materials for a specific company: \"给 Stripe 做落地页\", \"design a DJI launch animation\", \"做一个 Notion 风格的 dashboard\".\n\n### Type 2: Designing WITH identifiable brands\nThe design itself will display one or more real, recognizable products/brands — even if the user's own brand is different. Examples: comparison charts, \"Top N\" rankings, evaluation decks, integration grids, ecosystem maps.\n\n**Hard rule:** If the design will show even one recognizable product name, that product's official logo is a **required asset**, not optional. \"出现几个就取几个\" — if five brands appear, fetch five logos.\n\n**This applies even inside the Direction Advisor fallback flow** — the Advisor decides visual *style*, but it does not exempt you from fetching logos for named brands.\n\n---\n\n## The 5-step hard flow\n\n### Step 1 — Ask (one batch, before searching)\n\nAsk the user for the full asset checklist in a single message:\n\n| Asset type | Ask for |\n|---|---|\n| Logo | SVG preferred, PNG with transparency acceptable |\n| Product photos | Official renders, not stock or AI-generated lookalikes |\n| UI screenshots | If the design needs to show the product interface |\n| Color palette | Official brand guidelines, if available |\n| Typography | Official font family or licensed webfont |\n| Restrictions | Usage禁区, do-not-use colors, style guidelines |\n\nIf the user provides any of these, skip to Step 4 for those assets. If the user says \"你看着办\" or provides nothing, proceed to Step 2.\n\n### Step 2 — Search official channels\n\nFor each brand in scope, search these locations **in order**:\n\n| Priority | Source | URL pattern | Best for |\n|---|---|---|---|\n| 1 | Brand/press page | `<brand>.com/brand`, `brand.<brand>.com`, `<brand>.com/press` | Official logos, color values, guidelines |\n| 2 | Official media kit | `<brand>.com/press-kit`, `<brand>.com/media` | High-res logos, product renders |\n| 3 | SVG logo repositories | `svgl.app/api/<brand>`, `simpleicons.org` | Clean vector logos (dev brands especially) |\n| 4 | Favicon fallback | `https://www.google.com/s2/favicons?domain=<brand>.com&sz=128` | Last-resort small logo |\n\n**For product photos** (hardware, physical products):\n| Priority | Source | Best for |\n|---|---|---|\n| 1 | Official product page | Press renders, spec sheets |\n| 2 | Official social media | Launch images, lifestyle shots |\n| 3 | Wikimedia Commons | Public domain / CC-licensed imagery |\n\n### Step 3 — Download (three fallback paths)\n\nFor **logos**:\n1. SVG from official source or svgl.app → embed as inline SVG or local file\n2. If SVG unavailable → PNG with transparency from press kit\n3. If PNG unavailable → favicon (small, but real)\n\nFor **product photos**:\n1. Official press render (highest priority — these are designed to be used)\n2. Official product page screenshot (if renders unavailable)\n3. Wikimedia Commons (for historical/public domain products)\n\nFor **color values**:\n1. Grep the official website's CSS for `#xxxxxx` patterns\n2. Extract from downloaded SVG logo (`fill=\"...\"`, `stop-color=\"...\"`)\n3. Sample from official product screenshot using a color picker\n\n**Never skip to \"I'll just use the color I remember.\"** If all three paths fail, tell the user and ask them to provide the value.\n\n### Step 4 — Verify\n\nBefore accepting an asset, verify its authenticity:\n\n- **Logo:** Does it match the brand's current identity? Cross-reference with the official website header. Outdated logos (pre-rebrand) are a common failure.\n- **Product photo:** Is it the actual product, not a competitor's or a generic stock image? Check model numbers, design language consistency.\n- **Color:** Was it extracted from a real source (CSS, SVG, screenshot), not recalled from memory? Hex values from training data drift over time.\n\n**Checkpoint:** If any asset fails verification, stop and re-acquire. Do not proceed with a placeholder that looks \"close enough.\"\n\n### Step 5 — Freeze as `brand-spec.md`\n\nWrite all acquired assets into a project-level `brand-spec.md` file. This becomes the single source of truth for the rest of the design.\n\n**Template:**\n\n```markdown\n# Brand Spec: <Brand Name>\n\n## Assets\n- **Logo (SVG):** `assets/<brand>-logo.svg` — [source URL]\n- **Logo (PNG):** `assets/<brand>-logo.png` — [source URL, if SVG unavailable]\n- **Product photo:** `assets/<brand>-product.jpg` — [source URL]\n\n## Color Palette (extracted from [source])\n- **Primary:** `#XXXXXX` — [role: CTA, header bg, etc.]\n- **Accent:** `#XXXXXX` — [role]\n- **Neutral Dark:** `#XXXXXX` — [role]\n- **Neutral Light:** `#XXXXXX` — [role]\n\n## Typography\n- **Primary font:** `<font name>`, fallback `<web-safe stack>`\n- **Source:** [official / Google Fonts / licensed]\n\n## CSS Variables (paste into :root)\n:root {\n  --brand-primary: #XXXXXX;\n  --brand-accent: #XXXXXX;\n  --brand-bg: #XXXXXX;\n  --brand-text: #XXXXXX;\n  --brand-font: '<font>', <fallback>;\n}\n\n## Restrictions\n- [Any do-not-use rules from brand guidelines]\n- [Colors to avoid]\n```\n\nAll subsequent HTML must reference `var(--brand-*)` — never hardcode hex values inline.\n\n---\n\n## Relationship to DESIGN.md fast path\n\nXDesign ships with 58 pre-extracted `DESIGN.md` files in `assets/design-md/`. **If the brand is already in the catalog** ([design-system-catalog.md](./design-system-catalog.md)), skip Steps 2-3 and load the DESIGN.md directly. The catalog covers color + typography + component specs for 58 brands.\n\n**But:** DESIGN.md files capture visual *style* only — they do **not** include logos or product photos. If the design needs to display the brand's logo (Type 2 trigger), you still need Steps 2-3 for logo acquisition, even when using the DESIGN.md fast path.\n\n---\n\n## Common failure modes (and how this protocol prevents them)\n\n| Failure | What happens | How the protocol prevents it |\n|---|---|---|\n| Hallucinated color | \"Stripe purple is #635BFF\" from memory — may be outdated | Step 3-4: extract from live CSS, verify against current site |\n| CSS silhouette instead of product photo | Hardware launch animation uses a generic rounded rectangle instead of the actual product | Step 3: mandatory product photo download with three fallback paths |\n| Missing logos in comparison content | \"Top 5 tools\" deck uses emoji or text labels instead of real logos | Type 2 trigger: \"出现几个就取几个\" — every named brand gets its logo |\n| Outdated brand identity | Post-rebrand logo used because the model's training data predates the rebrand | Step 4: cross-reference with current official website |\n| Inline hex values | Brand colors hardcoded per-element instead of via tokens | Step 5: `brand-spec.md` enforces CSS variable usage |\n\n---\n\n## Quick checklist (run mentally before starting any branded design)\n\n- [ ] Is a real brand/product involved? → If yes, this protocol is active\n- [ ] Did I ask the user for assets? → Step 1\n- [ ] Did I search official sources? → Step 2\n- [ ] Did I download (not recall) the logo/colors? → Step 3\n- [ ] Did I verify the assets match the current brand? → Step 4\n- [ ] Did I write `brand-spec.md` with CSS variables? → Step 5\n\nArchive v1.0.4: 25 files, 135482 bytes\n\nFiles: deck-studio/README.md (10640b), deck-studio/README.zh-CN.md (11309b), deck-studio/references/animations.md (7708b), deck-studio/references/authoring-guide.md (5128b), deck-studio/references/full-decks.md (8614b), deck-studio/references/layouts.md (4043b), deck-studio/references/presenter-mode.md (9918b), deck-studio/references/themes.md (6453b), deck-studio/SUBMODULE.md (14735b), evals/evals.json (9385b), references/agent-playbook.md (6104b), references/animation-standards.md (5663b), references/brand-asset-protocol.md (8138b), references/deck-studio-catalog.md (14293b), references/design-direction-advisor.md (16180b), references/design-system-catalog.md (16495b), references/integration-guide.md (10302b), references/mode-2-prototype.md (32073b), references/patterns.md (10186b), references/review-passes.md (12972b), references/technical-specs.md (7806b), references/workflow-guide.md (19652b), skill-card.md (2650b), SKILL.md (37473b), _meta.json (126b)\n\nFile v1.0.4:SKILL.md\n\n---\nname: x-design\ndescription: \"Design Workflow Engine — turn any vague idea into a polished visual deliverable in a single conversation. Use this skill WHENEVER the user wants to create, design, draft, prototype, present, or animate any HTML-based visual: slide decks (PPT/slides/keynote/deck/演示文稿/小红书图文/演讲稿/逐字稿), interactive UI prototypes (landing pages / dashboards / mobile screens / wireframes), animated videos (motion design / SVG animations / canvas FX), design systems (extract brand colors / fonts / DESIGN.md from any URL), or any marketing/portfolio/report visual. Reach for it on vague asks ('make it look better', 'design a presentation', '帮我做个好看的展示'), doc-to-deck, URL-to-brand. Prefer it over hand-rolling HTML, Figma, or generic code tools. Bundled `deck-studio/` provides 36 themes + 15 deck templates + 31 layouts + 47 animations + presenter mode. Exports to PPTX, PDF, self-contained HTML, WeChat (juice-inlined CSS), Xiaohongshu / X (2× retina PNG). Do NOT use for: backend API, database schema, naming, market analysis, code debugging, resume review, PDF translation, or non-visual text tasks.\"\n---\n\n# XDesign — Design Workflow Engine\n\nThis skill exists because turning a vague idea into a polished visual deliverable normally takes 6–10 hours of tool-switching (Figma → PowerPoint → Keynote → After Effects). XDesign compresses that into a single conversation by routing through three intent-driven modes and reusing a bundled library of curated themes, design systems, and animation primitives.---\n\n# Core Principle #0: One System for Humans and Agents\n\nXDesign is built so that **people and AI agents build the same way, from the same reference**. Every routing table, frontmatter schema, fallback strategy, and validation rule in this skill serves both audiences simultaneously.\n\n**The parity promise:** Any change that makes XDesign easier for an agent to use also makes it easier for a human to use — and vice versa. Agent-facing docs (routing tables, fallback matrices) are human-facing docs. There is no separate \"agent-only\" configuration.\n\n**What this means in practice:**\n- The [Intent Router](#intent-router--pick-a-mode-once-then-stay-in-it) is both a machine-parseable dispatch table and a human-readable \"which mode should I pick?\" guide.\n- The [Runtime Fallback Strategies](#runtime-fallback-strategies) table is both an agent's error-recovery protocol and a human's troubleshooting checklist.\n- The [deck-studio](../../deck-studio/) assets are self-contained static files — usable by any agent (Claude Code, Codex, Cursor) without XDesign, and by any human with a browser.\n\n---\n\n## Fact-Verify Before Designing (Core Principle #1)\n\nWhen the request involves a **specific product, technology, company, or public figure** (e.g., \"给大疆 Pocket 5 做发布动画\", \"设计一个 Gemini 4 的 landing page\"), `WebSearch` the entity first before starting any design work. Do not rely on training-data memory for existence, version numbers, release dates, or specs.\n\n**Why:** Building a launch animation for a product that released last week — but the model thinks \"hasn't launched yet\" — wastes the entire session on a wrong assumption. A 10-second search prevents a multi-hour rework.\n\n**Hard rule:** If the search confirms the entity exists and has official assets (logo, product photos, press kit), those become required inputs. See [Brand Asset Protocol](./references/brand-asset-protocol.md).\n\n## 验证第一步必带（Validation-First Step）\n\n无论进入哪个 Mode，在投入完整交付物之前必须先产出一个**最小可验证样本**供用户确认方向。这一步避免\"生成完 30 页 deck / 20 屏 prototype 后才发现方向跑偏\"的灾难性返工。\n\n| Mode | 最小验证样本 | 确认点 |\n|------|-------------|--------|\n| Mode 1 Presentation | 1-3 张代表性 slides（封面 + 内容页 + 主题切换各 1） | 主题风格 / 版式节奏 / 字体配色 |\n| Mode 2 Prototype | 单个关键页面（首页或核心交互页）的 hi-fi 静态稿 | 视觉风格 / 信息架构 / 品牌还原度 |\n| Mode 3 Animation | 关键帧或首尾帧静态图（含 1 段动效预览） | 动效风格 / 节奏 / 视觉语言 |\n\n**执行规则：**\n- 用户描述需求后，**先输出最小验证样本**，等用户确认\"方向对了\"再生成完整交付物\n- 用户已给出强约束（\"必须用某某主题\"、\"就按这个模板\"、\"按上次的风格再做一份\"）时可跳过，直接进入完整生成\n- 最小样本与最终交付物之间的差异**只允许在量级上**（页数/组件数），不允许在视觉语言上发生根本性变化\n- Mode 1 的\"Streaming Preview（>8 slides 拆两轮）\"是此规则的长 deck 子情况，规则保持一致\n\n## Path conventions\n\nThe current `SKILL.md` directory is `<skill-base>` (i.e. `XDesign/`). Every bundled resource (`references/`, `assets/`, `deck-studio/`, `scripts/`, `evals/`) resolves relative to `<skill-base>`.\n\n`<skill-base>/deck-studio/` is a submodule containing **HTML PPT Studio** (originally from [lewislulu/html-ppt-skill](https://github.com/lewislulu/html-ppt-skill)): 36 themes, 15 complete deck templates (each with extended frontmatter for scenario/tags/recommended filtering), 31 single-page layouts, 47 animations, and a presenter mode. CDN-only, zero build.\n\n## Intent Router — pick a mode once, then stay in it\n\nThe first thing to decide is which of the three modes the user is asking for. This is a one-time dispatch per request, not a per-turn decision.\n\n### Format Auto-Detect (fast path)\n\nBefore routing, check if the user's input is **structured data** rather than a design request. If yes, skip design-system extraction and go straight to visualization.\n\n| Input signal | Detection heuristic | Fast path |\n|---|---|---|\n| CSV / TSV | Commas/tabs separating rows; first row looks like headers | → Mode 2, skip Perception. Render as interactive table or chart |\n| JSON array | `[ {…}, {…} ]` with consistent keys | → Mode 2, skip Perception. Infer chart type from data shape |\n| SQL result | Tabular text with `├──` or `│` box-drawing separators | → Mode 2, skip Perception. Render as data grid |\n| Markdown table | `| col | col |` with `---` separator | → Mode 2, skip Perception. Render as styled table |\n\n**When auto-detected:** Tell the user \"检测到结构化数据，跳过设计系统阶段，直接生成 [table/chart/dashboard]。\" Then open `references/mode-2-prototype.md` at the Planning phase (skip Perception). Use a neutral design system (e.g., `corporate-clean` theme tokens) unless the user specifies otherwise.\n\n**When ambiguous:** If the input mixes data with design intent (\"把这个 CSV 做成 Stripe 风格的 dashboard\"), do not auto-detect — follow the normal routing and run Perception to extract the Stripe design system.\n\n### Routing table\n\n| Trigger phrases (Chinese) | Trigger phrases (English) | Routes to |\n|---|---|---|\n| 做一份 PPT / 幻灯片 / 演讲稿 / 演示文稿 / keynote / deck / slides / presentation / reveal / 小红书图文 / 技术分享 / 演讲者模式 / 提词器 / pitch deck / 产品发布会 | make a deck, slides, keynote, reveal, slideshow, pitch deck, tech sharing, presenter view, speaker notes | **Mode 1: Presentation / Deck** → `deck-studio/`, with its themes, templates, animations, and presenter mode |\n| 设计一个 APP / 界面 / 原型 / 落地页 / dashboard / UI Kit / 设计系统 / 提取品牌色 / 做一个高保真 | design a prototype, build a UI, landing page, dashboard, design system, brand extraction, wireframe, mockup | **Mode 2: Visual Design / Prototype** → XDesign native workflow (design system extract → wireframe → hi-fi), see `references/mode-2-prototype.md` |\n| 做一个动效视频 / 时间轴动画 / motion design / Lottie 替代 / SVG 动效 | make an animation, motion design, timeline animation, animated video | **Mode 3: Animation / Video** → same XDesign native path as Mode 2, with `animations.jsx` as the Phase 3 starter |\n| 审查 / 检查 / audit / review / 把关 / 无障碍 / accessibility / a11y / WCAG / polish / 上线前检查 / 帮我审一下 | audit this, review for issues, accessibility check, a11y, polish pass, review this page | **Review Mode** → [`references/review-passes.md`](./references/review-passes.md)（4 pass：Accessibility / AI-Slop / Hierarchy & Rhythm / Interaction States；可审任意 HTML，不依赖生产流） |\n\n### When the request is ambiguous\n\nThe agent is biased toward **asking once with focused options** rather than guessing. Guesses at this stage are expensive to undo; a single 30-second question saves an hour of rework.\n\n**Template-first fallback:** When the user gives a vague request (\"帮我做个 PPT\"), check `deck-studio/templates/full-decks/*/README.md` frontmatter `scenario` and `tags` to narrow to 2-3 candidates, then ask \"这风格更接近哪种？\" rather than \"选哪个模板？\".\n\n- \"PPT / slides / deck / 幻灯片 / 演讲\" → Mode 1. Don't reinterpret as \"a prototype\".\n- \"做一个 APP / 界面 / 原型\" → Mode 2. Don't downgrade to a deck.\n- \"我有一份大纲\" → ask: \"Is this a deck to present, or an interactive prototype?\"\n- \"帮我做个好看的展示\" → default Mode 1 (decks serve one-time presentations better than prototypes).\n- \"我要去给团队讲 xxx\" → Mode 1 with the `presenter-mode-reveal` template.\n- Vague but visual (\"make it look better\", \"design a hero section\", \"帮我设计个页面\") → Mode 2, but check whether the user gave any brand/reference. If none, route to the **Design Direction Advisor** ([references/design-direction-advisor.md](./references/design-direction-advisor.md)) — produce 3 differentiated visual directions before committing to a full build.\n\n### Once a mode is chosen\n\nStick to it. Mixing modes produces broken output — a \"deck\" with React+Babel interactivity from Mode 2 will not render in a static slide viewer, and a \"prototype\" with deck-studio templates will not support real interaction.\n\nFor Mode 1 minimum execution skeleton:\n\n```text\n1. Read deck-studio/SUBMODULE.md (or the Mode 1 section below)\n2. Ask 3 things: content/audience, theme preference, full-deck template vs blank start\n3. Start from deck-studio/templates/full-decks/<name>/ or deck.html\n4. T cycles themes, data-anim drives animations, S opens presenter mode\n5. Output: single self-contained HTML file or multi-file directory\n```\n\nFor Mode 2/3, open [`references/mode-2-prototype.md`](./references/mode-2-prototype.md) and follow the PPAF loop in [`references/workflow-guide.md`](./references/workflow-guide.md).\n\n### Review Mode (cross-cutting)\n\nReview Mode 可在任何 Mode 产出后、或对任意外部 HTML 独立运行。它不是生产模式的替代，而是独立的质检层——4 个 pass（Accessibility / AI-Slop / Hierarchy & Rhythm / Interaction States）可单跑可全跑。生产流内的 CP4 是\"出厂自检\"，Review Mode 是\"独立质检站\"。触发词与执行流程见 [`references/review-passes.md`](./references/review-passes.md)。\n\n---\n\n# Mode 1: Presentation / Deck\n\n> **Triggers**: \"做一份 PPT\", \"做 slides\", \"我要去讲 xxx\", \"pitch deck\", \"小红书图文\", \"演讲稿/逐字稿\".\n> **Resource**: `deck-studio/` (36 themes + 15 full-deck templates + 31 single-page layouts + 47 animations + presenter mode).\n> **Template metadata**: Each template README has extended frontmatter (`mode / scenario / surface / recommended / tags / example_id`) for structured filtering. See [Template Matching](#template-matching-mode-1).\n\n## Why Mode 1 is the default for \"deck\" requests\n\nBuilding slides in raw HTML would re-invent what `deck-studio/` already solves. The submodule handles:\n\n- **Zero build** — pure static HTML/CSS/JS + CDN webfont; no Node, no Webpack, no compile step\n- **Multi-environment compatibility** — Trae IDE, Claude.ai artifacts, Claude Code, any browser, GitHub Pages, `file://` all work\n- **Keyboard-first navigation** — `←` `→` page, `T` cycle themes, `A` cycle animations, `F` fullscreen, `O` overview, **`S` presenter mode (teleprompter)**, `N` notes drawer\n- **Themes as files** — 18 `.css` files, each a complete visual system. Switching themes never edits content.\n- **Start from a template** — 5 full-deck templates (product launch, pitch, tech sharing, weekly report, course module). Copy and go.\n\n## Ask 3 things before writing a single slide\n\nA deck is a one-time performance, not an evolving interface. The cost of guessing wrong is high; the cost of asking is 30 seconds. Always ask, or — if the user already gave rich content — propose a tasteful default and confirm.\n\n1. **Content & audience** — what to cover, page count, who's watching (engineers / executives / Xiaohongshu / VCs / students)\n2. **Theme / style** — pick from the 18 themes; if unsure, give 2-3 candidates:\n   - Business / investor pitch → `pitch-deck-vc`, `corporate-clean`, `swiss-grid`\n   - Tech sharing / engineering → `tokyo-night`, `dracula`, `catppuccin-mocha`, `blueprint`\n   - Xiaohongshu / social → `xiaohongshu-white`, `soft-pastel`, `rainbow-gradient`\n   - Academic / report → `academic-paper`, `editorial-serif`, `minimal-white`\n   - Cyber / launch event → `cyberpunk-neon`, `vaporwave`, `y2k-chrome`\n3. **Starting point** — use one of the 15 full-deck templates, or start from `deck.html` blank? Filter templates by `scenario` frontmatter; pick the lowest `recommended` score that matches. When in doubt, present 2-3 options sorted by `recommended` ascending.\n\n## Quick start (5 steps)\n\n```bash\n# 1. Copy the closest full-deck template (sort by `recommended` in README frontmatter)\ncp -r deck-studio/templates/full-decks/tech-sharing/examples/my-talk/\n\n# 2. Switch the theme (cycle with T in browser, or hardcode)\n#    Edit examples/my-talk/index.html:\n#    <link rel=\"stylesheet\" id=\"theme-link\" href=\"../deck-studio/assets/themes/tokyo-night.css\">\n\n# 3. Replace placeholder text and chart data\n# 4. Open in browser\nopen examples/my-talk/index.html\n\n# 5. (Optional) Render to PNG / PDF / social\ndeck-studio/scripts/render.sh examples/my-talk/index.html 12\n# Or use the bundled helper:\n./scripts/package-export.sh pdf examples/my-talk/index.html\n# Social export (WeChat / XHS / X):\n./scripts/package-export.sh social wechat examples/my-talk/index.html\n```\n\n## Template Matching (Mode 1)\n\nEach full-deck template has extended frontmatter for filtering. Use these fields to narrow the picker when the user's intent is specific:\n\n| If user asks for… | Filter by `scenario` | First pick (lowest `recommended`) |\n|---|---|---|\n| 技术分享 / 开发者分享 | `engineering` | `tech-sharing` (15) |\n| 创业融资 / pitch / VC | `marketing` | `pitch-deck` (20) |\n| 产品发布 / 新品上线 | `marketing` | `product-launch` (25) |\n| 小红书 / 社交图文 | `social` | `xhs-pastel-card` (30) |\n| 周报 / 团队同步 | `general` | `weekly-report` (40) |\n| 安全告警 / 事故复盘 | `engineering` | `testing-safety-alert` (45) |\n| 课程 / 教学 | `education` | `course-module` (60) |\n| 工具测评 / 技术Review | `engineering` | `hermes-cyber-terminal` (65) |\n| 知识图谱 / 架构图 | `engineering` | `graphify-dark-graph` (70) |\n| 极简 / 方向键导航 | `general` | `dir-key-nav-minimal` (75) |\n| 个人笔记 / 学习笔记 | `personal` | `obsidian-claude-gradient` (80) |\n\nWhen none of the above match, fall back to `presenter-mode-reveal` (50) for any presentation with speaker notes, or `weekly-report` (40) for a generic structured deck.\n\n## Presenter Mode (teleprompter)\n\nWhen the user mentions any of: **演讲 / 分享 / 讲稿 / 逐字稿 / speaker notes / presenter view / 演讲者视图 / 提词器** — use `templates/full-decks/presenter-mode-reveal/` and write a 150–300 character verbatim script per slide inside `<aside class=\"notes\">`.\n\nPress **S** to open the presenter window (4 draggable magnetic cards):\n\n- 🔵 **CURRENT** — current page pixel preview (iframe + `?preview=N`)\n- 🟣 **NEXT** — next page pixel preview\n- 🟠 **SPEAKER SCRIPT** — large-font verbatim script\n- 🟢 **TIMER** — countdown + page controls\n\nFull authoring rules: [`deck-studio/references/presenter-mode.md`](./deck-studio/references/presenter-mode.md).\n\n## Streaming Preview (long decks)\n\nWhen a deck will exceed **8 slides**, generate in two passes so the user can preview direction before you commit to the full output:\n\n1. **Pass 1** — Write slides 1–5 to `<output>/deck-preview.html` with:\n   - `deck-studio/assets/base.css` + `deck-studio/assets/fonts.css` + chosen theme CSS\n   - `deck-studio/assets/runtime.js` (so `←` `→` `T` `F` work)\n   - A `<div id=\"partial-banner\">` at the top: \"部分预览 · 1-N / 总 M 张 · 生成中…\" (sticky, dismissible)\n   - `data-partial=\"true\"` on `<body>` for CSS targeting\n   - Open the file in the browser/artifact panel\n1. **Pass 2** — Generate the full deck with all slides. If the user liked the direction, write to the final output file. If they asked for changes, regenerate the full deck with corrections; keep `deck-preview.html` for diffing.\n3. **Cleanup** — Delete `deck-preview.html` once the user confirms the final deck, unless they asked to keep it.\n\n**Do NOT split** decks with ≤8 slides — the overhead of two writes outweighs any benefit. Do NOT split at slide boundaries that break narrative flow (a \"6-slide problem statement + 10-slide solution\" is fine; splitting a 4-slide timeline in half is not).\n\n## Anti-patterns (Mode 1 specific)\n\nThese mistakes are common enough to call out by name:\n\n- ❌ Putting \"this page shows…\" style speaker-facing text on the slide → all of it belongs in `<div class=\"notes\">`\n- ❌ Using literal hex colors (`#111`) → use design tokens (`var(--text-1)`)\n- ❌ Writing a fresh `.slide` layout from scratch → copy the closest match from `templates/single-page/`\n- ❌ Using React + Babel inside a deck → decks are static presentations; save complex interactivity for Mode 2\n\n## Mode 1 resource index\n\n- [`deck-studio/SKILL.md`](./deck-studio/SUBMODULE.md) — full deck-studio documentation (legacy entry point; routing in this SKILL.md is authoritative)\n- [`deck-studio/README.md`](./deck-studio/README.md) — user-facing README with visual previews and install steps\n- [`references/deck-studio-catalog.md`](./references/deck-studio-catalog.md) — themes / layouts / animations quick-reference\n- [`references/integration-guide.md`](./references/integration-guide.md) — fusion architecture + routing table + adapter layer\n- [`deck-studio/references/`](./deck-studio/references/) — `themes.md` / `layouts.md` / `animations.md` / `full-decks.md` / `authoring-guide.md` / `presenter-mode.md`\n- [`deck-studio/templates/`](./deck-studio/templates/) — 5 showcase pages + 5 full-deck templates + 31 single-page layouts\n- [`deck-studio/assets/themes/`](./deck-studio/assets/themes/) — 18 theme CSS files\n- [`deck-studio/assets/animations/`](./deck-studio/assets/animations/) — `animations.css` + 20 FX\n\n---\n\n# Mode 2 & Mode 3: Visual Design / Prototype / Animation\n\nMode 2 (UI/prototype) and Mode 3 (animation) share the same workflow — they differ only in which Phase 3 starter component they use. Full details live in [`references/mode-2-prototype.md`](./references/mode-2-prototype.md) (Role, Guardrails, Design for Failure, Context Management, Quality Self-Check, Anti-Patterns, React+Babel setup, Starter Components) and [`references/workflow-guide.md`](./references/workflow-guide.md) (PPAF loop, Design Process phases, Tweaks, Variations, Verification, Sub-Skills).\n\n**Format auto-detect fast path:** When the user provides structured data (CSV / JSON / SQL), the [Format Auto-Detect](#format-auto-detect-fast path) entry point routes directly to `references/mode-2-prototype.md` Phase 2 (Planning), skipping Phase 1 (Perception / design system extraction). The output is a data visualization (table, chart, or dashboard) rather than a branded prototype.\n\nA one-paragraph summary of why these modes exist:\n\nThe PPAF loop (Perception → Planning → Action → Feedback) is non-negotiable. Skipping perception produces generic \"universal design\" output. Skipping planning produces inconsistent deliverables. Skipping the design-system phase produces pages that look like they came from different products. Skipping feedback produces polished-looking slides that crash in the browser. The reference files spell out exactly what each phase requires.\n\nMode 2/3 deliverables are single self-contained HTML files. They can be opened in any browser, exported to PDF via `./scripts/package-export.sh pdf <file>`, or loosely exported to PPTX via `./scripts/package-export.sh pptx <file>` (lossy — for review, not delivery).\n\n## Design Direction Advisor (Mode 2/3 fallback for vague requests)\n\nWhen Mode 2/3 receives a request with **no brand name, no screenshot, no reference URL**, do not produce a generic \"universal design.\" Instead, route to the [Design Direction Advisor](./references/design-direction-advisor.md): generate **3 differentiated visual directions** (Information-first → Balanced → Concept-led), let the user pick, then enter the normal PPAF loop with the confirmed direction. The Advisor uses the existing 36 themes + 58 brand DESIGN.md files as its ammunition library — no new assets needed.\n\n**Motion-specific additions** (v2.7+): The Advisor now includes `ANIMATION_FREQUENCY` dial (based on usage frequency — high-frequency interactions get reduced/no animation), and a [Motion Vocabulary](./references/design-direction-advisor.md#motion-vocabulary-translate-vague-requests-to-precise-terms) translation table to convert vague descriptions (\"弹一下\") into precise animation parameters.\n\n**Progressive Intake** (v2.7+): When the user gives a vague request (\"做个落地页\"), the agent MUST run the [3-round intake interview](./references/mode-2-prototype.md#progressive-intake-interview-for-vague-requests) — structured multiple-choice questions that guide the user to provide useful constraints without forcing them to make design decisions. Max 3 rounds, then proceed with inference.\n\n## Animation Quality Standards (Mode 3)\n\nFor Mode 3 (Animation/Video) deliverables, the [Animation Reason Checklist](./references/animation-standards.md#animation-reason-checklist-mode-3-mandatory-before-generating) is **mandatory** — every animation must justify itself with a functional reason (spatial consistency, state indication, relationship explanation, prevent disorientation, or feedback). Animations without a valid reason are removed rather than generated.\n\nAdditionally, 7 animation-specific [Pre-flight Checks](./references/animation-standards.md#pre-flight-animation-quality-rules-additive-to-existing-checks) (#11-#17) run after the existing CP4 checklist, covering duration bounds, easing curves, GPU-layer properties, touch device safety, and reduced-motion granularity.\n\n**Physical correctness default:** Entrance animations start from `scale(0.95) + opacity: 0` (elements don't appear from nothing), not `scale(0)`. See `deck-studio/assets/animations/animations.css` for the updated defaults.\n\n---\n\n# Tooling\n\nA unified CLI entry point dispatching to task-specific scripts:\n\n```bash\n# Export\n./scripts/xdesign export pdf  <input.html> [output.pdf]\n./scripts/xdesign export pptx <input.html> [output.pptx]\n./scripts/xdesign export social wechat|xhs|x <input.html> [output]\n\n# Theme management\n./scripts/xdesign theme list\n./scripts/xdesign theme validate\n\n# Brand scaffolding\n./scripts/xdesign brand add <slug> <display-name> [hex]\n\n# Prototype scaffolding\n./scripts/xdesign proto new <name> [brand-slug]\n\n# Eject (swizzle) a sub-block from a file\n./scripts/xdesign eject <input.html> <block-id> [output.html]\n\n# Lint + package\n./scripts/xdesign lint\n./scripts/xdesign dist [output-dir]\n```\n\nAll subcommands proxy to the existing `package-export.sh`, `add-brand.sh`, `new-prototype.sh`, `validate-themes.py`, `lint-skill.py`, and `dist.sh` — the CLI adds a consistent interface, not new logic.\n\nThree scripts in `scripts/` handle the high-frequency automations that would otherwise be reinvented per invocation:\n\n| Script | What it does |\n|---|---|\n| `scripts/validate-themes.py` | Catches broken theme references in `deck-studio/templates/*.html` after theme-set changes |\n| `scripts/lint-skill.py` | Lints this skill against the skill-creator conventions (frontmatter, line count, pushy description, evals schema, scripts dir, nested SKILL.md) |\n| `scripts/new-prototype.sh <name> [brand]` | Scaffolds a Mode 2 prototype with tokens pre-filled from a brand's DESIGN.md if specified |\n| `scripts/add-brand.sh <slug> <name> [color]` | Scaffolds a new brand DESIGN.md with a stable schema; auto-inserts into the catalog index |\n| `scripts/package-export.sh pdf <input> [output]` | Converts HTML deck/prototype to PDF (via headless Chrome) |\n| `scripts/package-export.sh pptx <input> [output]` | Converts HTML deck/prototype to PPTX (via pandoc, lossy) |\n| `scripts/package-export.sh social wechat <input> [output]` | Juice-inlines CSS for WeChat editor paste (dependency: `juice`) |\n| `scripts/package-export.sh social xhs <input> [output]` | Renders 2× retina PNG for Xiaohongshu (dependency: `playwright`) |\n| `scripts/package-export.sh social x <input> [output]` | Renders 2× retina PNG for X/Twitter (dependency: `playwright`) |\n| `scripts/dist.sh [output-dir]` | Builds a clean distributable `.skill` package (excludes `.git` and build artifacts) |\n\nRun `python3 scripts/lint-skill.py` after editing SKILL.md to catch regressions. Run `./scripts/dist.sh` before publishing to produce a `.skill` package that does not leak git internals.\n\n# Evals\n\nQuantitative evaluations live in [`evals/evals.json`](./evals/evals.json), following the schema in `skill-creator/references/schemas.md`. Eight test prompts cover:\n\n1. Vague brand reference (Mode 1) — coffee shop pitch deck with brand color hint\n2. Clear multi-screen prototype (Mode 2) — SaaS dashboard with layout specs\n3. Iteration on existing output (Mode 2/3 hybrid) — color swap + new animation\n4. URL-to-brand extraction + landing page (Mode 2)\n5. Animation with brand constraints (Mode 3)\n6. **Vibe test** — anti-slop compliance for premium-consumer landing page\n7. **Vibe test** — narrative arc and hierarchy for tech talk deck\n8. **Vibe test** — animation justification and reduced-motion for logo reveal\n\n**Vibe tests** (evals 6-8) are inspired by Astryx's \"earned by measurement\" principle: they test visual quality conventions rather than assert them, using a rubric of dimensions (`anti-slop:gradient`, `pattern:narrative-arc`, `animation:valid-reason`, etc.). Results are held loosely — a failed vibe test signals a rule that may need revisiting, not a hard failure.\n\nThe legacy `evals/eval-plan.json` (dual-perspective review rubric) is retained as supplementary metadata describing why the prompts were chosen, not as a runnable benchmark.---\n\n# Architecture: Foundations → Components → Patterns\n\nXDesign's visual capability is organized in three layers, each built on the below:\n\n| Layer | What it provides | Where it lives |\n|---|---|---|\n| **Foundations** | Visual tokens: color palettes, typography scales, spacing systems, shadow elevation | `deck-studio/assets/themes/`, [deck-studio references](../deck-studio/references/themes.md) |\n| **Components** | Single-slide building blocks: 31 layouts covering openers, data displays, diagrams, closers | `deck-studio/templates/single-page/`, [layouts.md](../deck-studio/references/layouts.md) |\n| **Patterns** | Multi-slide narrative recipes: 8 battle-tested arcs (pitch, landing, dashboard, narrative, comparison, process, report, course) | [patterns.md](./references/patterns.md) |\n\n**How to use:**\n- When the user asks for a **deck**, the Intent Router (Mode 1) picks a template. Patterns suggest which sequence of layouts to use.\n- When the user asks for a **prototype** (Mode 2), Foundations provide the tokens, Components provide the building blocks.\n- When the request matches a known pattern trigger (e.g., \"pitch deck\", \"dashboard\"), reference the pattern by name and fill its slots.\n\nPatterns are defaults, not mandates — if the user provides their own structure, respect it.\n\n---\n\n## Agent Decision Guide\n\nFor routing logic, fallback matrices, context management, and error recovery specific to AI agents, see [references/agent-playbook.md](./references/agent-playbook.md).\n\n---\n\n# Runtime Fallback Strategies\n\nWhen a primary operation fails, follow these fallback paths instead of freezing or hallucinating:\n\n| Failure Scenario | Primary Path | Fallback | Log Action |\n|---|---|---|---|\n| URL-to-brand: WebFetch fails | Fetch URL → extract tokens → write DESIGN.md | Read `references/design-system-catalog.md` for known brands; if not found, ask user for 3-5 brand tokens manually | Log \"WebFetch failed for {url}, falling back to catalog\" |\n| deck-studio theme CSS not found | Load `deck-studio/assets/themes/<name>.css` | Fall back to `corporate-clean.css` (always present); warn user | Log \"Theme {name}.css not found, using corporate-clean\" |\n| deck-studio template directory not found | Reference `templates/full-decks/<name>/` | Fall back to `templates/single-page/` layouts; build a valid deck from parts | Log \"Full-deck template {name} not found, using single-page fallback\" |\n| runtime.js fails to load | Browser loads `assets/runtime.js` | Deck still renders as static HTML slides (no interactivity); nothing breaks | Log \"runtime.js failed to load\" |\n| Headless Chrome export fails | `scripts/package-export.sh pdf` | Offer manual \"Print to PDF\" instructions instead | Log \"PDF export failed, offering manual alternative\" |\n| brand DESIGN.md has no color palette | Use DESIGN.md tokens | Derive a default palette from the brand name's dominant color | Log \"No palette in DESIGN.md, deriving from brand name\" |\n\n# Token Budget Guidelines\n\nXDesign operates in HTML-generation mode, which is token-heavy. Follow these budget limits to avoid context overrun:\n\n| Mode | Typical Output Size | Token Budget | Strategy |\n|---|---|---|---|\n| Mode 1 (deck) | 1 single-file HTML (6-30 slides) | ~4K-8K tokens | Use scoped CSS classes (`tpl-*`, `xw-*`) to avoid class-name bloat; reuse existing theme CSS instead of inlining |\n| Mode 2 (prototype/dashboard) | 1 HTML file with JS interactivity | ~6K-12K tokens | Prefer CSS Grid/Flexbox over repetitive div structures; use CSS variables for consistent theming |\n| Mode 3 (animation) | 1 HTML file with Canvas/JS | ~4K-10K tokens | Avoid long keyframe definitions; use JS-driven animation with requestAnimationFrame |\n| URL-to-brand (extract) | 1 small DESIGN.md | ~500-1K tokens | Only extract essential tokens (6 colors, 2 fonts, 3 radii, 2 spacing); skip verbose descriptions |\n| Iteration (edit) | Incremental diff | ~500-2K tokens | Read target file first; output only changed sections; avoid full-file rewrite |\n\n> **Rule**: If token budget for a mode is exceeded, split the output into multiple responses (e.g., generate the CSS file separately from the HTML body).\n\n# Cross-Agent Compatibility\n\n`deck-studio/` is **self-contained**: every file is static HTML + CSS + JS + CDN webfonts. You can use it from any coding agent (Claude Code, Codex, Cursor, etc.) without XDesign.\n\n**From another agent:**\n\n1. Copy or symlink the `deck-studio/` directory into your project:\n   ```bash\n   ln -s ~/.trae/skills/XDesign/deck-studio ./deck-studio-assets\n   ```\n2. Reference assets by relative path in your generated HTML:\n   ```html\n   <link rel=\"stylesheet\" href=\"./deck-studio-assets/assets/base.css\">\n   <link rel=\"stylesheet\" href=\"./deck-studio-assets/assets/themes/tokyo-night.css\">\n   <script src=\"./deck-studio-assets/assets/runtime.js\"></script>\n   ```\n3. Use `deck-studio/templates/full-decks/<name>/index.html` as your starting point — copy and edit.\n\n**Why this works:** No build step, no Node, no bundler. The runtime is vanilla JS toggling `<section class=\"slide\">` visibility. All dependencies are CDN (Google Fonts) or local (themes, animations).\n\n**Limitations:** Without XDesign's routing layer, you lose scenario-based template matching and streaming preview. You pick the template manually. The `README.md` frontmatter in each template still lists `scenario` and `tags` to help you choose.\n\n# Changelog\n\n| Version | Date | Changes |\n|---|---|---|\n| v2.7 | 2026-07 | **Animation Quality System** + **Progressive Intake**: **#1 Animation Reason Checklist** (mandatory for Mode 3): every animation must justify itself with a functional reason. **#2 Animation Frequency Dial**: `ANIMATION_FREQUENCY` in Design Direction Advisor. **#3 Motion Vocabulary**: vague→precise translation table. **#4 Pre-flight Animation Rules (#11-17)**: duration bounds, easing curves, GPU-layer only, touch safety, reduced-motion granularity. **#5 Physical Correctness Defaults**: `kf-zoom` changed from `scale(.6)` to `scale(.96)`. **#6 Reduced-Motion Granularity**: color-only (always) + transform (suppressed). **#7 Progressive Intake Interview**: 3-round max structured questions for vague requests — guides users to provide constraints without forcing design decisions. |\n| v2.6 | 2026-06 | **Anti-Slop Deepening** — inspired by taste-skill methodology research (MIT,理念借鉴/文本原创), added 4 improvements: **#1 Design Preference Layer (P1)**: New section in `mode-2-prototype.md` — deeper bias correction across typography (serif-as-creative-tell, Inter-everywhere), color (premium-consumer farmhouse palette, mid-design drift), layout (centered-hero-over-mesh, equal-card-filler), and motion (purposeless marquee, ambient particles). Each rule has WHY + deliberate alternative. **#2 Three Dials (P2)**: New internal config system in `design-direction-advisor.md` — `DESIGN_VARIANCE / MOTION_INTENSITY / VISUAL_DENSITY` (1-10), inferred from user signals, drives layout/motion/density decisions. Invisible to user, recorded in HTML reasoning block. **#3 Brief Inference 6-Signal (P3)**: Upgraded Phase 1 from 3-question dump to 6-dimension signal scan (page kind / vibe words / references / audience / brand assets / quiet constraints) + one-line \"Design Read\" output. Ask only when genuinely ambiguous. **#4 Pre-flight Check (P4)**: 10-item mechanical checklist in `mode-2-prototype.md` CP4 — color consistency lock, saturation <80%, italic descender clearance, no orphaned placeholders, marquee ≤1, prefers-reduced-motion, mobile hit targets ≥44px, etc. All content originally authored; no external text reproduced. |\n| v2.5 | 2026-06 | **Decision-Support Layer upgrade** — inspired by design methodology research, added 5 new mechanisms: **#1 Design Direction Advisor (P0)**: New `references/design-direction-advisor.md` — when Mode 2/3 receives vague requests with no brand/reference, generates 3 differentiated visual directions (Information-first → Balanced → Concept-led) before committing to full build. Uses existing 36 themes + 58 DESIGN.md as ammunition library. **#2 Brand Asset Protocol (P1)**: New `references/brand-asset-protocol.md` — 5-step hard flow (Ask → Search → Download → Verify → Freeze) for acquiring real brand assets. Two trigger types: designing FOR a brand, and designing WITH identifiable brands. **#3 Anti-AI-Slop Rules (P1)**: Expanded `mode-2-prototype.md` with WHY explanations and legitimate-exception boundaries for each slop pattern. **#4 Image Pre-flight Checkpoint (P2)**: New Phase 1.5 in PPAF loop — content-essential designs must fetch real images before designing, never substitute with CSS blocks. **#5 Fact-Verify Principle #0 (P2)**: WebSearch specific products/technologies before designing — prevents building on wrong assumptions. **#6 Tweaks Template (P3)**: Full HTML/JS implementation template for in-design variation controls with localStorage persistence. **#7 Junior Designer Workflow (P3)**: 4-checkpoint rhythm (Assumptions → Wireframe → First hi-fi → Full) with mandatory HTML reasoning block. All content originally authored; no external text reproduced. |\n| v2.4 | 2026-06 | **#1 Extended Frontmatter**: Added mode/scenario/surface/recommended/tags/example_id to all 15 deck template READMEs. Added Template Matching table and scenario-based fallback to SKILL.md routing. Updated deck count 5→15 in path conventions. **#2 Streaming Preview**: Added two-pass generation for decks >8 slides with partial HTML preview + dismissible banner. **#3 Social Export**: Added `social wechat|xhs|x` subcommands to package-export.sh. WeChat = juice-inlined CSS; XHS/X = 2× retina PNG via Playwright. Updated Tooling table. **#4 Format Auto-Detect**: Added fast path for CSV/JSON/SQL/Markdown-table input. Structured data skips Perception phase and routes directly to Mode 2 data visualization. **#5 Cross-Agent Compatibility**: Documented deck-studio as self-contained static assets usable from any coding agent (Claude Code / Codex / Cursor). Added symlink + path reference guide. |\n| v2.3 | 2026-06 | Synced deck-studio to 36 themes + 15 full-decks from upstream. Added evals for Mode 3 and URL-to-brand. Created automated eval pipeline (`evals/run-evals.sh`). Added Runtime Fallback Strategies & Token Budget Guidelines. Updated all reference docs to match resource counts. |\n\nFile v1.0.4:deck-studio/README.md\n\n# html-ppt — HTML PPT Studio\n\n> A world-class AgentSkill for producing professional HTML presentations in\n> **36 themes**, **15 full-deck templates**, **31 page layouts**,\n> **47 animations** (27 CSS + 20 canvas FX), and a **true presenter mode**\n> with pixel-perfect previews + speaker script + timer — all pure static\n> HTML/CSS/JS, no build step.\n\n**Author:** lewis &lt;sudolewis@gmail.com&gt;\n**License:** MIT\n**中文文档:** [README.zh-CN.md](README.zh-CN.md)\n\n![html-ppt — cover with live previews](docs/readme/hero.gif)\n\n> One command installs **36 themes × 20 canvas FX × 31 layouts × 15 full decks + presenter mode**. Every preview above is a live iframe of a real template file rendering inside the deck — no screenshots, no mock-ups.\n\n## 🎤 Presenter Mode (new!)\n\nPress `S` on any deck to pop open a dedicated presenter window with four\ndraggable, resizable **magnetic cards**: current slide, next slide preview,\nspeaker script (逐字稿), and timer. Two windows stay in sync via\n`BroadcastChannel`.\n\n![Presenter mode with 4 magnetic cards](docs/readme/presenter-mode.png)\n\n**Why previews are pixel-perfect:** each card is an `<iframe>` that loads the\nsame deck HTML with a `?preview=N` query param. The runtime detects this and\nrenders only slide N with no chrome — so the preview uses the **same CSS,\ntheme, fonts and viewport** as the audience view. Colors and layout are\nguaranteed identical.\n\n**Smooth (no-reload) navigation:** on slide change, the presenter window\nsends `postMessage({type:'preview-goto', idx:N})` to each iframe. The iframe\njust toggles `.is-active` between slides — **no reload, no flicker**.\n\n**Speaker script rules (3 golden):**\n1. **Prompt signals, not lines to read** — bold the keywords, separate\n   transition sentences into their own paragraphs\n2. **150–300 words per slide** — that's the ~2–3 min/page pace\n3. **Write it like you speak** — conversational, not written prose\n\nSee [`references/presenter-mode.md`](references/presenter-mode.md) for the\nfull authoring guide, or copy the ready-made template at\n`templates/full-decks/presenter-mode-reveal/` which ships with full 150-300\nword speaker scripts on every slide.\n\n## Install (one command)\n\n```bash\nnpx skills add https://github.com/lewislulu/html-ppt-skill\n```\n\nThat registers the skill with your agent runtime. After install, any agent\nthat supports AgentSkills can author presentations by asking things like:\n\n> \"做一份 8 页的技术分享 slides，用 cyberpunk 主题\"\n> \"turn this outline into a pitch deck\"\n> \"做一个小红书图文，9 张，白底柔和风\"\n\n## What's in the box\n\n| | Count | Where |\n|---|---|---|\n| 🎤 **Presenter mode** | **NEW** | `S` key / `?preview=N` |\n| 🎨 **Themes** | **36** | `assets/themes/*.css` |\n| 📑 **Full-deck templates** | **15** | `templates/full-decks/<name>/` |\n| 🧩 **Single-page layouts** | **31** | `templates/single-page/*.html` |\n| ✨ **CSS animations** | **27** | `assets/animations/animations.css` |\n| 💥 **Canvas FX animations** | **20** | `assets/animations/fx/*.js` |\n| 🖼️ **Showcase decks** | 4 | `templates/*-showcase.html` |\n| 📸 **Verification screenshots** | 56 | `scripts/verify-output/` |\n\n### 36 Themes\n\n`minimal-white`, `editorial-serif`, `soft-pastel`, `sharp-mono`, `arctic-cool`,\n`sunset-warm`, `catppuccin-latte`, `catppuccin-mocha`, `dracula`, `tokyo-night`,\n`nord`, `solarized\n\nArchive v1.0.3: 233 files, 647110 bytes\n\nFiles: assets/design-md/airbnb/DESIGN.md (14051b), assets/design-md/airtable/DESIGN.md (3559b), assets/design-md/apple/DESIGN.md (20418b), assets/design-md/bmw/DESIGN.md (9812b), assets/design-md/cal/DESIGN.md (17801b), assets/design-md/claude/DESIGN.md (20296b), assets/design-md/clay/DESIGN.md (17332b), assets/design-md/clickhouse/DESIGN.md (15394b), assets/design-md/cohere/DESIGN.md (14757b), assets/design-md/coinbase/DESIGN.md (5008b), assets/design-md/composio/DESIGN.md (20914b), assets/design-md/cursor/DESIGN.md (19081b), assets/design-md/elevenlabs/DESIGN.md (15192b), assets/design-md/expo/DESIGN.md (18680b), assets/design-md/ferrari/DESIGN.md (25490b), assets/design-md/figma/DESIGN.md (11617b), assets/design-md/framer/DESIGN.md (17570b), assets/design-md/hashicorp/DESIGN.md (15639b), assets/design-md/ibm/DESIGN.md (19555b), assets/design-md/intercom/DESIGN.md (6421b), assets/design-md/kraken/DESIGN.md (4353b), assets/design-md/lamborghini/DESIGN.md (21122b), assets/design-md/linear.app/DESIGN.md (22449b), assets/design-md/lovable/DESIGN.md (17387b), assets/design-md/minimax/DESIGN.md (14285b), assets/design-md/mintlify/DESIGN.md (17429b), assets/design-md/miro/DESIGN.md (4797b), assets/design-md/mistral.ai/DESIGN.md (15635b), assets/design-md/mongodb/DESIGN.md (15015b), assets/design-md/notion/DESIGN.md (18349b), assets/design-md/nvidia/DESIGN.md (17093b), assets/design-md/ollama/DESIGN.md (15521b), assets/design-md/opencode.ai/DESIGN.md (15529b), assets/design-md/pinterest/DESIGN.md (11921b), assets/design-md/posthog/DESIGN.md (18561b), assets/design-md/raycast/DESIGN.md (18487b), assets/design-md/renault/DESIGN.md (24297b), assets/design-md/replicate/DESIGN.md (14161b), assets/design-md/resend/DESIGN.md (18431b), assets/design-md/revolut/DESIGN.md (8622b), assets/design-md/runwayml/DESIGN.md (14356b), assets/design-md/sanity/DESIGN.md (21234b), assets/design-md/sentry/DESIGN.md (14753b), assets/design-md/spacex/DESIGN.md (11323b), assets/design-md/spotify/DESIGN.md (12958b), assets/design-md/stripe/DESIGN.md (20450b), assets/design-md/supabase/DESIGN.md (14803b), assets/design-md/superhuman/DESIGN.md (18928b), assets/design-md/tesla/DESIGN.md (22215b), assets/design-md/together.ai/DESIGN.md (14287b), assets/design-md/uber/DESIGN.md (18657b), assets/design-md/vercel/DESIGN.md (19457b), assets/design-md/voltagent/DESIGN.md (26323b), assets/design-md/warp/DESIGN.md (16671b), assets/design-md/webflow/DESIGN.md (4122b), assets/design-md/wise/DESIGN.md (8467b), assets/design-md/x.ai/DESIGN.md (16285b), assets/design-md/zapier/DESIGN.md (18743b), deck-studio/assets/animations/animations.css (8065b), deck-studio/assets/animations/fx-runtime.js (3186b), deck-studio/assets/animations/fx/_util.js (1943b), deck-studio/assets/animations/fx/chain-react.js (1430b), deck-studio/assets/animations/fx/confetti-cannon.js (1559b), deck-studio/assets/animations/fx/constellation.js (1337b), deck-studio/assets/animations/fx/counter-explosion.js (2345b), deck-studio/assets/animations/fx/data-stream.js (1525b), deck-studio/assets/animations/fx/firework.js (1681b), deck-studio/assets/animations/fx/galaxy-swirl.js (1047b), deck-studio/assets/animations/fx/gradient-blob.js (1398b), deck-studio/assets/animations/fx/knowledge-graph.js (2492b), deck-studio/assets/animations/fx/letter-explode.js (2067b), deck-studio/assets/animations/fx/magnetic-field.js (1283b), deck-studio/assets/animations/fx/matrix-rain.js (1131b), deck-studio/assets/animations/fx/neural-net.js (2693b), deck-studio/assets/animations/fx/orbit-ring.js (1347b), deck-studio/assets/animations/fx/particle-burst.js (1244b), deck-studio/assets/animations/fx/shockwave.js (1376b), deck-studio/assets/animations/fx/sparkle-trail.js (1937b), deck-studio/assets/animations/fx/starfield.js (990b), deck-studio/assets/animations/fx/typewriter-multi.js (2177b)\n\nArchive v1.0.2: 182 files, 592506 bytes\n\nFiles: assets/design-md/airbnb/DESIGN.md (14051b), assets/design-md/airtable/DESIGN.md (3559b), assets/design-md/apple/DESIGN.md (20418b), assets/design-md/bmw/DESIGN.md (9812b), assets/design-md/cal/DESIGN.md (17801b), assets/design-md/claude/DESIGN.md (20296b), assets/design-md/clay/DESIGN.md (17332b), assets/design-md/clickhouse/DESIGN.md (15394b), assets/design-md/cohere/DESIGN.md (14757b), assets/design-md/coinbase/DESIGN.md (5008b), assets/design-md/composio/DESIGN.md (20914b), assets/design-md/cursor/DESIGN.md (19081b), assets/design-md/elevenlabs/DESIGN.md (15192b), assets/design-md/expo/DESIGN.md (18680b), assets/design-md/ferrari/DESIGN.md (25490b), assets/design-md/figma/DESIGN.md (11617b), assets/design-md/framer/DESIGN.md (17570b), assets/design-md/hashicorp/DESIGN.md (15639b), assets/design-md/ibm/DESIGN.md (19555b), assets/design-md/intercom/DESIGN.md (6421b), assets/design-md/kraken/DESIGN.md (4353b), assets/design-md/lamborghini/DESIGN.md (21122b), assets/design-md/linear.app/DESIGN.md (22449b), assets/design-md/lovable/DESIGN.md (17387b), assets/design-md/minimax/DESIGN.md (14285b), assets/design-md/mintlify/DESIGN.md (17429b), assets/design-md/miro/DESIGN.md (4797b), assets/design-md/mistral.ai/DESIGN.md (15635b), assets/design-md/mongodb/DESIGN.md (15015b), assets/design-md/notion/DESIGN.md (18349b), assets/design-md/nvidia/DESIGN.md (17093b), assets/design-md/ollama/DESIGN.md (15521b), assets/design-md/opencode.ai/DESIGN.md (15529b), assets/design-md/pinterest/DESIGN.md (11921b), assets/design-md/posthog/DESIGN.md (18561b), assets/design-md/raycast/DESIGN.md (18487b), assets/design-md/renault/DESIGN.md (24297b), assets/design-md/replicate/DESIGN.md (14161b), assets/design-md/resend/DESIGN.md (18431b), assets/design-md/revolut/DESIGN.md (8622b), assets/design-md/runwayml/DESIGN.md (14356b), assets/design-md/sanity/DESIGN.md (21234b), assets/design-md/sentry/DESIGN.md (14753b), assets/design-md/spacex/DESIGN.md (11323b), assets/design-md/spotify/DESIGN.md (12958b), assets/design-md/stripe/DESIGN.md (20450b), assets/design-md/supabase/DESIGN.md (14803b), assets/design-md/superhuman/DESIGN.md (18928b), assets/design-md/tesla/DESIGN.md (22215b), assets/design-md/together.ai/DESIGN.md (14287b), assets/design-md/uber/DESIGN.md (18657b), assets/design-md/vercel/DESIGN.md (19457b), assets/design-md/voltagent/DESIGN.md (26323b), assets/design-md/warp/DESIGN.md (16671b), assets/design-md/webflow/DESIGN.md (4122b), assets/design-md/wise/DESIGN.md (8467b), assets/design-md/x.ai/DESIGN.md (16285b), assets/design-md/zapier/DESIGN.md (18743b), deck-studio/assets/animations/animations.css (8065b), deck-studio/assets/animations/fx-runtime.js (3186b), deck-studio/assets/animations/fx/_util.js (1943b), deck-studio/assets/animations/fx/chain-react.js (1430b), deck-studio/assets/animations/fx/confetti-cannon.js (1559b), deck-studio/assets/animations/fx/constellation.js (1337b), deck-studio/assets/animations/fx/counter-explosion.js (2345b), deck-studio/assets/animations/fx/data-stream.js (1525b), deck-studio/assets/animations/fx/firework.js (1681b), deck-studio/assets/animations/fx/galaxy-swirl.js (1047b), deck-studio/assets/animations/fx/gradient-blob.js (1398b), deck-studio/assets/animations/fx/knowledge-graph.js (2492b), deck-studio/assets/animations/fx/letter-explode.js (2067b), deck-studio/assets/animations/fx/magnetic-field.js (1283b), deck-studio/assets/animations/fx/matrix-rain.js (1131b), deck-studio/assets/animations/fx/neural-net.js (2693b), deck-studio/assets/animations/fx/orbit-ring.js (1347b), deck-studio/assets/animations/fx/particle-burst.js (1244b), deck-studio/assets/animations/fx/shockwave.js (1376b), deck-studio/assets/animations/fx/sparkle-trail.js (1937b), deck-studio/assets/animations/fx/starfield.js (990b), deck-studio/assets/animations/fx/typewriter-multi.js (2177b)\n\nArchive v1.0.1: 4 files, 17846 bytes\n\nFiles: references/technical-specs.md (7390b), references/workflow-guide.md (3297b), SKILL.md (22565b), _meta.json (126b)\n\nArchive v1.0.0: 5 files, 17976 bytes\n\nFiles: references/technical-specs.md (7390b), references/workflow-guide.md (3297b), skill-card.md (2334b), SKILL.md (20125b), _meta.json (126b)","readmeExcerpt":"Skill: X Design Owner: qomob Summary: Design Workflow Engine — turn any vague idea into a polished visual deliverable in a single conversation. Use this skill WHENEVER the user wants to create, d... Tags: latest:1.0.5 Version history: v1.0.5 | 2026-07-12T08:14:23.054Z | auto - Removed the file skill-card.md from the skill package. - No changes to functionality or workflow. - Documentation and workflow remain unaffect","codeSnippets":[],"executableExamples":[{"language":"text","snippet":"1. Read deck-studio/SUBMODULE.md (or the Mode 1 section below)\n2. Ask 3 things: content/audience, theme preference, full-deck template vs blank start\n3. Start from deck-studio/templates/full-decks/<name>/ or deck.html\n4. T cycles themes, data-anim drives animations, S opens presenter mode\n5. Output: single self-contained HTML file or multi-file directory"},{"language":"bash","snippet":"# 1. Copy the closest full-deck template (sort by `recommended` in README frontmatter)\ncp -r deck-studio/templates/full-decks/tech-sharing/examples/my-talk/\n\n# 2. Switch the theme (cycle with T in browser, or hardcode)\n#    Edit examples/my-talk/index.html:\n#    <link rel=\"stylesheet\" id=\"theme-link\" href=\"../deck-studio/assets/themes/tokyo-night.css\">\n\n# 3. Replace placeholder text and chart data\n# 4. Open in browser\nopen examples/my-talk/index.html\n\n# 5. (Optional) Render to PNG / PDF / social\ndeck-studio/scripts/render.sh examples/my-talk/index.html 12\n# Or use the bundled helper:\n./scripts/package-export.sh pdf examples/my-talk/index.html\n# Social export (WeChat / XHS / X):\n./scripts/package-export.sh social wechat examples/my-talk/index.html"},{"language":"bash","snippet":"# Export\n./scripts/xdesign export pdf  <input.html> [output.pdf]\n./scripts/xdesign export pptx <input.html> [output.pptx]\n./scripts/xdesign export social wechat|xhs|x <input.html> [output]\n\n# Theme management\n./scripts/xdesign theme list\n./scripts/xdesign theme validate\n\n# Brand scaffolding\n./scripts/xdesign brand add <slug> <display-name> [hex]\n\n# Prototype scaffolding\n./scripts/xdesign proto new <name> [brand-slug]\n\n# Eject (swizzle) a sub-block from a file\n./scripts/xdesign eject <input.html> <block-id> [output.html]\n\n# Lint + package\n./scripts/xdesign lint\n./scripts/xdesign dist [output-dir]"},{"language":"bash","snippet":"ln -s ~/.trae/skills/XDesign/deck-studio ./deck-studio-assets"},{"language":"html","snippet":"<link rel=\"stylesheet\" href=\"./deck-studio-assets/assets/base.css\">\n   <link rel=\"stylesheet\" href=\"./deck-studio-assets/assets/themes/tokyo-night.css\">\n   <script src=\"./deck-studio-assets/assets/runtime.js\"></script>"},{"language":"bash","snippet":"npx skills add https://github.com/lewislulu/html-ppt-skill"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: x-design\ndescription: \"Design Workflow Engine — turn any vague idea into a polished visual deliverable in a single conversation. Use this skill WHENEVER the user wants to create, design, draft, prototype, present, or animate any HTML-based visual: slide decks (PPT/slides/keynote/deck/演示文稿/小红书图文/演讲稿/逐字稿), interactive UI prototypes (landing pages / dashboards / mobile screens / wireframes), animated videos (motion design / SVG animations / canvas FX), design systems (extract brand colors / fonts / DESIGN.md from any URL), or any marketing/portfolio/report visual. Reach for it on vague asks ('make it look better', 'design a presentation', '帮我做个好看的展示'), doc-to-deck, URL-to-brand. Prefer it over hand-rolling HTML, Figma, or generic code tools. Bundled `deck-studio/` provides 36 themes + 15 deck templates + 31 layouts + 47 animations + presenter mode. Exports to PPTX, PDF, self-contained HTML, WeChat (juice-inlined CSS), Xiaohongshu / X (2× retina PNG). Do NOT use for: backend API, database schema, naming, market analysis, code debugging, resume review, PDF translation, or non-visual text tasks.\"\n---\n\n# XDesign — Design Workflow Engine\n\nThis skill exists because turning a vague idea into a polished visual deliverable normally takes 6–10 hours of tool-switching (Figma → PowerPoint → Keynote → After Effects). XDesign compresses that into a single conversation by routing through three intent-driven modes and reusing a bundled library of curated themes, design systems, and animation primitives.---\n\n# Core Principle #0: One System for Humans and Agents\n\nXDesign is built so that **people and AI agents build the same way, from the same reference**. Every routing table, frontmatter schema, fallback strategy, and validation rule in this skill serves both audiences simultaneously.\n\n**The parity promise:** Any change that makes XDesign easier for an agent to use also makes it easier for a human to use — and vice versa. Agent-facing docs (routing tables, fallback matrices) are human-facing docs. There is no separate \"agent-only\" configuration.\n\n**What this means in practice:**\n- The [Intent Router](#intent-router--pick-a-mode-once-then-stay-in-it) is both a machine-parseable dispatch table and a human-readable \"which mode should I pick?\" guide.\n- The [Runtime Fallback Strategies](#runtime-fallback-strategies) table is both an agent's error-recovery protocol and a human's troubleshooting checklist.\n- The [deck-studio](../../deck-studio/) assets are self-contained static files — usable by any agent (Claude Code, Codex, Cursor) without XDesign, and by any human with a browser.\n\n---\n\n## Fact-Verify Before Designing (Core Principle #1)\n\nWhen the request involves a **specific product, technology, company, or public figure** (e.g., \"给大疆 Pocket 5 做发布动画\", \"设计一个 Gemini 4 的 landing page\"), `WebSearch` the entity first before starting any design work. Do not rely on training-data memory for existence, version numbers, release dates, or specs.\n\n**Why:** Building a la"},{"path":"deck-studio/README.md","content":"# html-ppt — HTML PPT Studio\n\n> A world-class AgentSkill for producing professional HTML presentations in\n> **36 themes**, **15 full-deck templates**, **31 page layouts**,\n> **47 animations** (27 CSS + 20 canvas FX), and a **true presenter mode**\n> with pixel-perfect previews + speaker script + timer — all pure static\n> HTML/CSS/JS, no build step.\n\n**Author:** lewis &lt;sudolewis@gmail.com&gt;\n**License:** MIT\n**中文文档:** [README.zh-CN.md](README.zh-CN.md)\n\n![html-ppt — cover with live previews](docs/readme/hero.gif)\n\n> One command installs **36 themes × 20 canvas FX × 31 layouts × 15 full decks + presenter mode**. Every preview above is a live iframe of a real template file rendering inside the deck — no screenshots, no mock-ups.\n\n## 🎤 Presenter Mode (new!)\n\nPress `S` on any deck to pop open a dedicated presenter window with four\ndraggable, resizable **magnetic cards**: current slide, next slide preview,\nspeaker script (逐字稿), and timer. Two windows stay in sync via\n`BroadcastChannel`.\n\n![Presenter mode with 4 magnetic cards](docs/readme/presenter-mode.png)\n\n**Why previews are pixel-perfect:** each card is an `<iframe>` that loads the\nsame deck HTML with a `?preview=N` query param. The runtime detects this and\nrenders only slide N with no chrome — so the preview uses the **same CSS,\ntheme, fonts and viewport** as the audience view. Colors and layout are\nguaranteed identical.\n\n**Smooth (no-reload) navigation:** on slide change, the presenter window\nsends `postMessage({type:'preview-goto', idx:N})` to each iframe. The iframe\njust toggles `.is-active` between slides — **no reload, no flicker**.\n\n**Speaker script rules (3 golden):**\n1. **Prompt signals, not lines to read** — bold the keywords, separate\n   transition sentences into their own paragraphs\n2. **150–300 words per slide** — that's the ~2–3 min/page pace\n3. **Write it like you speak** — conversational, not written prose\n\nSee [`references/presenter-mode.md`](references/presenter-mode.md) for the\nfull authoring guide, or copy the ready-made template at\n`templates/full-decks/presenter-mode-reveal/` which ships with full 150-300\nword speaker scripts on every slide.\n\n## Install (one command)\n\n```bash\nnpx skills add https://github.com/lewislulu/html-ppt-skill\n```\n\nThat registers the skill with your agent runtime. After install, any agent\nthat supports AgentSkills can author presentations by asking things like:\n\n> \"做一份 8 页的技术分享 slides，用 cyberpunk 主题\"\n> \"turn this outline into a pitch deck\"\n> \"做一个小红书图文，9 张，白底柔和风\"\n\n## What's in the box\n\n| | Count | Where |\n|---|---|---|\n| 🎤 **Presenter mode** | **NEW** | `S` key / `?preview=N` |\n| 🎨 **Themes** | **36** | `assets/themes/*.css` |\n| 📑 **Full-deck templates** | **15** | `templates/full-decks/<name>/` |\n| 🧩 **Single-page layouts** | **31** | `templates/single-page/*.html` |\n| ✨ **CSS animations** | **27** | `assets/animations/animations.css` |\n| 💥 **Canvas FX animations** | **20** | `assets/animations/fx/*.js` |\n| 🖼️ **Showcase decks** | 4 | `templat"},{"path":"_meta.json","content":"{\n  \"ownerId\": \"kn72r3ww47r1qyfaf233sf7q1982rh5f\",\n  \"slug\": \"xdesign\",\n  \"version\": \"1.0.5\",\n  \"publishedAt\": 1783844063054\n}"},{"path":"deck-studio/references/animations.md","content":"# Animations catalog\n\nAll animations live in `assets/animations/animations.css`. Apply them by\nadding `class=\"anim-<name>\"` OR `data-anim=\"<name>\"` to any element\n(`runtime.js` re-triggers `data-anim` elements whenever a slide becomes\nactive, so you get the entry effect every time you navigate onto the slide).\n\nOpen `templates/animation-showcase.html` to browse all of them — one slide\nper animation, auto-playing on slide enter. Press **A** on any slide to cycle\na random animation on the current page.\n\n## Directional fades\n\n| name | effect | use for |\n|---|---|---|\n| `fade-up` | Translate from +32 px, fade. | Default for paragraph + card entry. |\n| `fade-down` | Translate from -32 px, fade. | Headers / banners / callouts. |\n| `fade-left` | Translate from -40 px. | Left column in a two-column layout. |\n| `fade-right` | Translate from +40 px. | Right column in a two-column layout. |\n\n## Dramatic entries\n\n| name | effect | use for |\n|---|---|---|\n| `rise-in` | +60 px rise + blur-off. | Slide titles, hero headlines. |\n| `drop-in` | -60 px drop + slight scale. | Banners, alert bars. |\n| `zoom-pop` | Scale 0.6 → 1.04 → 1. | Buttons, stat numbers, CTAs. |\n| `blur-in` | 18 px blur clears. | Cover page reveal. |\n| `glitch-in` | Clip-path steps + jitter. | Tech / cyber / error states. |\n\n## Text effects\n\n| name | effect | use for |\n|---|---|---|\n| `typewriter` | Monospace-like type reveal. | One-liners, slogans. |\n| `neon-glow` | Cyclic text-shadow pulse. | Terminal-green / dracula themes. |\n| `shimmer-sweep` | White sheen passes across. | Metallic buttons, premium cards. |\n| `gradient-flow` | Infinite horizontal gradient slide. | Brand wordmarks. |\n\n## Lists & numbers\n\n| name | effect | use for |\n|---|---|---|\n| `stagger-list` | Children rise-in one-by-one. | Any `<ul>` or `.grid`. |\n| `counter-up` | Number ticks 0 → target. | KPI, stat-highlight pages. |\n\nCounter markup:\n```html\n<span class=\"counter\" data-to=\"1248\">0</span>\n```\n\n## SVG / geometry\n\n| name | effect | use for |\n|---|---|---|\n| `path-draw` | Strokes draw themselves. | Lines, arrows, diagrams. |\n| `morph-shape` | Path `d` morph. | Background shapes. |\n\nPut `class=\"anim-path-draw\"` on `<svg>`; every path/line/circle inside gets drawn.\n\n## 3D & perspective\n\n| name | effect | use for |\n|---|---|---|\n| `parallax-tilt` | Hover → 3D tilt. | Hero cards, product shots. |\n| `card-flip-3d` | Y-axis 90° flip. | Before/after reveal. |\n| `cube-rotate-3d` | Rotate in from a cube side. | Section dividers. |\n| `page-turn-3d` | Left-hinge page turn. | Editorial / story flows. |\n| `perspective-zoom` | Pull from -400 Z. | Cover openings. |\n\n## Ambient / continuous\n\n| name | effect | use for |\n|---|---|---|\n| `marquee-scroll` | Infinite horizontal loop. | Client logo strips. |\n| `kenburns` | 14 s slow zoom on images. | Hero backgrounds. |\n| `confetti-burst` | Pseudo-element sparkle burst. | Thanks / win pages. |\n| `spotlight` | Circular clip-path reveal. | Big reveal moments. |\n| `ripple-reveal` | Corner-origin r"},{"path":"deck-studio/references/authoring-guide.md","content":"# Authoring guide\n\nHow to turn a user request (\"make me a deck about X\") into a finished\nhtml-ppt deck. Follow these steps in order.\n\n## 1. Understand the deck\n\nBefore touching files, clarify:\n\n1. **Audience** — engineers? designers? executives? consumers?\n2. **Length** — 5 min lightning? 20 min share? 45 min talk?\n3. **Language** — Chinese, English, bilingual? (Noto Sans SC is preloaded.)\n4. **Format** — on-screen live, PDF export, 小红书图文?\n5. **Tone** — clinical / playful / editorial / cyber?\n\nThe audience + tone map to a theme; the length maps to slide count; the\nformat maps to runtime features (live → notes + T-cycle; PDF → page-break\nCSS, already handled in `base.css`).\n\n## 2. Pick a theme\n\nUse `references/themes.md`. When in doubt:\n\n- **Engineers** → `catppuccin-mocha` / `tokyo-night` / `dracula`.\n- **Designers / product** → `editorial-serif` / `aurora` / `soft-pastel`.\n- **Execs** → `minimal-white` / `arctic-cool` / `swiss-grid`.\n- **Consumers** → `xiaohongshu-white` / `sunset-warm` / `soft-pastel`.\n- **Cyber / CLI / infra** → `terminal-green` / `blueprint` / `gruvbox-dark`.\n- **Pitch / bold** → `neo-brutalism` / `sharp-mono` / `bauhaus`.\n- **Launch / product reveal** → `glassmorphism` / `aurora`.\n\nWire the theme as `<link id=\"theme-link\" href=\"../assets/themes/NAME.css\">`\nand list 3-5 alternatives in `data-themes` so the user can press T to audition.\n\n## 3. Outline the deck\n\nA solid 20-minute deck is usually:\n\n```\ncover → toc → section-divider #1 → [2-4 body pages] →\nsection-divider #2 → [2-4 body pages] → section-divider #3 →\n[2-4 body pages] → cta → thanks\n```\n\nPick 1 layout per page from `references/layouts.md`. Don't repeat the same\nlayout twice in a row.\n\n## 4. Scaffold the deck\n\n```bash\n./scripts/new-deck.sh my-talk\n```\n\nThis copies `templates/deck.html` into `examples/my-talk/index.html` with\npaths rewritten. Add/remove `<section class=\"slide\">` blocks to match your\noutline.\n\n## 5. Author each slide\n\nFor each outline item:\n\n1. Open the matching single-page layout, e.g. `templates/single-page/kpi-grid.html`.\n2. Copy the `<section class=\"slide\">…</section>` block.\n3. Paste into your deck.\n4. Replace demo data with real data. Keep the class structure intact.\n5. Set `data-title=\"...\"` (used by the Overview grid).\n6. Add `<div class=\"notes\">…</div>` with speaker notes.\n\n## 6. Add animations sparingly\n\nRules of thumb:\n\n- Cover/title: `rise-in` or `blur-in`.\n- Body content: `fade-up` for the hero element, `stagger-list` for grids/lists.\n- Stat pages: `counter-up`.\n- Section dividers: `perspective-zoom` or `cube-rotate-3d`.\n- Closer: `confetti-burst` on the \"Thanks\" text.\n\nPick **one** accent animation per slide. Everything else should be calm.\n\n## 7. Chinese + English decks\n\n- Fonts are already imported in `fonts.css` (Noto Sans SC + Noto Serif SC).\n- Use `lang=\"zh-CN\"` on `<html>`.\n- For bilingual titles, stack lines: `<h1 class=\"h1\">主标题<br><span class=\"dim\">English subtitle</span></h1>`.\n- Keep English subtitles in a lighter weight (300) "}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"Design Workflow Engine — turn any vague idea into a polished visual deliverable in a single conversation. Use this skill WHENEVER the user wants to create, d... Skill: X Design Owner: qomob Summary: Design Workflow Engine — turn any vague idea into a polished visual deliverable in a single conversation. Use this skill WHENEVER the user wants to create, d... Tags: latest:1.0.5 Version history: v1.0.5 | 2026-07-12T08:14:23.054Z | auto - Removed the file skill-card.md from the skill package. - No changes to functionality or workflow. - Documentation and workflow remain unaffect","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":2395,"uniquenessScore":49,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-10T10:00:59.665Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-10T10:00:59.665Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-10T13:32:00.612Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}