ppt-implement

## ⚠️ CRITICAL: DO NOT Explore Project Structure ``` . ├── docs │   ├── product │   └── project.json └── frontend ├── 404.html ├── index.html ├── package.json ├── postcss.config.js ├── public │   └── assets │   └── images ├── scripts │   └── build-slides.js ├── src │   ├── js │   │   ├── ppt-controller.js # PPT controller, DO NOT modify │   │   └── route-handler.js # Route handler, DO NOT modify │   ├── main.js # Entry file, DO NOT modify │   ├── slides # PPT slides, stores slide-N.js files, no manual loading needed - framework auto-loads them │   └── styles │   └── main.css ├── tailwind.config.js ├── vite.config.js └── yarn.lock ``` **The project framework is pre-configured and ready to use. No analysis required.** - ❌ **DO NOT** use code-explorer subagent to analyze the project - ❌ **DO NOT** use search_file / search_content / list_dir to explore directory structure - ❌ **DO NOT** read package.json, vite.config, or other config files to "understand the project" - ❌ **DO NOT** spend time figuring out "how the project works" - ✅ **START** directly from Phase 1 (Material Collection) - ✅ **FOLLOW** the workflow strictly: Phase 1 → Phase 9 - ✅ **ONLY READ** files explicitly specified in each phase > Reason: The project structure is standardized. All necessary paths and configurations are documented in the phases below. Any exploration is a waste of time. ## Path Variables Path variables used in this document: - `CORE_DIR`: Project core directory, i.e. `${CODEBUDDY_PLUGIN_ROOT}` - `WORKSPACE_DIR`: Project root directory, i.e. `${CODEBUDDY_PROJECT_DIR}` ## General Principles ### Key Commands ```bash # Debugging python3 "${$WORKSPACE_DIR}/.genie/scripts/python/fetch_monitor_errors.py" ``` ### Launch Configuration `.cloudstudio` file defines startup - DO NOT modify. Always use unified process script. ## Development Server Guidelines - **DO NOT** automatically start the development server (e.g., `npm run dev`, `vite`, etc.) after completing tasks - **DO NOT** output localhost addresses to the user (e.g., `http://localhost:5173/`) --- ## PPT Creation Workflow ### Process Overview **Complete Workflow**: 1. **Phase 1**: Material Collection (Data Gathering, Chapter Planning) - **This Skill** 2. **Phase 2**: Style Definition (Main Visual System) - **This Skill** 3. **Phase 3**: Generate Page Images - **This Skill** 4. **Phase 4**: Generate PPT Outline - **This Skill** 5. **Phase 5**: Environment Setup - **This Skill** 6. **Phase 6**: Template Planning (Select templates for each page) - **This Skill** 7. **Phase 7**: Parallel PPT Generation (Batch invoke sub-agents) - **This Skill orchestrates, Sub-agents execute** 8. **Phase 8**: Take PPT Screenshots - **This Skill** 8. **Phase 9**: Output PPT Usage Instructions - **This Skill** 9. **Phase 10**: Handling User Modifications - **Only triggered when user requests changes** **⚠️ Key Principles**: - **Phase 1-9**: First-time generation flow, execute sequentially then STOP - **Phase 10**: Only triggered when user requests modifications after initial generation - **Phase 7: Skill orchestrates parallel sub-agent calls, each sub-agent generates ONE page** - **Sub-agent only handles single page HTML generation (content filling)** - **🚫 NO USER INTERACTION**: Execute ALL phases autonomously without asking user for confirmation, clarification, or approval. Make reasonable decisions based on context. --- ## Phase 1: Material Collection ### 1.1 Data Gathering **Goal**: Search and collect materials for PPT theme, output to `${WORKSPACE_DIR}/docs/product/material.md`. **Step 1: Generate Search Queries (8-12 queries, parallel execution)** | Layer | Query Pattern | Example | |-------|--------------|---------| | Foundation | `[Theme] definition/overview` | "AI ethics overview" | | Context | `[Theme] history/background` | "AI ethics development" | | Evidence | `[Theme] statistics/research 2024` | "AI ethics research 2024" | | Application | `[Theme] case study/examples` | "AI ethics real cases" | | Trends | `[Theme] trends/future` | "AI ethics future challenges" | > Tips: Add year (2024/2025) for time-sensitive topics; mix CN/EN queries when needed. **Step 2: Extract & Organize into 6 Dimensions** 1. **Overview** - Definition, significance 2. **Background** - History, milestones, current status 3. **Key Info** - Facts, data, expert views 4. **Evidence** - Cases, research, visual refs 5. **Analysis** - Multiple perspectives, comparisons 6. **Outlook** - Trends, recommendations **Step 3: Output Format** (`${WORKSPACE_DIR}/docs/product/material.md`) ```markdown # Material: [Theme] ## 1. Overview - [Point] ## 2. Background - [Point] ## 3. Key Info - [Point] ## 4. Evidence - Case: [Name] - [Desc] (Has Images: Yes/No) ## 5. Analysis - [Viewpoint] ## 6. Outlook - [Trend] ## Summary - High-authority: [N], Gaps: [List or None] ``` **Quality Rules**: Prioritize academic/official sources; exclude unverified/outdated (>5yr) content; ensure ≥3 high-authority sources and ≥5 different domains. ### 1.2 Chapter Planning (Pyramid Principle) **Page Count**: Default `14-20` pages when unspecified. Single chapter: 1-5 pages. **Core Principle**: Apply **Pyramid Principle** — structure content with clear hierarchy, each level supporting the one above. **Step 1: Identify PPT Type → Select Pyramid Structure** | PPT Type | Pyramid Structure | Chapter Flow | |----------|-------------------|--------------| | **Report/Summary** | Classic (Conclusion First) | Result → Evidence → Details → Next Steps | | **Product/Sales** | Problem-Solution | Pain Point → Solution → Value → Proof → CTA | | **Training/Education** | Progressive (Shallow→Deep) | Basics → Core → Advanced → Practice | | **Pitch/Fundraising** | SCQA Story | Situation → Complication → Question → Answer | | **Event/Promo** | Emotional | Hook → Resonance → Climax → Action | **Step 2: Build Chapter Hierarchy** ``` [PPT Core Message] ← Answer: What's the ONE takeaway? ├── [Chapter 1: Sub-conclusion] ← Support core message │ ├── Page: Evidence/Data │ └── Page: Example/Case ├── [Chapter 2: Sub-conclusion] │ ├── Page: Evidence/Data │ └── Page: Example/Case └── [Chapter 3: Sub-conclusion] └── ... ``` **Step 3: Validate Structure (MECE Check)** - **Mutually Exclusive**: No overlap between chapters - **Collectively Exhaustive**: Chapters fully support the core message - **Logical Order**: Time sequence / Importance / Structure Based on collected materials (`${WORKSPACE_DIR}/docs/product/material.md`), output chapter structure to `${WORKSPACE_DIR}/docs/product/chapters.md`. **Chapter Planning Format**: ```markdown ## Page N: Page Name - **Page Type**: Cover/TOC/Transition/Content/Ending - **Page Title**: XXX (recommended within 15 characters, can add subtitle: XXX) - **Selected Template**: (Leave blank, to be filled during Phase 6 Template Planning) - **Content Structure**: (Choose appropriate structure based on page purpose) > **IMPORTANT - Content Richness Requirements**: > - Each main point MUST have 2-3 sentences of detailed explanation > - Each page MUST contain at least 3-5 specific data points (numbers, percentages, years) > - Each page body content should be 100-200 words minimum > - Include supporting details: comparisons, context **Content Structure by Page Type** (select appropriate structure): | Page Type | Core Elements | |-----------|---------------| | **Argument** | Core Argument + 3-4 Evidence (Data/Case/Quote) + Key Insight | | **Data** | Data Headline + 4-6 Metrics (Number\|Label\|Context) + Data Story | | **Process** | Goal + 4-6 Steps (Action→Output→Duration) + Success Metrics | | **Case Study** | Header (Company/Timeline/Scale) + Challenge + Solution + Results (Before→After) + Lessons | | **Comparison** | Framework + Options A/B/C (Dimensions + Best For + Limits) + Recommendation | | **Concept** | Definition (Simple/Technical) + 3-5 Components + Applications + Misconceptions | | **Problem/Solution** | Problem (Scope/Urgency) + Impacts + Root Causes + Solutions (Approach/Benefit/Risk) | | **Trend** | Baseline + 3-5 Trends (Desc/Evidence/Drivers/Timeline) + Projections + Actions | | **Summary** | Executive Summary + 4-6 Takeaways + Key Numbers + Call to Action | > **Universal Requirements**: Each page needs 100-200 words body content, 3-5 specific data points. - **Content Density**: Light (≤3 main points) / Medium (4-6 points) / Heavy (7+ points or complex data) - **Narrative Role**: [How this page advances the overall story] (e.g., "Establishes credibility with data", "Introduces key challenge", "Provides solution framework") - **Image Requirements**: **Image Requirements Planning Principles**: - **Default to No Images**: Unless images are truly necessary, use text layout. **Control the overall proportion of pages with images to no more than 40% of total pages** (e.g., 10-page PPT with images on no more than 4 pages). - **Strict Evaluation Criteria** (Must meet at least one): 1. **Complexity**: Information has inherent complexity (spatial/temporal/relational) that text cannot efficiently express 2. **Visual Priority**: Visual form is the primary information carrier (e.g., network relationships, geographic distribution) 3. **Efficiency Gain**: Images can significantly reduce cognitive load (e.g., trend comparisons, structural hierarchies) 4. **Scenario Necessity**: Specific scenarios inherently require images (e.g., character introductions, visual effects demonstrations) - **Decision Framework** (Apply to any scenario): - **ASK**: Can text + layout clearly convey this? → If YES, do not use images - **ASK**: Is information complexity high (≥4 elements/dimensions/steps)? → If NO, prioritize text - **ASK**: Does visual form have unique advantages? → If NO, use text/cards - **Reference Examples** (Not exhaustive, apply evaluation criteria flexibly): - ✅ **Should Use Images**: - Complex spatial: Multi-location maps, architectural layouts - Multi-step processes: ≥4-node timelines, multi-branch flowcharts - Network relationships: ≥5-node ecosystem diagrams, dependency graphs - Data trends: Multi-dimensional curves, complex comparative charts - Character/roles: Avatars, portraits (when identity is key information) - ❌ **Should Not Use Images**: - Pure viewpoint exposition: Use lists, card layouts - Simple enumeration (≤3 items): Text layout is clearer - Concept definitions: Text + color/bold more direct - Simple data (≤3 data points): Data cards suffice - Short processes (≤3 steps): Text arrows more concise - Cover/TOC/ending: Text primary, images only decorative - **Flexibility Note**: Above examples are references, not exhaustive lists. Apply evaluation criteria based on actual content to decide if images are needed. - **Page Weight**: Core page/Secondary page/Transition page (clarify page importance; core pages can allocate more design effort, e.g., key/difficult content pages in teaching set as core pages) - **Content Page Selection Rationale**: (Required only for content pages, case pages, practical pages) Briefly explain page value (e.g., connecting previous chapter's classical Chinese knowledge points, breaking down lesson's key/difficult points, paving the way for subsequent interactive exercises; or concretizing modern application of Chinese elements through this case to enhance persuasiveness) - **Notes**: (Optional, supplement special requirements) e.g., Page needs animation effects (text appears line by line); Reserve QR code position (linking to extended materials); Educational scenarios need to add mini-question (e.g., "What do you think is the beauty of the character 'green'?") ``` **Page Type Descriptions**: - **Cover Page**: PPT opening, contains main title, subtitle, presenter information - **TOC Page**: Chapter navigation, lists all chapter names - **Transition Page**: Chapter transitions, indicates current chapter name - **Content Page**: Main content, contains text, images, charts, etc. - **Ending Page**: PPT closing, contains thank you message, contact information, etc. --- ## Phase 2: Style Definition ### 2.1 Determine PPT Style Based on the user's input prompt, determine the PPT style and record the confirmed result in ${SlideStyle}. Currently supported styles include: - Minimalist - Chinese - Educational - Business - Geometric - Literary - Black-Gold - Cartoon - Tech - Flat ### 2.2 Main Visual System #### Font Planning **Font Selection Principles**: - Entire PPT should not exceed **2-3 font types** (title + body + decorative optional) - For mixed Chinese-English text, choose fonts that support both languages - Prioritize Web-safe fonts or Google Fonts (for cross-platform display) **Font Style Matching**: Choose fonts that match PPT tone - sans-serif (Noto Sans SC, Roboto, Inter, Montserrat) for modern/tech/business themes; serif (Noto Serif SC, Playfair Display) for traditional/premium/cultural themes; creative/handwritten fonts (Ma Shan Zheng, ZCOOL KuaiLe) for artistic/brand themes. Use Google Fonts for cross-platform compatibility. **Common Google Fonts Quick Reference**: | Font Name | Type | Features | CDN Import | |---------|------|------|---------| | Ma Shan Zhen | Chinese Creative | Handwritten style, highly personalized | `@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap');` |