Open CoDesign

简体中文: README.zh-CN.md

Your prompts. Your model. Your laptop.

Turn prompts into polished artifacts — locally, openly, and with whichever model you already pay for.

Website · Quickstart · What's new · Changelog · Discussions · Docs · Contributing · Security

Open-source alternative to: Claude Design · v0 by Vercel · Lovable · Bolt.new · Figma AI

_{claude-code · claude-design-alternative · v0-alternative · bolt-alternative · lovable-alternative · figma-alternative · ai-design · design-to-code · prompt-to-design · ai-prototyping · desktop-design-tool · byok · local-first · multi-model · electron}

What's new

feat/decompose-to-ui-kit (branch) — Image -> componentized ui_kits/<slug>/ bundle for coding-agent handoff · Boolean-per-dimension visual parity judge (12 standard checks) · Verify-and-iterate loop · Per-decompose cost row · See BENCHMARKS.md. Refs #225.
v0.2.0 (2026-05-09) — Agentic Design: workspace-backed sessions · permissioned local tools · Files panel upgrades · provider diagnostics · security hardening · DESIGN.md design systems
v0.1.4 (2026-04-23) — AI image generation · ChatGPT Plus/Codex subscription support · CLIProxyAPI one-click import · API config hardening
v0.1.3 (2026-04-21) — Gemini models/ prefix fix · OpenAI-compatible relay "instructions required" fix · third-party relay SSE-truncation hint
v0.1.2 (2026-04-21) — Release pipeline · Homebrew / winget / Scoop packaging manifests

Full release history → · Changelog →

What it is

Turn a prompt into a polished prototype, slide deck, or marketing asset, locally, with the model you already use.

Open CoDesign is the open-source Claude Design alternative — built for people who want the speed of AI-native design tools without subscription lock-in, cloud-only workflows, or being forced onto a single provider. An MIT-licensed desktop app, local-first from day one, with BYOK for any model (Claude, GPT, Gemini, DeepSeek, Kimi, GLM, Ollama, or any OpenAI-compatible endpoint) plus direct ChatGPT Plus / Pro / Team subscription sign-in for Codex models. One-click import of existing Claude Code or Codex provider configs, or one-click ChatGPT sign-in, gets you running in under 90 seconds.

See it generate

The Examples gallery also includes three editable, asset-backed starting points: Daymark (Todo brief, task/project JSON, original logo and design tokens), Common Ground (workshop brief, schedule CSV and original artwork), and Trailhead (an original low-fidelity SVG sketch, annotated brief and trip data). Selecting a pack creates a fresh workspace and copies its reference files before filling the composer; inspect or edit them in Files, then send when ready. Nothing is submitted automatically and no existing workspace is overwritten. These fictional MIT-licensed packs contain inputs, not prebuilt final interfaces. Tags describe supplied references and requested prototype behavior, not verified generation results. Bookings and other data are simulated; the sketch includes text annotations for models without image input. Preflight receives a bounded, non-exhaustive list of existing workspace file paths and recognizes local DESIGN.md guidance. An absent App.jsx does not mean reference inputs are missing; the agent can inspect them before building. Local CSV references are included in the bounded agent text-file scan alongside Markdown, JSX, JSON, and SVG inputs. Preview and final verification resolve local assets relative to the source file inside the bound workspace. Missing assets and paths outside that workspace remain verification errors.

While a design is generating, Queue follow-up (Enter) adds a text request for when the agent would otherwise finish. Steer next step supplies it after the current assistant response and tool batch finish; it does not interrupt file writes, streaming tokens, permission decisions, or an unanswered agent question. The current run keeps its model, reasoning setting, and workspace. Queued requests are explicitly marked pending until the agent receives them. Stop, errors, or restarting the app leave undelivered requests recoverable, never automatically resent. Active-run messages are text-only: remove attached files, reference URLs, and queued comments before sending; those drafts are not silently included or discarded. Individual queue editing/removal is not supported. Delivery receipts use the existing local pi session JSONL, not a separate database. After sending, an empty composer stays compact; queue and steering actions appear only while composing another message. Delivery explanations are available on demand, not inserted into the draft. Long tool errors show a short reason with expandable, scrollable original diagnostics.

From a blank prompt to a finished artifact, the agent plans, writes, self-checks, and ships something with hover states, tabs, and empty states already wired up:

Why people star it

