Open Design Tutorial: Turn Your Coding Agent into a Design Engine

Created

TL;DR: Open Design turns your coding agent into a design tool. No platform switching, no workflow changes. Output web prototypes, pitch decks, live dashboards, high-quality images and even MP4 videos directly from Claude Code / Codex / Cursor. 75,600+ GitHub Stars (now over 75,660 as of 2026-07-07), Apache 2.0, free and open source.

What is Open Design?

Open Design is an open-source, local-first native desktop app (macOS / Windows) by nexu-io, positioned as the open-source alternative to Claude Design.

It does not replace Figma canvas editing. Instead, it turns your coding agent into a design engine. Just type a prompt in your familiar CLI, and Open Design invokes DESIGN.md design systems, brand styles, and component libraries in a local sandbox to generate in real time:

  • Prototypes: Web / Desktop / Mobile single-page HTML prototypes with live iframe sandbox preview
  • Live dashboards: Editable KPI panels with real-time refresh
  • Decks: Magazine-style, pitch-deck PPTs, exportable to PPTX / PDF
  • HyperFrame motion: MP4 video ads, motion graphics (1920x1080 30fps)
  • Images: High-quality brand images via gpt-image-2

All outputs are real files (.html / .pdf / .pptx / .mp4), not screenshots. The app ships with 71 built-in design systems (2 hand-authored + 69 imported from awesome-design-md), 57 design skills, and 15 deck templates — ready to use out of the box.

Why Open Design?

Feature Open Design Claude Design Figma
Pricing Free + Open Source (Apache 2.0) Subscription Free tier limited
Platform Local desktop (macOS / Windows) Web Web / Desktop
Coding agent integration 22+ (Claude Code, Codex, Cursor, etc.) Official agent only None
Design system DESIGN.md brand contract Built-in Partial
Export formats HTML / PDF / PPTX / MP4 / ZIP Limited PNG / SVG
Plugin ecosystem Installable third-party plugins None Yes
Privacy Fully local, SBOM auditable Cloud Cloud

Prerequisites

  • Node.js: 24.x (required)
  • pnpm: 10.33.x (Corepack recommended)
  • OS: macOS, Linux / WSL2, or native Windows
  • Optional agent: Claude Code, Codex, Cursor, etc.; if none, use BYOK API mode

Installing Open Design

Download the latest 0.13.0 from the Releases page:

Platform File
macOS (Silicon) open-design-0.13.0-mac-arm64.dmg
macOS (Intel) open-design-0.13.0-mac-x64.dmg
Windows open-design-0.13.0-win-x64-setup.exe

0.13.0 download stats (as of 2026-07-07): Windows 20,228 / macOS ARM 9,810 downloads.

Docker

1
2
3
4
5
6
git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
cp .env.example .env
openssl rand -hex 32
# paste token into .env OD_API_TOKEN=
docker compose up -d

Open http://localhost:7456.

Developer Mode

1
2
3
4
nvm install 24 && nvm use 24
corepack enable
pnpm install
pnpm tools-dev

Homebrew / AUR

1
2
3
4
5
# macOS
brew install --cask open-design

# Linux
yay -S open-design

Step 1: Configure Your Coding Agent

  1. After launching, go to Settings -> Execution mode
  2. Select an installed agent CLI from PATH (e.g. Claude Code)
  3. Or switch to BYOK mode (API Key + baseUrl + model)

If your agent is not detected, verify PATH includes its directory, then click Rescan.

Step 2: Generate a Web Prototype

  1. On the Create panel, select Skill: Web Prototype (default)
  2. Choose Design System: Neutral Modern (built-in)
  3. Type a prompt, e.g.: “Generate a SaaS landing page with Hero, pricing cards, and FAQ”
  4. Click Send - left pane streams output, right iframe renders live
  5. Export as HTML source or PDF

Step 3: Generate a Deck

  1. Skill: HTML PPT
  2. Choose a template: Magazine / Swiss International / Guizang (15 total)
  3. Enter a topic, e.g.: “10-page pitch deck about AI coding agents”
  4. Navigate with left/right arrow keys
  5. Export as PPTX (screenshot-rendered), PDF, Markdown, or ZIP

Step 4: Generate a HyperFrame Video

  1. Skill: HyperFrame
  2. Set resolution and duration (default 1920x1080 30fps)
  3. Enter a prompt, e.g.: “Data visualization intro animation, 5s, with charts and number flip effects”
  4. Wait for per-frame rendering to complete, then download MP4

FAQ

Can I use it offline?

Yes. BYOK mode with Ollama, LM Studio, VLLM or any local agent works fully offline.

Windows notes?

Requires Node.js 24 + Corepack. Some PowerShell policies may need Set-ExecutionPolicy RemoteSigned. See Windows troubleshooting.

How to install plugins?

Open the Plugin page to browse community plugins, or od plugin install <id>.

Open Design Cloud vs BYOK?

  • BYOK: Bring your own API key, billed by the original provider
  • Open Design Cloud: Official model service, 20+ flagship models, pay-as-you-go, zero config

Summary

Open Design turns your coding agent into a design engine. Prototypes, decks, dashboards, images, video - all real files, no tool switching, directly from Claude Code / Codex / Cursor / Gemini and 22+ agents. Apache 2.0 license, 3,100+ Discord members, 75,600+ GitHub Stars, 71 built-in design systems. Experience command-line design locally today.

Useful Links