Memphis HTML PPT

中文文档

Memphis HTML PPT turns Markdown files or web pages into browser-ready HTML presentations with a bold Memphis-inspired visual style.

It is useful for presentation prototyping, article-to-deck conversion, and shareable HTML previews when PowerPoint, Keynote, or Google Slides are not the right fit.

Highlights

• Convert local Markdown or remote web pages into HTML slide decks
• Apply a curated Memphis visual system with bold color, geometric accents, and editorial layouts
• Run an adaptive chain for source extraction, cleaning, planning, rendering, and validation
• Validate structure, content quality, and visual fit before sharing
• Output a self-contained HTML preview that opens directly in any browser

Project Status

This repository is a working generator plus reusable project template.

• The adaptive preview generator handles local Markdown and remote URLs

• The packaging scripts support local bundle generation for Codex / Claude distribution

• The current workflow centers on a single adaptive AI-planned pipeline

• Migration map: docs/04-adaptive-chain-migration-map.md

• Validation plan: docs/05-content-quality-validation-plan.md

Preview

This gallery comes from the real adaptive preview demo under assets/readme-preview/demo-adaptive-deck.

Visual summary: 0 failures, 0 warnings.

Directory Structure

.
├── assets/                    # Shared SVG templates, CSS, and demo images
├── references/                # Style, workflow, and packaging notes
├── scripts/                   # Preview generation, validation, and release scripts
├── SKILL.md                   # Skill definition
├── juejin-skill-ppt.md        # Sample source content
├── juejin-skill-memphis.html  # Example generated preview
└── test-content.md            # Local test content

Requirements

• Node.js 18 or later recommended

The generator uses:

• native fetch
• ES module syntax
• filesystem APIs from Node.js

Quick Start

Generate an HTML preview from a local Markdown file:

npm run preview -- --input ./test-content.md --output ./preview.html

Or run the script directly:

node scripts/generate-adaptive-preview.js --input ./test-content.md --output ./preview.html --plan-output ./preview.plan.json --source-output ./preview.source.md --source-package-output ./preview.source-package.json

Generate an HTML preview from a web page:

node scripts/generate-adaptive-preview.js --input https://example.com/article --output ./preview.html --plan-output ./preview.plan.json --source-output ./preview.source.md --source-package-output ./preview.source-package.json

Run the adaptive validator:

npm run validate:preview -- --html ./preview.html --plan ./preview.plan.json

Run the content-quality validator:

npm run validate:content -- --plan ./preview.plan.json --source-package ./preview.source-package.json --html ./preview.html --out-report ./artifacts/content-quality.json

Run the adaptive visual regression checker:

npm run validate:visual -- --html ./preview.html --compare-svg true --out-dir ./artifacts/visual

The output folder now includes:

• deck.html: the final HTML PPT artifact
• index.html: a browsable visual validation report
• visual-summary.json: structured validation results
• Per-slide html / ref / diff / compare images

Then open the generated preview.html in your browser.

Available Scripts

scripts/generate-adaptive-preview.js

Generates the adaptive AI-planned preview plus cleaned markdown, a source package, and its deckPlan JSON.

node scripts/generate-adaptive-preview.js --input <url-or-markdown-file> --output <html-file> [--plan-output <deck-plan.json>] [--source-output <clean.md>] [--source-package-output <source-package.json>]

Behavior:

• For URLs, extracts readable source Markdown first
• Produces cleaned markdown first, then builds a structured source package
• Builds a structured deckPlan with templateId, reasoning, and slide content
• Renders the adaptive HTML deck using render-adaptive.js
• Writes HTML, plan JSON, and source package JSON that can be validated independently

scripts/validate-adaptive-preview.js

Validates the adaptive HTML preview and optional deckPlan JSON.

node scripts/validate-adaptive-preview.js --html <preview.html> [--plan <deck-plan.json>] [--min-slides 1] [--strict-fit true]

Behavior:

• Checks adaptive HTML structure such as slide wrappers, nav, counter, and progress bar
• Verifies deckPlan metadata, template ids, and slide/template matching
• Uses template slot constraints to surface overflow, missing required content, and weak fits

scripts/validate-content-quality.js

Validates cleaned markdown, the source package, and the deck plan.

node scripts/validate-content-quality.js --plan <deck-plan.json> [--source-package <source-package.json>] [--cleaned-markdown <clean.md>] [--html <preview.html>] [--out-report <report.json>]

Behavior:

• Checks for residual platform noise
• Verifies strong section coverage
• Verifies metric and command extraction
• Checks whether code assets were mapped to suitable slide templates
• Checks whether template semantics match the final slide content

scripts/build-release.js

Builds release bundles under dist/.

npm run build

Or:

node scripts/build-release.js

Outputs:

• dist/codex/memphis-html-ppt
• dist/claude/memphis-html-ppt

scripts/publish-local.js

Copies built bundles into local skill directories:

npm run publish:local

Or:

node scripts/publish-local.js

Targets:

• ~/.codex/skills/memphis-html-ppt
• ~/.claude/skills/memphis-html-ppt

How It Works

The generator follows a single workflow:

1. Load a Markdown file or remote page.
2. Extract cleaned source Markdown.
3. Build a source package and deckPlan.
4. Render an adaptive HTML deck and validate it.

The current implementation prioritizes readable source extraction, template-fit checks, and stable HTML output.

Design Direction

This project intentionally avoids generic corporate slide styling. The visual system emphasizes:

• bright accents
• cutout geometry
• playful asymmetry
• strong title hierarchy
• decorative rhythm with controlled density

For more context, see:

• references/memphis-style.md
• references/template-catalog.md
• references/html-preview-workflow.md

Limitations

• No npm publishing workflow yet
• No automated test suite yet
• HTML parsing is intentionally lightweight and may not preserve complex article structure
• Long sections are currently compressed into single slides instead of fully paginated overflow slides
• Remote page extraction depends on the raw HTML structure of the target page

Roadmap Ideas

• Add screenshot-based visual regression checks
• Improve content chunking for long sections
• Support richer article extraction and metadata handling
• Export deck assets or interoperable slide formats

License

This project is licensed under the MIT License. See the LICENSE file for details.