Runs on your laptop — no mandatory cloud workspace
Works with your model — Claude, GPT, Gemini, Ollama, OpenRouter, and more
Exports real files — HTML, PDF, PPTX, ZIP, Markdown
Shows its work — live agent activity, visible tool calls, interruptible generation

Why Open CoDesign?

Open source, desktop-native, and built for people who do not want their design workflow locked to one model or one cloud.

	Open CoDesign	Claude Design	v0 by Vercel	Lovable
Open source	✅ MIT	❌ Closed	❌ Closed	❌ Closed
Desktop native	✅ Electron	❌ Web only	❌ Web only	❌ Web only
Bring your own key	✅ Any provider	❌ Anthropic only	❌ Vercel only	⚠️ Limited
Local / offline	✅ Fully local app	❌ Cloud	❌ Cloud	❌ Cloud
Models	✅ 20+ (Claude, GPT, Gemini, Ollama…)	Claude only	GPT-4o	Multi-LLM
Version history	✅ Local sessions + workspace files	❌	❌	❌
Data privacy	✅ On-device app state	❌ Cloud-processed	❌ Cloud	❌ Cloud
Editable export	✅ HTML, PDF, PPTX, ZIP, Markdown	⚠️ Limited	⚠️ Limited	⚠️ Limited
Price	✅ Free app, provider/subscription cost only	💳 Subscription	💳 Subscription	💳 Subscription

Highlights

Comment, don’t retype. Click any element, drop a pin, and let the model rewrite only that region.	AI-tuned sliders. The model surfaces the parameters worth tweaking, so you can refine color, spacing, and typography without another full prompt.
Every iteration, kept. Designs are saved locally, with instant switching between recent versions.	Watch the agent work. Todos, tool calls, and live progress stay visible and interruptible throughout generation.

Quickstart

Time to first artifact: about 3 minutes

Requires: one API key, ChatGPT subscription sign-in, or local Ollama

Runs on: macOS 12+ (Monterey or later), Windows 10+, Linux (glibc ≥ 2.31)

1. Install

Package manager (recommended):

# macOS
brew install --cask opencoworkai/tap/open-codesign

# Windows — Scoop
scoop bucket add opencoworkai https://github.com/OpenCoworkAI/scoop-bucket
scoop install opencoworkai/open-codesign

Or direct download from the v0.2.0 GitHub Release:

Platform	File
macOS (Apple Silicon)	`open-codesign-*-arm64.dmg`
macOS (Intel)	`open-codesign-*-x64.dmg`
Windows (x64)	`open-codesign-*-x64-setup.exe`
Windows (ARM64)	`open-codesign-*-arm64-setup.exe`
Linux (x64, AppImage)	`open-codesign-*-x64.AppImage`
Linux (x64, Debian/Ubuntu)	`open-codesign-*-x64.deb`
Linux (x64, Fedora/RHEL)	`open-codesign-*-x64.rpm`

Each release ships with SHA256SUMS.txt and a CycloneDX SBOM (*-sbom.cdx.json) so you can verify what you downloaded.

More package managers

Manager	Command	Status
Homebrew Cask (macOS)	`brew install --cask opencoworkai/tap/open-codesign`	🟢 Live
Scoop (Windows)	`scoop bucket add opencoworkai https://github.com/OpenCoworkAI/scoop-bucket && scoop install opencoworkai/open-codesign`	🟢 Live
winget (Windows)	`winget install OpenCoworkAI.OpenCoDesign`	🟡 PR submitted; waiting for Microsoft review
Flathub (Linux)	`flatpak install flathub ai.opencowork.codesign`	⏸ Deferred; needs signed build + AppStream metadata
Snap (Linux)	`snap install --dangerous open-codesign-*.snap`	🟡 Attached to releases best-effort; Snap Store publish not yet wired

