```
Remove: `bg-white`, `bg-[#xxx]`, `bg-slate-*`, `bg-gradient-to-*`, etc. **CRITICAL: Never use gradient colors for background or text.**
### 7.4 Fill Content
**Content Adaptation:**
| Situation | Strategy |
|-----------|----------|
| Content items > template slots | Condense: merge similar points, max 6 items |
| Content items < template slots | Remove unused template elements entirely |
| Text too long for slot | Rewrite concisely, keep core message |
**Text Length Limits:**
| Element | CN | EN |
|---------|----|----|
| Title | ≤12 | ≤25 |
| Subtitle | ≤18 | ≤35 |
| Card Title | ≤10 | ≤20 |
| Body Line | ≤25 | ≤50 |
**Font Size Specs:** H1: 38-42px, H2: 30-32px, H3: 20-22px, Body: 16-18px, Annotation: 12-14px
**Handle Placeholder Images (CRITICAL):**
| Situation | Action |
|-----------|--------|
| Chapter has assigned image | Replace `src` with path from `images-mapping.json`, set explicit `width`/`height` |
| Chapter has NO image assigned | **DELETE the entire `![]()
` element and its empty container** |
```html
```
**⚠️ NEVER leave placeholder images** - they show as broken images!
### 7.5 Content Overflow Prevention
**Page Constraints**: Content area is `1350px × 720px`.
**Before writing, check and fix in priority order:**
| Priority | Check | Fix Strategy |
|----------|-------|--------------|
| 1 | Total items > 6 | Reduce to max 6 items |
| 2 | Text line > limit | Truncate/rewrite to fit char limits |
| 3 | Vertical stack too tall | Reduce `gap-*`/`space-y-*` (e.g., `gap-6`→`gap-3`) |
| 4 | Still too tall | Reduce font sizes by 1 level (e.g., `text-2xl`→`text-xl`) |
| 5 | Images too large | Set explicit `max-w-[Xpx] max-h-[Ypx]` |
| 6 | Cards overflow | Reduce `p-*` padding (e.g., `p-6`→`p-4`) |
**Quick Estimation**: Text line ≈ 24-32px, Card with title + 3 lines ≈ 120-150px, Gap ≈ 16-24px
### 7.6 Write Slide File
Write to `${WORKSPACE_DIR}/frontend/src/slides/slide-{N}.js`:
```javascript
window.slideDataMap.set({N}, `
`);
```
> `N` is integer (not string). Framework auto-loads via `window.slideDataMap`.
### 7.7 After All Slides Generated
Proceed directly to Phase 8. No manual wiring needed.
---
## **Phase 8**: Take PPT Screenshots
**⚠️ Phase 8 is the ONLY legitimate next step after Phase 7 completes. It MUST be executed immediately - DO NOT skip or delay!**
### 8.1 Take Screenshots
CRITICAL: The service is already running on port 5173 by default, no need to start it again.
**Execute the following command immediately (no user confirmation needed):**
```bash
python3 "${CORE_DIR}/skills/ppt-implement/scripts/screenshot-ppt.py" --url http://localhost:5173 --output ${WORKSPACE_DIR}/frontend/public/assets/images/posters/pages
```
### 8.2 Update poster Field in ${WORKSPACE_DIR}/docs/pages.json
**After screenshots are complete, immediately update the poster field (no user confirmation needed):**
```
"poster": "/assets/images/posters/pages/page-{N}.png",
```
Example:
```json
[
{
"pageKey": "ppt-1",
"title": "",
"url": "/index.html?page=1",
"poster": "/assets/images/posters/pages/page-1.png",
"pageNum": 1
}
]
```
---
## Phase 9: Final Output
**⚠️ Output ONLY the following 3 lines, say nothing more:**
```
"{PPT_TOPIC}" PPT generation complete.
"presentation.pptx" generated.
Usage: Press ← → to navigate pages, press Space for next page
```
**🚫 NEVER output the following:**
- ❌ Tables (any form of tables)
- ❌ Page number lists
- ❌ File paths
- ❌ "Summary" / "总结"
- ❌ "All N pages completed"
- ❌ "Files generated to..."
- ❌ Any validation statements
---
## Phase 10: Handling User Modifications
**⚠️ This phase is ONLY triggered when users request modifications after initial PPT generation is complete.**
- First-time generation: Phase 1 → Phase 8, then STOP
- User requests changes: Enter Phase 9
### Understanding Slide File Structure
Each PPT page is stored in `${WORKSPACE_DIR}/frontend/src/slides/slide-N.js`, which registers HTML content to a global Map:
```javascript
// slide-N.js structure
window.slideDataMap.set(N, `
`);
```
The `ppt-controller.js` reads from `slideDataMap` and renders pages dynamically. **Therefore, modifying page content requires editing `slide-N.js` files.**
When users request modifications, determine which files need to be changed based on the scope of modification:
### 10.1 Modification Scope Identification
| Modification Type | Example | Files to Modify | Notes |
|-------------------|---------|-----------------|-------|
| **Single Page Content** | "Change the title of page 3 to..." | `chapters.md` → `slide-3.js` | Content only, no template change |
| **Add/Delete Pages** | "Add a page after page 5" | `chapters.md` → Create/delete `slide-N.js` | New pages need template selection |
| **Single Page Template** | "Change layout of page 4" | `chapters.md`(update Selected Template) → Regenerate `slide-4.js` | Switch template within same style |
| **Image Replacement** | "Replace the image on page 6" | `images-mapping.json` → `images/` directory → Update path in `slide-6.js` | May need to regenerate images |
| **Overall Style** | "Change to Chinese style" | See detailed flow below | **Largest impact scope** |
### 10.2 Overall Style Modification Flow
When users request a style change (e.g., "change to Chinese style", "make it more tech-looking"), modify the following files in order:
| Step | File | Changes |
|------|------|---------|
| 1 | `${WORKSPACE_DIR}/docs/page-global-config.json` | Update `slideStyle`, color scheme, font scheme |
| 2 | `${WORKSPACE_DIR}/frontend/index.html` | Update CSS variables (colors, font import links) |
| 3 | `${WORKSPACE_DIR}/docs/product/chapters.md` | **Re-select templates for ALL pages** (Phase 6 Template Planning) |
| 4 | `${WORKSPACE_DIR}/frontend/src/slides/slide-*.js` | **Regenerate ALL slide files** (Phase 7 Parallel Generation) |
| 5 | `${WORKSPACE_DIR}/frontend/public/assets/images/` | May need to regenerate some images to match new style |
**⚠️ Important Notes**:
- Style modification = Full redo of Phase 2 ~ Phase 7
- Templates are organized by style (e.g., `cover/chinese/`, `cover/business/`), changing style requires re-selecting all templates
- Transition page templates must be globally consistent, need to re-specify after style change
### 10.3 Modification Flow Summary
```
User requests modification
│
▼
┌─────────────────────┐
│ Identify scope │
└──────────┬──────────┘
│
┌──────┴──────┬────────────┬────────────┐
▼ ▼ ▼ ▼
Single Page Single Page Add/Delete Overall
Content Template Pages Style
│ │ │ │
▼ ▼ ▼ ▼
Update Update Update Update
chapters chapters chapters config
│ │ │ │
▼ ▼ ▼ ▼
Regenerate Regenerate Create/Del Re-select
slide-N.js slide-N.js slide-N.js all templates
│
▼
Regenerate
ALL slide-*.js
```
## Export PPTX File
When user requests to export a PPTX file, run the following command:
```
node \"${CORE_DIR}/skills/ppt-implement/scripts/export-ppt.js\" \"${CORE_DIR}\" \"${WORKSPACE_DIR}\" > /dev/null 2>&1
```