nexu-io/open-designGit

用开源设计引擎导出 HTML/PDF/MP4

本地设计引擎，支持 HTML、PDF、PPTX 和 MP4 导出。

使用前，准备这些

输入素材：照片、主题与视觉风格要求

在下方原始文档中确认支持的 AI 工具、模型和运行依赖。
打开原仓库，按作者的安装说明完成配置；模型 API 或外部服务可能需要单独开通。
用自己的素材试运行，再检查事实、版式与输出文件。

许可证：Apache-2.0

来源快照：2026-09-15。README ↗

                                 Apache License
                           Version 2.0, January 2004
                        http://www.apache.org/licenses/

   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION

   1. Definitions.

      "License" shall mean the terms and conditions for use, reproduction,
      and distribution as defined by Sections 1 through 9 of this document.

      "Licensor" shall mean the copyright owner or entity authorized by
      the copyright owner that is granting the License.

      "Legal Entity" shall mean the union of the acting entity and all
      other entities that control, are controlled by, or are under common
      control with that entity. For the purposes of this definition,
      "control" means (i) the power, direct or indirect, to cause the
      direction or management of such entity, whether by contract or
      otherwise, or (ii) ownership of fifty percent (50%) or more of the
      outstanding shares, or (iii) beneficial ownership of such entity.

      "You" (or "Your") shall mean an individual or Legal Entity
      exercising permissions granted by this License.

      "Source" form shall mean the preferred form for making modifications,
      including but not limited to software source code, documentation
      source, and configuration files.

      "Object" form shall mean any form resulting from mechanical
      transformation or translation of a Source form, including but
      not limited to compiled object code, generated documentation,
      and conversions to other media types.

      "Work" shall mean the work of authorship, whether in Source or
      Object form, made available under the License, as indicated by a
      copyright notice that is included in or attached to the work
      (an example is provided in the Appendix below).

      "Derivative Works" shall mean any work, whether in Source or Object
      form, that is based on (or derived from) the Work and for which the
      editorial revisions, annotations, elaborations, or other modifications
      represent, as a whole, an original work of authorship. For the purposes
      of this License, Derivative Works shall not include works that remain
      separable from, or merely link (or bind by name) to the interfaces of,
      the Work and Derivative Works thereof.

      "Contribution" shall mean any work of authorship, including
      the original version of the Work and any modifications or additions
      to that Work or Derivative Works thereof, that is intentionally
      submitted to Licensor for inclusion in the Work by the copyright owner
      or by an individual or Legal Entity authorized to submit on behalf of
      the copyright owner. For the purposes of this definition, "submitted"
      means any form of electronic, verbal, or written communication sent
      to the Licensor or its representatives, including but not limited to
      communication on electronic mailing lists, source code control systems,
      and issue tracking systems that are managed by, or on behalf of, the
      Licensor for the purpose of discussing and improving the Work, but
      excluding communication that is conspicuously marked or otherwise
      designated in writing by the copyright owner as "Not a Contribution."

      "Contributor" shall mean Licensor and any individual or Legal Entity
      on behalf of whom a Contribution has been received by Licensor and
      subsequently incorporated within the Work.

   2. Grant of Copyright License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      copyright license to reproduce, prepare Derivative Works of,
      publicly display, publicly perform, sublicense, and distribute the
      Work and such Derivative Works in Source or Object form.

   3. Grant of Patent License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      (except as stated in this section) patent license to make, have made,
      use, offer to sell, sell, import, and otherwise transfer the Work,
      where such license applies only to those patent claims licensable
      by such Contributor that are necessarily infringed by their
      Contribution(s) alone or by combination of their Contribution(s)
      with the Work to which such Contribution(s) was submitted. If You
      institute patent litigation against any entity (including a
      cross-claim or counterclaim in a lawsuit) alleging that the Work
      or a Contribution incorporated within the Work constitutes direct
      or contributory patent infringement, then any patent licenses
      granted to You under this License for that Work shall terminate
      as of the date such litigation is filed.

   4. Redistribution. You may reproduce and distribute copies of the
      Work or Derivative Works thereof in any medium, with or without
      modifications, and in Source or Object form, provided that You
      meet the following conditions:

      (a) You must give any other recipients of the Work or
          Derivative Works a copy of this License; and

      (b) You must cause any modified files to carry prominent notices
          stating that You changed the files; and

      (c) You must retain, in the Source form of any Derivative Works
          that You distribute, all copyright, patent, trademark, and
          attribution notices from the Source form of the Work,
          excluding those notices that do not pertain to any part of
          the Derivative Works; and

      (d) If the Work includes a "NOTICE" text file as part of its
          distribution, then any Derivative Works that You distribute must
          include a readable copy of the attribution notices contained
          within such NOTICE file, excluding those notices that do not
          pertain to any part of the Derivative Works, in at least one
          of the following places: within a NOTICE text file distributed
          as part of the Derivative Works; within the Source form or
          documentation, if provided along with the Derivative Works; or,
          within a display generated by the Derivative Works, if and
          wherever such third-party notices normally appear. The contents
          of the NOTICE file are for informational purposes only and
          do not modify the License. You may add Your own attribution
          notices within Derivative Works that You distribute, alongside
          or as an addendum to the NOTICE text from the Work, provided
          that such additional attribution notices cannot be construed
          as modifying the License.

      You may add Your own copyright statement to Your modifications and
      may provide additional or different license terms and conditions
      for use, reproduction, or distribution of Your modifications, or
      for any such Derivative Works as a whole, provided Your use,
      reproduction, and distribution of the Work otherwise complies with
      the conditions stated in this License.

   5. Submission of Contributions. Unless You explicitly state otherwise,
      any Contribution intentionally submitted for inclusion in the Work
      by You to the Licensor shall be under the terms and conditions of
      this License, without any additional terms or conditions.
      Notwithstanding the above, nothing herein shall supersede or modify
      the terms of any separate license agreement you may have executed
      with Licensor regarding such Contributions.

   6. Trademarks. This License does not grant permission to use the trade
      names, trademarks, service marks, or product names of the Licensor,
      except as required for describing the origin of the Work and
      reproducing the content of the NOTICE file.

   7. Disclaimer of Warranty. Unless required by applicable law or
      agreed to in writing, Licensor provides the Work (and each
      Contributor provides its Contributions) on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
      implied, including, without limitation, any warranties or conditions
      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
      PARTICULAR PURPOSE. You are solely responsible for determining the
      appropriateness of using or redistributing the Work and assume any
      risks associated with Your exercise of permissions under this License.

   8. Limitation of Liability. In no event and under no legal theory,
      whether in tort (including negligence), contract, or otherwise,
      unless required by applicable law (such as deliberate and grossly
      negligent acts) or agreed to in writing, shall any Contributor be
      liable to You for damages, including any direct, indirect, special,
      incidental, or consequential damages of any character arising as a
      result of this License or out of the use or inability to use the
      Work (including but not limited to damages for loss of goodwill,
      work stoppage, computer failure or malfunction, or any and all
      other commercial damages or losses), even if such Contributor
      has been advised of the possibility of such damages.

   9. Accepting Warranty or Support. While redistributing the Work or
      Derivative Works thereof, You may choose to offer, and charge a
      fee for, acceptance of support, warranty, indemnity, or other
      liability obligations and/or rights consistent with this License.
      However, in accepting such obligations, You may act only on Your
      own behalf and on Your sole responsibility, not on behalf of any
      other Contributor, and only if You agree to indemnify, defend,
      and hold each Contributor harmless for any liability incurred by,
      or claims asserted against, such Contributor by reason of your
      accepting any such warranty or support.

   END OF TERMS AND CONDITIONS

   APPENDIX: How to apply the Apache License to your work.

      To apply the Apache License to your work, attach the following
      boilerplate notice, with the fields enclosed by brackets "[]"
      replaced with your own identifying information. (Don't include
      the brackets!)  The text should be enclosed in the appropriate
      comment syntax for the file format. We also recommend that a
      file or class name and description of purpose be included on the
      same "printed page" as the copyright notice for easier
      identification within third-party archives.

   Copyright 2026 Open Design contributors

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.

