Two Open‑Source AI Tools to Auto‑Generate HTML Slides and Hand‑Drawn Technical Diagrams

beautiful-html-templates

Provides a library of 34 pre‑designed HTML slide templates covering business, creative, hand‑drawn, retro, academic and other visual styles. Each template resides in its own folder and includes three preview screenshots (cover, middle, ending) in the repository’s Gallery directory.

The repository contains an AGENTS.md manual that describes how an AI Agent can interact with the library. When the agent receives a prompt such as “build a slide deck about X”, it performs the following steps:

Reads AGENTS.md to understand the expected workflow.

Searches index.json to find the template whose visual style best matches the user’s description.

Clones the selected template folder.

Injects the supplied content into the template’s placeholder sections.

Outputs a complete set of standard HTML files that can be opened in any browser without requiring PowerPoint, Keynote or other proprietary software.

Typical usage from a command line is:

git clone https://github.com/zarazhangrui/beautiful-html-templates
# Follow the instructions in AGENTS.md to request a slide deck from an AI Agent.

Because the output is pure HTML, the generated slides are cross‑platform, embeddable in web pages, and have no runtime dependencies.

Limitations

The tool does not produce editable PPTX or PDF files; it only generates static HTML.

GitHub: https://github.com/zarazhangrui/beautiful-html-templates (Stars: 1,553)

ian-handdrawn-ppt

Implements an AI Agent Skill (CoDEX Skill) that converts a Chinese technical article or outline into a series of hand‑drawn‑style illustration images.

Standard output consists of PNG files:

One 21:9 ultra‑wide cover image suitable for article covers.

Multiple 16:9 body images for in‑article illustration.

When multiple pages are generated, a contact sheet image is produced to review style consistency.

The visual DNA of the generated images includes a near‑white background, fine hand‑drawn lines, pastel accent colors (sage green, peach, lavender), centrally placed small graphics, and generous whitespace.

The generation pipeline follows a narrative‑first approach:

Intake : The skill extracts the topic, target audience, and goal from the input.

Story planning : It selects a narrative structure (educational, persuasive, report).

Archetype selection : For each page it chooses a layout archetype such as cover metaphor, side‑by‑side comparison, flowchart, or loop.

Prompt construction : It composes an image‑generation prompt that encodes the chosen archetype and style.

Image generation : Images are generated (recommended with ChatGPT Image 2.0) while locking the same model and style to avoid drift.

Installation steps for a Codex environment:

git clone https://github.com/helloianneo/ian-handdrawn-ppt.git
mkdir -p "${CODEX_HOME:-$HOME/.codex}/skills"
cp -R ./ian-handdrawn-ppt "${CODEX_HOME:-$HOME/.codex}/skills/"

Example invocation inside Codex to generate a cover and three body images:

Use $ian-handdrawn-ppt 把下面这篇文章做成 1 张封面图 + 3 张正文配图。 风格保持中文手绘技术解释图，文字尽量短，每张图只表达一个观点。 <粘贴文章>

Example invocation to obtain only a planning outline (no image generation):

Use $ian-handdrawn-ppt 先不要生图。 请把这篇内容规划成一套 10 页左右的中文手绘技术 PPT‑style image deck。

Limitations

Does not output editable PPTX or PDF files; these formats are only accepted as input material.

Not intended for users requiring complex animations, interactive web presentations, or fine‑grained slide editing.

GitHub: https://github.com/helloianneo/ian-handdrawn-ppt