ppt-implement

name ppt-implement description implement ppt(powerpoint) project with best practices, start's with "ppt" template. Trigger keywords include "web ppt", "网页ppt", "html ppt", "生成ppt", "制作ppt", "制作教案", "write a ppt about", or any request to create presentations on specific topics. ⚠️ 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 # 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 : Phase 1 : Material Collection (Data Gathering, Chapter Planning) - This Skill Phase 2 : Style Definition (Main Visual System) - This Skill Phase 3 : Generate Page Images - This Skill Phase 4 : Generate PPT Outline - This Skill Phase 5 : Environment Setup - This Skill Phase 6 : Template Planning (Select templates for each page) - This Skill Phase 7 : Parallel PPT Generation (Batch invoke sub-agents) - This Skill orchestrates, Sub-agents execute Phase 8 : Take PPT Screenshots - This Skill Phase 9 : Output PPT Usage Instructions - This Skill 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 Overview - Definition, significance Background - History, milestones, current status Key Info - Facts, data, expert views Evidence - Cases, research, visual refs Analysis - Multiple perspectives, comparisons Outlook - Trends, recommendations Step 3: Output Format ( ${WORKSPACE_DIR}/docs/product/material.md ) # 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 : ## 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');