nexu-io/open-design

Maintainer? Show your league in your README

Card: your league's emblem, from Copper to Legendary

[![bestofgithub](https://bestofgithub.dev/badge/nexu-io/open-design.svg?style=card)](https://bestofgithub.dev/repo/nexu-io/open-design)

Flat: fits beside your other badges

[![bestofgithub](https://bestofgithub.dev/badge/nexu-io/open-design.svg)](https://bestofgithub.dev/repo/nexu-io/open-design)

Loading README…

_{Home — start with a brief or an example.}	_{All projects — revisit design systems, media, and prototypes.}
_{Design Systems — inspect brand assets and refine them with an agent.}	_{Plugins — find skills and launch them with Try it.}

_{Prototype — build and refine interactive web experiences with your agent and live preview.}	_{Slides — create decks, review slides and speaker notes, and export when ready.}
_{Image — generate visual assets from the conversation, inspect the result, then download or open it.}	_{HyperFrames — create motion graphics with your agent and export to MP4. Watch the video.}

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`

_{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.}

_{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}

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

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

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)

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`

Project	Role
`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`	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.

OpenDesign: The 1st Collaborative AI Design Agent Workspace

What is OpenDesign

Product tour

Core pages

Studio — create and refine in one project

Platform Compatibility

Demo

1 · Prototypes — web · desktop · mobile

2 · Live artifacts & dashboards

3 · Decks — magazine decks, weekly updates, pitches

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

5 · Video & HyperFrames — agent-native motion graphics

Why OpenDesign

Quick start

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

🤖 Install into your coding agent (no UI)

🐳 Run with Docker

🚀 Deploy on Sealos

🧑‍💻 Run from source

A full workflow — from brief to artifact

Use OpenDesign from your coding agent

Skills and design templates

Design Systems

Plugins

What plugins can do

Using plugins

Building a plugin

Contributing a plugin

Architecture

Roadmap

Community

Contributing

🎯 Where to start (max leverage, min change)

🤖 Contributing as an agent

🏅 OpenDesign Fellow program

Maintainers

Contributors

Repository activity

Star us

References & lineage

License

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