open-design/README.pt-BR.md

Open Design — a alternativa open source oficial ao Claude Design

Open Design é a alternativa open source e local-first ao Claude Design. Deployável via web, BYOK em toda camada — 16 CLIs de agentes de código detectados automaticamente no seu PATH (Claude Code, Codex, Devin for Terminal, Cursor Agent, Gemini CLI, OpenCode, Qwen, Qoder CLI, GitHub Copilot CLI, Hermes, Kimi, Pi, Kiro, Kilo, Mistral Vibe, DeepSeek TUI) viram a engine de design, dirigidos por 31 Skills compositáveis e 72 Design Systems de qualidade de marca. Sem CLI? Um proxy BYOK compatível com OpenAI é o mesmo loop, só sem o spawn.

Important

🔥 0.8.0-preview chegou. O velho mundo do design acaba aqui.

Uma alternativa open source ao Claude Design / Figma — 40k estrelas em duas semanas nos trouxeram até aqui. Precisamos de você para nos levar o resto do caminho.

Iterando rápido na main — 0.8.0 é a próxima fase do Open Design. Mande um PR, jogue uma ideia maluca, abra um bug — o que você traz é no que este movimento se transforma.

→ Leia o anúncio · baixe o instalador · junte-se ao movimento · roda em paralelo com seu 0.7 atual.

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

---

Por que isto existe

O Claude Design da Anthropic (lançado em 2026-04-17, com Opus 4.7) mostrou o que acontece quando um LLM para de escrever prosa e começa a entregar artifacts de design. Bombou — e ficou closed-source, pago, só na nuvem, preso ao modelo da Anthropic e às skills da Anthropic. Não tem checkout, não tem self-host, não tem deploy na Vercel, não tem swap-do-seu-próprio-agente.

O Open Design (OD) é a alternativa open-source. Mesmo loop, mesmo modelo mental orientado a artifact, sem nenhum trava. A gente não despacha um agente — os agentes de código mais fortes já estão no seu laptop. A gente os pluga em um workflow de design orientado a skills que roda local com pnpm tools-dev, pode subir a camada web na Vercel e mantém BYOK em toda camada.

Digite me faz um pitch deck estilo revista para nossa rodada seed. O formulário de perguntas interativo aparece antes de o modelo improvisar um pixel. O agente escolhe uma de cinco direções visuais curadas. Um plano TodoWrite ao vivo flui para a UI. O daemon constrói uma pasta de projeto real em disco com template-semente, biblioteca de layouts e checklist de auto-checagem. O agente lê tudo — pre-flight forçado — roda uma crítica em cinco dimensões contra a própria saída e emite um único <artifact> que renderiza num iframe sandboxed em segundos.

Isso não é "IA tentando desenhar algo". É uma IA que foi treinada, pela pilha de prompt, para se comportar como uma designer sênior com filesystem funcional, biblioteca de paleta determinística e cultura de checklist — exatamente a barra que o Claude Design colocou, mas aberta e sua.

OD se apoia em quatro ombros open-source:

• alchaincyf/huashu-design — a bússola da filosofia de design. Workflow Junior-Designer, protocolo de 5 passos para asset de marca, checklist anti-AI-slop, autocrítica em 5 dimensões e a ideia "5 escolas × 20 filosofias de design" por trás do nosso direction picker — tudo destilado em apps/daemon/src/prompts/discovery.ts.
• op7418/guizang-ppt-skill — o modo deck. Empacotado literalmente sob skills/guizang-ppt/ com o LICENSE original preservado; layouts estilo revista, hero WebGL, checklists P0/P1/P2.
• OpenCoworkAI/open-codesign — a estrela-guia de UX e nosso peer mais próximo. A primeira alternativa open-source ao Claude Design. Pegamos o loop de streaming-artifact dele, o padrão de preview em iframe sandboxed (React 18 + Babel vendored), o painel de agente ao vivo (todos + tool calls + geração interruptível) e a lista de cinco formatos de export (HTML / PDF / PPTX / ZIP / Markdown). Divergimos de propósito no form factor — eles são um app desktop Electron com pi-ai embutido; nós somos um web app + daemon local que delega ao seu CLI já existente.
• multica-ai/multica — a arquitetura de daemon-and-runtime. Detecção de agente por scan de PATH, daemon local como único processo privilegiado, visão de mundo agente-como-time.

Visão geral

	O que você ganha
CLIs de agente (16)	Claude Code · Codex CLI · Devin for Terminal · Cursor Agent · Gemini CLI · OpenCode · Qwen Code · Qoder CLI · GitHub Copilot CLI · Hermes (ACP) · Kimi CLI (ACP) · Pi (RPC) · Kiro CLI (ACP) · Kilo (ACP) · Mistral Vibe CLI (ACP) · DeepSeek TUI — detectados automaticamente no PATH, troca em um clique
Fallback BYOK	Proxy de API por protocolo em /api/proxy/{anthropic,openai,azure,google}/stream — cole baseUrl + apiKey + model, escolha Anthropic / OpenAI / Azure OpenAI / Google Gemini, e o daemon normaliza o SSE de volta para o mesmo stream de chat. IPs internos / SSRF bloqueados na borda do daemon.
Design systems built-in	129 — 2 starters escritos à mão + 70 sistemas de produto (Linear, Stripe, Vercel, Airbnb, Tesla, Notion, Anthropic, Apple, Cursor, Supabase, Figma, Xiaohongshu, …) de awesome-design-md, mais 57 design skills de awesome-design-skills adicionados direto em design-systems/
Skills built-in	31 — 27 em modo prototype (web-prototype, saas-landing, dashboard, mobile-app, gamified-app, social-carousel, magazine-poster, dating-web, sprite-animation, motion-frames, critique, tweaks, wireframe-sketch, pm-spec, eng-runbook, finance-report, hr-onboarding, invoice, kanban-board, team-okrs, …) + 4 em modo deck (guizang-ppt · simple-deck · replit-deck · weekly-update). Agrupadas no picker por scenario: design / marketing / operation / engineering / product / finance / hr / sale / personal.
Geração de mídia	Imagem · vídeo · áudio entregues lado a lado com o loop de design. gpt-image-2 (Azure / OpenAI) para pôsteres, avatares, infográficos, mapas ilustrados · Seedance 2.0 (ByteDance) para texto-para-vídeo cinematográfico de 15s e imagem-para-vídeo · HyperFrames (heygen-com/hyperframes) para motion graphics HTML→MP4 (revelações de produto, kinetic typography, gráficos de dados, overlays sociais, logo outros). 93 prompts prontos para replicar — 43 gpt-image-2 + 39 Seedance + 11 HyperFrames — em prompt-templates/, com thumbnails de preview e atribuição da fonte. Mesma superfície de chat do código; saída é um .mp4 / .png real entrando no workspace do projeto.
Direções visuais	5 escolas curadas (Editorial Monocle · Modern Minimal · Warm Soft · Tech Utility · Brutalist Experimental) — cada uma trazendo paleta OKLch determinística + font stack (apps/daemon/src/prompts/directions.ts)
Frames de dispositivo	iPhone 15 Pro · Pixel · iPad Pro · MacBook · Browser Chrome — pixel-accurate, compartilhados entre skills sob assets/frames/
Runtime de agente	Daemon local sobe o CLI dentro da pasta do seu projeto — agente recebe Read, Write, Bash, WebFetch reais contra um ambiente real em disco, com fallbacks de Windows ENAMETOOLONG (stdin / arquivo de prompt) em todos os adapters
Imports	Solte um ZIP exportado do Claude Design no welcome dialog — POST /api/import/claude-design parseia para um projeto real, então seu agente continua editando de onde a Anthropic parou
Persistência	SQLite em .od/app.sqlite: projects · conversations · messages · tabs · saved templates. Reabra amanhã, o card de todo e os arquivos abertos estão exatamente onde você deixou.
Ciclo de vida	Um único entry point: pnpm tools-dev (start / stop / run / status / logs / inspect / check) — sobe daemon + web (+ desktop) sob stamps tipados de sidecar
Desktop	Shell Electron opcional com renderer sandboxed + IPC sidecar (STATUS / EVAL / SCREENSHOT / CONSOLE / CLICK / SHUTDOWN) — alimenta tools-dev inspect desktop screenshot para E2E
Deployável em	Local (pnpm tools-dev) · camada web Vercel · aplicativo desktop Electron empacotado para macOS (Apple Silicon) e Windows (x64) — baixe em open-design.ai ou na release mais recente
Licença	Apache-2.0

