7.1 Presentation Decks

Generate a themed deck and cover the available deck styles

Prototypes live in a browser. Decks go to a boardroom, a PDF inbox, or a PowerPoint review. Open Design's deck artifacts are branded, slide-structured HTML documents that export to PPTX, PDF, and five other formats without leaving the four-beat loop you already know.

Slide deck is the second chip on the home composer, and it behaves like every other creation type: pick it, and the agent's job narrows before generation begins. Deck style is a named prompt parameter --- from the default magazine-style layout (called guizang-ppt, featuring a WebGL hero and checklist slides) to the Swiss International grid-anchored style with monochrome accents. The same DESIGN.md token set that colors a prototype also colors a deck: --od-color-primary, --od-color-accent, and --od-type-sans all carry across.

Generate a BlockFrame Deck

The walkthrough below follows a real deck creation flow in Open Design. Instead of starting from a blank canvas, the user chooses Slide deck, selects the Html Ppt Zhangzara Block Frame example prompt, answers the deck intake questions, and lets the agent build a 10-slide internal design-review deck. The important detail is the process: deck mode narrows the agent's job before generation begins.

BlockFrame — Neobrutalist deck with pastel-neon color blocks and chunky
black borders. Anything that should feel pop-graphic and design-led:
indie SaaS launches, agency credentials, creative reviews, brand redesigns.

Inside the deck workspace (v0.21.1)

Since 0.20.0 the deck workspace is a proper deck tool, not a web preview with slide numbers. A thumbnail rail runs beside the stage with thumbnails at real slide proportions, and the rail, stage, page counter, and notes stay synchronized --- move to slide 3 anywhere and everything moves to slide 3. Below the stage sits a speaker-notes panel ("SPEAKER NOTES Slide 1/4") that edits in place: click, type, and the note travels with the deck into presenter view. Navigation is keyboard-first --- arrow keys step slides, Home and End jump to the ends, and R resets the deck to slide 1.

The Present menu offers three ways in front of an audience: In this tab (speaker notes in popup window), Fullscreen, and New tab. The first is the one that matters in a boardroom --- presenter view without covering the audience view: your notes open in a separate popup window while the room sees only the slide. Versions are pinned, too --- since 0.15.0 the Versions panel's per-file Download pulls the exact slide file from a chosen version, so "export the deck as it looked before Friday's edits" is a menu action, not an archaeology project.

Deck Styles and Export Formats

Deck style is a first-class prompt parameter, not a post-generation setting. State it up front or the agent picks guizang-ppt by default.

The PPTX path earned a specific upgrade in 0.20.0 ("Steady by Design"): editable fidelity. Imported Google Fonts travel into the file, authored line breaks are preserved instead of reflowed, layered backgrounds survive the trip, and $-sequences land verbatim instead of being mangled by cell formatting. The practical consequence: a deck exported to PPTX can be finished in PowerPoint by someone who has never opened Open Design --- which is the handoff most boardrooms actually run on.

Troubleshooting Deck Generation

Deck generation failures are usually prompt-level, not system-level. The agent over-generates text on slides when the prompt is open-ended, and under-specifies layout when the slide count is left implicit. Below are the common failure patterns and their fixes.

7.2 HyperFrames Motion Graphics

Generate an HTML-to-MP4 motion graphic and understand the render path

Most AI design tools generate static artifacts. Open Design generates motion. The mechanism is HyperFrames (Apache-2.0) — a headless Chrome plus FFmpeg pipeline that renders HTML and CSS animations, GSAP timelines, Lottie files, and Three.js scenes into deterministic, frame-accurate MP4 video. One brand, many surfaces includes video.

HyperFrames is integrated as a first-class citizen in Open Design. The agent skill that produces motion artifacts emits HTML with data-start, data-duration, and data-track-index attributes on each scene block, plus a paused GSAP timeline assigned to window.__timelines. HyperFrames seeks the timeline frame by frame during capture — no real-time playback required.

At the v0.9.0 snapshot the bundle shipped 11 HyperFrames video templates alongside 39 Seedance video prompts; the video-template family has grown since and is browsable under the Video category in the plugin marketplace. One infrastructure change matters more than counts: since 0.20.0, HyperFrames renders from the packaged runtime --- pinned and shipped with the daemon --- so a motion render no longer depends on whatever Chrome install you happen to have. Animation adapters include GSAP, CSS animations, Lottie, Three.js, Anime.js, WAAPI, and custom adapters — giving the agent a broad vocabulary for motion.

Why HyperFrames Instead of Remotion