After each stable tag push, CI syncs SHAs back into packaging/ and publishes downstream Homebrew/Scoop updates when the repo secrets are configured. The first winget submission is in review; once Microsoft accepts the package, future winget bumps can be automated from the release workflow. Every packaging/*/README.md documents its own channel.

Unsigned installer note: installers are not notarized or Authenticode-signed yet. On macOS Sequoia 15+ right-click → Open no longer bypasses Gatekeeper, and "Open Anyway" in System Settings often fails. Reliable one-liner:
xattr -cr "/Applications/Open CoDesign.app"
Then double-click normally. (Older 0.1.x builds are installed as /Applications/open-codesign.app.) On Windows: SmartScreen → More info → Run anyway.

Want a verified build? Compile from source — see CONTRIBUTING.md.

2. Add a provider

On first launch, Open CoDesign opens the Settings page. Pick the path that matches how you already use models:

ChatGPT subscription — sign in with ChatGPT to use Codex models without pasting an API key.
API key — paste Anthropic (sk-ant-...), OpenAI (sk-...), Atlas Cloud, LLMTR, Google Gemini, OpenRouter, SiliconFlow, DeepSeek, or another supported provider key.
Local / keyless — use Ollama or an IP-allowlisted OpenAI-compatible gateway.

For a custom endpoint that accepts requests without an API key, select No API key required in the custom-provider form. Choose the endpoint's wire protocol (including OpenAI Responses when appropriate), enter its base URL and default model, and leave the key empty. Local/private endpoint testing still requires the separate network confirmation. Automatic model discovery never sends API keys; for authenticated endpoints, enter a key and click Test connection. Switching an existing provider to keyless removes its stored key on save; switching back requires a stored or newly entered key.

JSX previews and standalone exports use system-ui by default without downloading fonts. The runtime loads a supported Google Fonts family (Fraunces, DM Serif Display, DM Sans, or JetBrains Mono) only when the artifact explicitly references it. Use local/system fonts for offline-only designs; explicit remote font choices still require network access.

Credentials stay in ~/.config/open-codesign/config.toml and the ChatGPT OAuth token store under the app config directory. Nothing leaves your machine unless your chosen model route requires it.

3. Type your first prompt

Pick one of fifteen built-in demos — landing page, dashboard, pitch slide, pricing, mobile app, chat UI, event calendar, blog article, receipt/invoice, portfolio, settings panel, and more — or describe your own. A sandboxed prototype appears in seconds.

For app requests, the agent is guided to build a bounded, connected local prototype, not a collection of isolated screens: a core journey, working navigation and back paths, shared records, and relevant validation, empty, and success states. For example: “Build Daymark, a polished mobile Todo app for planning a day.” Adding, editing, completing, and filtering tasks should update related views and counts together. Explicit single-screen requests, decks, documents, and narrow revisions keep their original scope.

Substantial fresh apps use a few runnable milestones: an early coherent frame with visual tokens and realistic initial content, connected journeys and shared-state actions, then integrated craft and responsive refinement. The agent edits complete, readable source at each checkpoint rather than holding back one giant file or showing generation placeholders. An early frame preview is progress, not completion; the final requested journeys still need to be implemented and checked. This is workflow guidance, not a guaranteed generation-speed improvement.

When useful or requested, tweak controls focus on consequential choices such as brand, density, type scale, and implemented layout variants, rather than every pixel. Defaults should match the source, choices should affect the relevant screens, and later agent edits should preserve your selections. Checking a source variant in preview does not verify the separate host tweak panel or guarantee automatic updates to unbound files.

These are interactive prototypes, not production services. Data and service actions are simulated; backend setup, real authentication, and payments are not implied. State is in memory by default and may reset on reload. The agent previews the result and, when supported by the preview tool, exercises a bounded journey at the target viewport, repairs concrete failures, and distinguishes runtime checks from interactions actually tested.

Bring your stack

Already using Claude Code or Codex? API-key provider configs import in one click, with no copy-paste and no need to re-enter settings. If you use Codex through ChatGPT subscription login, sign in directly from Settings:

Built-in taste

Build first, clarify blockers. Capability routing does not open a pre-generation questionnaire. The agent chooses reversible visual and layout details, notes material assumptions, and delivers a preview before optional refinement. It can still ask a compact batch for genuinely missing required facts or references, an output constraint that cannot be inferred, or your explicit request for a brief interview. Concept drafts may label nonessential event details as pending; official dates, sponsors, and legal claims must not be invented. Permission prompts remain separate and are not automatically approved.

Answered ask results already stored in the current design's session are reused as labelled data within the existing history budget, without displacing selected conversation or the design brief. Cancelled, empty, malformed, unmatched, or count-only results are not treated as answers or consent. Oversized answer groups are omitted intact rather than misleadingly truncated; facts that older preflight events never stored cannot be reconstructed.

Open CoDesign combines shared design guidance with on-demand method skills for composition, app navigation, mobile layouts, accessibility, charts, decks, and design-system handoff. Visual direction comes from the brief and references, not a fixed font or palette blacklist. Existing designs keep their language unless a redesign is requested.

The core prompt defines scope, workspace/runtime boundaries, and completion evidence. Selected skills provide focused techniques and examples, including source-backed tweak declarations and a DESIGN.md example checked against the app's validator. Resource indexes are available up front; full method bodies load only when requested by the agent.

DESIGN.md component extensions with string values (such as minHeight or borderRadius) are preserved with non-blocking warnings, following the pinned Google DESIGN.md consumer rules. Completion reports these metadata warnings separately; malformed token types and runtime failures still block completion. This targeted compatibility rule does not imply full conformance with every evolving upstream feature.

This approach synthesizes OpenAI's current prompting guidance, Claude prompting best practices, and skill-authoring guidance, reviewed on September 17, 2026. The dated official frontend-design reference informed an original rewrite; no external skill text is bundled. These are shared product rules, not assumptions that a private gateway model ID has a vendor's documented capabilities.

Contract tests check loaded instructions, supported source examples, preference consistency, and size limits. They do not establish faster generation, visual quality, or working journeys in every model output; those require separate rendered evaluation. Existing profiles load their local template copies, so rebuilding the app alone does not replace older or customized method text. Template upgrades must preserve user-owned content.

What you get

Models and providers

Unified provider model — Anthropic, OpenAI, Atlas Cloud, LLMTR, Gemini, DeepSeek, OpenRouter, SiliconFlow, local Ollama, or any OpenAI-compatible relay; keyless (IP-allowlisted) proxies supported
One-click import and sign-in — bring Claude Code / Codex API-key provider configs across, or sign in with ChatGPT subscription for Codex models
Dynamic model picker — every provider exposes its real model catalogue, not a hardcoded shortlist

Generation and editing

Prompt → HTML or JSX/React component prototype, rendered in a sandboxed iframe (vendored React 18 + Babel on-device)
Fifteen built-in demos + twelve design skill modules — ready-to-edit starting points for common design briefs
Live agent panel — watch tool calls stream in real time as the model edits files
AI image generation — opt-in bitmap assets for heroes, product shots, backgrounds, and illustrations via OpenAI, OpenRouter, or signed-in ChatGPT subscription
AI-generated sliders — the model emits the parameters worth tweaking (color, spacing, font)
Comment mode — click any element in the preview to drop a pin, leave a note, and let the model rewrite only that region
Decompose to UI Kit — one click in the chat sidebar emits a ui_kits/<slug>/ folder (index.html + components/*.tsx + tokens.css + manifest.json + README.md) shaped for coding-agent handoff. Built-in deterministic + vision verifiers self-check parity using a 12-question boolean rubric (no floating-point arbitrary scores) and re-iterate on gaps. Per-decompose cost surfaces inline as a toast. See BENCHMARKS.md.

_{Source image (gpt-image input) on the left, agent-emitted ui_kit rendered headlessly on the right. Parity score and status are derived deterministically — parityScore = passCount / totalChecks — from the 12-check boolean rubric. Numbers are from a real e2e-opus-final run, not a mock.}

_{4-frame reel from the e2e-nodebench-iter run: source → iter-0 (parityScore 0.82, 6 gaps) → iter-1 (parityScore 0.78, 5 gaps) → honest verdict. The agent fixed some gaps and introduced new layout drift; the boolean rubric exposes the regression instead of hiding it. MP4 version.}
Generation cancellation — stop mid-stream without losing prior turns

Preview and workflow

Source-backed tweaks — the Tweaks panel reads the active preview file, not declarations in unrelated starters or previous tool results. A flat JSON object between /*EDITMODE-BEGIN*/ and /*EDITMODE-END*/ exposes values; optional TWEAK_SCHEMA chooses supported controls. Bind these values to the design (for example, --ocd-tweak-card-radius in CSS); discovering a declaration with tweaks() does not create a binding. Missing, intentionally empty, and invalid declarations have distinct explanations. Ask for useful controls in the current source rather than expecting a later generation to add them automatically. Saves merge only changed keys and reject conflicting source edits.