Demo

Tela de entrada — escolha um skill, escolha um design system, digite o brief. Mesma superfície para protótipos, decks, mobile apps, dashboards e páginas editoriais.	Formulário de descoberta no turn 1 — antes do modelo escrever um pixel, o OD trava o brief: superfície, audiência, tom, contexto de marca, escala. 30 segundos de radios derrotam 30 minutos de redirecionamento.
Direction picker — quando o usuário não tem marca, o agente emite um segundo formulário com 5 direções curadas (Monocle / Modern Minimal / Tech Utility / Brutalist / Soft Warm). Um clique em um radio → paleta determinística + font stack, sem freestyle do modelo.	Progresso de todos ao vivo — o plano do agente é streamado como um card vivo. Atualizações in_progress → completed caem em tempo real. O usuário pode redirecionar barato, em pleno voo.
Preview sandboxed — todo <artifact> renderiza dentro de um iframe srcdoc limpo. Editável in place via o workspace de arquivos; baixável como HTML, PDF, ZIP.	Biblioteca de 72 sistemas — todo sistema de produto mostra sua assinatura de 4 cores. Clique para ver o DESIGN.md completo, swatch grid e showcase ao vivo.
Modo deck (guizang-ppt) — o guizang-ppt-skill bundled cai inalterado. Layouts estilo revista, fundos hero WebGL, saída HTML em arquivo único, export PDF.	Protótipo mobile — chrome iPhone 15 Pro pixel-accurate (Dynamic Island, SVGs da status bar, home indicator). Protótipos multi-tela usam os assets compartilhados de /frames/ para o agente nunca redesenhar um celular.

Skills

31 skills entregues na caixa. Cada uma é uma pasta sob skills/ seguindo a convenção SKILL.md do Claude Code, estendida com um frontmatter od: que o daemon parseia literalmente — mode, platform, scenario, preview.type, design_system.requires, default_for, featured, fidelity, speaker_notes, animations, example_prompt (apps/daemon/src/skills.ts).

Dois modos top-level carregam o catálogo: prototype (27 skills — qualquer coisa que renderize como artifact de página única, de uma landing estilo revista a uma tela de celular a um doc de spec de PM) e deck (4 skills — apresentações com swipe horizontal, com chrome de framework de deck). O campo scenario é o que o picker usa para agrupar: design · marketing · operation · engineering · product · finance · hr · sale · personal.

Showcase de exemplos

As skills visualmente mais distintas, que você provavelmente vai rodar primeiro. Cada uma traz um example.html real para abrir direto do repo e ver exatamente o que o agente vai produzir — sem auth, sem setup.

dating-web · prototype Dashboard de namoro / matchmaking de consumo — nav lateral à esquerda, ticker bar, KPIs, gráfico de matches mútuos de 30 dias, tipografia editorial.	digital-eguide · template E-guide digital de duas páginas — capa (título, autora, teaser de TOC) + spread de aula com pull-quote e lista de passos. Tom criador / lifestyle.
email-marketing · prototype E-mail HTML de lançamento de produto de marca — masthead, imagem hero, lockup de headline, CTA, grid de specs. Coluna única centralizada, table-fallback safe.	gamified-app · prototype Protótipo mobile gamificado em três frames sobre um palco escuro de showcase — cover, missões do dia com ribbons de XP + barra de level, detalhe de missão.
mobile-onboarding · prototype Fluxo de onboarding mobile em três frames — splash, value-prop, sign-in. Status bar, dots de swipe, CTA primária.	motion-frames · prototype Hero de motion-design em frame único com animações CSS em loop — anel de tipografia em rotação, globo animado, timer girando. Pronto para hand-off para o HyperFrames.
social-carousel · prototype Carrossel 1080×1080 de mídia social com três cards — painéis cinematográficos com headlines de display que se conectam ao longo da série, marca, affordance de loop.	sprite-animation · prototype Slide explicador animado em pixel / 8-bit — palco creme em full-bleed, mascote pixel animado, tipografia de display japonesa cinética, keyframes CSS em loop.

Superfícies de design & marketing (modo prototype)

Skill	Plataforma	Cenário	O que produz
web-prototype	desktop	design	HTML de página única — landings, marketing, hero pages (default do prototype)
saas-landing	desktop	marketing	Layout de marketing hero / features / pricing / CTA
dashboard	desktop	operation	Admin / analytics com sidebar + layout denso de dados
pricing-page	desktop	sale	Pricing standalone + tabelas comparativas
docs-page	desktop	engineering	Layout de documentação em 3 colunas
blog-post	desktop	marketing	Editorial de formato longo
mobile-app	mobile	design	Tela(s) de app emolduradas em iPhone 15 Pro / Pixel
mobile-onboarding	mobile	design	Fluxo de onboarding mobile multi-tela (splash · value-prop · sign-in)
gamified-app	mobile	personal	Protótipo de app mobile gamificado em três frames
email-marketing	desktop	marketing	E-mail HTML de lançamento de produto de marca (table-fallback safe)
social-carousel	desktop	marketing	Carrossel social 1080×1080 com 3 cards
magazine-poster	desktop	marketing	Pôster de página única estilo revista
motion-frames	desktop	marketing	Hero de motion-design com animações CSS em loop
sprite-animation	desktop	marketing	Slide explicador animado em pixel / 8-bit
dating-web	desktop	personal	Mockup de dashboard de namoro de consumo
digital-eguide	desktop	marketing	E-guide digital de duas páginas (capa + aula)
wireframe-sketch	desktop	design	Sketch de ideação à mão — para a passada "mostre algo visível cedo"
critique	desktop	design	Scoresheet de autocrítica em cinco dimensões (Filosofia · Hierarquia · Detalhe · Função · Inovação)
tweaks	desktop	design	Painel de tweaks emitidos pela IA — o modelo expõe os parâmetros que valem ajuste

