nexu-io /
open-design
Local-first workspace where coding agents build prototypes, decks, images and motion
- 103.4k stars
- TypeScript
- Updated today
- Some experience
- Design & UI
Design tools and coding agents usually live apart. OpenDesign puts them in one project. You write a brief, an agent such as Claude Code, Codex or DeepSeek Harness builds the result, and you see it in a live preview beside the conversation. Teammates can then give feedback in the same project.
It connects to agents in two ways. Agents that consume OpenDesign use its skills, CLI and MCP setup, for example od mcp install claude. Others are launched directly through native runtime adapters. With no agent CLI installed, a bring-your-own-key proxy takes a base URL, API key and model for OpenAI, Anthropic, Azure, Google Gemini, Ollama, LM Studio, vLLM or any OpenAI-compatible endpoint.
Output follows a DESIGN.md design system plus skills, templates and plugins you can inspect and change. The project is Apache 2.0 licensed, and a paid hosted option, OpenDesign Cloud, also exists. The README text provided is cut off, so details past the demo section are unclear.
What it does
Prototypes from a brief
Builds single-page HTML prototypes for web, desktop and mobile that read your DESIGN.md and render in a sandboxed preview. They can be handed to Cursor, Codex or Claude Code to turn into React, Next or Vue.
Live dashboards
Dashboard and decision-room artifacts have a tweaks panel, and the page re-renders without a reload. The agent emits a manifest that drives this.
Decks with many export formats
Ships 15 deck templates and 36 themes. Decks export to HTML, PDF, PPTX, ZIP or Markdown.
Images and motion graphics
Generates images through gpt-image-2, ImageRouter or a custom API, and makes motion graphics in a HyperFrames editor that exports to MP4.
Wide agent support
The README lists about 19 agents with one-line setup, including Claude Code, Codex CLI, Cursor, OpenCode, Cline, Kiro and Hermes Agent. DeepSeek Harness runs as a native runtime. The BYOK proxy blocks internal IP ranges to guard against SSRF.
What you could build
- Turn a written brief into a clickable web or mobile prototype that matches your brand's DESIGN.md.
- Build a live KPI dashboard whose parameters you can adjust in a tweaks panel.
- Create a pitch or weekly-update deck and export it as PDF or PPTX.
- Generate motion graphics with an agent and export them as MP4.
- Connect an existing coding agent to a shared design workspace with a single MCP install command.
Get started
The README excerpt gives no install commands, only a link to a QUICKSTART.md that claims three commands, and a downloadable app on the website. Follow that quickstart, then connect your agent with od mcp install <agent> or paste an API key into the BYOK proxy.
Commands are copied from the project's README. Read it on GitHub for the full setup.
More in Design & UI
awesome-design-md
A curated set of DESIGN.md files that capture the look of well-known websites
diagram-design
A skill that makes on-brand HTML and SVG diagrams from a plain-language request
design.md
A file format that tells coding agents your colors, fonts, and spacing, plus why
pascalorg/editor
Local-first 3D building editor you can use in a browser, a CLI, or through AI agents
openui
A framework and compact language for letting LLMs stream live UI components
awesome-design-skills
A registry of 67 ready-made design system files for AI coding agents