[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-83829":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":9,"languages":9,"totalLinesOfCode":9,"stars":10,"forks":11,"watchers":12,"openIssues":12,"contributorsCount":13,"subscribersCount":13,"size":13,"stars1d":14,"stars7d":15,"stars30d":15,"stars90d":13,"forks30d":13,"starsTrendScore":16,"compositeScore":17,"rankGlobal":9,"rankLanguage":9,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":19,"hasPages":19,"topics":21,"createdAt":9,"pushedAt":9,"updatedAt":27,"readmeContent":28,"aiSummary":9,"trendingCount":13,"starSnapshotCount":13,"syncStatus":29,"lastSyncTime":30,"discoverSource":31},83829,"slide-image-to-editable-pptx","w1163222589-coder\u002Fslide-image-to-editable-pptx","w1163222589-coder","A Codex skill for converting slide screenshots into editable PowerPoint decks.",null,131,7,1,0,5,22,25,2.71,"MIT License",false,"main",[22,23,24,25,26],"codex-skill","editable-pptx","powerpoint","pptx","slides","2026-06-12 02:04:35","\u003Cdiv align=\"center\">\n\n# Slide Image → Editable PPTX\n\n### High-Fidelity Conversion of Slide Screenshots into Editable PowerPoint\n\n[![Skill](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Ftype-Codex%20Skill-blue.svg)](https:\u002F\u002Fdevelopers.openai.com\u002Fcodex\u002Fskills)\n[![Platform](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fplatform-Codex%20%7C%20Claude%20Code-lightgrey.svg)](#compatibility)\n[![License](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-green.svg)](LICENSE)\n[![PptxGenJS](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fbuilt%20with-PptxGenJS-orange.svg)](https:\u002F\u002Fgithub.com\u002Fgitbrent\u002FPptxGenJS)\n\n**Turn slide screenshots into pixel-accurate, fully editable PowerPoint files.**\n\nText stays editable. Complex visuals become clean AI-generated PNGs. Simple shapes become native PPT objects.\n\nEnglish | [中文](README_ZH.md)\n\n\u003C\u002Fdiv>\n\n---\n\n## The Problem\n\nYou have a set of PPT slide images (screenshots, exported PNGs, or AI-generated mockups) and you want them back as an **editable** `.pptx` file — not a deck of full-slide screenshots pasted as backgrounds.\n\nExisting approaches fail in predictable ways:\n\n| Approach | Result |\n|----------|--------|\n| Paste screenshots as backgrounds | Zero editability |\n| Ask AI to \"recreate\" the PPT | Gets the topic right but layout wrong — a new template, not a reconstruction |\n| Manual recreation | Hours of tedious work per slide |\n\n## The Solution\n\nThis skill teaches Codex (or any compatible AI coding agent) to **decompose each slide image into three layers**, then rebuild them as a real PowerPoint file:\n\n| Layer | Contains | Implementation | Editable? |\n|-------|----------|----------------|-----------|\n| **A — Visual Assets** | Complex illustrations, photos, scientific figures, icons, decorative backgrounds | AI-generated PNG (`$imagegen`) — no text baked in | Replaceable |\n| **B — Structure** | Rectangles, cards, panels, lines, arrows, dividers, badges | Native PPT shapes | Fully editable |\n| **C — Content** | All readable text: titles, labels, body text, page numbers, captions | Native PPT text boxes | Fully editable |\n\n## How It Works\n\nThe skill runs in three phases, each in its own context window for maximum quality:\n\n```\n┌──────────────────┐     ┌──────────────────┐     ┌──────────────────┐\n│   Phase 1        │     │   Phase 2        │     │   Phase 3        │\n│                  │     │                  │     │                  │\n│  Pixel-Level     │────▶│  Visual Asset    │────▶│  PPT Assembly    │\n│  Analysis        │     │  Generation      │     │  & Validation    │\n│                  │     │                  │     │                  │\n│  • Inspect each  │     │  • Generate PNG  │     │  • Build PPTX    │\n│    slide image   │     │    for each      │     │    with native   │\n│  • Classify      │     │    Layer A       │     │    shapes & text │\n│    every element │     │    element       │     │  • Render &      │\n│  • Map positions │     │  • No text in    │     │    compare with  │\n│    & layers      │     │    any image     │     │    source        │\n│  • Self-check    │     │  • Verify each   │     │  • 5 slides per  │\n│    for missed    │     │    asset         │     │    batch         │\n│    elements      │     │                  │     │                  │\n└──────────────────┘     └──────────────────┘     └──────────────────┘\n```\n\n### Classification Logic\n\nThis classification step is the heart of the reconstruction process: each visible element is assigned to visual assets, native PPT structure, or editable text before the deck is rebuilt.\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"assets\u002Fscreenshots\u002F10.jpg?v=20260607-1302\" alt=\"Classification logic preview\" width=\"680\">\n\u003C\u002Fp>\n\n### Phase 1: Pixel-Level Analysis\n\nThe agent inspects each source image and catalogs every visible element with its type, position (bounding box), layer classification, and implementation method. A **completeness self-check** (Step 1.4) ensures small icons, in-card illustrations, and decorative details are not missed.\n\n**Output**: `_analysis.md` — a structured element inventory for all slides.\n\n### Phase 2: Visual Asset Generation\n\nFor each Layer A element, the agent generates a clean PNG using `$imagegen` with precise prompts that specify content, style, colors, aspect ratio, and transparency — and always end with **\"No text, no labels, no numbers.\"**\n\n**Output**: `assets\u002F` folder with all generated PNGs + `_phase2_assets.md` report.\n\nThe image below shows Phase 2 in practice: the agent turns identified Layer A elements into clean visual assets before the final PowerPoint assembly.\n\n![Phase 2 visual asset workflow](assets\u002Fscreenshots\u002F8和9合在一起.jpg)\n\n### Phase 3: PPT Assembly\n\nThe agent builds the PPTX using `@presentations` (PptxGenJS), stacking elements in correct z-order: background → visual assets → structural shapes → text boxes → brand elements. Slides are built in batches of 5 with rendering and self-validation after each batch.\n\n**Output**: Final `.pptx` file + rendered previews + `validation_report.md`.\n\n## Quick Start\n\n### Installation\n\nCopy the skill folder into your Codex skills directory:\n\n```bash\n# Clone or download\ngit clone https:\u002F\u002Fgithub.com\u002FYOUR_USERNAME\u002Fslide-image-to-editable-pptx.git\n\n# Copy to Codex skills directory\ncp -r slide-image-to-editable-pptx ~\u002F.codex\u002Fskills\u002F\n```\n\nOr install via CC Switch: Skills panel → Add from GitHub → paste the repo URL.\n\n### Usage\n\n**Recommended: 3-prompt workflow** (best quality, each phase gets full context window)\n\n**Prompt 1** — Analysis:\n```\nPlease use the $slide-image-to-editable-pptx skill to convert the slide images \nin this folder into an editable PPTX. Visual fidelity must match the source images. \nAll text must be editable. Complex visuals use $imagegen to generate clean PNGs. \nStrictly follow Phase 1 first — complete the analysis including Step 1.4 \ncompleteness self-check (ensure no small icons, in-card illustrations, or \ndecorative details are missed). Output the full element inventory for my review \nbefore proceeding to Phase 2.\n```\n\n**Prompt 2** — Asset Generation:\n```\nProceed to Phase 2. Output the asset report for my review. \nDo not proceed to Phase 3 until I confirm.\n```\n\n**Prompt 3** — PPT Assembly:\n```\nProceed to Phase 3. Use @presentations to build the PPTX. \nThe PNG assets in assets\u002F are ready. Follow the element inventory in _analysis.md \nto reconstruct each slide — match the source images' exact positions, sizes, \nand element density. Build slides 1-5 first, render screenshots for my review, \nthen continue with 6-10, 11-15, etc.\n```\n\n### File Structure\n\n```\nyour-project\u002F\n├── source_slides\u002F           # Your input slide images\n│   ├── slide_01.png\n│   ├── slide_02.png\n│   └── ...\n├── assets\u002F                  # Generated PNG visual assets (Phase 2 output)\n├── output\u002F                  # Final PPTX (Phase 3 output)\n├── _analysis.md             # Element inventory (Phase 1 output)\n├── _phase2_assets.md        # Asset generation report (Phase 2 output)\n└── validation_report.md     # Quality report (Phase 4 output)\n```\n\n## Key Design Decisions\n\n### Why Three Separate Phases?\n\nAI coding agents have limited context windows (~200K tokens). Running all phases in one shot means each phase gets only a fraction of the available context. Splitting into three phases ensures:\n\n- **Phase 1** uses full context for thorough analysis\n- **Phase 2** uses full context for high-quality image generation\n- **Phase 3** uses full context for precise PPT code\n\n### Why Not Just Use Full-Slide Screenshots?\n\nFull-slide screenshots give you zero editability. The whole point is to make text editable and shapes adjustable while preserving the visual appearance.\n\n### Why Generate Images Instead of Cropping from Source?\n\nCropping from slide screenshots produces low-resolution, dirty-edged fragments. AI-generated images are clean, high-resolution, and properly transparent — resulting in a much more professional output.\n\n### Why Not Rebuild Everything with Native PPT Shapes?\n\nSome visual elements (radar scenes, scientific illustrations, campus sketches, decorative textures) are too complex for PPT shapes. Forcing them into shapes produces ugly, crude approximations. AI-generated PNGs preserve visual fidelity.\n\n## Common Failure Modes & How the Skill Prevents Them\n\n| Failure Mode | Symptom | Prevention |\n|-------------|---------|------------|\n| **New template** | Output looks like a different PPT on the same topic | Phase 1 forces pixel-level position measurement |\n| **Generic motif spam** | Same background image on every slide | Each slide gets unique assets matched to its source |\n| **Over-native crude shapes** | Complex visuals rendered as ugly PPT approximations | Classification rules route complex visuals to `$imagegen` |\n| **Baked text** | Text visible but not editable (inside images) | All `$imagegen` prompts end with \"No text\" |\n| **Missed elements** | Small icons or details missing from output | Step 1.4 completeness self-check catches omissions |\n\n## Compatibility\n\n| Platform | Status | Notes |\n|----------|--------|-------|\n| OpenAI Codex | Fully supported | Primary target. Uses `$imagegen` + `@presentations` |\n| Claude Code | Compatible | Use with appropriate image generation and PPTX skills |\n| Other AI agents | Adaptable | Any agent with image generation + PptxGenJS access |\n\n## Examples\n\nThese screenshots show the kind of slide-image reconstruction workflow this skill is designed for: source slides are analyzed visually, rebuilt as editable PowerPoint objects, and checked against rendered previews.\n\n### Reconstruction Gallery\n\n#### Example 1\n\n![Slide reconstruction preview 1](assets\u002Fscreenshots\u002F第一张.jpg)\n\n#### Example 2\n\n| Image Version | Editable Version |\n| :---: | :---: |\n| ![Slide image version](assets\u002Fscreenshots\u002F第3张.jpg) | ![Slide editable version](assets\u002Fscreenshots\u002F第2张.jpg) |\n\n#### Example 3\n\n| Image Version | Editable Version |\n| :---: | :---: |\n| ![Slide image version](assets\u002Fscreenshots\u002F第4张.jpg) | ![Slide editable version](assets\u002Fscreenshots\u002F第5张.jpg) |\n\n## Contributing\n\nIssues, suggestions, and PRs are welcome!\n\nIf you've used this skill to convert slides and want to share before\u002Fafter examples, please open a PR — real-world examples help other users understand what to expect.\n\n## License\n\nMIT\n\n## Acknowledgments\n\n- [PptxGenJS](https:\u002F\u002Fgithub.com\u002Fgitbrent\u002FPptxGenJS) — The JavaScript library that makes programmatic PPTX creation possible\n- [OpenAI Codex](https:\u002F\u002Fopenai.com\u002Fcodex\u002F) — The AI coding agent platform\n- [CC Switch](https:\u002F\u002Fgithub.com\u002Ffarion1231\u002Fcc-switch) — Inspiration for project documentation structure\n",2,"2026-06-11 04:11:34","CREATED_QUERY"]