Superfícies de deck (modo deck)

Skill	Default para	O que produz
guizang-ppt	default do deck	PPT web estilo revista — bundled literalmente de op7418/guizang-ppt-skill, LICENSE original preservado
simple-deck	—	Deck minimalista com swipe horizontal
replit-deck	—	Deck de walkthrough de produto (estilo Replit)
weekly-update	—	Cadência semanal do time como deck swipe (progresso · bloqueios · próximos)

Superfícies de office & operações (modo prototype, cenários com sabor de documento)

Skill	Cenário	O que produz
pm-spec	product	Doc de spec de PM com TOC + log de decisão
team-okrs	product	Scoresheet de OKR
meeting-notes	operation	Log de decisões de reunião
kanban-board	operation	Snapshot de board
eng-runbook	engineering	Runbook de incidente
finance-report	finance	Resumo executivo financeiro
invoice	finance	Fatura de página única
hr-onboarding	hr	Plano de onboarding por cargo

Adicionar uma skill leva uma pasta. Leia docs/skills-protocol.md para o frontmatter estendido, forke uma skill existente, reinicie o daemon, ela aparece no picker. O endpoint de catálogo é GET /api/skills; a montagem do seed por skill (template + referências auxiliares) vive em GET /api/skills/:id/example.

Seis ideias que sustentam o projeto

1 · Não despachamos um agente. O seu já basta.

O daemon escaneia seu PATH por claude, codex, devin, cursor-agent, gemini, opencode, qwen, qodercli, copilot, hermes, kimi, pi, kiro-cli e vibe-acp na inicialização. Os que ele encontrar viram engines de design candidatas — dirigidas via stdio com um adapter por CLI, trocáveis pelo picker de modelo. Inspirado em multica e cc-switch. Sem CLI instalado? O modo API é o mesmo pipeline menos o spawn — escolha Anthropic, OpenAI-compatible, Azure OpenAI ou Google Gemini, e o daemon repassa chunks SSE normalizados, com destinos loopback / link-local / RFC1918 rejeitados na borda.

2 · Skills são arquivos, não plugins.

Seguindo a convenção SKILL.md do Claude Code, cada skill é SKILL.md + assets/ + references/. Coloque uma pasta em skills/, reinicie o daemon, ela aparece no picker. O magazine-web-ppt bundled é o op7418/guizang-ppt-skill commitado literalmente — licença original preservada, atribuição preservada.

3 · Design Systems são Markdown portátil, não JSON de tema.

O schema de 9 seções de DESIGN.md vindo de VoltAgent/awesome-design-md — color, typography, spacing, layout, components, motion, voice, brand, anti-patterns. Todo artifact lê do sistema ativo. Troque o sistema → o próximo render usa os novos tokens. O dropdown vem com Linear, Stripe, Vercel, Airbnb, Tesla, Notion, Apple, Anthropic, Cursor, Supabase, Figma, Resend, Raycast, Lovable, Cohere, Mistral, ElevenLabs, X.AI, Spotify, Webflow, Sanity, PostHog, Sentry, MongoDB, ClickHouse, Cal, Replicate, Clay, Composio, Xiaohongshu… — mais 57 design skills vindas de awesome-design-skills.

4 · O formulário interativo de perguntas evita 80% dos redirecionamentos.

A pilha de prompt do OD hardcoda uma RULE 1: todo brief de design fresco começa com um <question-form id="discovery"> em vez de código. Superfície · audiência · tom · contexto de marca · escala · restrições. Um brief comprido ainda deixa decisões de design abertas — tom visual, postura de cor, escala — exatamente as coisas que o formulário trava em 30 segundos. O custo de uma direção errada é uma rodada de chat, não um deck pronto.

Esse é o modo Junior-Designer destilado de huashu-design: batch das perguntas no início, mostre algo visível cedo (mesmo que seja um wireframe com blocos cinza), deixe o usuário redirecionar barato. Combinado com o protocolo de asset de marca (localizar · baixar · grep hex · escrever brand-spec.md · vocalizar), é a maior razão para a saída parar de soar como freestyle de IA e começar a soar como uma designer que prestou atenção antes de pintar.

5 · O daemon faz o agente parecer estar no seu laptop, porque está.

O daemon spawna o CLI com cwd no diretório de artifacts do projeto sob .od/projects/<id>/. O agente recebe Read, Write, Bash, WebFetch — tools reais contra um filesystem real. Ele consegue Read no assets/template.html da skill, grep o seu CSS atrás de hex values, escrever um brand-spec.md, soltar imagens geradas, e produzir .pptx / .zip / .pdf que aparecem no workspace de arquivos como chips de download quando a turn termina. Sessions, conversations, messages e tabs persistem num SQLite local — abra o projeto amanhã e o card de todo do agente está exatamente onde você deixou.

6 · A pilha de prompt é o produto.

O que você compõe no envio não é "system + user". É:

