Open Design (nexu-io) Install Guide: Claude Design Alternative

Published: 2026-05-04 · Verified: 2026-07-23 · 8 min read · Official repository: nexu-io/open-design

Verified against the project documentation on July 23, 2026. Open Design is a local-first, open-source design environment that can use coding-agent CLIs such as Claude Code, Codex, Cursor and Gemini as its generation engine. This guide focuses on installation, agent connection, artifact preview and export. Check the official repository for current releases and supported integrations.

What Is Open Design?

When Anthropic released Claude Design on April 17, 2026, it demonstrated something remarkable: an LLM that could stop writing prose and start shipping real design artifacts — HTML/CSS prototypes, slides, image compositions, even video storyboards. But Claude Design came with strings attached: closed-source, paid-only, cloud-only, locked to Anthropic's model stack.

Open Design (by nexu-io) is the open-source alternative that removes every one of those locks. Same artifact-first design loop, same skill-driven workflow, but running entirely on your laptop, using whatever coding agent you already have installed, with your own API keys.

This guide walks through installation, key concepts, and how to evaluate the workflow without relying on changing popularity metrics.

Quick Start: 30 Seconds to Running

You need Node.js 20+ and pnpm installed. Pick your agent:

git clone https://github.com/nexu-io/open-design.git

        cd open-design

        pnpm install

        pnpm tools-dev

That's it. Open Design auto-detects any coding agent on your PATH — Claude Code, Codex, Gemini CLI, GitHub Copilot CLI, Cursor, Qwen, Hermes, and more. If you don't have one, you can configure an OpenAI-compatible proxy endpoint as your design engine.

Once the dev server starts, navigate to http://localhost:5173 and type something like:

"Make me a pitch deck for our seed round — modern, magazine-style layout"

The interactive question form pops up, the agent picks a visual direction, and within seconds you're watching a real project folder being built on disk with sandboxed preview in the browser.

Key Features

1. Supported Coding-Agent CLIs, One Workflow

Open Design does not ship one fixed model. It can use supported coding-agent CLIs already available on your machine and also documents BYOK provider routes. The maintained integration list changes quickly, so treat the official README—not a copied count—as the source of truth.

2. Composable Skills

Skills are prompt-and-asset packages for tasks such as brand identity, presentation decks, UI prototypes and media workflows. The catalog changes between releases; inspect the repository and the installed version before relying on a particular skill name.

3. Built-in Design Systems

Design-system files define typography, color, spacing and component direction. The available catalog is version-dependent, so select from the systems visible in your installed build and keep custom brand rules under version control.

4. Local-First + BYOK

The Open Design daemon and project files can run locally. Data sent through a connected coding agent or BYOK provider follows that provider's network path, retention and billing rules; “local UI” does not automatically mean “offline model.” Review each integration before using sensitive material.

5. Multi-Format Export

HTML, PDF, PPTX, MP4, ZIP — Open Design's artifact engine can export to five formats. The sandboxed preview uses React 18 + Babel for live rendering, and the export pipeline handles everything from slide decks to video storyboards.

Detailed Installation Guide

Prerequisites

Node.js 20+ (check with node --version)
pnpm (npm install -g pnpm)
At least one coding agent CLI on your PATH
macOS, Linux, or Windows (WSL2 recommended for Windows)

Step-by-Step

# 1. Clone the repo

        git clone https://github.com/nexu-io/open-design.git

        cd open-design


        # 2. Install dependencies

        pnpm install


        # 3. Start the development environment

        pnpm tools-dev


        # 4. Open in browser

        # → http://localhost:5173


        # 5. (Optional) Set your API key if using BYOK proxy

        export OPENAI_API_KEY=sk-your-key-here

The first startup may take a minute as it scans for agents and builds the design system cache. Subsequent startups are near-instant.

How It Works Under the Hood

Open Design uses a local daemon architecture. The daemon runs as the only privileged process, responsible for:

Agent detection — PATH scanning for supported CLIs in the installed release
Skill loading — Dynamic composition of prompt templates based on user intent
Artifact management — On-disk project folders with seed templates, layout libraries, and self-check checklists
Sandboxed rendering — Isolated iframe preview with vendored React 18 + Babel
Export pipeline — HTML/PDF/PPTX/MP4/ZIP conversion

When you submit a design request, the flow is:

Intent parsing — The interactive form captures parameters (format, audience, style, constraints)
Direction selection — The agent picks one of five curated visual directions from the design philosophy library
Plan streaming — A TodoWrite plan streams into the UI showing what the agent will build
Project scaffolding — The daemon creates an on-disk project with seed template, layout library, and checklist
Execution — The agent reads the scaffold, runs a pre-flight checklist, then generates the artifact
Self-critique — The agent runs a five-dimensional critique against its own output (consistency, accessibility, aesthetics, completeness, performance)
Rendering — The final artifact renders in the sandboxed iframe for preview and export

Open Design vs Claude Design

Feature	Open Design	Claude Design
Price	Free (open-source)	Paid subscription
Local-first	✅	❌ Cloud-only
Model choice	Multiple documented CLIs and BYOK routes	Claude
Design systems	Versioned, customizable catalog	Managed catalog
Export formats	HTML/PDF/PPTX/MP4/ZIP	HTML/PDF
Self-host	✅ Anywhere	❌
Skills library	Versioned, composable catalog	Managed catalog
Privacy	Depends on the selected CLI or BYOK provider	Managed cloud service

Tips & Best Practices

Write Clear Prompts

The interactive question form is your friend. Be specific about your audience, format, and visual style. "Make me a pitch deck" is fine, but "Make me a magazine-style pitch deck for a seed-stage AI startup targeting enterprise VCs" produces dramatically better results.

Use the Right Agent for the Job

Open Design auto-detects your agents, but you can pin a specific agent if you know its strengths. Claude Code excels at detailed HTML/CSS artifacts. Gemini CLI handles creative design briefs well. Codex is fast for quick prototypes. Experiment with different agents on the same request to see the variation.

Iterate with Skills

Don't expect perfect output on the first try. Use the skill composability — generate a brand identity first, then ask for a pitch deck using that identity. Each iteration builds on the previous one, and Open Design maintains the project context between requests.

FAQ

Is Open Design production-ready?

The project is under active development. Treat commands, supported agents and export formats as version-specific, and test the complete artifact loop before using it for production work.

Can I use it without a coding agent CLI?

Yes. Configure an OpenAI-compatible proxy endpoint with export OPENAI_API_KEY=sk-... and Open Design will use that as the design engine. The experience is the same — just slower because of API round trips.

Does it require GPU?

No. The heavy lifting is done by the coding agent (which may use GPU if available), but Open Design itself is a lightweight Node.js daemon that orchestrates the workflow. It runs on any laptop.

Can I contribute my own design systems or skills?

Yes. Skills are just directories with markdown prompt templates and file scaffolds. Design systems are JSON palette/typography definitions. The project welcomes community contributions and has clear contributing guidelines.

Resources

Fact-checked: 2026-07-23 · To report an error in this guide, use the EasyTool contact page.