The competing motion-from-code tool in the agent ecosystem is Remotion, which is React-based. HyperFrames uses plain HTML, CSS, and JavaScript. For AI-generated output, that distinction matters: LLMs produce more reliable plain-HTML motion than they produce React component trees, because HTML/CSS/JS occupies a far larger share of training data than React-specific animation patterns.

Scene Structure

When you ask the agent to build a motion artifact, the emitted HTML follows a predictable structure. Understanding it helps you write better prompts and debug motion that doesn't render correctly.

<!-- Scene with data attributes for timing -->
<div data-start="2.0"
     data-duration="3.5"
     data-track-index="0"
     class="scene-content">
  <!-- Animation elements here -->
</div>

<!-- GSAP timeline: paused, seekable -->
<script>
const timeline = gsap.timeline({ paused: true });
// animation definitions
window.__timelines = [timeline];
</script>

The paused: true is mandatory. HyperFrames cannot seek a playing timeline — it steps frame by frame and needs to control playback position directly. If the skill emits a timeline that auto-plays, the render will produce duplicate or blurred frames.

Animation Adapters

HyperFrames supports six animation methods out of the box: GSAP, CSS animations (keyframes), Lottie (JSON-based vector animation), Three.js (WebGL 3D), Anime.js, and the Web Animations API (WAAPI). Custom adapters can be added, but those six cover the full range of motion work that agent-generated HTML is likely to produce. When you write a motion prompt, you can specify the animation method or let the agent choose based on the effect you describe:

• GSAP — best for complex, sequenced, timeline-driven animation
• CSS animations — simplest; agent defaults to this for straightforward transitions
• Three.js — for 3D scenes and WebGL effects; render times are longer
• Lottie — useful when you have an existing Lottie JSON from a designer

For most branded motion artifacts — logo reveals, title cards, data visualizations — GSAP is the practical choice. It produces seekable timelines natively and is the adapter with the most examples in LLM training data.

The HyperFrames Render Pipeline

7.3 Rendering to MP4

Cover the HTML-to-video render and export

Generating a motion graphic is a two-phase operation: the agent produces the HTML artifact, and then HyperFrames renders it to video. The second phase runs entirely on your machine and is CPU-intensive. Budget for it.

Generate a Motion Artifact

Design an animated hero — a rotating type ring around a wireframe globe,
with the headline "Reach every country." Loop at 12s, ready for
HyperFrames export.

Brand Tokens in Motion

HyperFrames reads brand tokens from DESIGN.md through Open Design's CSS custom property injection. The skill binds --od-color-primary and --od-color-accent into the animation's :root before render:

:root {
  --brand-primary: var(--od-color-primary);
  --brand-accent:  var(--od-color-accent);
  --brand-type:    var(--od-type-sans);
}

.animated-element {
  fill:        var(--brand-primary);
  font-family: var(--brand-type);
}

This binding is what makes one brand, many surfaces real for motion: you do not re-specify colors in the animation prompt. The DESIGN.md carries them, and HyperFrames picks them up through the injected custom properties.

7.4 AI Images

Configure an image provider and generate brand-aligned images

Image generation in the current Open Design build is routed through Media providers, not a separate image-only settings page. The same settings panel holds keys and gateways for image, video, audio, search, and related media services. Once a provider is configured there, Image mode can use it as part of the project workflow: prompt, provider, model, aspect ratio, negative prompt, generated files, and reuse notes stay beside the design artifact.

Expanding Beyond Image Providers

The important architectural shift is that Open Design treats generated media as a shared capability. In Settings, open Media providers. That panel exposes provider cards such as Nano Banana, OpenRouter, SenseAudio, Tavily Search, and Volcengine Ark (Doubao). Not every entry is an image generator: SenseAudio is audio, Tavily is web research, and Volcengine is used for Seedance / Seedream-style media workflows. The point is that media credentials live in one place, and projects call the provider they need.

As of v0.21.1 the panel separates configured providers from unset ones. In my install, MiniMax, Nano Banana, OpenAI, OpenRouter, and xAI Grok Imagine hold credentials; ElevenLabs, Fal.ai, FishAudio, ImageRouter, Leonardo.ai, SenseAudio, Tavily Search, and Volcengine Ark (Doubao) wait with a per-provider API key, Base URL, and model field each, and a coming-soon row teases more. You configure only what your workflow needs --- the panel is a bench, not a checklist.

For image work, the two most useful paths are currently Nano Banana and an OpenAI-compatible route such as gpt-image-2. Nano Banana is shown in the settings screen with a Google-hosted default gateway and a configurable model field. OpenRouter is useful when you want one key to reach multiple image or video models. OpenAI gpt-image-2 remains a strong default for clean product imagery, illustration, and brand-safe campaign assets. The workflow does not change when you swap providers: the project records the selected model and the media dispatcher writes the resulting files into the project.

