Open Design: a alternativa open-source ao Claude Design

⚡ Open Design Cloud — o serviço de modelos oficial. Uma única recarga para usar GPT, Claude, Gemini e DeepSeek dentro do Open Design: mais de 20 modelos de ponta, zero configuração, cobrança pelo uso real de tokens. Experimentar o Open Design Cloud

🏅 O programa Open Design Fellow está aberto. Se você também acredita que o design deveria ser aberto — torne-se um Open Design Fellow, ajude a moldar o produto ao lado do time central e contribua para que mais pessoas participem da definição do futuro do design. Detalhes → MAINTAINERS.md e Discord.

Site · Download · Open Design Cloud · Discord · Siga @OpenDesignHQ

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

O que é o Open Design

🎨 A alternativa local-first e open-source ao Claude Design. 🖥️ App de desktop nativo para macOS e Windows. ⚡ Mais de 100 skills funcionais + catálogo separado de templates de renderização · ✨ 151 pacotes de design systems · 📦 277 plugins prontos para uso. 🖼️ Gera protótipos web · desktop · mobile, dashboards / artefatos ao vivo, decks, imagens, vídeo, além de motion graphics com HyperFrames. 🔒 Preview em iframe em sandbox · exportação para HTML / PDF / PPTX / MP4. 🤖 Roda em Claude Code · OpenClaw · Codex · Cursor · OpenCode · Qwen · Copilot · Hermes · Kimi · Antigravity e 25 executáveis CLI locais distintos, ou em qualquer endpoint compatível com OpenAI via BYOK.

O Open Design transforma esse loop em um sistema de arquivos de skills funcionais, templates de renderização, design systems e plugins que seus agentes conseguem ler, escrever e remixar.

Ele também é a alternativa ao Figma para a era dos agentes — em vez de empurrar pixels num canvas, ele entrega artefatos de página única em CSS real, fontes reais, componentes reais, exportados direto para HTML / PDF / PPTX / MP4 — já moldados pelo seu design system, já executáveis dentro do agente que você usa todos os dias.

Tour pelo produto

Um olhar rápido sobre o que é o Open Design e o que ele faz. Comece pela Home, orquestre fluxos de trabalho recorrentes com Automation, destile um contrato de marca em Design System e amplie com Plugins e integrações; dentro do Studio de qualquer projeto, o mesmo design system produz protótipos, artefatos ao vivo, HyperFrames, decks e imagens.

Páginas principais

_{Home — o ponto de entrada com a visão geral. Escolha uma skill e um design system, digite o briefing e dispare tudo a partir de um único lugar.}

_{Automation — orquestre fluxos de design repetitivos em automações reutilizáveis e agendáveis.}	_{Design System — destile o DESIGN.md do seu time num contrato de marca que molda cada resultado.}
_{Plugin — explore, instale e distribua plugins de fluxo de trabalho para estender a geração sob demanda.}	_{Integrations — conecte sistemas externos e ferramentas MCP, e use o Open Design a partir de qualquer IDE, script ou automação.}

Studio — vários tipos de artefato em um único projeto

Dentro do Studio de um projeto, o mesmo design system produz múltiplos tipos de artefato:

_{Prototype — artefatos HTML de página única que leem seu design system e renderizam num iframe em sandbox, com preview instantâneo e download como código-fonte.}	_{HyperFrame — motion e gráficos animados programáticos, renderizados para um MP4 real (ex.: 1920×1080 · 30fps).}
_{Deck — pitch decks pelos quais você navega página por página, controla pelo teclado e exporta para PPTX / PDF.}	_{Image — imagens e assets visuais de nível profissional de marca, com geração e download em alta resolução.}

Compatibilidade de plataformas

O Open Design é entregue como skills, uma CLI e um servidor MCP que os coding agents populares consomem nativamente. Depois que o OD está instalado, um único od mcp install <agent> conecta o servidor MCP à configuração daquele agente, e você chama as mesmas ferramentas de dentro de qualquer agente.

