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.

As of June 2026, Open Design ships 15 deck templates with 36 theme variants — 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.

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.

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.

As of June 2026, Open Design ships 11 bundled HyperFrames video templates alongside 39 Seedance video prompts. 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.

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: