OpenDesign Blog
-
How to Keep Text and Numbers Accurate in AI Motion Graphics
Keep text on video accurate with editable overlays, approved copy, correct number formatting and qualifiers that remain readable in the final export.
-
How to Write an AI Motion Design Brief That Gets a Usable First Draft
Write a motion design brief for an AI video with exact copy, asset roles, scene goals and delivery requirements that make the first draft reviewable.
-
How to Turn a Static Diagram into an Animated Explainer
Make an animated diagram with a stable map, meaningful arrows, and a causal reveal sequence, using Cloudflare’s DNS lookup as a worked example.
-
How to Animate Charts Without Misleading the Viewer
Make animated charts with stable scales, visible time, and honest interpolation, drawing on Gapminder and research on animated data visualization.
-
How to Fix Differences Between an Animation Preview and Its MP4 Export
Fix an animation preview export mismatch by tracing versions, matching frames and checking assets, fonts, video rendering and playback separately.
-
How to Show a Before-and-After Workflow Without Exaggerating Results
Edit a before-and-after video around the same task and timing boundaries, using GitHub Actions records to separate real improvement from a faster cut.
-
How to Fix Blurry Text in an Exported Motion Video
Diagnose blurry text in exported video by finding where detail first disappears: capture, scaling, motion, encoding, or the published rendition.
-
How to Prepare Brand Assets for an AI Motion Project
Prepare brand assets for motion by turning logo, font, color and capture guidelines into a usable package, then checking them in one representative frame.
-
How to Place Captions Without Covering Important UI
Place video captions without covering controls or results. Choose open or closed captions, plan reading space, and check the destination player.
-
How to Choose Cards vs. Lists in UI Design
Compare cards vs lists for visual browsing, known-item lookup and review queues. Choose list or grid views with practical tasks and consistent records.
-
How to Turn a Product Changelog into a Short Feature Video
Turn a changelog into a product feature video by choosing one visible change, showing its effect and keeping release details linked to the demo.
-
How to Compare Claude Code and Codex on a Motion Brief Fairly
Compare Claude Code and Codex on the same motion brief: exact copy, playback, seeking, revisions, and repair effort, with an inspectable Codex case.
-
How to Reduce Video File Size Without Making UI Text Unreadable
Compress a product demo video with controlled comparisons that reduce video file size while protecting small labels, meaningful motion, and playback.
-
How to Choose Easing for Product Motion Graphics
Choose animation easing for arrivals, exits, and continuous movement by checking easing functions alongside distance, duration, overshoot, and reading time.
-
How to Hand Off an Editable Motion Project
Package a motion project so another person can locate a scene, change its content, and reproduce the intended output without relying on your machine.
-
How to Design Empty and No-Results States
Improve empty state UX by distinguishing an empty collection from no results found. Use clearer messages, retained filters and precise recovery actions.
-
How to Prevent Font Changes in Exported Motion Graphics
Prevent unwanted font changes in video export by checking font substitution, resource loading, weights, glyph coverage, and measurement before rendering.
-
How to Write Form Validation Error Messages
Apply form validation best practices to timing, error messages and recovery, using Baymard’s checkout observations, GOV.UK guidance and worked examples.
-
How to Make Kinetic Typography Readable on Small Screens
Make kinetic typography readable on small screens. Study real examples, calculate display scale and protect stable reading time, contrast and line breaks.
-
How to Give Motion Design Feedback with Timestamps
Give motion design feedback with versioned timestamps, observable problems, and intended outcomes so editors can revise without changing what already works.
-
How to Keep a Series of Motion Videos Visually Consistent
Build a motion design system that connects typography, brand behavior, product evidence, and reusable patterns while leaving room for different stories.
-
How to Localize a Motion Video Without Breaking Its Timing
Plan video localization around translated text, product terminology, UI captures, and reading intervals so every language preserves the demonstrated task.
-
How to Fix a Motion Video That Feels Too Fast or Too Slow
Fix video pacing by separating movement, reading, recognition, and inference; use IBM’s rhythm guidance and scene-level timing changes instead of global speed-ups.
-
How to Connect Scenes Without Distracting Transitions
Choose motion graphics transitions by the relationship between scenes: preserve identity, orient the viewer, and know when a direct cut works better.
-
How to Choose Between Editable Motion Graphics and Generative Video
Compare motion graphics vs generative video by control, revision cost and factual accuracy. Choose a production method for each shot and its future edits.
-
How to Turn a Motion Reference into Clear Creative Direction
Turn an animation reference into useful motion design direction by examining events, composition and timing, then testing the idea with your own assets.
-
How to Set On-Screen Text Duration So People Can Read and Understand It
Set on-screen text duration from the stable reading window, competing visuals, and the meaning to retain, with Netflix timing rules and worked scene budgets.
-
How to Check That a Motion Video Plays Correctly Where You Publish It
Check MP4 playback compatibility through file inspection and the real player. Diagnose startup, seeking, sound, source selection, and controls.
-
How to Explain a Pricing Plan with Motion Graphics
Build a pricing explainer video that shows units, tier boundaries, and billing periods, with Stripe volume and graduated pricing calculations.
-
How to Design Clear Pricing Tables
Improve pricing table design with clear billing units, plan comparisons and purchase routes. Examine GitHub’s pricing page and worked SaaS calculations.
-
How to Storyboard a Product Demo Before You Animate It
Build a video storyboard for a product demo with connected interface states, useful crops, readable timing and a source asset for each shot.
-
How to Zoom into Product UI Without Losing Context
Plan screen recording zoom around readable targets, stable context, source resolution, and the final player size, with Screen Studio’s zoom timeline.
-
How to Build a Product Launch Video Around One Clear Promise
Make a product launch video around one clear promise, using Linear Asks to connect the opening problem, product evidence, and next action.
-
How to Make an Onboarding Video for One User Task
Create an onboarding video for one customer task, with clear prerequisites, consequential choices, and a visible result, using Slack channel creation.
-
How to Replace an Outdated UI Screenshot in a Product Video
Replace product footage without leaving obsolete cursor paths, crops, annotations, or claims behind. Audit the screenshot's dependencies before rendering again.
-
How to Cut a 60-Second Explainer into a 15-Second Version
Repurpose video content by turning a long explainer into one complete short explanation, preserving the action, evidence, and result that support its claim.
-
How to Adapt One Motion Video for 16:9, 1:1, and 9:16
Change video aspect ratio by choosing what to crop, reflow, or sequence. Adapt 16:9, square, and vertical motion videos without losing the product evidence.
-
How to Check Responsive Design
Use a responsive design checklist for navigation, forms, images and reading order. Test complete tasks at narrow widths and between layout breakpoints.
-
How to Design Responsive Tables
Choose a responsive table pattern that preserves comparison and row actions. Review CSS scrolling, priority columns and stacked records with USWDS examples.
-
How to Make Typography Responsive
Make fluid typography readable with a bounded CSS scale, useful line breaks and comfortable spacing. Compare GOV.UK’s type roles and calculated sizes.
-
How to Review an AI Motion Video Before Publishing
Use a motion graphics quality checklist to review claims, reading intervals, exported files, and the actual player before publishing an AI motion video.
-
How to Revise One Scene in an AI Video Without Changing Everything Else
Keep a video revision focused on one AI-generated scene using an approved baseline, bounded editing instructions and comparisons of the rendered files.
-
How to Make a Sales Demo Video Around a Customer Problem
Make a sales demo video that answers one buyer question, using Slack canvas handoffs to choose product evidence and a next step for the deal stage.
-
How to Turn Product Screenshots into an Editable Motion Video
Animate product screenshots into an editable video with connected states, readable crops and controlled movement that preserves the captured interface.
-
How to Make a Seamless Motion Loop
Build a seamless loop by matching position, velocity, secondary layers, and audio at the join, then check frame counts and playback in the final player.
-
How to Use Semantic Color Tokens
Use semantic color tokens to separate brand actions from status feedback. Build a role map and check theme changes, interaction states and contrast pairs.
-
How to Make a Product Video Work Without Sound
Make a silent product video understandable through visible actions, clear results, purposeful captions, and a review that tests what viewers actually learn.
-
How to Simplify an Overloaded AI Motion Prompt
Simplify overloaded AI video prompts by resolving conflicting demands, protecting essential content and testing one useful change against a stable baseline.
-
How to Use Sound Effects Without Overloading a Product Video
Plan sound design for product videos around meaningful events, clear narration, and editable audio layers, with Audacity onset and waveform examples.
-
How to Make a Product Promo Video from Still Images
Make a product promo video from still images with a specific story, truthful detail, consistent product identity and editable files for later campaigns.
-
How to Explain a Technical Workflow with Motion Graphics
Use technical animation to explain a workflow’s requests, acknowledgments, and completion states, with Google Cloud Pub/Sub and a report-service example.
-
How to Design for Text Expansion
Plan for text expansion in website localization. Test buttons, navigation, cards and forms with longer strings, measured labels and real translations.
-
How to Keep Text Legible over Moving Backgrounds
Keep text over moving backgrounds legible by testing local contrast, stable reading areas, protective surfaces, and the compressed video at its final size.
-
How to Update a Promo Video for a New Campaign
Update a promotional video without leaving old dates, offers, screenshots, audio, or destinations behind—and know when a campaign needs a new idea.
-
How to Make Product UI Readable in a Vertical Demo Video
Make a vertical product demo video readable with purposeful crops, correct dimensions and enough context to follow the interface action and result.
-
How to Design an End Card People Can Read and Act On
Design a video end card with a readable next step, enough time to act, and an interaction that works in the destination player.
-
How to Design a Video Thumbnail and First Frame That Work Together
Improve video thumbnail design by connecting the still image’s promise to the first frame, autoplay behavior, listing crops, and the actual opening.
-
How to Keep Video Versions and Approvals in Sync
Keep video version control connected to the exact source, export, review decision, and published placement so an approval identifies what audiences receive.
-
How to Make Design Feedback Actionable
Give useful design feedback with a clear target, observable concern and next step. Learn from Figma’s critique process and practical interface examples.
-
Claude PPT Skills: How to Make a Slide Deck with Your Coding Agent
You can now hand slide-making to a coding agent. This is an honest guide to Claude PPT skills in 2026 — what they are, the open-source ones worth installing (frontend-slides, guizang, dashiAI and more), a scorecard, how to actually use one, and where an agent-native design workspace fits when a skill runs out of road.
-
codex-ppt-skill: Image-Forward PPT Decks with a Coding Agent
codex-ppt-skill is an open-source skill that pairs your coding agent with GPT-Image-2 to build image-forward PowerPoint decks — every slide a designed image, not a bullet list. Here's what it is, when image-first slides are the right call, how to use it, an honest look at the trade-offs, and where an agent-native design workspace takes over.
-
dashiAI-ppt-skill: Editable Presentations From a Coding Agent
Most coding-agent PPT skills hand you HTML you can only re-prompt. dashiAI-ppt-skill is the one that exports browser-editable decks — so a non-developer can still tweak the result. Here's an honest guide: what it is, its dozen themes, how to install and use it, the AGPL-3.0 catch, and where an agent-native design workspace takes over.
-
frontend-slides: Make Web Slides with a Coding Agent
frontend-slides is the most-starred open-source PPT skill for coding agents — it builds slide decks as clean, modern web pages you present in the browser. Here's what it is, how to install and use it, what it's genuinely good at (and its limits), how it compares to other Claude PPT skills, and where an agent-native design workspace picks up when a single skill runs out of road.
-
guizang-ppt-skill: Editorial HTML Decks with a Coding Agent
guizang-ppt-skill is the 20.8k-star coding-agent skill that turns a prompt into a genuinely designed HTML deck — editorial magazine layouts and Swiss-grid typography, not another template. Here's what it is, how to use it, the honest notes (AGPL-3.0, HTML output), how it compares to other Claude PPT skills, and where an agent-native design workspace fits.
-
Marp: The Markdown Presentation Tool (and How to Export to PowerPoint)
Marp is the open-source Markdown presentation ecosystem — write slides in Markdown, then use the Marp CLI to export HTML, PDF, or PowerPoint. This guide covers Marp themes, Markdown authoring, marp-cli export to pptx (as images), how it compares to reveal.js and Slidev, and where an agent-native design workspace fits.
-
ppt-master: Editable PowerPoint From Any Document, Built by an Agent
ppt-master is the 38k-star open-source project that turns any document into a real, editable PowerPoint — native shapes and animations, not slides-as-images. Here's what it is, how the agent workflow works, an honest look at where it fits among the Claude PPT skills, and where an agent-native design workspace picks up when a one-off deck isn't enough.
-
reveal.js: Themes, Export & How It Compares to the Alternatives
reveal.js is the open-source HTML presentation framework with 71.9k GitHub stars — you author slides in HTML or Markdown and present in any browser. Here's an honest guide: how themes, templates and examples work, how PDF and PowerPoint export really behaves, how it compares to Slidev and Marp, and where an agent-native design workspace fits.
-
Slidev: Themes, Examples & How to Export to PowerPoint
Slidev is the open-source, developer-first presentation tool with 47.6k GitHub stars — you author slides in Markdown with embedded Vue components and present in the browser. Here's an honest guide: how themes and examples work, how PDF and PowerPoint export really behaves, how it compares to Marp and reveal.js, and where an agent-native design workspace fits.
-
OpenDesign AI Workshop is coming to Shanghai
A hands-on Shanghai workshop for students, developers, designers, and AI tool builders to turn prompts and references into real AI artifacts.
-
Best AI Design Agents in 2026: An Honest, Tested Guide
"AI design agent" means three different things in 2026 — a creative cloud suite, a task bot, or an agent that turns your design into shipped code. Most lists blur them together. Here's the honest map of the best AI design agents, what each category is actually for, and the one question that tells you which kind you need.
-
Best AI Prototyping Tools in 2026: An Honest, Tested Guide
The best AI prototyping tools in 2026 split on one thing the listicles skip: is the prototype throwaway, or does it become the product you ship? Here's the honest map — mockup prototypes, code prototypes, planners, and agent-native pipelines — and how to pick the one that matches what you'll do next.
-
Best AI Design Tools in 2026: An Honest, Tested Guide
Most "best AI design tools 2026" lists rank the prettiest demo and skip the one question that actually decides your pick: does the design survive to shipped code you own? Here's the honest map — a scorecard across six categories, the tools worth your time for UI/UX, product, and web design, and the category every other list forgets.
-
Best Bolt.new Alternatives in 2026: An Honest Comparison
Looking for a Bolt.new alternative? The real question isn't which tool generates an app fastest — it's what you're left holding afterward. Here's an honest map of the best Bolt.new alternatives in 2026, grouped by what you're actually leaving Bolt for: reliability, control, infrastructure, or owning your output.
-
Best Design-to-Code Tools in 2026: An Honest, Tested Guide
Design-to-code tools split into four approaches that look similar in a demo and behave nothing alike on a real project. Here's the honest map of the best design-to-code tools in 2026 — Figma exporters, AI app builders, handoff tools, and agent-native pipelines — and the one question that tells you which kind you actually need.
-
Best Figma Alternatives in 2026: An Honest, Tested Guide
Most "Figma alternatives" lists pretend one tool can replace Figma. None can — not entirely. What actually helps is knowing which part of Figma you're trying to leave: the price, the canvas, the lock-in, or the gap between design and code. Here's an honest map of the best Figma alternatives in 2026, grouped by exactly that.
-
How to Use Claude Code for Frontend Design (2026 Guide)
Claude Code can produce genuinely good frontend design — but only with the right setup and prompting. Here's the practical guide: install the frontend-design plugin, prompt with aesthetic direction instead of pixels, guide the design dimensions, and take it from a one-off screen to an ownable design system.
-
Best Lovable Alternatives in 2026: An Honest Comparison
Lovable is the most refined prompt-to-app builder out there — so if you're hunting for a Lovable alternative, it's usually for a specific reason: credits that add up, lock-in to their stack, or wanting to own the pipeline. Here's an honest map of the best Lovable alternatives in 2026, grouped by why you're actually leaving.
-
Best v0 Alternatives in 2026: An Honest Comparison
Most people searching for a v0 alternative aren't unhappy with the UI it generates — they hit the per-iteration pricing, or they want a whole app instead of components, or they want to own the pipeline. Here's an honest map of the best v0 alternatives in 2026, grouped by why you're actually leaving.
-
OpenDesign is coming to Osaka / Kyoto
A small meetup for designers, builders, and AI-native teams exploring how agents change design, prototyping, and product work.
-
Vibe Design Tools: An Honest Guide to What Works
Half the results for "vibe design tools" are actually vibe coding tools — and that's the most useful thing the search results will tell you. Here's the honest map: the one question that should decide your pick, a scorecard across five tool categories, and the trap almost every listicle sells you.
-
Vibe Design vs Vibe Coding: Where They Split and Why It Matters
Vibe design and vibe coding aren't rivals — they're two halves of one motion, and the gap between them is where teams bleed. Here's the real difference, the two failure modes nobody warns you about (the mockup cliff and design drift), and a framework for which to reach for when.
-
Vibe Design with Google Stitch: What It Nails, Where It Traps You
Google coined the term "vibe design" with Stitch — and Stitch is genuinely good. Here's the honest hands-on: what it nails, the lock-in the demos don't show you, and when owning the loop beats the convenience.
-
What Is Vibe Design? The 2026 Guide to Designing by Intent
Describe the feeling and direction of a UI and let AI generate it — but most tools stop at a pretty mockup. Here's what vibe design really is, vibe design vs vibe coding, and how to take it from prompt to shipped code.
-
The open-source alternative to Figma
Figma is excellent and it isn't going anywhere. But the file is proprietary, the seats are a subscription, and the canvas lives in someone else's cloud. Here's the honest read on when Figma is still the answer — and when owning an agent-native, local-first workflow wins.
-
The layout layer the canvas used to hide
A community reply on the 0.8.0 preview named the real question behind agent-native design: if the canvas stops being the work unit, how do users still understand layout?
-
How to port a Figma workflow into an OpenDesign plugin
The 0.8.0-preview thread asks contributors to port old design workflows one plugin at a time. Here is the concrete path for a Figma export, token sync, or brand kit.
-
BYOK reality check: 5 things that break in OpenDesign today
We promised BYOK as first-class. Five open bug threads from this week — Gemini, DeepSeek, OpenCode, Windows — show where the seams are still rough, and what to use until each fix lands.
-
31 skills, 72 systems: how the OpenDesign library works
A walk through the four primitives that make OpenDesign composable: skills, systems, adapters, and the daemon. With concrete examples of how a Markdown file becomes a pixel-perfect deliverable.
-
BYOK design workflow: run Claude, Codex, or Qwen on your own key
Most AI design tools quietly add a margin to every token you spend. OpenDesign takes the opposite stance — bring your own model key, pay the provider directly, and keep full control of where inference runs. Here's how the BYOK layer actually works.
-
Why we built OpenDesign as a skill layer, not a product
Most AI design tools try to replace the agent already on your laptop. OpenDesign takes the opposite bet: ship a thin layer of skills, systems, and adapters that turn any coding agent into a design engine — without locking you into a new app.
No posts in this category yet. More field notes are coming.