Coding agent / plataforma	Status	Instalação do servidor MCP em uma linha
Claude Code	✅ Suportado	`od mcp install claude`
Codex CLI	✅ Suportado	`od mcp install codex`
DeepSeek Reasonix	✅ Suportado	`od mcp install reasonix`
Raven	✅ Suportado	`od mcp install raven`
Cursor	✅ Suportado	`od mcp install cursor`
VS Code + GitHub Copilot	✅ Suportado	`od mcp install copilot`
GitHub Copilot CLI	✅ Suportado	`od mcp install copilot`
OpenCode	✅ Suportado	`od mcp install opencode`
OpenClaw	✅ Suportado	`od mcp install openclaw`
Antigravity	✅ Suportado	`od mcp install antigravity`
Cline	✅ Suportado	`od mcp install cline`
Trae	✅ Suportado	`od mcp install trae`
Kimi CLI	✅ Suportado	`od mcp install kimi`
Kiro	✅ Suportado	`od mcp install kiro`
Pi Agent	✅ Suportado	`od mcp install pi`
Mistral Vibe CLI	✅ Suportado	`od mcp install vibe`
Hermes Agent	✅ Suportado	`od mcp install hermes`

od mcp install <agent> --print para uma prévia em dry-run · --uninstall para remover · lista completa com od mcp install --help.

Nenhuma CLI instalada? O proxy BYOK em POST /api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream te dá o mesmo loop (sem spawn de processo) — cole baseUrl + apiKey + model, com suporte a OpenAI, Anthropic, Azure OpenAI, Google Gemini, Ollama, LM Studio, vLLM ou qualquer endpoint compatível com OpenAI. A proteção SSRF por alvo bloqueia IPs internos / link-local / CGNAT na borda do daemon.

As definições de runtime ficam em apps/daemon/src/runtimes/defs/ e são registradas em runtimes/registry.ts. Um parser novo só é necessário para um formato de wire novo — veja docs/agent-adapters.md.

Demo

Quatro categorias centrais de produto, todas renderizadas por um coding agent rodando no seu laptop. Clique numa miniatura para ver o exemplo real.

1 · Protótipos — web · desktop · mobile

A superfície de saída padrão. Artefatos HTML de página única que leem seu DESIGN.md e renderizam num iframe em sandbox.

_{Tela de entrada — escolha uma skill, escolha um design system, digite o briefing. Uma única superfície para protótipos, dashboards, decks, apps mobile e páginas de revista.}	_{Protótipo mobile — chrome do iPhone 15 Pro com precisão de pixel, fluxos multitela. O agente nunca redesenha o frame do celular; frames de dispositivo compartilhados ficam em assets/frames/.}
_{Protótipo web — um dashboard editorial com barras de rolagem, KPIs e gráficos. Renderizado direto de design-templates/dating-web/.}	_{Protótipo de app mobile — um fluxo gamificado de três telas com faixas de XP e detalhe de quest. Faça o handoff direto para Cursor / Codex / Claude Code para transformar em React/Next/Vue.}

2 · Artefatos & dashboards ao vivo

Dashboards ao vivo, decision rooms, painéis de KPI — artefatos de página única que puxam dados por um painel de tweaks e permanecem editáveis no lugar.

_{Dashboard ao vivo — um painel de KPI editável cujo painel de tweaks expõe os parâmetros que vale a pena ajustar. O agente emite um manifesto, e o iframe re-renderiza sem recarregar.}	_{Decision room — um artefato de briefing multifonte para reuniões de produto / pesquisa / operações.}
_{Dashboard no estilo GitHub — métricas de repositório apresentadas como um artefato ao vivo.}	_{Template de dashboard ao vivo Flow — um template de KPI específico de domínio, com a marca aplicada pelo DESIGN.md ativo.}

3 · Decks — decks de revista, updates semanais, pitches