DISCOVERY directives  (turn-1 form, turn-2 brand branch, TodoWrite, 5-dim critique)
  + identity charter   (OFFICIAL_DESIGNER_PROMPT, anti-AI-slop, junior-pass)
  + active DESIGN.md   (72 systems available)
  + active SKILL.md    (31 skills available)
  + project metadata   (kind, fidelity, speakerNotes, animations, inspiration ids)
  + skill side files   (auto-injected pre-flight: read assets/template.html + references/*.md)
  + (deck kind, no skill seed) DECK_FRAMEWORK_DIRECTIVE   (nav / counter / scroll / print)

Toda camada é compositável. Toda camada é um arquivo que dá pra editar. Leia apps/daemon/src/prompts/system.ts e apps/daemon/src/prompts/discovery.ts para ver o contrato real.

Arquitetura

┌────────────────────── browser (Next.js 16) ──────────────────────┐
│  chat · file workspace · iframe preview · settings · imports     │
└──────────────┬───────────────────────────────────┬───────────────┘
               │ /api/* (rewritten in dev)          │
               ▼                                    ▼
   ┌──────────────────────────────────┐   /api/proxy/{provider}/stream (SSE)
   │  Local daemon (Express + SQLite) │   ─→ any OpenAI-compat
   │                                  │       endpoint (BYOK)
   │  /api/agents          /api/skills│       w/ SSRF blocking
   │  /api/design-systems  /api/projects/…
   │  /api/chat (SSE)      /api/proxy/{provider}/stream (SSE)
   │  /api/templates       /api/import/claude-design
   │  /api/artifacts/save  /api/artifacts/lint
   │  /api/upload          /api/projects/:id/files…
   │  /artifacts (static)  /frames (static)
   │
   │  optional: sidecar IPC at /tmp/open-design/ipc/<ns>/<app>.sock
   │  (STATUS · EVAL · SCREENSHOT · CONSOLE · CLICK · SHUTDOWN)
   └─────────┬────────────────────────┘
             │ spawn(cli, [...], { cwd: .od/projects/<id> })
             ▼
   ┌──────────────────────────────────────────────────────────────────┐
   │  claude · codex · devin (ACP) · gemini · opencode · cursor-agent │
   │  qwen · qoder · copilot · hermes (ACP) · kimi (ACP) · pi (RPC) · kiro (ACP) · vibe (ACP)     │
   │  reads SKILL.md + DESIGN.md, writes artifacts to disk            │
   └──────────────────────────────────────────────────────────────────┘

Camada	Stack
Frontend	Next.js 16 App Router + React 18 + TypeScript, deployável na Vercel
Daemon	Node 24 · Express · streaming SSE · better-sqlite3; tabelas: projects · conversations · messages · tabs · templates
Transporte do agente	child_process.spawn; parsers de eventos tipados para claude-stream-json (Claude Code), qoder-stream-json (Qoder CLI), copilot-stream-json (Copilot), parsers json-event-stream por CLI (Codex / Gemini / OpenCode / Cursor Agent), acp-json-rpc (Devin / Hermes / Kimi / Kiro / Kilo / Mistral Vibe via Agent Client Protocol), pi-rpc (Pi via stdio JSON-RPC), plain (Qwen Code / DeepSeek TUI)
Proxy BYOK	POST /api/proxy/{anthropic,openai,azure,google}/stream → APIs upstream específicas por provider, SSE normalizado em delta/end/error; rejeita hosts loopback / link-local / RFC1918 na borda do daemon
Storage	Arquivos planos em .od/projects/<id>/ + SQLite em .od/app.sqlite + credenciais em .od/media-config.json (gitignored, autocriado). OD_DATA_DIR=<dir> realoca todos os dados do daemon (usado para isolamento de teste e setups com instalação read-only); OD_MEDIA_CONFIG_DIR=<dir> afunila o override apenas para media-config.json, em setups que querem manter chaves de API fora do diretório de dados
Preview	Iframe sandboxed via srcdoc + parser <artifact> por skill (apps/web/src/artifacts/parser.ts)
Export	HTML (assets inline) · PDF (browser print, deck-aware) · PPTX (orientado pelo agente via skill) · ZIP (archiver) · Markdown
Ciclo de vida	pnpm tools-dev start | stop | run | status | logs | inspect | check; portas via --daemon-port / --web-port, namespaces via --namespace
Desktop (opcional)	Shell Electron — descobre a URL do web via IPC sidecar, sem chute de porta; o mesmo canal STATUS/EVAL/SCREENSHOT/CONSOLE/CLICK/SHUTDOWN alimenta tools-dev inspect desktop … para E2E

Quickstart

Baixe o aplicativo desktop (sem build necessário)

A maneira mais rápida de experimentar o Open Design é o aplicativo desktop pré-compilado — sem Node, sem pnpm, sem clone:

• open-design.ai — página oficial de downloads
• Releases do GitHub

Executar a partir do código-fonte

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable
corepack pnpm --version   # should print 10.33.2
pnpm install
pnpm tools-dev run web
# open the web URL printed by tools-dev

Requisitos de ambiente: Node ~24 e pnpm 10.33.x. nvm/fnm são apenas helpers opcionais; se você usa um, rode nvm install 24 && nvm use 24 ou fnm install 24 && fnm use 24 antes do pnpm install.

Usuários de Windows podem seguir docs/windows-troubleshooting.md para o caminho de setup nativo e um pequeno launcher de duplo clique.

Para startup desktop/background, restart com porta fixa e checagens do dispatcher de geração de mídia (OD_BIN, OD_DAEMON_URL, apps/daemon/dist/cli.js), veja QUICKSTART.pt-BR.md.

No primeiro carregamento:

1. Detecta quais CLIs de agente você tem no PATH e escolhe um automaticamente.
2. Carrega 31 skills + 72 design systems.
3. Abre o welcome dialog para você colar uma chave Anthropic (só necessária para o caminho de fallback BYOK).
4. Cria automaticamente ./.od/ — a pasta de runtime local para o SQLite de projetos, artifacts por projeto e renders salvos. Não há passo od init; o daemon mkdira tudo no boot.

Digite um prompt, clique em Send, veja o formulário de perguntas chegar, preencha, veja o card de todo streamando, veja o artifact renderizar. Clique em Save to disk ou baixe como ZIP do projeto.

Estado de primeira execução (./.od/)

O daemon dono de uma única pasta oculta na raiz do repo. Tudo nela é gitignored e local da máquina — nunca faça commit.

.od/
├── app.sqlite                 ← projects · conversations · messages · open tabs
├── artifacts/                 ← one-off "Save to disk" renders (timestamped)
└── projects/<id>/             ← per-project working dir, also the agent's cwd

Quando você quiser…	Faça isto
Inspecionar o que tem dentro	ls -la .od && sqlite3 .od/app.sqlite '.tables'
Resetar para um estado limpo	pnpm tools-dev stop, rm -rf .od, rode pnpm tools-dev run web de novo
Mover para outro lugar	ainda não suportado — o caminho é hard-coded relativo ao repo

Mapa completo de arquivos, scripts e troubleshooting → QUICKSTART.pt-BR.md.

Estrutura do repositório

open-design/
├── README.md                      ← this file
├── README.pt-BR.md                ← Português (Brasil)
├── README.de.md                   ← Deutsch
├── README.ru.md                   ← Русский
├── README.zh-CN.md                ← 简体中文
├── QUICKSTART.md                  ← run / build / deploy guide
├── package.json                   ← pnpm workspace, single bin: od
│
├── apps/
│   ├── daemon/                    ← Node + Express, the only server
│   │   ├── src/                   ← TypeScript daemon source
│   │   │   ├── cli.ts             ← `od` bin source, compiled to dist/cli.js
│   │   │   ├── server.ts          ← /api/* routes (projects, chat, files, exports)
│   │   │   ├── agents.ts          ← PATH scanner + per-CLI argv builders
│   │   │   ├── claude-stream.ts   ← streaming JSON parser for Claude Code stdout
│   │   │   ├── skills.ts          ← SKILL.md frontmatter loader
│   │   │   └── db.ts              ← SQLite schema (projects/messages/templates/tabs)
│   │   ├── sidecar/               ← tools-dev daemon sidecar wrapper
│   │   └── tests/                 ← daemon package tests
│   │
│   └── web/                       ← Next.js 16 App Router + React client
│       ├── app/                   ← App Router entrypoints
│       ├── next.config.ts         ← dev rewrites + prod static export to out/
│       └── src/                   ← React + TypeScript client modules
│           ├── App.tsx            ← routing, bootstrap, settings
│           ├── components/        ← chat, composer, picker, preview, sketch, …
│           ├── prompts/
│           │   ├── system.ts      ← composeSystemPrompt(base, skill, DS, metadata)
│           │   ├── discovery.ts   ← turn-1 form + turn-2 branch + 5-dim critique
│           │   └── directions.ts  ← 5 visual directions × OKLch palette + font stack
│           ├── artifacts/         ← streaming <artifact> parser + manifests
│           ├── runtime/           ← iframe srcdoc, markdown, export helpers
│           ├── providers/         ← daemon SSE + BYOK API transports
│           └── state/             ← config + projects (localStorage + daemon-backed)
│
├── e2e/                           ← Playwright UI + external integration/Vitest harness
│
├── packages/
│   ├── contracts/                 ← shared web/daemon app contracts
│   ├── sidecar-proto/             ← Open Design sidecar protocol contract
│   ├── sidecar/                   ← generic sidecar runtime primitives
│   └── platform/                  ← generic process/platform primitives
│
├── skills/                        ← 31 SKILL.md skill bundles (27 prototype + 4 deck)
│   ├── web-prototype/             ← default for prototype mode
│   ├── saas-landing/  dashboard/  pricing-page/  docs-page/  blog-post/
│   ├── mobile-app/  mobile-onboarding/  gamified-app/
│   ├── email-marketing/  social-carousel/  magazine-poster/
│   ├── motion-frames/  sprite-animation/  digital-eguide/  dating-web/
│   ├── critique/  tweaks/  wireframe-sketch/
│   ├── pm-spec/  team-okrs/  meeting-notes/  kanban-board/
│   ├── eng-runbook/  finance-report/  invoice/  hr-onboarding/
│   ├── simple-deck/  replit-deck/  weekly-update/   ← deck mode
│   └── guizang-ppt/               ← bundled magazine-web-ppt (default for deck)
│       ├── SKILL.md
│       ├── assets/template.html   ← seed
│       └── references/{themes,layouts,components,checklist}.md
│
├── design-systems/                ← 72 DESIGN.md systems
│   ├── default/                   ← Neutral Modern (starter)
│   ├── warm-editorial/            ← Warm Editorial (starter)
│   ├── linear-app/  vercel/  stripe/  airbnb/  notion/  cursor/  apple/  …
│   └── README.md                  ← catalog overview
│
├── assets/
│   └── frames/                    ← shared device frames (used cross-skill)
│       ├── iphone-15-pro.html
│       ├── android-pixel.html
│       ├── ipad-pro.html
│       ├── macbook.html
│       └── browser-chrome.html
│
├── templates/
│   ├── deck-framework.html        ← deck baseline (nav / counter / print)
│   └── kami-deck.html             ← kami-flavored deck starter (parchment / ink-blue serif)
│
├── scripts/
│   └── sync-design-systems.ts     ← re-import upstream awesome-design-md tarball
│
├── docs/
│   ├── spec.md                    ← product spec, scenarios, differentiation
│   ├── architecture.md            ← topologies, data flow, components
│   ├── skills-protocol.md         ← extended SKILL.md od: frontmatter
│   ├── agent-adapters.md          ← per-CLI detection + dispatch
│   ├── modes.md                   ← prototype / deck / template / design-system
│   ├── references.md              ← long-form provenance
│   ├── roadmap.md                 ← phased delivery
│   ├── schemas/                   ← JSON schemas
│   └── examples/                  ← canonical artifact examples
│
└── .od/                           ← runtime data, gitignored, auto-created
    ├── app.sqlite                 ← projects / conversations / messages / tabs
    ├── projects/<id>/             ← per-project working folder (agent's cwd)
    └── artifacts/                 ← saved one-off renders

Design Systems

72 sistemas na caixa, cada um como um único DESIGN.md:

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 · sentry · resend · spacex

Starters — default (Neutral Modern) · warm-editorial

A biblioteca de sistemas de produto é importada via scripts/sync-design-systems.ts de VoltAgent/awesome-design-md. Re-rode para atualizar. As 57 design skills vêm de bergside/awesome-design-skills e são adicionadas direto em design-systems/.

Direções visuais

Quando o usuário não tem brand spec, o agente emite um segundo formulário com cinco direções curadas — a adaptação do OD do fallback "5 escolas × 20 filosofias de design" do huashu-design. Cada direção é uma spec determinística — paleta em OKLch, font stack, dicas de postura de layout, referências — que o agente coloca literalmente no :root do template-semente. Um clique de radio → um sistema visual totalmente especificado. Sem improviso, sem AI-slop.

Direção	Mood	Refs
Editorial — Monocle / FT	Revista impressa, tinta + creme + ferrugem quente	Monocle · FT Weekend · NYT Magazine
Modern minimal — Linear / Vercel	Frio, estruturado, acento mínimo	Linear · Vercel · Stripe
Tech utility	Densidade de informação, monoespaçada, terminal	Bloomberg · ferramentas Bauhaus
Brutalist	Cru, tipografia gigante, sem sombra, acentos duros	Bloomberg Businessweek · Achtung
Soft warm	Generoso, baixo contraste, neutros pessegos	Marketing da Notion · Apple Health

Spec completa → apps/daemon/src/prompts/directions.ts.

Geração de mídia

O OD não para no código. A mesma superfície de chat que produz HTML <artifact> também dirige geração de imagem, vídeo e áudio, com adapters de modelo plugados no pipeline de mídia do daemon (apps/daemon/src/media-models.ts, apps/web/src/media/models.ts). Todo render cai como arquivo real no workspace do projeto — .png para imagem, .mp4 para vídeo — e aparece como chip de download quando a turn termina.

Três famílias de modelo carregam o peso hoje:

Superfície	Modelo	Provider	Para quê
Imagem	gpt-image-2	Azure / OpenAI	Pôsteres, avatares de perfil, mapas ilustrados, infográficos, cards sociais estilo revista, restauração de foto, arte explodida de produto
Vídeo	seedance-2.0	ByteDance Volcengine	t2v + i2v cinematográfico de 15s com áudio — shorts narrativos, close-ups de personagem, filmes de produto, coreografia estilo MV
Vídeo	hyperframes-html	HeyGen / OSS	Motion graphics HTML→MP4 — revelações de produto, kinetic typography, gráficos de dados, overlays sociais, logo outros, verticais estilo TikTok com legendas em karaokê

Uma galeria de prompts crescente em prompt-templates/ entrega 93 prompts prontos para replicar — 43 de imagem (prompt-templates/image/*.json), 39 Seedance (prompt-templates/video/*.json excluindo hyperframes-*), 11 HyperFrames (prompt-templates/video/hyperframes-*.json). Cada um carrega thumbnail de preview, corpo do prompt literal, modelo alvo, aspect ratio e bloco source para licença + atribuição. O daemon serve em GET /api/prompt-templates, o app web os mostra como grid de cards nas tabs Image templates e Video templates da tela de entrada; um clique solta o prompt no composer com o modelo certo pré-selecionado.

gpt-image-2 — galeria de imagens (amostra de 43)

Infográfico de Evolução em Escada de Pedra 3D Infográfico de 3 passos, estética de pedra esculpida

Mapa Ilustrado de Comida da Cidade Pôster de viagem editorial ilustrado à mão

Cena Cinematográfica de Elevador Still editorial de moda em frame único

Retrato Anime Cyberpunk Avatar de perfil — texto neon no rosto

Retrato de Mulher Glamurosa de Preto Retrato editorial de estúdio

Set completo → prompt-templates/image/. Fontes: a maioria vem de YouMind-OpenLab/awesome-gpt-image-prompts (CC-BY-4.0), com atribuição autoral preservada por template.

Seedance 2.0 — galeria de vídeos (amostra de 39)

Podcast de Música & Técnica de Violão Filme cinematográfico de estúdio em 4K

Close-up de Rosto Emocional Estudo cinematográfico de microexpressão

Supercarro de Luxo Cinematográfico Filme narrativo de produto

Sátira do Gato da Cidade Proibida Sátira estilizada curta

Curta de Romance Japonês Narrativa Seedance 2.0 de 15s

Clique em qualquer thumbnail para tocar o MP4 renderizado de fato. Set completo → prompt-templates/video/ (entradas *-seedance-* e marcadas como Cinematic). Fontes: YouMind-OpenLab/awesome-seedance-2-prompts (CC-BY-4.0), com links originais de tweet e handles dos autores preservados.

HyperFrames — motion graphics HTML→MP4 (11 templates prontos)

heygen-com/hyperframes é o framework open-source de vídeo agent-native da HeyGen — você (ou o agente) escreve HTML + CSS + GSAP, o HyperFrames renderiza em MP4 determinístico via headless Chrome + FFmpeg. O Open Design despacha o HyperFrames como modelo de vídeo de primeira classe (hyperframes-html) plugado ao dispatch do daemon, mais a skill skills/hyperframes/ que ensina ao agente o contrato de timeline, regras de transição entre cenas, padrões audio-reativos, captions/TTS e os blocos do catálogo (npx hyperframes add <slug>).

Onze prompts hyperframes vivem em prompt-templates/video/hyperframes-*.json, cada um sendo um brief concreto que produz um arquétipo específico:

Reveal de produto minimalista de 5s · 16:9 · push-in title card com transição shader	Promo de produto SaaS de 30s · 16:9 · estilo Linear/ClickUp com reveals 3D de UI	Talking-head karaokê TikTok · 9:16 · TTS + legendas word-synced	Sizzle reel de marca de 30s · 16:9 · kinetic typography sincronizada na batida, audio-reativa
Bar-chart race animada · 16:9 · infográfico de dados estilo NYT	Mapa de voo (origem → destino) · 16:9 · reveal cinematográfico de rota estilo Apple	Logo outro cinematográfico de 4s · 16:9 · montagem peça-por-peça + bloom	Contador $0 → $10K · 9:16 · hype estilo Apple com flash verde + burst
Showcase de app em 3 celulares · 16:9 · celulares flutuantes com callouts de feature	Stack de overlays sociais · 9:16 · X · Reddit · Spotify · Instagram em sequência	Pipeline site-para-vídeo · 16:9 · captura site em 3 viewports + transições

Padrão é o mesmo do resto: pegue um template, edite o brief, envie. O agente lê o skills/hyperframes/SKILL.md bundled (que carrega o workflow de render específico do OD — composição de arquivos-fonte em um .hyperframes-cache/ para não poluir o workspace de arquivos, daemon despacha npx hyperframes render para fugir do hang sandbox-exec / Puppeteer do macOS, só o .mp4 final cai como chip de projeto), autoriza a composição e entrega um MP4. Thumbnails dos blocos do catálogo © HeyGen, servidos do CDN deles; o framework OSS em si é Apache-2.0.

Também plugados, mas ainda sem templates de superfície: Kling 2.0 / 1.6 / 1.5, Veo 3 / Veo 2, Sora 2 / Sora 2-Pro (via Fal), MiniMax video-01 — todos vivem em VIDEO_MODELS (apps/web/src/media/models.ts). Suno v5 / v4.5, Udio v2, Lyria 2 (música) e gpt-4o-mini-tts, MiniMax TTS (fala) cobrem a superfície de áudio. Templates para esses são contribuições abertas — solte um JSON em prompt-templates/video/ ou prompt-templates/audio/ e ele aparece no picker.

Além do chat — o que mais entregamos

O loop chat / artifact é o destaque, mas algumas capacidades menos visíveis já estão plugadas e valem conhecer antes de comparar o OD com qualquer outra coisa:

• Importação de ZIP do Claude Design. Solte um export do claude.ai no welcome dialog. POST /api/import/claude-design extrai para um .od/projects/<id>/ real, abre o arquivo de entrada como tab e prepara um prompt continue-de-onde-a-Anthropic-parou para o seu agente local. Sem reprompt, sem "peça ao modelo para recriar o que acabamos de ter". (apps/daemon/src/server.ts — /api/import/claude-design)
• Proxy BYOK multi-provider. POST /api/proxy/{anthropic,openai,azure,google}/stream recebe { baseUrl, apiKey, model, messages }, monta a requisição upstream específica do provider, normaliza chunks SSE em delta/end/error e rejeita destinos loopback / link-local / RFC1918 para evitar SSRF. OpenAI-compatível cobre OpenAI, Azure AI Foundry /openai/v1, DeepSeek, Groq, MiMo, OpenRouter e vLLM self-hosted; Azure OpenAI adiciona URL de deployment + api-version; Google usa Gemini :streamGenerateContent.
• Templates salvos pelo usuário. Quando você gosta de um render, POST /api/templates faz snapshot do HTML + metadados na tabela templates do SQLite. O próximo projeto pega ele numa linha "your templates" no picker — mesma superfície dos 31 entregues, mas seu.
• Persistência de tabs. Todo projeto lembra os arquivos abertos e a tab ativa na tabela tabs. Reabra o projeto amanhã e o workspace está exatamente como você deixou.
• API de lint de artifact. POST /api/artifacts/lint roda checagens estruturais num artifact gerado (framing <artifact> quebrado, side files obrigatórios faltando, tokens de paleta velhos) e devolve findings que o agente pode reler na próxima turn. A autocrítica de 5-dim usa isso para ancorar a nota em evidência real, não em vibes.
• Protocolo de sidecar + automação desktop. Daemon, web e desktop carregam stamps tipados de cinco campos (app · mode · namespace · ipc · source) e expõem um canal IPC JSON-RPC em /tmp/open-design/ipc/<namespace>/<app>.sock. tools-dev inspect desktop status \| eval \| screenshot dirige esse canal, então E2E headless funciona contra um shell Electron real sem harnesses customizados (packages/sidecar-proto/, apps/desktop/src/main/).
• Spawn amigável a Windows. Todo adapter que estouraria o limite de ~32 KB de argv do CreateProcess em prompts compostos longos (Codex, Gemini, OpenCode, Cursor Agent, Qwen, Qoder CLI, Pi) entrega o prompt via stdin. Claude Code e Copilot ficam com -p; o daemon faz fallback para arquivo temporário de prompt quando até isso transborda.
• Dados de runtime por namespace. OD_DATA_DIR e --namespace te dão árvores estilo .od/ totalmente isoladas, então Playwright, canais beta e seus projetos reais nunca compartilham um arquivo SQLite.

Maquinário anti-AI-slop

Toda a maquinaria abaixo é o playbook do huashu-design, portado para a pilha de prompt do OD e exigível por skill via o pre-flight de side files. Leia apps/daemon/src/prompts/discovery.ts para o texto vivo:

• Formulário de perguntas primeiro. O turn 1 é só <question-form> — sem pensar, sem tools, sem narração. O usuário escolhe defaults na velocidade de um radio.
• Extração de brand-spec. Quando o usuário anexa um screenshot ou URL, o agente roda um protocolo de cinco passos (localizar · baixar · grep hex · codificar brand-spec.md · vocalizar) antes de escrever CSS. Nunca chuta cores de marca de memória.
• Crítica em 5-dim. Antes de emitir <artifact>, o agente silenciosamente nota o output de 1 a 5 em filosofia / hierarquia / execução / especificidade / contenção. Qualquer coisa abaixo de 3/5 é regressão — corrija e renote. Duas passadas é normal.
• Checklist P0/P1/P2. Toda skill traz um references/checklist.md com gates duros P0. O agente precisa passar P0 antes de emitir.
• Blacklist de slop. Gradiente roxo agressivo, ícones genéricos de emoji, card arredondado com borda lateral de destaque, humanos SVG desenhados à mão, Inter como fonte de display, métricas inventadas — explicitamente proibidos no prompt.
• Placeholder honesto > stat falsa. Quando o agente não tem um número real, ele escreve — ou um bloco cinza com label, não "10× mais rápido".

Comparação

Eixo	Claude Design (Anthropic)	Open CoDesign	Open Design
Licença	Closed	MIT	Apache-2.0
Form factor	Web (claude.ai)	Desktop (Electron)	Web app + daemon local
Deployável na Vercel	❌	❌	✅
Runtime de agente	Bundled (Opus 4.7)	Bundled (pi-ai)	Delegado ao CLI já existente do usuário
Skills	Proprietárias	12 módulos TS customizados + SKILL.md	31 bundles SKILL.md em arquivo, drop-in
Design system	Proprietário	DESIGN.md (roadmap v0.2)	DESIGN.md × 129 sistemas entregues
Flexibilidade de provider	Só Anthropic	7+ via pi-ai	14 adapters de CLI + proxy BYOK OpenAI-compatible
Form de perguntas inicial	❌	❌	✅ Regra dura, turn 1
Direction picker	❌	❌	✅ 5 direções determinísticas
Progresso de todos ao vivo + stream de tools	❌	✅	✅ (padrão UX vindo do open-codesign)
Preview em iframe sandboxed	❌	✅	✅ (padrão vindo do open-codesign)
Importação de ZIP do Claude Design	n/a	❌	✅ POST /api/import/claude-design — continue de onde a Anthropic parou
Edições cirúrgicas em modo comentário	❌	✅	🟡 parcial — comentários por elemento de preview + anexos no chat; confiabilidade do patch cirúrgico ainda em andamento
Painel de tweaks emitido pela IA	❌	✅	🚧 roadmap — UX dedicada de painel ao lado do chat ainda não está implementada
Workspace nível filesystem	❌	parcial (sandbox Electron)	✅ cwd real, tools reais, SQLite persistido (projects · conversations · messages · tabs · templates)
Autocrítica em 5-dim	❌	❌	✅ Gate pré-emit
Lint de artifact	❌	❌	✅ POST /api/artifacts/lint — findings devolvidos ao agente
IPC de sidecar + desktop headless	❌	❌	✅ Processos com stamps + tools-dev inspect desktop status | eval | screenshot
Formatos de export	Limitado	HTML / PDF / PPTX / ZIP / Markdown	HTML / PDF / PPTX (orientado pelo agente) / ZIP / Markdown
Reuso de skill PPT	N/A	Built-in	guizang-ppt-skill cai inalterado (default do deck mode)
Cobrança mínima	Pro / Max / Team	BYOK	BYOK — cole qualquer baseUrl OpenAI-compatible

Agentes de código suportados

Detectados automaticamente do PATH no boot do daemon. Sem config necessária. O dispatch streaming vive em apps/daemon/src/agents.ts (AGENT_DEFS); parsers por CLI vivem ao lado. Modelos são populados sondando <bin> --list-models / <bin> models / handshake ACP, ou via lista fallback curada quando o CLI não expõe lista.

Agente	Bin	Formato de stream	Forma do argv (caminho de prompt composto)
Claude Code	claude	claude-stream-json (eventos tipados)	claude -p <prompt> --output-format stream-json --verbose [--include-partial-messages] [--add-dir …] --permission-mode bypassPermissions
Codex CLI	codex	json-event-stream + parser codex	codex exec --json --skip-git-repo-check --full-auto [-C cwd] [--model …] [-c model_reasoning_effort=…] - (prompt no stdin)
Devin for Terminal	devin	acp-json-rpc	devin --permission-mode dangerous --respect-workspace-trust false acp
Gemini CLI	gemini	json-event-stream + parser gemini	GEMINI_CLI_TRUST_WORKSPACE=true gemini --output-format stream-json --yolo [--model …] (prompt no stdin)
OpenCode	opencode	json-event-stream + parser opencode	opencode run --format json --dangerously-skip-permissions [--model …] - (prompt no stdin)
Cursor Agent	cursor-agent	json-event-stream + parser cursor-agent	cursor-agent --print --output-format stream-json --stream-partial-output --force --trust [--workspace cwd] [--model …] - (prompt no stdin)
Qwen Code	qwen	plain (chunks crus de stdout)	qwen --yolo [--model …] - (prompt no stdin)
Qoder CLI	qodercli	qoder-stream-json (eventos tipados)	qodercli -p --output-format stream-json --permission-mode bypass_permissions [--cwd cwd] [--model …] [--add-dir …] (prompt no stdin)
GitHub Copilot CLI	copilot	copilot-stream-json (eventos tipados)	copilot -p <prompt> --allow-all-tools --output-format json [--model …] [--add-dir …]
Hermes	hermes	acp-json-rpc (Agent Client Protocol)	hermes acp --accept-hooks
Kimi CLI	kimi	acp-json-rpc	kimi acp
Kiro CLI	kiro-cli	acp-json-rpc	kiro-cli acp
Kilo	kilo	acp-json-rpc	kilo acp
Mistral Vibe CLI	vibe-acp	acp-json-rpc	vibe-acp
DeepSeek TUI	deepseek	plain (raw stdout chunks)	deepseek exec --auto [--model …] <prompt>
Pi	pi	pi-rpc (stdio JSON-RPC)	pi --mode rpc [--model …] [--thinking …] (prompt enviado como comando RPC prompt)
BYOK multi-provider	n/a	Normalização SSE	POST /api/proxy/{provider}/stream → Anthropic / OpenAI-compatible / Azure OpenAI / Gemini; com guarda SSRF contra loopback / link-local / RFC1918

Adicionar um novo CLI é uma entrada em apps/daemon/src/agents.ts. O formato de stream é um de claude-stream-json, qoder-stream-json, copilot-stream-json, json-event-stream (com eventParser por CLI), acp-json-rpc, pi-rpc ou plain.

Referências & linhagem

Todo projeto externo do qual este repo emprestou. Cada link aponta para a fonte para você verificar a procedência.

Projeto	Papel aqui
Claude Design	O produto closed-source ao qual este repo é alternativa open-source.
alchaincyf/huashu-design	O núcleo de filosofia de design. Workflow Junior-Designer, protocolo de 5 passos para asset de marca, checklist anti-AI-slop, autocrítica em 5 dimensões e a biblioteca "5 escolas × 20 filosofias de design" por trás do nosso direction picker — tudo destilado em apps/daemon/src/prompts/discovery.ts e apps/daemon/src/prompts/directions.ts.
op7418/guizang-ppt-skill	Skill magazine-web-PPT bundled literalmente sob skills/guizang-ppt/ com LICENSE original preservado. Default do deck mode. Cultura de checklist P0/P1/P2 emprestada para todas as outras skills.
multica-ai/multica	A arquitetura de daemon + adapter. Detecção de agente por scan de PATH, daemon local como único processo privilegiado, visão de mundo agente-como-time. Adotamos o modelo; não vendoramos o código.
OpenCoworkAI/open-codesign	A primeira alternativa open-source ao Claude Design e nosso peer mais próximo. Padrões UX adotados: loop streaming-artifact, preview em iframe sandboxed (React 18 + Babel vendored), painel de agente ao vivo (todos + tool calls + interruptível), lista de cinco formatos de export (HTML/PDF/PPTX/ZIP/Markdown), hub de storage local-first, injeção de gosto via SKILL.md e a primeira passada de anotações de preview em modo comentário. Padrões UX ainda no nosso roadmap: confiabilidade plena de edição cirúrgica e painel de tweaks emitido pela IA. Deliberadamente não vendoramos pi-ai — o open-codesign embute como runtime de agente; nós delegamos para o CLI que o usuário já tem.
VoltAgent/awesome-claude-design / awesome-design-md	Fonte do schema de 9 seções do DESIGN.md e dos 70 sistemas de produto importados via scripts/sync-design-systems.ts.
bergside/awesome-design-skills	Fonte das 57 design skills adicionadas direto como arquivos DESIGN.md normalizados sob design-systems/.
farion1231/cc-switch	Inspiração para distribuição de skills via symlink entre múltiplos CLIs de agente.
Claude Code skills	A convenção SKILL.md adotada literalmente — qualquer skill do Claude Code cai em skills/ e é detectada pelo daemon.

Procedência em formato longo — o que pegamos de cada um, o que deliberadamente não pegamos — vive em docs/references.md.

Roadmap

• Daemon + detecção de agente (14 adapters de CLI) + registry de skills + catálogo de design system
• Web app + chat + formulário de perguntas + picker de 5 direções + progresso de todos + preview sandboxed
• 31 skills + 72 design systems + 5 direções visuais + 5 frames de dispositivo
• Projects · conversations · messages · tabs · templates lastreados em SQLite
• Proxy BYOK multi-provider (/api/proxy/{anthropic,openai,azure,google}/stream) com guarda SSRF
• Importação de ZIP do Claude Design (/api/import/claude-design)
• Protocolo de sidecar + desktop Electron com automação IPC (STATUS / EVAL / SCREENSHOT / CONSOLE / CLICK / SHUTDOWN)
• API de lint de artifact + gate de autocrítica 5-dim pré-emit
• Edições cirúrgicas em modo comentário — parcial entregue: comentários por elemento de preview e anexos de chat; patch alvo confiável segue em andamento
• UX do painel de tweaks emitido pela IA — ainda não implementado
• Receita de deploy Vercel + tunnel (Topologia B)
• npx od init em um comando para fazer scaffold de um projeto com DESIGN.md
• Marketplace de skills (od skills install <github-repo>) e superfície CLI od skill add | list | remove | test (rascunhada em docs/skills-protocol.md, implementação pendente)
• Build Electron empacotado a partir de apps/packaged/ — downloads para macOS (Apple Silicon) e Windows (x64) em open-design.ai e na página de releases do GitHub

Entrega faseada → docs/roadmap.md.

Status

Esta é uma implementação inicial — o loop fechado (detectar → escolher skill + design system → chat → parsear <artifact> → preview → salvar) roda end-to-end. A pilha de prompt e a biblioteca de skills é onde mora a maior parte do valor, e estão estáveis. A UI no nível de componente está sendo entregue diariamente.

Dê uma estrela

Se isso te poupou trinta minutos — dá um ★. Estrelas não pagam aluguel, mas dizem para a próxima designer, agente e contribuidora que esse experimento vale a atenção. Um clique, três segundos, sinal real: github.com/nexu-io/open-design.

Contribuindo

Issues, PRs, novas skills e novos design systems são todos bem-vindos. As contribuições com maior alavancagem geralmente são uma pasta, um arquivo Markdown ou um adapter do tamanho de um PR:

• Adicione uma skill — solte uma pasta em skills/ seguindo a convenção SKILL.md.
• Adicione um design system — solte um DESIGN.md em design-systems/<marca>/ usando o schema de 9 seções.
• Plugue um novo CLI de agente de código — uma entrada em apps/daemon/src/agents.ts.

Walkthrough completo, barra para mergear, estilo de código e o que não aceitamos → CONTRIBUTING.pt-BR.md (English, Deutsch, Français, 简体中文).

Contribuidoras e contribuidores

Obrigado a todas as pessoas que ajudaram a empurrar o Open Design pra frente — via código, docs, feedback, novas skills, novos design systems ou até uma issue afiada. Toda contribuição real conta, e a parede abaixo é a forma mais simples de dizer isso em voz alta.

Se você acabou de mandar seu primeiro PR — bem-vindo. A label good-first-issue/help-wanted é o ponto de entrada.

Atividade do repositório

O SVG acima é regenerado diariamente por .github/workflows/metrics.yml usando lowlighter/metrics. Dispare um refresh manual pela aba Actions se quiser antes; para plugins mais ricos (tráfego, follow-up time), adicione um secret de repositório METRICS_TOKEN com um PAT fine-grained.

Star History

Se a curva sobe, é o sinal que a gente procura. ★ esse repo para empurrar.

Créditos

A família de skills HTML PPT Studio — a master skills/html-ppt/ e os wrappers por template em skills/html-ppt-*/ (15 templates de deck completo, 36 temas, 31 layouts de página única, 27 animações CSS + 20 canvas FX, runtime de teclado e modo apresentador com magnetic cards) — é integrada do projeto open-source lewislulu/html-ppt-skill (MIT). O LICENSE upstream está in-tree em skills/html-ppt/LICENSE e o crédito autoral vai para @lewislulu. Cada card de Examples por template (html-ppt-pitch-deck, html-ppt-tech-sharing, html-ppt-presenter-mode, html-ppt-xhs-post, …) delega a orientação de autoria para a master skill, então o comportamento prompt → output do upstream é preservado end-to-end ao clicar em Use this prompt.

O fluxo magazine / horizontal-swipe deck em skills/guizang-ppt/ é integrado de op7418/guizang-ppt-skill (MIT). Crédito autoral para @op7418.

Licença

Apache-2.0. O bundled skills/guizang-ppt/ mantém seu LICENSE original (MIT) e atribuição de autoria a op7418. O bundled skills/html-ppt/ mantém seu LICENSE original (MIT) e atribuição de autoria a lewislulu.