Conditional source saves compare the expected bytes with disk inside a per-canonical-file writer queue shared by the app's file IPC, agent text editor, scaffold, and import publications, including designs sharing a workspace. Agent replacements/inserts also check their cached source before writing and refresh the view on conflict for an explicit retry; explicit whole-file creation/replacement remains unconditional. Existing workspace rename leases are retained. This coordinates participating writers in one app process, not external editors, shell commands, other app processes, or hard-link aliases: an external change already visible at comparison is rejected, but an external write between comparison and publication cannot be made atomic by this in-process queue.
Compact desktop chrome — workspace and settings headers use one row from 1,000 CSS pixels, with a two-row fallback at narrower widths and extra room for gallery tabs. Design/model tooltips preserve full names. Workspace paths and preview status share a wrapping summary row; expand the preview summary for connection settings without changing the active preview mode.
Fullscreen preview — expand a runnable JSX/HTML preview within the app window without resizing sidebars manually. This works in Preview, a dedicated file tab such as App.jsx, and the Files tab's inline preview. Chat, file navigation, and tweak controls are temporarily hidden; the titlebar and Exit fullscreen remain available. Exit or press Escape to restore the previous layout without reloading the preview's forms or navigation state. Menus and artifact dialogs handle Escape first; changing designs or tabs leaves fullscreen. Other file types and connected URLs do not enable this mode.
Readable preview controls — Comment mode, zoom, and Export retain visible labels and wrap below file tabs when space is tight. Zoom and export menus stay inside the window; use arrow keys / Home / End to navigate, Enter to select, and Escape to close and return focus. Preview zoom changes the artifact's display scale, not the app's control sizes or the artifact's source dimensions.
Phone / tablet / desktop preview — true responsive frames, switch with one click
Bounded interaction self-checks — preview can exercise up to 16 declarative steps and report the final screen and per-step failures. For native single-selection dropdowns, use {"action":"select","selector":"#category","value":"work"}, then assert the control's exact value and linked summary text. Selectors must uniquely identify a visible control; disabled selects/fieldsets/options/optgroups, multiple selects, and missing or duplicate option values are rejected. Values are capped at 2,000 characters; the existing 2-second step and 20-second interaction budgets apply. This does not verify untested routes or persistence between preview calls.
Recovering from an oversized preview call — The 16-step limit counts actions and assertions. More than 16 rejects the entire call before rendering or executing any steps; the agent receives a recoverable validation error and can retry corrected arguments. Use independent short journeys, each starting from a fresh document and repeating its own required setup. Do not split a sequence into consecutive tails expecting browser state to carry over. Combine compatible assertions on the same selector where useful, preserve essential outcome/shared-state checks, and disclose untested paths rather than silently truncating them.
Files panel — inspect multi-file artifacts (HTML, CSS, JS) before export
Collapsible chat — fold the conversation into a narrow restore rail without resetting drafts, active generation, the previous panel width, or preview state.
Instant design switching — the last five designs keep their preview iframes alive, so Hub ↔ Workspace and sidebar navigation stay zero-delay
Connection diagnostic panel — one-click test for any provider, with actionable errors
Per-generation token counter — see exactly how many tokens each run cost in the sidebar
Settings with four tabs — Models, Appearance, Storage, and Advanced
Light + dark themes, EN + 简体中文 UI with live toggle

