Open Design Explained: Turning Claude Code and Codex into AI Design Tools

An introduction to nexu-io/open-design, an open-source AI design project that connects local Agent CLIs such as Claude Code, Codex, Cursor, and Gemini into a design workflow with Skills, Design Systems, a local daemon, and sandboxed previews.

Open Design is an open-source AI design project from nexu-io. Its positioning is local-first and open-source, as an alternative direction to Claude Design and Figma.

The problem it targets is clear: Claude Design showed that large models can generate design artifacts directly, but if this capability only exists inside a closed, cloud-only, single-model product, users cannot easily self-host, connect their own agents, swap models, build private design systems, or put outputs into a local workflow.

Open Design does not try to build a new foundation model. Instead, it connects the coding-agent CLIs already installed on your computer into a design workspace. Claude Code, Codex, Cursor Agent, Gemini CLI, OpenCode, Qwen, Copilot CLI, Kimi, DeepSeek TUI, and similar tools can become its design engine.

What is Open Design?

Open Design can be understood as a combination of three parts:

  • A Web UI for chat, preview, project management, and export.
  • A local daemon that schedules agents, manages files, stores projects, and provides APIs.
  • A set of Skills, Design Systems, and templates that guide agents toward design-quality artifacts instead of generic AI pages.

After the user enters a request, Open Design does more than pass a sentence to a model. It first asks the user to refine the design brief, choose the scenario and direction, then injects project metadata, the active design system, Skill files, templates, and checklists into the agent’s context. The agent reads and writes files inside a real project folder and produces an artifact that can be previewed in a sandboxed iframe.

This makes it closer to an AI design workflow than a one-shot webpage generator.

Why it differs from ordinary AI webpage generation

Many AI tools can generate an HTML page. Open Design’s focus is not “make the model write a page,” but “make the model follow a design workflow to deliver artifacts that can be previewed, exported, and iterated.”

It emphasizes several design choices:

  • Ask questions before generating. A new design brief starts with an interactive question form to lock down audience, tone, brand context, constraints, and visual direction.
  • Skills are files, not black-box plugins. Each Skill is made of SKILL.md, assets/, and references/, so it can be read, replaced, and extended.
  • Design Systems are Markdown, not fixed theme JSON. Color, typography, spacing, components, motion, brand voice, and anti-patterns can be written into DESIGN.md.
  • The agent works in a real project directory. It can read templates, write files, generate images, and output .pptx, .pdf, .zip, and other files.
  • Artifacts are previewed in a sandboxed iframe, reducing the risk of directly executing uncontrolled code.

The goal is to make AI behave more like a design collaborator with rules, assets, and checklists.

Which agents does it support?

One highlight of Open Design is that it treats agents as the runtime instead of locking into one model vendor.

The README lists support for Claude Code, Codex CLI, Devin for Terminal, Cursor Agent, Gemini CLI, OpenCode, Qwen Code, Qoder CLI, GitHub Copilot CLI, Hermes, Kimi, Pi, Kiro, Kilo, Mistral Vibe, DeepSeek TUI, and more. It detects these CLIs from PATH and lets users switch between them.

If no local CLI is available, it can also use an OpenAI-compatible BYOK proxy. Users provide baseUrl, apiKey, and model name, and the daemon normalizes streaming output into the same chat stream.

This design brings several benefits:

  • It does not lock users into one model.
  • It can reuse agents users have already installed and configured.
  • Local file reads and writes are managed by the daemon, making the permission boundary clearer.
  • For enterprises and advanced users, it is easier to connect custom models and API providers.

Skills and Design Systems are the core assets

Open Design bundles many Skills and Design Systems. The README says the built-in Skills cover web prototypes, SaaS landing pages, dashboards, mobile apps, gamified apps, social carousels, magazine posters, decks, weekly updates, finance reports, HR onboarding, invoices, kanban boards, OKRs, and more.

Design Systems provide brand-grade visual constraints for the agent. The repository description mentions sources such as Linear, Stripe, Vercel, Airbnb, Tesla, Notion, Apple, Anthropic, Cursor, Supabase, Figma, Xiaohongshu, and others.

The relationship is simple:

  • Skill decides what kind of artifact should be delivered.
  • Design System decides what brand style the artifact should follow.

Without these two layers, AI can easily produce generic pages that look familiar but lack judgment. With Skills and Design Systems, the model has clearer task boundaries, visual references, and review rules.

What can it generate?

Open Design is not limited to web prototypes.