_{Modo deck (guizang-ppt) — layouts de revista, hero em WebGL, checklists P0/P1/P2. Empacotado na íntegra a partir de op7418/guizang-ppt-skill com sua licença original preservada.} _{Deck no estilo Swiss International — ancorado em grid, com acentos monocromáticos. Um dos 15 templates de deck e 36 temas em design-templates/html-ppt-*/.}

Todo deck exporta para HTML (arquivo único, assets embutidos), PDF (impressão do navegador, ciente do deck), PPTX (skill conduzida pelo agente), ZIP (arquivo compactado) ou Markdown.

4 · Imagens — `gpt-image-2`, ImageRouter, API personalizada

_{Mapa gastronômico ilustrado da cidade
Pôster de viagem editorial desenhado à mão}

_{Cena cinematográfica de elevador
Still editorial de quadro único}

_{Retrato cyberpunk
Avatar de perfil — texto de rosto em neon}

_{Escadaria de pedra 3D
Infográfico em pedra talhada}

_{Retrato glamoroso
Foto de estúdio editorial}

93 prompts prontos para replicar ficam em prompt-templates/ — miniaturas de prévia, corpo completo do prompt, modelo de destino, proporção de tela e atribuição de origem. Um clique solta um briefing no composer.

5 · Vídeo & HyperFrames — motion graphics agent-native

O HyperFrames é o framework de vídeo open-source e agent-native da HeyGen, integrado como cidadão de primeira classe no Open Design. O agente escreve HTML + CSS + GSAP, e o HyperFrames renderiza tudo para um MP4 determinístico via Chrome headless + FFmpeg. Combine-o com o Seedance 2.0 para t2v / i2v cinematográfico, Veo 3 / Sora 2 / Kling 2 para variantes de modelo roteadas e Suno v5 / Lyria 2 para a camada de áudio.

_{Promo de produto SaaS de 30s · 16:9 · reveals 3D de UI}	_{Talking-head de karaokê para TikTok · 9:16 · TTS + legendas sincronizadas por palavra}	_{Sizzle reel de marca de 30s · 16:9 · tipografia cinética reativa ao áudio}	_{Corrida de gráfico de barras · 16:9 · infográfico de dados no estilo NYT}
_{Mapa de voo · 16:9 · reveal de rota no estilo Apple}	_{Outro cinematográfico de logo de 4s · 16:9 · montagem peça por peça + bloom}	_{Contador de dinheiro $0 → $10K · 9:16 · hype no estilo Apple}	_{Site para vídeo · 16:9 · captura o site em 3 viewports}

11 templates de HyperFrames + 39 prompts de Seedance vêm com o repositório. Miniaturas do catálogo © HeyGen; o framework é Apache-2.0. O fluxo de renderização específico do OD (cache de composição, contorno para sandbox-exec, MP4 como chip) está detalhado em design-templates/hyperframes/.

Por que o Open Design

Em abril de 2026, a Anthropic lançou o Claude Design — a primeira vez que um LLM deixou de escrever prosa e passou a entregar artefatos de design diretamente. Viralizou. Mas continuou closed-source, pago, só na nuvem, preso ao modelo da Anthropic, às skills da Anthropic, à superfície da Anthropic. Sem checkout, sem self-host, sem deploy na Vercel, sem trocar pelo seu próprio agente.

O Open Design (OD) é a alternativa open-source. Mesmo loop, mesmo modelo mental artifact-first, nada do lock-in:

🤖 Agent-native, agnóstico de modelo. Não entregamos um agente. O claude / codex / cursor-agent / copilot / hermes / kimi que já está no seu PATH é o motor de design. Troque com um clique.
🧠 Nível profissional de marca por padrão. Toda renderização lê o DESIGN.md do pacote ativo como contrato central da marca. O repositório traz 151 pacotes de design systems; pacotes legados podem conter só DESIGN.md, enquanto os novos podem acrescentar manifest.json, tokens.css, componentes, assets e procedência. Solte uma pasta e o seletor a encontra.
🖥️ Local-first, BYOK em todas as camadas. Apps de desktop nativos continuam local-first, sem ida e volta à nuvem. Antes de descrever caminhos de dados do daemon, você DEVE ler o AGENTS.md na raiz, seção Daemon data directory contract.
🌍 Componível em quatro planos. Plugins carregam workflows · skills funcionais carregam o comportamento do agente · design templates carregam os blueprints de renderização · design systems carregam a marca.
🔁 Renove uma base de código existente. Entregue um repositório git + DESIGN.md ao agente e ele refatora seus componentes reais para a especificação de marca. Plugins dedicados migram fluxos do Figma / Pencil para código React / Next.js / Vue.
🔒 Privacidade por convicção. Tudo roda onde seus dados vivem — seu laptop, o servidor do seu time, seu projeto na Vercel. Quando a rede é necessária, o proxy BYOK é protegido contra SSRF.

Comparativo

	Claude Design	Figma	Lovable / v0 / Bolt	Open Design
Open source	❌	❌	❌	✅ Apache-2.0
Self-host / desktop	❌	❌	❌	✅ macOS + Windows + Docker
Agent-native (roda na sua CLI)	Só Anthropic	❌	Só agente na nuvem	✅ 25 CLIs + BYOK
`DESIGN.md` de nível profissional de marca	Proprietário	Theme JSON	Tokens limitados	✅ 151 sistemas entregues
Skills / plugins / templates	Fechado	Loja de plugins	Fechado	✅ Mais de 100 skills funcionais · catálogo separado de templates de renderização · 277 plugins
HyperFrames (HTML→MP4)	❌	❌	❌	✅ Primeira classe
Renovar um repositório existente para a marca	❌	❌	❌	✅ via agente + `DESIGN.md`
Cobrança mínima	Pro / Max / Team	Pro / Org	Pro / Team	BYOK · qualquer endpoint compatível

Início rápido

🖥️ Baixe o app de desktop (recomendado — zero configuração)

A forma mais rápida de usar o Open Design. Sem Node, sem pnpm, sem clone.

macOS (Apple Silicon · Intel x64) → open-design.ai ou GitHub Releases
Windows (x64) → open-design.ai ou GitHub Releases
Linux (AppImage, trilha opcional) → GitHub Releases

Após instalar: o app detecta automaticamente cada CLI de coding agent no seu PATH, carrega mais de 100 skills funcionais, o catálogo separado de templates de renderização e 151 pacotes de design systems e permite que você digite um briefing na tela de entrada.

🤖 Instale no seu coding agent (sem interface)

Você pode usar o Open Design sem nunca abrir a GUI — chame-o como skill, plugin ou servidor MCP dentro do Claude Code, Codex, Cursor, Copilot, OpenClaw, Antigravity, Hermes, Kimi e mais.

# 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

Depois, dentro do agente:

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

Em uma execução CLI local com filesystem, o agente combina a skill funcional ou o template escolhido com seu DESIGN.md, grava os arquivos canônicos e o Open Design os mostra no preview. Uma execução BYOK/API sem ferramentas de arquivos retorna um único bloco <artifact> completo.

🐳 Rode com 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://localhost:7456

🚀 Implante no Sealos

O template da Sealos App Store executa a imagem Docker publicada do Open Design com armazenamento persistente para o workspace e Basic Auth no proxy público. Para implantações Docker públicas ou compartilhadas personalizadas, siga as orientações de proxy reverso e OPEN_DESIGN_ALLOWED_ORIGINS em deploy/README.md.

🧑‍💻 Rode a partir do código-fonte

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

Abra a URL impressa por tools-dev; as portas de desenvolvimento são alocadas dinamicamente sem flags explícitos.

Node ~24, pnpm 10.33.x. Usuários de Windows, veja docs/windows-troubleshooting.md. Início rápido completo, variáveis de ambiente, Nix flake e fluxo de build empacotado → QUICKSTART.pt-BR.md.

Um fluxo de trabalho completo — do briefing ao artefato

briefing → plugin → direção → design system → artefato → handoff → memória