可以这样开始

使用这个 Skill 完成「用开源设计引擎导出 HTML/PDF/MP4」：本地设计引擎，支持 HTML、PDF、PPTX 和 MP4 导出。请先确认必要输入，再交付一份可直接使用的结果。

OpenDesign: The open-source Claude Design alternative

⚡ OpenDesign Cloud — the official model service. One recharge to use both agent and image models inside OpenDesign: GPT, Claude, and DeepSeek for agents; GPT Image 2.0, Seedream 5.0 Pro, and Nano Banana 2.0 for images.

🚀 DeepSeek V4 Flash and V4 Pro are now available. Put top-tier intelligence to work across prototypes, decks, design systems, and everyday agent tasks. OpenDesign members can use both models without limits for two weeks, directly inside the app.

🧩 DeepSeek Harness is now supported. Connect DeepSeek's official dsh agent harness to OpenDesign as a native runtime, with structured thinking, tool calls, model discovery, cancellation, and session resume. Generated files stay in the OpenDesign workflow for live preview and delivery.

Website · Download · OpenDesign Cloud · Discord · Follow @OpenDesignHQ

English · Español · Português · Deutsch · Français · 简体中文 · 繁體中文 · 한국어 · 日本語 · العربية · Русский · Українська · Türkçe · ภาษาไทย

What is OpenDesign

🎨 The open-source Claude Design alternative. 🖥️ Local-first native desktop app for macOS and Windows. ⚡ Composable skills, brand-grade DESIGN.md design systems, and ready-to-use plugins. 🖼️ Generates web · desktop · mobile prototypes, live dashboards / artifacts, decks, images, video, plus HyperFrames motion graphics. 🔒 Sandboxed iframe preview · HTML / PDF / PPTX / MP4 export. 🤖 Runs on DeepSeek Harness (dsh) · Claude Code · OpenClaw · Codex · Cursor · OpenCode · Qwen · Copilot · Amp · Hermes · Kimi · Antigravity and 26 distinct local CLI executables, or any OpenAI-compatible endpoint via BYOK.

OpenDesign is what you get when the agent-native loop Anthropic shipped with Claude Design — discover the brief, lock the direction, stream the artifact, critique, deliver — stops being closed and becomes a filesystem of functional skills, rendering design templates, design systems, and plugins that the coding agents already on your laptop can read, write, and remix. Your CLI becomes the design engine, your laptop becomes the studio, and your team's DESIGN.md becomes the brand contract.

It's also the Figma alternative for the agent era — instead of pushing pixels on a canvas, it delivers single-page artifacts in real CSS, real fonts, real components, exported straight to HTML / PDF / PPTX / MP4 — already shaped by your design system, already runnable inside the agent you use every day.

Product tour

A quick look at the core OpenDesign workflow. Start from Home with a brief, explore reusable skills in Plugins, and turn brand references into a Design System. Then enter a project's Studio to create and refine prototypes, decks, mobile apps, images, documents, and HyperFrames in one place.

Core pages

_{Home — choose an artifact type, enter a brief, and set the design system, working directory, and model before you start.}

