# Open Design — AI Design Studio for Coding Agents

> An open-source, local-first desktop app that turns coding agents into design engines for prototypes, landing pages, dashboards, slides, and images with real-file HTML/PDF/PPTX/MP4 export.

## Install

Save as a script file and run:

# Open Design — AI Design Studio for Coding Agents

## Quick Use
```bash
git clone https://github.com/nexu-io/open-design.git
cd open-design
npm install
npm run dev
```

## 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


---
Source: https://tokrepo.com/en/workflows/asset-df8950be
Author: Script Depot