Meet Open Design

Open Design (GitHub: nexu-io/open-design, Apache-2.0) is a community-built AI design workbench whose interface and workflow mirror Claude Design: describe your intent in conversation → the AI generates an interactive design on the canvas → keep iterating via annotations and chat. The big architectural difference: it ships no model of its own — after install it detects the coding-agent CLIs already on your machine (Claude Code, Codex, Gemini and 20+ more) and uses that agent as the design engine.

For our team this has one very practical consequence: you don't need a Claude account. A colleague with a ChatGPT subscription can install the codex CLI and Open Design will drive GPT to produce drafts — with the swift-web design resources fully in effect (see "engine-agnostic" below).

How it relates to Claude Design and Figma

Open DesignClaude DesignFigma
NatureOpen-source desktop app, runs locallyAnthropic's official cloud productCommercial cloud design platform
ModelAny coding agent on your machine (Claude / GPT / Gemini…)Claude (built in)N/A (Figma Make is a separate thing)
Account requirementNone (billed through the agent subscription you already have)Paid Claude accountFigma account
Multi-user collaborationNo cloud sharing — distribute the design-system bundle insteadTeam / Enterprise org sharingReal-time collaboration (its strongest suit)
Where your data livesEntirely on your machineAnthropic cloudFigma cloud

In one sentence: the open-source, local alternative to Claude Design. A good fit for colleagues who can't register a Claude account or want drafts to stay on their machine; the trade-off is no cloud review — finished drafts are shared as exported HTML / screenshots.

Connecting the swift-web design system (about five minutes)

swift-web ships a dedicated design-system bundle for Open Design — derived from the same framework source code as the 20 Claude Design cards. The steps below were verified end-to-end on macOS:

  1. Install: download the DMG from open-design.ai (or brew install --cask open-design), launch it and finish onboarding — the app auto-detects the coding-agent CLIs on your machine.
  2. Download the bundle: swift-web-open-design.zip (contains DESIGN.md design narrative + tokens.css full semantic tokens + components.html real component forms + manifest.json).
  3. Drop it into the design-systems directory: unzip and place the whole swift-web/ folder into:
    ~/Library/Application Support/Open Design/namespaces/release-stable/data/design-systems/

    The app picks it up immediately as a design system named swift-web (in draft state).
  4. Publish: in the design-system panel, move swift-web from draft to published — only then does it appear in the design-system picker when creating a project.
  5. Design: create a project, choose the swift-web design system, and describe the page in natural language. The first turn usually shows a quick confirmation form (colors / sections / counts); answer it and generation starts.

Brand variant example: swift-web · yc001 (Tangxin)

Beyond the base bundle (framework default blue) we also publish a finished brand-variant example: swift-web-yc001-open-design.zip (the Tangxin brand: fixed dark canvas + brand red + 27 brand supplement tokens for coins / VIP badges etc.). Import it exactly the same way as the base bundle.

⚠️ This variant is a finished example, not kept in sync — it is rebuilt on demand rather than refreshed with every framework change. Use it to get a feel for what brand injection produces; for resources that match the latest framework, use the base bundle above.

Why it's worth a look: the variant and the base are the same components with only the token values swapped — this is the finished form of "onboarding a brand = one token list" (see Governance, discipline #3). As a designer, this is what you get back after delivering a finalized token list: a dedicated design system where every draft comes out in brand colors by default, with no need to remind the AI "use our red" every time.

Which to pick: working on the Tangxin project → use the variant (drafts are on-brand out of the box); other projects / exploring a new brand palette → use the base (a neutral starting point — tell the AI "switch to an X color scheme" to explore freely, then request your own brand variant per discipline #3 once finalized).

Engine-agnostic: why GPT gets our design system too

Open Design's design systems are plain files: at generation time DESIGN.md (the 9-section design narrative), tokens.css (all semantic tokens) and components.html (real component forms) are injected verbatim into the agent's prompt. Whether the engine is Claude or GPT, the model reads exactly the same design constraints.

We tested the same bundle against both Claude and GPT 5.5: both produced drafts strictly inside the token system — every color consumed via semantic variables like var(--primary), radius 0.5rem, hover via brightness(0.92), the correct CJK font stack, and no stray hex values. Resource fidelity does not depend on the engine, so colleagues can safely use whichever model they have.

From draft to code

Open Design's output is a single self-contained HTML file (really renderable — not a screenshot). To hand it to the frontend:

  • send the exported HTML (or the project folder path — storage is local, it's just a folder) — Claude Code reads it and implements it as swift-web Nuxt code, converging with the Claude Design handoff path (see Designer–frontend collaboration);
  • it can also export PDF / PPTX for review settings.

Because the draft was generated with our semantic tokens and component forms in the first place, implementation is again close to a one-to-one mapping.

Honest caveats before you start

  • It's a community open-source project that moves fast: UI and directory layout may change between versions. The steps on this page reflect the version we verified; when in doubt, the official README wins.
  • No cloud collaboration: the design system travels as a bundle (we refresh it whenever the framework updates), and finished drafts travel as exports. For real-time multi-person review, Figma remains the best tool.
  • You need a coding-agent CLI on your machine, with model quota: generation is billed to your own agent subscription / API (a full page draft is on the order of tens of thousands of tokens).
  • The "quick confirmation" form on the first turn is normal flow, not a hang — answer it (or tell it to just start) and it proceeds.