Um PM envia um briefing. O seletor de plugins oferece landing page · pitch deck · dashboard · post de rede social · spec de PM · scorecard de OKR…
Um designer (ou o agente) trava a direção. Sem marca? Escolha entre 5 direções curadas. Tem uma marca? Solte um screenshot / URL → o agente conecta o GitHub, importa do Figma e codifica um DESIGN.md reutilizável.
O agente cria a primeira entrega. Execuções CLI com filesystem gravam arquivos canônicos; execuções BYOK/API sem ferramentas de arquivo retornam um bloco <artifact> completo.
Faça o handoff para a engenharia. O artefato é HTML/CSS real — solte-o no Cursor, Codex ou Claude Code para continuar construindo como código. Ou exporte PPTX / PDF / MP4 direto para o marketing.
O Open Design fica mais inteligente conforme você usa. Seus screenshots, fontes, paletas e artefatos confirmados se acumulam como padrões para a próxima sessão. Menos retrabalho, menos desvio.

Use o Open Design a partir do seu coding agent

O Open Design entrega um servidor MCP stdio e scripts de instalação por agente. Qualquer agente compatível com MCP em outro repositório pode ler arquivos diretamente dos seus projetos locais do Open Design — tokens CSS, componentes JSX, HTML de entrada — como uma API estruturada consultável por nome. O agente sempre vê o arquivo ao vivo, não uma exportação desatualizada.

# 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

Por que MCP? Exportar e reanexar um zip a cada iteração quebra o fluxo. O MCP expõe a fonte de design diretamente — o agente sempre vê o arquivo ao vivo.

Para um agente começando do zero, o instalador coloca ~/.config/<agent>/open-design.json (ou o equivalente da plataforma) além de um snippet MCP de copiar e colar. O Cursor recebe um deeplink de um clique; o Claude Code recebe um one-liner claude mcp add-json; todo outro agente recebe JSON no schema que sua configuração espera. Fluxo completo por agente → Settings → MCP server no app de desktop, ou docs/agent-adapters.md.

Modelo de segurança. Somente leitura por padrão, o daemon faz bind em 127.0.0.1 e o SSRF é bloqueado na borda do proxy. A exposição na LAN exige um OD_BIND_HOST explícito mais OD_ALLOWED_ORIGINS. Credenciais de conector e rotas de preview de artefatos ao vivo permanecem somente em loopback, independentemente disso.

Skills e design templates

Mais de 100 skills funcionais vivem em skills/ e fornecem comportamento, referências ou utilitários reutilizáveis. Starters renderizáveis vivem separadamente em design-templates/ e alimentam o catálogo de templates, não o registry de skills funcionais.

Dois modes ancoram o catálogo de templates: prototype e deck; outros templates cobrem image, video, audio e superfícies utility.

Design template	Mode	Scenario	O que produz
`web-prototype`	prototype	design	Landing page / hero padrão
`saas-landing`	prototype	marketing	Hero / features / preços / CTA
`dashboard`	prototype	operation	Admin / analytics (com sidebar)
`mobile-app`	prototype	design	App enquadrado em iPhone 15 Pro / Pixel
`mobile-onboarding`	prototype	design	Splash · proposta de valor · fluxo de login
`social-carousel`	prototype	marketing	Carrossel de 3 cards 1080×1080
`email-marketing`	prototype	marketing	E-mail de marca seguro com fallback de tabela
`magazine-poster`	prototype	marketing	Layout de revista em página única
`motion-frames`	prototype	marketing	Hero de motion CSS em loop
`sprite-animation`	prototype	marketing	Explainer animado em pixel art 8-bit
`pm-spec`	prototype	product	Doc de spec de PM (com sumário + log de decisões)
`team-okrs`	prototype	product	Scorecard de OKR
`eng-runbook`	prototype	engineering	Runbook de incidentes
`finance-report`	prototype	finance	Resumo financeiro executivo
`hr-onboarding`	prototype	hr	Plano de onboarding de cargo
`guizang-ppt`	deck	marketing	PPT web no estilo revista (padrão de deck)
`html-ppt-*`	deck	marketing	15 templates de deck × 36 temas (template mestre em `design-templates/html-ppt/`)
`hyperframes`	video	marketing	Motion graphics HTML → MP4 (framework OSS da HeyGen)
`critique`	utility	design	Scoresheet de autocrítica em cinco dimensões
`tweaks`	utility	design	Manifesto de painel de tweaks emitido por IA

Protocolo e separação dos diretórios → docs/skills-protocol.md. Endpoints: GET /api/skills para skills funcionais e GET /api/design-templates para templates.

Design Systems

151 pacotes de design systems centrados em DESIGN.md vêm com o repositório. Pacotes legados podem conter só esse contrato Markdown; os novos também podem incluir manifest.json, tokens.css compilado, fixtures, assets e evidência de procedência. O catálogo mistura sistemas derivados de upstream com adições do projeto; design-systems/README.md documenta forma e procedência.

Catálogo completo (clique para expandir)

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

Reimporte a biblioteca via scripts/sync-design-systems.ts. Adicione sua própria marca → solte um DESIGN.md em design-systems/<brand>/. Guia completo → design-systems/README.md.

Plugins

277 plugins oficiais e 183 exemplos remixáveis ficam em plugins/_official/. Cada entrada é um diretório portátil ancorado por open-design.json e o payload do tipo: SKILL.md para workflows, template.json para templates de mídia ou DESIGN.md para design systems.

Categoria	Quantidade	Conteúdo
`scenarios/`	13	Cenários de design completos — `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	Prompts de imagem one-shot — editorial, cinematográfico, produto, retrato
`video-templates/`	63	Templates de motion HyperFrames / Seedance / Veo
`design-systems/`	143	`DESIGN.md` de marca empacotados como plugins
`atoms/`	13	Fragmentos de UI reutilizáveis (botões, heroes, cards de KPI)
`examples/`	183	Outputs de referência remixáveis

Também plugins/community/ para plugins da comunidade e plugins/registry/ para o fluxo de publicação.

O que os plugins podem fazer

🤖 Rodar em qualquer coding agent — Claude Code, Codex, Cursor, Copilot, OpenClaw, Antigravity, Hermes, Kimi… pelo mesmo protocolo de skill que o agente já conhece.
🔁 Migrar fluxos do Figma / Pencil → código React, Next.js ou Vue. Veja od-figma-migration.
🛠️ Renovar uma base de código existente para uma especificação de marca — aponte um plugin para um repositório git + DESIGN.md e receba um PR. Veja od-code-migration.
💾 Persistir fluxos de trabalho personalizados — os templates reutilizáveis do seu time ficam ao lado dos que já vêm na caixa.

Usando plugins

Os plugins têm paridade total entre a interface web e a CLI od — os mesmos endpoints /api/plugins, escolha o que servir melhor.

No app de desktop / web: abra a página Plugin para explorar o marketplace e clique em Install; dentro do Studio de um projeto, os plugins aparecem como chips no composer que você clica para aplicar (com os inputs que eles declaram).

Na linha de comando (roda sem interface — esse é o caminho que os agentes externos usam):

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

Todo comando suporta --json, então você pode encadeá-lo com jq / xargs para dentro de automações.

Construindo um plugin

Um plugin do Open Design exige open-design.json e o payload do tipo. Skills e cenários também incluem SKILL.md; outros tipos usam seu payload próprio:

my-plugin/
├── open-design.json    ← required: marketplace metadata + inputs + pipeline + capabilities
├── SKILL.md            ← required for agent-skill/scenario entries; omit 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

Campos principais: specVersion, name, version, o compat.agentSkills[].path opcional quando a entrada expõe uma Agent Skill, além de od.kind, od.taskKind, od.mode, od.capabilities[] e od.inputs[].

Faça o scaffold + valide localmente:

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

Conjunto completo de campos e contrato de runtime → plugins/spec/SPEC.md; desenvolver um plugin com um coding agent → plugins/spec/AGENT-DEVELOPMENT.md; templates mínimos de copiar e colar → plugins/spec/examples/.

Contribuindo com um plugin

Solte a pasta do plugin em plugins/community/ (plugins de terceiros), ou — para entregá-lo empacotado com o Open Design — no tier correspondente de plugins/_official/.
Passe na validação: od plugin validate, pnpm guard, pnpm --filter @open-design/plugin-runtime typecheck.
Preencha o PR usando o template em plugins/spec/CONTRIBUTING.md (ID, versão, lane, mode, capacidades, exemplos de trigger; anexe um screenshot / prévia para plugins visuais).
Para publicar em um registry externo (skills.sh / ClawHub / GitHub standalone) → plugins/spec/PUBLISHING-REGISTRIES.md.

Endpoint do registry de plugins: GET /api/plugins. Visão geral do diretório → plugins/README.md (简体中文).

Arquitetura

┌────────────────── 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 })
             ▼
   ┌──────────────────────────────────────────────────────────────────┐
   │  Base registry: 26 runtime definitions (including byok-opencode),       │
   │  backed by 25 distinct local CLI executables because byok-opencode      │
   │  shares the OpenCode executable.                                        │
   │  Composes a functional skill or design template + DESIGN.md; writes files │
   └──────────────────────────────────────────────────────────────────┘

Camada	Stack
Frontend	Next.js 16 App Router + React 18 + TypeScript
Daemon	Node 24 · Express · streaming SSE · `better-sqlite3`
Armazenamento	Antes de alterar ou documentar caminhos de armazenamento do daemon, você DEVE ler o `AGENTS.md` na raiz, seção Daemon data directory contract. Este README NÃO DEVE repeti-lo.
Preview	Execuções filesystem renderizam arquivos canônicos; BYOK/API analisa um bloco `<artifact>` completo em iframe `srcdoc` isolado
Exportação	HTML (embutido) · PDF (impressão do navegador) · PPTX (conduzido pelo agente) · ZIP · Markdown · MP4 (HyperFrames)
Desktop	Electron shell + renderer em sandbox + IPC sidecar (STATUS · EVAL · SCREENSHOT · CONSOLE · CLICK · SHUTDOWN)
Ciclo de vida	Um único ponto de entrada: `pnpm tools-dev` (start / stop / run / status / logs / inspect / check)

Arquitetura completa → docs/architecture.md. Protocolo de skills → docs/skills-protocol.md. Contrato do adaptador de agentes → docs/agent-adapters.md.

Roadmap

Entrega faseada → docs/roadmap.md.

Comunidade

Pessoas de verdade por trás de cada canal.

💬 Discord — chat diário, compartilhamento de plugins, perguntas → discord.gg/mHAjSMV6gz
🐦 X / Twitter — notas de release, marcos, bastidores → @OpenDesignHQ
🗣️ GitHub Discussions — Q&A aprofundado, RFCs, "mostre seu trabalho" → Discussions
🐛 GitHub Issues — relatos de bugs, pedidos de features → Issues

As labels good-first-issue e help-wanted são a forma mais fácil de começar.

Contribuindo

O Open Design continua avançando porque os contribuidores — designers, engenheiros, autores de prompts — continuam aparecendo. Muitas das skills, design systems e plugins mais usados foram escritos por pessoas fora do time central.

🎯 Por onde começar (máxima alavancagem, mínima mudança)

Quer entregar…	Como	Onde
Uma nova skill	Solte uma pasta com `SKILL.md` + `assets/` + `references/`	`skills/` · spec em `docs/skills-protocol.md`
Um novo design system	Solte um pacote centrado em `DESIGN.md`; adicione `manifest.json`, `tokens.css`, componentes, assets ou procedência quando necessário	`design-systems/<brand>/`
Um novo plugin	Solte `open-design.json` + o payload específico do tipo numa pasta de categoria	`plugins/community/` · spec em `plugins/spec/SPEC.md` · guia de dev por agente em `plugins/spec/AGENT-DEVELOPMENT.md`
Suportar uma nova CLI de coding agent	Definição de runtime + registro; parser só para formato novo	`apps/daemon/src/runtimes/defs/`
Corrigir um bug ou polir a UI	Explore a label `good-first-issue`	Issues →
Traduzir a documentação	Atualize os arquivos `README.<lang>.md`	`TRANSLATIONS.md`

🤖 Contribuindo como agente

Se você é o agente que está lendo isto, o caminho mais rápido é:

# 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

Fluxo completo de contribuição amigável a agentes, estilo de código e barra de qualidade de PR → English (Deutsch · Français · 简体中文 · 日本語 · Português).

🏅 Programa Open Design Fellow

Estamos recrutando Open Design Fellows ao redor do mundo — os Fellows moldam o produto ao lado do time central, representam oficialmente o Open Design em sua região e fazem a comunidade crescer localmente, com suporte financiado ($1,000 / MR), créditos gratuitos de LLM e uma trilha de revisão direta. Detalhes → MAINTAINERS.md e o anúncio no Discord.

Mantenedores

Eles carregam boa parte do peso — manutenção diária, revisão e suporte à comunidade.

_{@Nagendhra-web}
_Mantenedor

_@Sid-Qin
_Mantenedor

Regras dos mantenedores, critérios de promoção e o protocolo de saída → MAINTAINERS.md (também Deutsch · Français · 简体中文 · 日本語 · Português).

Contribuidores

Obrigado a todas as pessoas que participaram — código, docs, feedback, uma issue afiada, uma nova skill, um novo design system.

Atividade do repositório

O SVG acima é regenerado diariamente por .github/workflows/metrics.yml usando lowlighter/metrics.

Dê uma estrela

Se isto te poupou trinta minutos, dê um ★. Estrelas não pagam o aluguel — mas dizem ao próximo designer, agente e contribuidor que este experimento vale a atenção deles. Um clique, três segundos, um sinal de verdade.

Referências & linhagem

Projeto	Papel
Claude Design	O produto closed-source ao qual este repositório é a alternativa open-source.
`alchaincyf/huashu-design`	A bússola da filosofia de design — fluxo de trabalho de designer júnior, protocolo de brand-asset, checklist anti-AI-slop, crítica em cinco dimensões.
`op7418/guizang-ppt-skill`	A skill de PPT web no estilo revista, empacotada na íntegra em `design-templates/guizang-ppt/`. Padrão para o modo deck.
`lewislulu/html-ppt-skill`	A família HTML PPT Studio — 15 templates de deck, 36 temas, 31 layouts de página, runtime de animação, modo apresentador com cards magnéticos.
`OpenCoworkAI/open-codesign`	A primeira alternativa open-source ao Claude Design; padrões de UX que tomamos emprestados (loop de artefato em streaming, iframe em sandbox, painel de agente ao vivo).
`multica-ai/multica`	A arquitetura de daemon + adaptador — detecção de agentes por scan do PATH, daemon local como o único processo privilegiado.
`VoltAgent/awesome-design-md`	Fonte histórica do schema original de 9 seções de `DESIGN.md` e de 70 sistemas derivados do upstream; os pacotes atuais podem ampliar essa base.
`bergside/awesome-design-skills`	Fonte das 57 design skills adicionadas em `design-systems/`.
`heygen-com/hyperframes`	O framework de motion graphics HTML→MP4, integrado como o `hyperframes-html` de primeira classe no Open Design.
Claude Code skills	A convenção `SKILL.md` que adotamos na íntegra.

Proveniência detalhada → docs/references.md.

Licença

Apache-2.0. O design-templates/guizang-ppt/ empacotado mantém sua LICENSE original (MIT, @op7418). O design-templates/html-ppt/ empacotado mantém sua LICENSE original (MIT, @lewislulu).

FilesExpand file tree

README.pt-BR.md

Latest commit

History