_{Plugins — browse official skills by category, search the catalog, and launch a workflow with Try it.} _{Design System — extract and refine a brand's visual language, preview the result, and create with it in the same workspace.}

Studio — many artifact types in one project

Inside a project's Studio, the conversation, generated files, and live preview stay together across six artifact types:

_{Prototype — generate or reconstruct web experiences, inspect the rendered page, and iterate with the agent in place.}	_{Deck — create multi-slide presentations, review thumbnails and speaker notes, and export when ready.}
_{Mobile app — generate and polish mobile interfaces in a device preview, with the conversation, output files, and next-step actions beside it.}	_{Image — generate visual assets from the project conversation, preview the result at full size, then download or open it.}
_{Document — create polished, multi-page guides and editorial documents, inspect the rendered layout, and export or share when ready.}	_{HyperFrame — build code-driven motion graphics, preview the animation inside Studio, and export the finished video.}

Platform Compatibility

OpenDesign connects to mainstream coding agents in two ways: skills, CLI, and MCP for agents that consume OD, plus native runtime adapters for agents that OD launches directly. DeepSeek Harness is a first-class native runtime through the official dsh CLI, with structured streaming, model discovery, cancellation, and session resume.

Coding agent / platform	Status	Quick setup
Claude Code	✅ Supported	`od mcp install claude`
Claude Desktop	✅ Supported¹	`od mcp install claude-desktop`
Codex CLI	✅ Supported	`od mcp install codex`
DeepSeek Reasonix	✅ Supported	`od mcp install reasonix`
DeepSeek Harness	✅ Native runtime	`od agent setup deepseek-harness`
Raven	✅ Supported	`od mcp install raven`
Cursor	✅ Supported	`od mcp install cursor`
VS Code + GitHub Copilot	✅ Supported	`od mcp install copilot`
GitHub Copilot CLI	✅ Supported	`od mcp install copilot`
OpenCode	✅ Supported	`od mcp install opencode`
OpenClaw	✅ Supported	`od mcp install openclaw`
Antigravity	✅ Supported	`od mcp install antigravity`
Cline	✅ Supported	`od mcp install cline`
Trae	✅ Supported	`od mcp install trae`
Kimi CLI	✅ Supported	`od mcp install kimi`
Kiro	✅ Supported	`od mcp install kiro`
Pi Agent	✅ Supported	`od mcp install pi`
Mistral Vibe CLI	✅ Supported	`od mcp install vibe`
Hermes Agent	✅ Supported	`od mcp install hermes`

For DeepSeek Harness, install the official dsh CLI first, then select it in OpenDesign or run od agent setup deepseek-harness to install/repair OD's connection component. For MCP integrations: od mcp install <agent> --print for a dry-run preview · --uninstall to remove · full list with od mcp install --help.

¹ Automatic MCP configuration for Claude Desktop is currently supported on macOS and Windows only.

No CLI installed? The BYOK proxy at POST /api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream gives you the same loop (no process spawn) — paste baseUrl + apiKey + model, with presets for OpenAI, Atlas Cloud, Anthropic, Azure OpenAI, Google Gemini, Ollama, LM Studio, vLLM, or any OpenAI-compatible endpoint. Atlas Cloud uses https://api.atlascloud.ai/v1 with your own key and OpenAI-compatible model ids such as qwen/qwen3.5-flash. Per-target SSRF protection blocks internal IPs / link-local / CGNAT at the daemon edge.

Runtime definitions live in apps/daemon/src/runtimes/defs/, with registration and shared stream handling under apps/daemon/src/runtimes/. See docs/agent-adapters.md for the adapter contract.

Demo

Four core product categories, all rendered by a coding agent running on your laptop. Click a thumbnail to see the real example.

1 · Prototypes — web · desktop · mobile

The default output surface. Single-page HTML artifacts that read your DESIGN.md and render in a sandboxed iframe.

_{Web prototype — an editorial dashboard with scrollbars, KPIs, and charts. Rendered straight from design-templates/dating-web/.} _{Mobile app prototype — a three-screen gamified flow with XP ribbons and quest detail. Hand off straight to Cursor / Codex / Claude Code to turn into React/Next/Vue.}

2 · Live artifacts & dashboards

Live dashboards, decision rooms, KPI walls — single-page artifacts that pull data through a tweaks panel and stay editable in place.

_{Live dashboard — an editable KPI wall whose tweaks panel surfaces the parameters worth nudging. The agent emits a manifest, and the iframe re-renders without a reload.}	_{Decision room — a multi-source briefing artifact for product / research / ops meetings.}
_{GitHub-style dashboard — repo metrics presented as a live artifact.}	_{Flow live-dashboard template — a domain-specific KPI template, branded through the active DESIGN.md.}

3 · Decks — magazine decks, weekly updates, pitches

_{Deck mode (guizang-ppt) — magazine layouts, WebGL hero, P0/P1/P2 checklists. Bundled verbatim from op7418/guizang-ppt-skill with its original license preserved.} _{Swiss International-style deck — grid-anchored, monochrome accents. One of 15 deck templates and 36 themes under design-templates/html-ppt-*/.}

Every deck exports to HTML (single file, inlined assets), PDF (browser print, deck-aware), PPTX (agent-driven skill), ZIP (archive), or Markdown.

4 · Images — `gpt-image-2`, ImageRouter, custom API

_{Illustrated city food map
Hand-drawn editorial travel poster}

_{Cinematic elevator scene
Single-frame editorial still}

_{Cyberpunk portrait
Profile avatar — neon face text}

_{3D stone staircase
Hewn-stone infographic}

_{Glamorous portrait
Editorial studio shot}

93 ready-to-replicate prompts live in prompt-templates/ — preview thumbnails, full prompt body, target model, aspect ratio, and source attribution. One click drops a brief into the composer.

5 · Video & HyperFrames — agent-native motion graphics

HyperFrames is HeyGen's open-source, agent-native video framework, integrated as a first-class citizen in OpenDesign. The agent writes HTML + CSS + GSAP, and HyperFrames renders it to a deterministic MP4 via headless Chrome + FFmpeg. Pair it with Seedance 2.0 for cinematic t2v / i2v, Veo 3 / Sora 2 / Kling 2 for routed model variants, and Suno v5 / Lyria 2 for the audio layer.

_{30s SaaS product promo · 16:9 · UI 3D reveals}	_{TikTok karaoke talking-head · 9:16 · TTS + word-synced captions}	_{30s brand sizzle reel · 16:9 · audio-reactive kinetic type}	_{Bar chart race · 16:9 · NYT-style data infographic}
_{Flight map · 16:9 · Apple-style route reveal}	_{4s cinematic logo outro · 16:9 · piece-by-piece assembly + bloom}	_{$0 → $10K money counter · 9:16 · Apple-style hype}	_{Website-to-video · 16:9 · captures the site at 3 viewports}

11 HyperFrames templates + 39 Seedance prompts ship with the repo. Catalog thumbnails © HeyGen; the framework is Apache-2.0. The OD-specific render workflow (composition cache, sandbox-exec workaround, MP4-as-chip) is detailed in design-templates/hyperframes/.

Why OpenDesign

In April 2026, Anthropic released Claude Design — the first time an LLM stopped writing prose and started delivering design artifacts directly. It went viral. But it stayed closed-source, paid-only, cloud-only, locked to Anthropic's model, Anthropic's skills, Anthropic's surface. No checkout, no self-host, no Vercel deploy, no swap-in-your-own-agent.

OpenDesign (OD) is the open-source alternative. Same loop, same artifact-first mental model, none of the lock-in:

🤖 Agent-native, model-agnostic. We don't ship an agent. The claude / codex / cursor-agent / copilot / hermes / kimi already on your PATH are the design engine. Swap with one click.
🧠 Brand-grade by default. Every render reads the active package's DESIGN.md as the core brand contract. 151 design-system packages ship with the repo; legacy packages may be DESIGN.md-only, while newer packages can add manifest.json, tokens.css, components, assets, and provenance. Drop a folder in, the picker finds it.
🖥️ Local-first, BYOK at every layer. Native desktop apps for macOS (Apple Silicon + Intel) and Windows (x64). Linux desktop users can currently run OpenDesign from source; the latest official release does not include a prebuilt Linux artifact. Product analytics and session replay are consent-gated; scrubbed safety and reliability telemetry is always on. Before describing daemon data paths, contributors and operators MUST read AGENTS.md → Daemon data directory contract. This README MUST NOT restate it.
🌍 Composable on four planes. Plugins carry runnable workflows · functional skills carry agent behavior · design templates carry rendering blueprints · design systems carry the brand. All four use portable, versionable directories that anyone can author and publish.
🔁 Refresh an existing codebase. Hand a git repo + DESIGN.md to the agent and it refactors your real components to the brand spec. Dedicated plugins migrate Figma / Pencil workflows into React / Next.js / Vue code.
🔒 Privacy by conviction. Everything runs where your data lives — your laptop, your team's server, your Vercel project. When the network is needed, the BYOK proxy is SSRF-guarded.

Comparison

	Claude Design	Figma	Lovable / v0 / Bolt	OpenDesign
Open source	❌	❌	❌	✅ Apache-2.0
Self-host / desktop	❌	❌	❌	✅ macOS + Windows + Docker + Vercel web
Agent-native (runs in your CLI)	Anthropic only	❌	Cloud agent only	✅ 25 CLIs + BYOK
Brand-grade `DESIGN.md`	Proprietary	Theme JSON	Limited tokens	✅ 151 systems shipped
Skills / plugins / templates	Closed	Plugin store	Closed	✅ 100+ functional skills · rendering templates · 277 plugins
HyperFrames (HTML→MP4)	❌	❌	❌	✅ First-class
Refresh an existing repo to brand	❌	❌	❌	✅ via agent + `DESIGN.md`
Minimum billing	Pro / Max / Team	Pro / Org	Pro / Team	BYOK · any compatible endpoint

Quick start

🖥️ Download the desktop app (recommended — zero config)

The fastest way to use OpenDesign. No Node, no pnpm, no clone.

macOS (Apple Silicon · Intel x64) → open-design.ai or GitHub Releases
Windows (x64) → open-design.ai or GitHub Releases
Linux → No prebuilt Linux artifact is currently published in the official releases. For now, run OpenDesign from source; Linux release work is tracked in #4368.

After install: the app auto-detects every coding-agent CLI on your PATH, loads 100+ functional skills, the separate rendering-template catalog, and 151 design systems, and lets you type a brief in the entry view.

🤖 Install into your coding agent (no UI)

You can use OpenDesign without ever opening the GUI — call it as a skill, plugin, or MCP server inside Claude Code, Codex, Cursor, Copilot, OpenClaw, Antigravity, Hermes, Kimi, and more.

If you installed the macOS desktop app via the DMG or Homebrew cask, your shell may still resolve od to Apple's built-in /usr/bin/od octal-dump utility. In that case, open Settings → MCP server in the desktop app and copy the client-specific snippet; it uses absolute paths and does not rely on the bare od command.

# One-line install into the agent you're using:
od mcp install <agent>
# <agent> = claude | codex | reasonix | raven | cursor | copilot | openclaw
#         | antigravity | pi | vibe | hermes | cline | kimi | kiro
#         | trae | opencode

# Hosted equivalent for curl-based setup:
curl -fsSL https://open-design.ai/install.sh | sh -s <agent>

install.sh is a thin shell wrapper around od mcp install; it exists so the hosted URL returns shell instead of the landing-page HTML fallback and fails fast if your shell resolves a non-Open-Design od binary.

macOS / WSL2 users: /usr/bin/od is a system octal-dump command and can shadow OpenDesign's od command. Desktop-app users should prefer the Settings → MCP server snippet; WSL2 users should follow the WSL2 setup guide first.

Then, inside the agent:

> Use open-design to generate a landing page with the Linear design system

In a filesystem-backed local CLI run, the agent composes the selected functional skill or design template with your DESIGN.md, writes the canonical project files, and OpenDesign previews those files. A BYOK/plain-API run without filesystem tools instead returns one complete <artifact> block.

🐳 Run with Docker

git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
cp .env.example .env
echo "OD_API_TOKEN=$(openssl rand -hex 32)" >> .env
docker compose up -d
# open http://127.0.0.1:7456

If the browser asks for credentials, use open-design as the username and the OD_API_TOKEN value from deploy/.env as the password. This keeps Docker bridge traffic authenticated without requiring host networking. API clients can keep using Authorization: Bearer <OD_API_TOKEN>.

🚀 Deploy on Sealos

The Sealos App Store template runs the published OpenDesign Docker image with persistent workspace storage and Basic Auth on the public proxy. For custom public or shared Docker deployments, follow the reverse-proxy and OPEN_DESIGN_ALLOWED_ORIGINS guidance in deploy/README.md.

🧑‍💻 Run from source

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web

Open the URL printed by tools-dev; development ports are allocated dynamically unless you pass explicit port flags.

Node ~24, pnpm 10.33.x. WSL2 users, see docs/wsl-setup.md; native Windows users, see docs/windows-troubleshooting.md. Full quickstart, env vars, and packaged build flow → QUICKSTART.md.

A full workflow — from brief to artifact

brief → plugin → direction → design system → artifact → handoff → memory

A PM submits a brief. The plugin picker offers landing page · pitch deck · dashboard · social post · PM spec · OKR scorecard…
A designer (or the agent) locks the direction. No brand? Pick from 5 curated directions. Have a brand? Drop a screenshot / URL → the agent connects GitHub, imports Figma, and codifies a reusable DESIGN.md.
The agent creates the first deliverable. Plugin + functional skill or design template + DESIGN.md are bound. Filesystem-backed CLI runs write canonical project files and the preview follows them; BYOK/plain-API runs without file tools return one complete <artifact> block.
Hand off to engineering. The artifact is real HTML/CSS — drop it into Cursor, Codex, or Claude Code to keep building as code. Or export PPTX / PDF / MP4 straight to marketing.
OpenDesign gets smarter as you use it. Your screenshots, fonts, palettes, and confirmed artifacts accumulate as defaults for the next session. Less rework, less drift.

Use OpenDesign from your coding agent

OpenDesign ships a stdio MCP server and per-agent install scripts. Any MCP-compatible agent in another repo can read files from your local OpenDesign projects directly — tokens CSS, JSX components, entry HTML — as a structured API queryable by name. The agent always sees the live file, not a stale export.

# One-line install (16+ CLIs supported):
od mcp install <agent>

# Then the agent can:
od project list --json
od files list <project-id> --json
od files read <project-id> <relative-path>
od plugin list --json
od skills list --json

Why MCP? Exporting and re-attaching a zip every iteration breaks flow. MCP exposes the design source directly — the agent always sees the live file.

For an agent starting from scratch, the installer places ~/.config/<agent>/open-design.json (or the platform equivalent) plus a copy-paste MCP snippet. Cursor gets a one-click deeplink; Claude Code gets a claude mcp add-json one-liner; every other agent gets JSON in the schema its config expects. On macOS desktop installs, prefer that Settings snippet over typing bare od mcp install <agent> in Terminal, because /usr/bin/od may win on PATH. Full per-agent flow → Settings → MCP server in the desktop app, or docs/agent-adapters.md.

Security model. Read-only by default, the daemon binds to 127.0.0.1, and SSRF is blocked at the proxy edge. LAN exposure requires an explicit OD_BIND_HOST plus OD_ALLOWED_ORIGINS. Connector credentials and live-artifact preview routes stay loopback-only regardless.

Internally-hosted model endpoints. To prevent SSRF, the daemon blocks provider base URLs that resolve to private/internal address ranges (RFC1918, link-local, CGNAT, and cloud-metadata IPs) by default, surfacing Internal IPs blocked. If you run an internally-hosted gateway (e.g. LiteLLM or Ollama on a VPN-only 10.x/192.168.x address), opt that host out with OD_ALLOWED_INTERNAL_HOSTS=<host1>,<host2>,... — a comma- or whitespace-separated list of bare hostnames or IPs (10.0.0.5, litellm.internal.corp; a host:port or full URL is accepted and reduced to its hostname; IPv6 must be bracketed, e.g. [fd00::1]). The allowlist is strict opt-in (empty by default), exact-host (no subdomain/substring matching), and applies only to provider endpoints you configure (connection test, model discovery, BYOK chat). It deliberately does not relax the guard on download URLs returned inside upstream responses, which stay blocked. A malformed entry — or CIDR notation, which is not supported — is dropped with a warning rather than silently trusted, so a typo never quietly widens (or fails to widen) the guard. Allowlisting a hostname trusts whatever it resolves to (like OD_ALLOWED_ORIGINS); allowlist the resolved IP instead if you want the DNS-resolved address re-checked.

Skills and design templates

100+ functional skills ship in skills/. Each follows the Agent Skills SKILL.md convention and supplies reusable agent behavior, references, or utilities. Renderable starters live separately in design-templates/; they may also use SKILL.md, but they populate the design-template catalog rather than the functional-skill registry.

Two modes anchor the design-template catalog: prototype (web/mobile/desktop single-page artifacts) and deck (horizontal-swipe presentations). Other templates cover image, video, audio, and utility surfaces. The scenario field groups templates by audience: design · marketing · operation · engineering · product · finance · hr · sale · personal.

Design template	Mode	Scenario	What it produces
`web-prototype`	prototype	design	Default landing page / hero
`saas-landing`	prototype	marketing	Hero / features / pricing / CTA
`dashboard`	prototype	operation	Admin / analytics (with sidebar)
`mobile-app`	prototype	design	iPhone 15 Pro / Pixel framed app
`mobile-onboarding`	prototype	design	Splash · value-prop · sign-in flow
`social-carousel`	prototype	marketing	3-card 1080×1080 carousel
`email-marketing`	prototype	marketing	Table-fallback-safe brand email
`magazine-poster`	prototype	marketing	Single-page magazine layout
`motion-frames`	prototype	marketing	Looping CSS motion hero
`sprite-animation`	prototype	marketing	8-bit pixel animated explainer
`pm-spec`	prototype	product	PM spec doc (with TOC + decision log)
`team-okrs`	prototype	product	OKR scorecard
`eng-runbook`	prototype	engineering	Incident runbook
`finance-report`	prototype	finance	Exec finance summary
`hr-onboarding`	prototype	hr	Role onboarding plan
`guizang-ppt`	deck	marketing	Magazine-style web PPT (deck default)
`html-ppt-*`	deck	marketing	15 deck templates × 36 themes (master template in `design-templates/html-ppt/`)
`hyperframes`	video	marketing	HTML → MP4 motion graphics (HeyGen OSS framework)
`critique`	utility	design	Five-dimensional self-critique scoresheet
`tweaks`	utility	design	AI-emitted tweaks-panel manifest

Full protocol and directory split → docs/skills-protocol.md. Registry endpoints: GET /api/skills for functional skills and GET /api/design-templates for rendering templates.

Design Systems

151 brand-grade design-system packages centered on DESIGN.md ship with the repo. Legacy packages may contain only that Markdown contract; newer packages can also carry manifest.json, compiled tokens.css, component fixtures, assets, and provenance evidence. The catalog mixes upstream-derived systems with project-owned additions; design-systems/README.md records the package shape and provenance. Switch a system → the next render uses the new tokens.

Full catalog (click to expand)

AI & LLM — claude · cohere · mistral-ai · minimax · together-ai · replicate · runwayml · elevenlabs · ollama · x-ai

Developer Tools — cursor · vercel · linear-app · framer · expo · clickhouse · mongodb · supabase · hashicorp · posthog · sentry · warp · webflow · sanity · mintlify · lovable · composio · opencode-ai · voltagent

Productivity — notion · figma · miro · airtable · superhuman · intercom · zapier · cal · clay · raycast

Fintech — stripe · coinbase · binance · kraken · mastercard · revolut · wise

E-commerce — shopify · airbnb · uber · nike · starbucks · pinterest

Media — spotify · playstation · wired · theverge · meta

Automotive — tesla · bmw · ferrari · lamborghini · bugatti · renault

Other — apple · ibm · nvidia · vodafone · resend · spacex

Starters — default (Neutral Modern) · warm-editorial

Re-import the library via scripts/sync-design-systems.ts. Add your own brand → drop a DESIGN.md into design-systems/<brand>/. Full guide → design-systems/README.md.

Plugins

277 official plugins plus 183 remixable reference examples live in plugins/_official/. Each entry is a portable plugin directory anchored by open-design.json plus the payload required by its type: for example SKILL.md for agent workflows, template.json for media templates, or DESIGN.md for design-system entries. Jump straight to a category:

Category	Count	Contents
`scenarios/`	13	Complete design scenarios — `od-default`, `od-design-refine`, `od-figma-migration`, `od-code-migration`, `od-react-export`, `od-nextjs-export`, `od-vue-export`, `od-media-generation`, `od-new-generation`, `od-tune-collab`, `od-plugin-authoring`, `od-share-to-community`, `od-web-effect-extractor`
`image-templates/`	45	One-shot image prompts — editorial, cinematic, product, portrait
`video-templates/`	63	HyperFrames / Seedance / Veo motion templates
`design-systems/`	143	Brand `DESIGN.md` wrapped as plugins
`atoms/`	13	Reusable UI fragments (buttons, heroes, KPI cards)
`examples/`	183	Remixable reference outputs

Also plugins/community/ for community plugins and plugins/registry/ for the publishing flow.

What plugins can do

🤖 Run in any coding agent — Claude Code, Codex, Cursor, Copilot, OpenClaw, Antigravity, Hermes, Kimi… through the same skill protocol the agent already knows.
🔁 Migrate Figma / Pencil workflows → React, Next.js, or Vue source. See od-figma-migration.
🛠️ Refresh an existing codebase to a brand spec — point a plugin at a git repo + DESIGN.md, get a PR. See od-code-migration.
💾 Persist custom workflows — your team's reusable templates sit next to the shipped ones.

Using plugins

Plugins are at full parity across the web UI and the od CLI — same /api/plugins endpoints, pick whichever fits.

In the desktop / web app: open the Plugin page to browse the marketplace and click Install; inside a project's Studio, plugins appear as composer chips you click to apply (with the inputs they declare).

On the command line (runs without a UI — this is the path external agents use):

od plugin list                       # list installed plugins (--task-kind / --mode / --tag filters)
od plugin search "landing page"      # search by keyword
od plugin info od-default            # inspect a plugin's metadata, inputs, capabilities
od plugin install od-figma-migration # install from a registry; also accepts ./local-folder or an https://… link
od plugin apply od-default --input brief="a one-page pitch for our seed round"
od plugin upgrade od-default         # upgrade
od plugin uninstall od-default       # uninstall

Every command supports --json, so you can pipe it through jq / xargs into automation.

Building a plugin

An OpenDesign plugin requires open-design.json plus the payload required by its type. A workflow skill or scenario also includes SKILL.md; manifest-only template and design-system entries use their own payloads instead:

my-plugin/
├── open-design.json    ← required: marketplace metadata + inputs + pipeline + capabilities
├── SKILL.md            ← required for agent-skill/scenario entries; omitted for other plugin types
├── README.md           ← optional: usage, install, registry links
├── preview/            ← optional: index.html / poster.png (strongly recommended for visual plugins)
└── examples/           ← optional: concrete use cases

Core open-design.json fields: specVersion (currently 1.0.0), name (stable ID), version (semver), optional compat.agentSkills[].path (points at ./SKILL.md when the entry exposes an Agent Skill), od.kind (skill / scenario / atom / bundle), od.taskKind (new-generation / figma-migration / code-migration / tune-collab), od.mode (the output surface, e.g. prototype / deck / live-artifact / image / video / hyperframes / audio / design-system / scenario), od.capabilities[] (declare the minimum — a restricted install grants only prompt:inject by default), od.inputs[] (apply-time parameters).

Scaffold + validate locally:

od plugin scaffold --id my-plugin --title "My Plugin"   # generate the skeleton
od plugin validate ./my-plugin                          # check manifest / file layout
pnpm guard && pnpm --filter @open-design/plugin-runtime typecheck

Full field set and runtime contract → plugins/spec/SPEC.md; developing a plugin with a coding agent → plugins/spec/AGENT-DEVELOPMENT.md; copy-paste minimal templates → plugins/spec/examples/.

Contributing a plugin

Drop the plugin folder into plugins/community/ (third-party plugins), or — to ship it bundled with OpenDesign — into the matching tier of plugins/_official/.
Pass validation: od plugin validate, pnpm guard, pnpm --filter @open-design/plugin-runtime typecheck.
Fill the PR using the template in plugins/spec/CONTRIBUTING.md (ID, version, lane, mode, capabilities, trigger examples; attach a screenshot / preview for visual plugins).
To publish to an external registry (skills.sh / ClawHub / standalone GitHub) → plugins/spec/PUBLISHING-REGISTRIES.md.

Plugin registry endpoint: GET /api/plugins. Directory overview → plugins/README.md (简体中文).

Architecture

┌────────────────── browser (Next.js 16) / Electron shell ──────────────┐
│  chat · file workspace · iframe preview · settings · import · MCP     │
└──────────────┬─────────────────────────────────────┬─────────────────┘
               │ /api/*                              │
               ▼                                     ▼
   ┌─────────────────────────────────┐   /api/proxy/{provider}/stream (SSE)
   │  local daemon (Express+SQLite)  │   ─→ any OpenAI-compatible BYOK,
   │                                  │       SSRF-guarded at the edge
   │  /api/skills    /api/design-templates    /api/plugins    │
   │  /api/design-systems            │
   │  /api/chat (SSE)   /api/proxy/* │
   │  /api/projects/:id/files/...    │
   │  /api/artifacts/{save,lint}     │
   │  /api/import/claude-design      │
   │  MCP stdio server                │
   └─────────┬───────────────────────┘
             │ spawn(cli, [...], { cwd: managed project cwd })
             ▼
   ┌──────────────────────────────────────────────────────────────────┐
   │  Local runtime definitions come from runtimes/registry.ts;                 │
   │  the base registry has 27 definitions (including byok-opencode),           │
   │  backed by 26 distinct local CLI executables because byok-opencode shares │
   │  the OpenCode executable. See docs/agent-adapters.md.                     │
   │  composes a functional skill or design template + DESIGN.md; writes files │
   └──────────────────────────────────────────────────────────────────┘

Layer	Stack
Frontend	Next.js 16 App Router + React 18 + TypeScript
Daemon	Node 24 · Express · SSE streaming · `better-sqlite3`
Storage	Before changing or documenting daemon storage paths, you MUST read `AGENTS.md` → Daemon data directory contract. This README MUST NOT restate it.
Preview	Filesystem runs render canonical project files; BYOK/plain-API runs parse one complete `<artifact>` block into a sandboxed `srcdoc` iframe
Export	HTML (inlined) · PDF (browser print) · PPTX (agent-driven) · ZIP · Markdown · MP4 (HyperFrames)
Desktop	Electron shell + sandboxed renderer + sidecar IPC (STATUS · EVAL · SCREENSHOT · CONSOLE · CLICK · SHUTDOWN)
Lifecycle	One entry point: `pnpm tools-dev` (start / stop / run / status / logs / inspect / check)

Full architecture → docs/architecture.md. Skill protocol → docs/skills-protocol.md. Agent adapter contract → docs/agent-adapters.md.

Roadmap

Daemon + 27 runtime definitions across 26 distinct coding-agent CLI executables + skill/design-template registries + design-system catalog
Web app + chat + question form + 5-direction picker + todo progress + sandboxed preview
100+ functional skills · separate rendering-template catalog · 151 design-system packages · 5 visual directions · 5 device frames
SQLite-backed projects · conversations · messages · tabs · templates
Multi-provider BYOK proxy (/api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream) with OpenAI-compatible presets including Atlas Cloud + SSRF guard
Claude Design ZIP import (/api/import/claude-design)
Sidecar protocol + Electron desktop + IPC automation
Artifact lint API + 5-dim self-critique pre-emit gate
0.8.0 — plugin marketplace infrastructure (261 official plugins, manifest spec, per-agent install scripts)
0.9.0 — OpenDesign Cloud (official model service built into the app: zero config, one-click sign-in)
0.10.0 — the all-in-one design workspace: the whole craft loop in one window (references → material → interactive editing → motion → handoff)
0.11.0 — The Bazaar: built in the open — a community marketplace of plugins and design systems anyone can pick from and contribute to
0.12.0 — Brand-backed Design System: turn the brand you already own into a reusable, portable DESIGN.md system
0.13.0 — Stay in Flow: native session resume, faster model picking, and export straight to screenshot-backed PPTX / PDF
Published desktop releases — macOS (Apple Silicon + Intel) + Windows (x64)
Published Linux desktop release (optional lane) — tracked in #4368
Comment-mode surgical edits — partially shipped; reliable targeted patching in progress
AI-emitted tweaks panel UX — not yet implemented
npx od init to scaffold a project with DESIGN.md
Plugin SDK + od plugin {add,list,remove,test,publish} CLI
Figma / Pencil → React / Next / Vue migration plugins (alpha)
Refresh-existing-codebase plugin (point at a git repo + DESIGN.md)

Phased delivery → docs/roadmap.md.

Community

Real people behind every channel.

💬 Discord — daily chat, plugin sharing, questions → discord.gg/mHAjSMV6gz
🐦 X / Twitter — release notes, milestones, behind the scenes → @OpenDesignHQ
🗣️ GitHub Discussions — deep Q&A, RFCs, "show your work" → Discussions
🐛 GitHub Issues — bug reports, feature requests → Issues

The good-first-issue and help-wanted labels are the easiest way in.

Contributing

OpenDesign keeps moving because contributors — designers, engineers, prompt authors — keep showing up. Many of the most-used skills, design systems, and plugins were written by people outside the core team.

🎯 Where to start (max leverage, min change)

Want to ship…	How	Where
A new functional skill	Drop a folder with `SKILL.md` + optional `assets/` + `references/`	`skills/` · spec in `docs/skills-protocol.md`
A new rendering design template	Add a renderable `SKILL.md` bundle	`design-templates/`
A new design system	Drop a package centered on `DESIGN.md`; add `manifest.json`, `tokens.css`, components, assets, or provenance when needed	`design-systems/<brand>/`
A new plugin	Drop `open-design.json` + the type-specific payload under a category folder	`plugins/community/` · spec in `plugins/spec/SPEC.md` · agent dev guide in `plugins/spec/AGENT-DEVELOPMENT.md`
Support a new coding-agent CLI	One runtime definition + registry entry; add a parser only for a new wire format	`apps/daemon/src/runtimes/defs/`
Fix a bug or polish UI	Browse the `good-first-issue` label	Issues →
Translate the docs	Update the `README.<lang>.md` files	`TRANSLATIONS.md`

🤖 Contributing as an agent

If you are the agent reading this, the fastest path is:

# 1. Boot locally
git clone https://github.com/nexu-io/open-design.git
cd open-design && corepack enable && pnpm install
pnpm tools-dev run web

# 2. Find a good-first-issue and assign yourself
gh issue list --label "good first issue" --state open --limit 20
gh issue develop <number>   # create a branch and worktree

# 3. Make the change, run the checks
pnpm guard && pnpm typecheck
pnpm --filter @open-design/<package> test

# 4. Open the PR
gh pr create --fill

Full agent-friendly contribution flow, code style, and PR bar → CONTRIBUTING.md (Deutsch · Français · 简体中文 · 日本語 · 한국어 · Português · ภาษาไทย).

🏅 OpenDesign Fellow program

We're recruiting OpenDesign Fellows around the world — Fellows shape the product alongside the core team, represent OpenDesign officially in their region, and grow the community locally, backed by funded support ($1,000 / MR), free LLM credits, and a direct review track. Details → MAINTAINERS.md and the announcement on Discord.

Maintainers

They carry a lot of the load — daily maintenance, review, and community support.

_{@Nagendhra-web}
_Maintainer

_@Sid-Qin
_Maintainer

_@YOMXXX
_Maintainer

Maintainer rules, promotion criteria, and the exit protocol → MAINTAINERS.md (also Deutsch · Français · 简体中文 · 日本語 · 한국어 · Português · ภาษาไทย).

Contributors

Thanks to everyone who has taken part — code, docs, feedback, a sharp issue, a new skill, a new design system.

Repository activity

The SVG above is regenerated daily by .github/workflows/metrics.yml using lowlighter/metrics.

Star us

If this saved you thirty minutes, give it a ★. Stars don't pay rent — but they tell the next designer, agent, and contributor that this experiment is worth their attention. One click, three seconds, a real signal.

References & lineage

Project	Role
Claude Design	The closed-source product this repo is the open-source alternative to.
`alchaincyf/huashu-design`	The design-philosophy compass — junior-designer workflow, brand-asset protocol, anti-AI-slop checklist, five-dimensional critique.
`op7418/guizang-ppt-skill`	The magazine-style web PPT skill, bundled verbatim under `design-templates/guizang-ppt/`. Default for deck mode.
`lewislulu/html-ppt-skill`	The HTML PPT Studio family — 15 deck templates, 36 themes, 31 page layouts, animation runtime, magnetic-card presenter mode.
`OpenCoworkAI/open-codesign`	The first open-source Claude Design alternative; UX patterns we borrow (streaming-artifact loop, sandboxed iframe, live agent panel).
`multica-ai/multica`	The daemon + adapter architecture — PATH-scan agent detection, local daemon as the only privileged process.
`VoltAgent/awesome-design-md`	Historical source of the original 9-section `DESIGN.md` schema and 70 upstream-derived systems; current packages may extend that baseline.
`bergside/awesome-design-skills`	Source of the 57 design skills added under `design-systems/`.
`heygen-com/hyperframes`	The HTML→MP4 motion-graphics framework, integrated as the first-class `hyperframes-html` in OpenDesign.
Claude Code skills	The `SKILL.md` convention we adopt verbatim.

Detailed provenance → docs/references.md.

License

Apache-2.0. Bundled skills and templates with their own LICENSE files retain those licenses, including design-templates/guizang-ppt/ (MIT, @op7418), design-templates/html-ppt/ (MIT, @lewislulu), and skills/web-clone/ (MIT, @Jane-xiaoer).