Open Design — AI Design Studio for Coding Agents

Introduction

Open Design is an open-source, local-first desktop application that transforms any coding agent into a full design engine. It bridges the gap between code-first AI workflows and visual design output, letting developers produce prototypes, landing pages, dashboards, and slides without leaving their agent workflow.

What Open Design Does

• Converts natural-language design prompts into production-ready visual outputs via your coding agent
• Supports multiple output formats including HTML, PDF, PPTX, and MP4 for video
• Works with Claude Code, Codex, Cursor, Gemini CLI, OpenCode, and 20+ other agent CLIs via BYOK
• Runs entirely local-first so designs and assets stay on your machine
• Provides a desktop GUI for iterating on agent-generated designs visually

Architecture Overview

Open Design uses a TypeScript-based Electron or Tauri shell that exposes a design canvas and rendering pipeline. When a coding agent receives a design prompt, it generates structured output that Open Design interprets into visual components. The rendering layer converts these into real files using headless browser rendering for HTML/PDF and ffmpeg for video output. All processing happens locally with no cloud dependency.

Self-Hosting & Configuration

• Clone the repository and run npm install to set up dependencies
• Configure your preferred coding agent via environment variables or the settings panel
• Bring your own API key (BYOK) for the underlying LLM provider
• Adjust export resolution, format defaults, and template paths in the config file
• Deploy as a desktop app on macOS, Windows, or Linux

Key Features

• Multi-agent compatibility across 20+ coding agent CLIs
• Real-file export to HTML, PDF, PowerPoint, and MP4 video
• Local-first architecture with zero cloud dependency
• Built-in template library for common design patterns
• Iterative design mode for refining outputs with conversational feedback

Comparison with Similar Tools

• Figma — collaborative cloud-based design; Open Design is local-first and agent-driven
• Canva — template-heavy consumer design; Open Design targets developers and AI workflows
• Slidev — Markdown-to-slides for developers; Open Design supports broader output formats
• Screenshot to Code — converts screenshots to code; Open Design goes code-to-design
• tldraw — infinite canvas SDK; Open Design focuses on production-ready file export

FAQ

Q: Does Open Design require a specific LLM provider? A: No. It uses a BYOK model so you can connect any supported provider including OpenAI, Anthropic, Google, and local models via Ollama.

Q: Can I use my own design templates? A: Yes. You can add custom PPTX templates and HTML layouts that the agent will use as starting points.

Q: Is it free for commercial use? A: Yes. Open Design is released under an open-source license that permits commercial use.

Q: Does it work offline? A: The rendering and export pipeline works fully offline. The LLM call requires network access unless you use a local model.

Sources

• https://github.com/nexu-io/open-design