According to the README, it covers web, desktop, mobile prototypes, slides, images, videos, HyperFrames, and more. It also supports export formats such as HTML, PDF, PPTX, ZIP, and Markdown. Media generation is included in the same design loop, covering posters, avatars, infographics, illustrated maps, short videos, and HTML-to-MP4 motion graphics.

This gives it a wide range of use cases:

  • Startup teams can create pitch decks quickly.
  • Product teams can generate landing pages or functional prototypes.
  • Operations teams can create campaign pages, social media images, and weekly reports.
  • Designers can use it for moodboards, visual directions, and first-pass layouts.
  • Developers can turn requirements into runnable frontend artifacts.

Its value is not just generating one page, but bringing multiple content forms into the same agent workflow.

What local-first means

Open Design emphasizes local-first. It does not hand everything to a remote SaaS backend. Instead, it runs a local daemon and project workspace.

The architecture described in the README roughly looks like this:

  • The frontend uses Next.js, React, and TypeScript.
  • The local daemon uses Node, Express, SQLite, and SSE.
  • Projects, sessions, messages, tabs, and templates are stored in local SQLite and .od/projects/<id>/.
  • Agents are started through child_process.spawn and read/write inside project artifact folders.
  • Preview is rendered through a sandboxed iframe.
  • Export includes HTML, PDF, PPTX, ZIP, and Markdown.

This structure is better for users who want design outputs to stay on their machine, local agents to be connected, API keys to remain under their control, and private workspaces to be maintained.

However, local-first does not mean fully offline. Actual generation still depends on the agent and model you use. If you use a cloud model API, content still goes to that provider. A more accurate description is that Open Design brings workspace, scheduling, files, and preview back to local control, while leaving the model layer to the user.

Relationship with Claude Design and Figma

Open Design explicitly describes itself as an open-source alternative direction to Claude Design and Figma, but it is not a traditional Figma clone.

Figma is a professional tool for manual design editing, collaboration, and delivery. Open Design is more agent-native: users drive agents through natural language, forms, Skills, and design systems to produce runnable artifacts.

It combines several ideas:

  • Claude Design’s artifact-first experience.
  • Figma’s design-system awareness.
  • File reading, writing, and execution from agents such as Claude Code and Codex.
  • Local daemon project management and sandboxed preview.

So it may not replace the full professional design workflow, but it is well suited as a fast path from idea to previewable prototype.

Who is it for?

Open Design is better suited for:

  • Developers already using Claude Code, Codex, Cursor, Gemini CLI, and similar agents.
  • Users who want AI design outputs managed inside local project folders.
  • Startup teams that need web prototypes, decks, posters, and marketing assets quickly.
  • Advanced users who want to customize Skills, Design Systems, and prompt stacks.
  • Teams that do not want to be locked into a single model or cloud product.

It is less suitable for:

  • Lightweight users who only want to open a webpage, type one sentence, and download an image.
  • Users who do not want to touch Node, pnpm, daemons, CLIs, or local configuration.
  • Professional Figma workflows that need mature collaboration, design review, and vector editing.

In short, Open Design is more of a tool for agent users and technical design teams than a lightweight design SaaS for everyone.

Things to watch

The README marks the project as 0.8.0-preview and notes that it is still evolving quickly. That energy is valuable, but it also means APIs, data directories, desktop migration, Skills structure, and export flows may change.

Before using it seriously:

  • Do not treat it as a fully stable enterprise design platform.
  • Try the workflow with test projects before importing important materials.
  • Back up .od/ before migration, and make sure the daemon and desktop app are stopped.
  • When using BYOK, pay attention to API keys, proxy addresses, and local private-network access risks.
  • Review generated designs manually, especially for brand, copyright, copy, and visual consistency.

The benefit of an open-source project is that it can be inspected, modified, and contributed to. The cost is that you need to accept some engineering friction.

Summary

The interesting part of Open Design is not just that it is an open-source Claude Design alternative. What matters is how it organizes Agent CLIs, Skills, Design Systems, a local daemon, and sandboxed preview into one design workflow.

It pushes design generation from a single prompt toward a more structured process: ask questions, choose direction, load a design system, read the Skill, write real files, preview the artifact, then export the result.

If you already use Claude Code, Codex, or Cursor for coding work, Open Design is worth watching. It represents a new product shape: AI is not only drawing one picture for you, but working inside a local project space, following design systems and task skills to generate design artifacts that can keep evolving.

References

记录并分享
Built with Hugo
Theme Stack designed by Jimmy