Configure a Provider and Generate

Rework the given image into a crayon-style illustration,
transforming the entire scene into something that feels hand-drawn
by a 10-year-old. Preserve the general layout and spatial relationships
of the original image.

Mode: image-to-image edit
Provider route: gpt-image-2
Input: uploaded reference image
Output: generated crayon illustration

The Image Prompt Library

Image templates are useful because they encode repeatable visual operations. The Crayon Kid-Drawing template is a good example: it is not asking for a generic "cute image." It defines a style-transfer operation, states that the layout must be preserved, names the crayon palette, describes the texture, adds childlike embellishments, and includes a negative prompt that blocks photorealism, vector sharpness, dark palettes, and watermarks. That is the kind of prompt a designer can reuse, critique, and improve.

The same library also contains prompt templates that are not style-transfer jobs. For example, Illustrated City Food Map starts from a different design intent: generate a hand-drawn, watercolor-style tourist map with numbered local food specialties, landmarks, and a legend. That is a different reusable operation from the crayon edit. One preserves an uploaded reference and changes its style; the other creates a new illustrated information artifact from a structured brief.

7.5 One Brand Across Every Format

Show the same brand carrying across deck, motion, and image

One brand, many surfaces is not a slogan — it's an architectural property. The DESIGN.md binds once and flows to all three artifact renderers without re-specification. This section shows how the binding works and where it can break down.

The Renderer Map

Each artifact type has a dedicated renderer. The brand tokens arrive through the same CSS custom property injection regardless of which renderer picks them up.

Brand Consistency in Practice

The deck and motion renderers consume brand tokens directly as CSS custom properties — the mapping is exact. The image renderer converts tokens to natural language before passing them to the image API. That conversion introduces interpretation. A deck with --od-color-primary: #0B5FFF renders that exact blue; an image prompt that says "brand blue" may render differently across providers and runs.

# DESIGN.md active
# Deck: --od-color-primary renders exact hex
# Motion: HyperFrames reads same CSS var
# Both: deterministic brand color output

# DESIGN.md active
# Image: tokens serialized to text prompt
# Provider interprets "brand blue" loosely
# Different runs, different blue shades

This is not a bug in Open Design — it's an inherent property of image generation APIs. The practical mitigation is to write an explicit visual_voice section in your DESIGN.md that describes color mood precisely: "deep saturated cobalt, not navy, not royal blue." The more specific the language, the less the API interprets.

A Single Project, Three Formats

The strongest demonstration of one brand, many surfaces is running all three artifact types inside a single project with one DESIGN.md. The brand tokens are bound once at the project level; every generation reads from the same source.

When Brand Consistency Breaks

Two failure modes break cross-format consistency:

7.6 Image Generation, Unlocked

Subscription models join the BYOK bench

Every image workflow in this chapter so far assumed you bring your own key. That changed on August 11, 2026, when v0.19.0 added subscription image generation: an Open Design subscription unlocks three flagship models --- Seedream 5.0 Pro, GPT Image 2.0, and Nano Banana 2.0 --- through Open Design Cloud, with no provider key to configure. Video generation runs through the same Vela integration, so one sign-in covers motion as well as stills.

The two paths coexist, and they solve different problems. BYOK still lives in Settings → Media providers, where MiniMax, Nano Banana, OpenAI, OpenRouter, xAI Grok Imagine, Volcengine Ark (Seedream), SenseAudio, Tavily, and more each take their own credential. The subscription path skips that panel entirely --- you sign in, pick a model, and generate.

The agent flow is tighter than the BYOK flow from section 7.4. When a model publishes its parameters, the agent passes multiple reference images plus an explicit aspect ratio, resolution, and quality instead of hoping the defaults land. Requests are checked before generation, so a malformed brief fails fast instead of burning a paid call. Progress stays visible while the model runs, output paths come straight from the daemon, and one transient post-tool interruption can recover without dropping the result --- I've watched a generation survive a hiccup that would have orphaned the file in June.

Two refinements in v0.19.1 (August 13, 2026) matter daily. New image and video outputs auto-open in the preview when they land, and an explicitly named artifact updates in place instead of spawning a numbered duplicate. Ask for hero-cover.png twice and you get one file, revised --- not hero-cover-2.png cluttering the project.

The brand story doesn't change. Subscription or BYOK, the image still reads your DESIGN.md visual_voice on the way out --- one brand, many surfaces, now with one less key to manage.