Export and packaging

Opt-in web research for slides — Tavily search, public-page reading, saved evidence and separate Markdown sources alongside exports. See Web Search configuration and usage.
Five export formats — HTML (inlined local assets), PDF (local Chrome), PPTX, ZIP, Markdown. Literal local image and CSS URL references in JSX/TSX are resolved before runtime encoding; ZIP also preserves the original editable source. Dynamically computed asset paths are not statically collected.
GitHub Release pipeline — unsigned DMG (macOS), EXE (Windows), AppImage (Linux). Code-signing lands in v0.5 along with opt-in auto-update

Roadmap

Current release: v0.2.0. The current release theme is Agentic Design.

Now — v0.2.0 shipped

v0.2 turns Open CoDesign from a one-shot generator into a local design agent with a real workspace:

Design as session — every design is a pi session with JSONL history and a workspace folder on disk
Permissioned agent loop — pi built-ins for read, write, edit, bash, grep, find, and ls, gated by Open CoDesign's permission UI
Design tools on demand — ask, scaffold, skill, preview, gen_image, tweaks, todos, and done
DESIGN.md as shared memory — brand tokens and design-system decisions become editable files, not model memory
v0.1 migration path — existing SQLi

open-codesign

Understand it first

Install

What we checked

README

More in Developer tools

opencodex

open-design

open-multi-agent

codecompanion.nvim