Open Design

A alternativa open-source ao Claude Design. Local-first, implantável na web, BYOK em todas as camadas — 11 CLIs de agentes de codificação detectados automaticamente no seu PATH (Claude Code, Codex, Cursor Agent, Gemini CLI, OpenCode, Qwen, GitHub Copilot CLI, Hermes, Kimi, Pi, Kiro) tornam-se o motor de design, conduzidos por 31 Skills componíveis e 72 Design Systems de qualidade de marca. Sem CLI? Um proxy BYOK compatível com OpenAI executa o mesmo loop, dispensando o spawn.

English · Deutsch · 简体中文 · 繁體中文 · 한국어 · 日本語 · Português (BR)

---

Por que isto existe

O Claude Design da Anthropic (lançado em 2026-04-17, Opus 4.7) mostrou o que acontece quando um LLM para de escrever prosa e começa a entregar artefatos de design. Viralizou — e permaneceu de código fechado, pago, apenas na nuvem, preso ao modelo da Anthropic e às skills da Anthropic. Não há checkout, não há self-host, não há deploy na Vercel, não há troca por seu próprio agente.

Open Design (OD) é a alternativa open-source. Mesmo loop, mesmo modelo mental artifact-first, nada do lock-in. Não enviamos um agente — os agentes de codificação mais fortes já vivem no seu laptop. Nós os conectamos a um fluxo de design orientado por skills que roda localmente com pnpm tools-dev, pode implantar a camada web na Vercel, e permanece BYOK em todas as camadas.

Digite crie um pitch deck estilo revista para nossa rodada seed. O formulário de perguntas interativo aparece antes que o modelo improvise um único pixel. O agente escolhe uma de cinco direções visuais curadas. Um plano TodoWrite ao vivo é transmitido para a UI. O daemon constrói uma pasta de projeto real em disco com um template seed, biblioteca de layouts e checklist de auto-verificação. O agente os lê — pre-flight aplicado — executa uma crítica de cinco dimensões contra a sua própria saída, e emite um único `` que renderiza em um iframe sandboxed segundos depois.

Isso não é “IA tentando desenhar algo”. É uma IA que foi treinada, pela stack de prompts, a se comportar como uma designer sênior com um sistema de arquivos funcional, uma biblioteca determinística de paletas e uma cultura de checklist — exatamente o nível que o Claude Design estabeleceu, mas aberto e seu.

OD se apoia em quatro ombros open-source:

• alchaincyf/huashu-design — a bússola da filosofia de design. Workflow Junior-Designer, o protocolo de 5 passos para ativos de marca, o checklist anti-AI-slop, a auto-crítica de 5 dimensões, e a ideia “5 escolas × 20 filosofias de design” por trás do nosso seletor de direções — tudo destilado em apps/web/src/prompts/discovery.ts.
• op7418/guizang-ppt-skill — o modo deck. Empacotado verbatim em skills/guizang-ppt/ com a LICENSE original preservada; layouts estilo revista, hero WebGL, checklists P0/P1/P2.
• OpenCoworkAI/open-codesign — a estrela-guia de UX e nosso par mais próximo. A primeira alternativa open-source ao Claude Design. Pegamos emprestado seu loop de streaming-artifact, seu padrão de preview em iframe sandboxed (React 18 + Babel vendorizado), seu painel de agente ao vivo (todos + chamadas de ferramenta + geração interrompível), e sua lista de exportação em cinco formatos (HTML / PDF / PPTX / ZIP / Markdown). Divergimos deliberadamente no formato — eles são um app desktop Electron empacotando pi-ai; nós somos um web app + daemon local que delega para sua CLI existente.
• multica-ai/multica — a arquitetura daemon-and-runtime. Detecção de agentes via PATH-scan, o daemon local como o único processo privilegiado, a visão de mundo agente-como-companheiro-de-equipe.

Visão geral

Demo

Skills

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

Dois modos de topo carregam o catálogo: prototype (27 skills — qualquer coisa que renderize como um artefato de página única, de uma landing de revista a uma tela de celular ou um documento de spec de PM) e deck (4 skills — apresentações com swipe horizontal e chrome de framework de deck). O campo scenario é por onde o seletor as agrupa: design · marketing · operation · engineering · product · finance · hr · sale · personal.

Exemplos do showcase

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

Superfícies de design & marketing (modo prototype)

Superfícies de deck (modo deck)

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

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

Seis ideias estruturais

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

O daemon escaneia seu PATH em busca de claude, codex, cursor-agent, gemini, opencode, qwen, copilot, hermes, kimi, pi, e kiro-cli na inicialização. Aqueles que ele encontra tornam-se motores de design candidatos — conduzidos por stdio com um adapter por CLI, intercambiáveis a partir do seletor de modelo. Inspirado por multica e cc-switch. Sem CLI instalada? POST /api/proxy/stream é o mesmo pipeline sem o spawn — cole qualquer baseUrl + apiKey compatível com OpenAI e o daemon encaminha os chunks SSE de volta, 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/. Solte uma pasta em skills/, reinicie o daemon, ela aparece no seletor. O magazine-web-ppt empacotado é o op7418/guizang-ppt-skill commitado verbatim — 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 DESIGN.md de VoltAgent/awesome-design-md — cor, tipografia, espaçamento, layout, componentes, motion, voz, marca, anti-padrões. Todo artefato 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 de perguntas interativo previne 80% dos redirecionamentos.

A stack de prompts do OD codifica uma RULE 1: todo brief de design fresco começa com um `` em vez de código. Superfície · audiência · tom · contexto de marca · escala · restrições. Um brief longo ainda deixa decisões de design em aberto — 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 terminado.

Este é o modo Junior-Designer destilado de huashu-design: faça as perguntas em batch upfront, mostre algo visível cedo (mesmo um wireframe com blocos cinzas), permita que o usuário redirecione barato. Combinado com o protocolo de ativos de marca (localizar · baixar · grep hex · escrever brand-spec.md · vocalizar), é a maior razão única pela qual a saída deixa de parecer freestyle de IA e passa a parecer uma designer que prestou atenção antes de pintar.

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

O daemon faz spawn da CLI com cwd definido para a pasta de artefatos do projeto sob .od/projects//. O agente recebe Read, Write, Bash, WebFetch — ferramentas reais contra um sistema de arquivos real. Ele pode Read no assets/template.html da skill, grep no seu CSS por valores hex, escrever um brand-spec.md, soltar imagens geradas, e produzir arquivos .pptx / .zip / .pdf que aparecem no workspace de arquivos como chips de download quando a turn termina. Sessões, conversas, mensagens, abas persistem em um DB SQLite local — abra o projeto amanhã e o card de todo do agente está exatamente onde você deixou.

6 · A stack de prompts é o produto.

O que você compõe na hora do envio não é “system + user”. É:

DISCOVERY directives  (formulário do turn-1, branch de marca do turn-2, TodoWrite, crítica de 5 dimensões)
  + identity charter   (OFFICIAL_DESIGNER_PROMPT, anti-AI-slop, junior-pass)
  + DESIGN.md ativo    (72 sistemas disponíveis)
  + SKILL.md ativo     (31 skills disponíveis)
  + metadata do projeto (kind, fidelity, speakerNotes, animations, ids de inspiração)
  + side files da skill (auto-injetados em pre-flight: ler assets/template.html + references/*.md)
  + (deck kind, sem seed de skill) DECK_FRAMEWORK_DIRECTIVE   (nav / counter / scroll / print)

Cada camada é componível. Cada camada é um arquivo que você pode editar. Leia apps/web/src/prompts/system.ts e apps/web/src/prompts/discovery.ts para ver o contrato real.

Arquitetura

┌────────────────────── browser (Next.js 16) ──────────────────────┐
│  chat · workspace de arquivos · preview iframe · settings · imports │
└──────────────┬───────────────────────────────────┬───────────────┘
               │ /api/* (reescrito em dev)          │
               ▼                                    ▼
   ┌──────────────────────────────────┐   /api/proxy/stream (SSE)
   │  Daemon local (Express + SQLite) │   ─→ qualquer endpoint
   │                                  │       compatível com OpenAI (BYOK)
   │  /api/agents          /api/skills│       com bloqueio SSRF
   │  /api/design-systems  /api/projects/…
   │  /api/chat (SSE)      /api/proxy/stream (SSE)
   │  /api/templates       /api/import/claude-design
   │  /api/artifacts/save  /api/artifacts/lint
   │  /api/upload          /api/projects/:id/files…
   │  /artifacts (static)  /frames (static)
   │
   │  opcional: IPC de sidecar em /tmp/open-design/ipc//.sock
   │  (STATUS · EVAL · SCREENSHOT · CONSOLE · CLICK · SHUTDOWN)
   └─────────┬────────────────────────┘
             │ spawn(cli, [...], { cwd: .od/projects/ })
             ▼
   ┌──────────────────────────────────────────────────────────────────┐
   │  claude · codex · gemini · opencode · cursor-agent · qwen        │
   │  copilot · hermes (ACP) · kimi (ACP) · pi (RPC) · kiro (ACP)      │
   │  lê SKILL.md + DESIGN.md, escreve artefatos no disco             │
   └──────────────────────────────────────────────────────────────────┘

Quickstart

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable
corepack pnpm --version   # deve imprimir 10.33.2
pnpm install
pnpm tools-dev run web
# abra a URL web impressa pelo tools-dev

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

Para inicialização desktop/background, restarts em portas fixas e checagens do dispatcher de geração de mídia (OD_BIN, OD_DAEMON_URL, apps/daemon/dist/cli.js), veja QUICKSTART.md.

A primeira carga:

1. Detecta quais CLIs de agente você tem no PATH e escolhe uma automaticamente.
2. Carrega 31 skills + 72 design systems.
3. Abre o diálogo de boas-vindas para você colar uma chave Anthropic (necessária apenas para o caminho de fallback BYOK).
4. Auto-cria ./.od/ — a pasta de runtime local para o DB SQLite de projetos, artefatos por projeto e renders salvos. Não há passo od init; o daemon faz mkdir em tudo que precisa no boot.

Digite um prompt, aperte Send, observe o formulário de perguntas chegar, preencha-o, observe o card de todo fluir, observe o artefato renderizar. Clique em Save to disk ou baixe como um ZIP do projeto.

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

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

.od/
├── app.sqlite                 ← projetos · conversas · mensagens · abas abertas
├── artifacts/                 ← renders pontuais "Save to disk" (com timestamp)
└── projects//             ← diretório de trabalho por projeto, também o cwd do agente

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

Como usar (interface web)

O Open Design é local-first: não existe SaaS hospedado. Você roda na sua máquina e acessa pelo navegador. Três cenários cobrem 99% dos usos.

1 · Modo “duplo-clique” (recomendado para usuário final)

Depois de pnpm install uma vez, use os scripts auxiliares na raiz do repo:

./start.sh    # sobe daemon + web (portas fixas) e abre o navegador
./stop.sh     # para tudo

Portas padrão: daemon 17456, web 17573. Sobreponha com env vars: OD_DAEMON_PORT=18000 OD_WEB_PORT=18001 ./start.sh.

URL: http://localhost:17573 (abre automaticamente se você tem xdg-open ou open).

2 · Comando manual (controle fino)

cd open-design
pnpm install                                              # uma vez
pnpm tools-dev run web --daemon-port 17456 --web-port 17573

Abra http://localhost:17573. Para parar: pnpm tools-dev stop. Para inspecionar:

pnpm tools-dev status --json
pnpm tools-dev logs --json
pnpm tools-dev check

3 · App desktop (Electron, sem terminal aberto)

pnpm tools-dev                       # sobe daemon + web + desktop juntos

Uma janela nativa abre apontando para a web local. Fechando a janela, tudo morre junto. Em ambiente GUI, valide com:

pnpm tools-dev inspect desktop status
pnpm tools-dev inspect desktop screenshot --path /tmp/od.png

Pacote .app (macOS beta): pnpm tools-pack build → pnpm tools-pack start.

Self-host em servidor remoto (avançado)

Tecnicamente possível, não suportado oficialmente: rode pnpm tools-dev run web numa VM/VPS e acesse via port-forward SSH ou reverse proxy com TLS + auth próprios. Avisos:

• O daemon assume que você é dono da máquina — ele faz spawn de CLIs de agente e escreve em .od/projects/.
• Sem auth nativa na UI. Adicione uma camada (nginx basic-auth, Cloudflare Access, Tailscale) antes de expor.
• A camada web (Next.js) pode ir para Vercel; o daemon precisa de filesystem real + CLIs de agente instaladas.

Fluxo típico de uso

1. Suba o serviço (cenário 1, 2 ou 3 acima).
2. Abra a URL web no navegador.
3. Cole sua chave de modelo (Anthropic, OpenAI, ou qualquer endpoint BYOK compatível com OpenAI) no diálogo de boas-vindas. Sem chave? Se você já tem claude, codex, gemini, cursor-agent, etc. no PATH, o daemon detecta e usa direto.
4. Crie um projeto, escolha uma skill (ex.: web-prototype, guizang-ppt, dashboard) e um design system (ex.: linear-app, stripe, warm-editorial).
5. Digite o brief. Responda o formulário de descoberta do turn 1 (30s de radios).
6. Veja o todo plan streamando ao vivo e o artefato renderizar no iframe.
7. Baixe como HTML / PDF / ZIP, ou salve como template reutilizável.

Não existe (intencionalmente)

• Versão SaaS hospedada por terceiros.
• Conta / login / multi-tenancy.
• CLI puro headless sem daemon — o bin od é parte do daemon, não roda standalone.

Tudo é local-first por design: você é dono do .od/, dos artefatos, das chaves de modelo e do agente que conduz o loop.

Estrutura do repositório

open-design/
├── README.md                      ← este arquivo (em inglês)
├── README.de.md                   ← Deutsch
├── README.zh-CN.md                ← 简体中文
├── README.pt-BR.md                ← Português (Brasil)
├── QUICKSTART.md                  ← guia de run / build / deploy
├── package.json                   ← workspace pnpm, único bin: od
│
├── apps/
│   ├── daemon/                    ← Node + Express, o único servidor
│   │   ├── src/                   ← fonte TypeScript do daemon
│   │   │   ├── cli.ts             ← fonte do bin `od`, compilado para dist/cli.js
│   │   │   ├── server.ts          ← rotas /api/* (projetos, chat, arquivos, exports)
│   │   │   ├── agents.ts          ← scanner de PATH + builders de argv por CLI
│   │   │   ├── claude-stream.ts   ← parser de JSON em streaming para stdout do Claude Code
│   │   │   ├── skills.ts          ← loader do frontmatter SKILL.md
│   │   │   └── db.ts              ← schema SQLite (projects/messages/templates/tabs)
│   │   ├── sidecar/               ← wrapper de sidecar do daemon para tools-dev
│   │   └── tests/                 ← testes do pacote daemon
│   │
│   └── web/                       ← cliente Next.js 16 App Router + React
│       ├── app/                   ← entrypoints do App Router
│       ├── next.config.ts         ← rewrites de dev + export estático prod para out/
│       └── src/                   ← módulos cliente React + TypeScript
│           ├── App.tsx            ← roteamento, bootstrap, settings
│           ├── components/        ← chat, composer, picker, preview, sketch, …
│           ├── prompts/
│           │   ├── system.ts      ← composeSystemPrompt(base, skill, DS, metadata)
│           │   ├── discovery.ts   ← formulário do turn-1 + branch do turn-2 + crítica 5-dim
│           │   └── directions.ts  ← 5 direções visuais × paleta OKLch + font stack
│           ├── artifacts/         ← parser de  em streaming + manifests
│           ├── runtime/           ← srcdoc do iframe, markdown, helpers de export
│           ├── providers/         ← transports de SSE do daemon + API BYOK
│           └── state/             ← config + projetos (localStorage + daemon-backed)
│
├── e2e/                           ← Playwright UI + harness de integração externa/Vitest
│
├── packages/
│   ├── contracts/                 ← contratos compartilhados de app web/daemon
│   ├── sidecar-proto/             ← contrato de protocolo de sidecar do Open Design
│   ├── sidecar/                   ← primitivos genéricos de runtime de sidecar
│   └── platform/                  ← primitivos genéricos de processo/plataforma
│
├── skills/                        ← 31 bundles de skill SKILL.md (27 prototype + 4 deck)
│   ├── web-prototype/             ← default para modo prototype
│   ├── 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/   ← modo deck
│   └── guizang-ppt/               ← magazine-web-ppt empacotado (default para deck)
│       ├── SKILL.md
│       ├── assets/template.html   ← seed
│       └── references/{themes,layouts,components,checklist}.md
│
├── design-systems/                ← 72 sistemas DESIGN.md
│   ├── default/                   ← Neutral Modern (starter)
│   ├── warm-editorial/            ← Warm Editorial (starter)
│   ├── linear-app/  vercel/  stripe/  airbnb/  notion/  cursor/  apple/  …
│   └── README.md                  ← visão geral do catálogo
│
├── assets/
│   └── frames/                    ← frames de dispositivo compartilhados (uso cross-skill)
│       ├── iphone-15-pro.html
│       ├── android-pixel.html
│       ├── ipad-pro.html
│       ├── macbook.html
│       └── browser-chrome.html
│
├── templates/
│   └── deck-framework.html        ← baseline de deck (nav / counter / print)
│
├── scripts/
│   └── sync-design-systems.ts     ← reimporta o tarball upstream awesome-design-md
│
├── docs/
│   ├── spec.md                    ← spec do produto, cenários, diferenciação
│   ├── architecture.md            ← topologias, fluxo de dados, componentes
│   ├── skills-protocol.md         ← frontmatter od: estendido do SKILL.md
│   ├── agent-adapters.md          ← detecção + dispatch por CLI
│   ├── modes.md                   ← prototype / deck / template / design-system
│   ├── references.md              ← procedência long-form
│   ├── roadmap.md                 ← entrega em fases
│   ├── schemas/                   ← schemas JSON
│   └── examples/                  ← exemplos canônicos de artefatos
│
└── .od/                           ← dados de runtime, gitignored, auto-criado
    ├── app.sqlite                 ← projetos / conversas / mensagens / abas
    ├── projects//             ← pasta de trabalho por projeto (cwd do agente)
    └── artifacts/                 ← renders pontuais salvos

Design Systems

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

A biblioteca de sistemas de produto é importada via scripts/sync-design-systems.ts de VoltAgent/awesome-design-md. Rode novamente para atualizar. As 57 design skills vêm de bergside/awesome-design-skills e são adicionadas diretamente 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 OD do fallback “5 escolas × 20 filosofias de design” de huashu-design. Cada direção é uma spec determinística — paleta em OKLch, font stack, sinais de postura de layout, referências — que o agente vincula verbatim no :root do template seed. Um clique no radio → um sistema visual completamente especificado. Sem improvisação, sem AI-slop.

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

Além do chat — o que mais vem incluído

O loop de chat / artefato pega o destaque, mas várias capacidades menos visíveis já estão conectadas e valem ser conhecidas antes de comparar OD com qualquer outra coisa:

• Importação de ZIP do Claude Design. Solte uma exportação de claude.ai no diálogo de boas-vindas. POST /api/import/claude-design extrai em um real .od/projects//, abre o arquivo de entrada como aba, e prepara um prompt continue-de-onde-a-Anthropic-parou para seu agente local. Sem re-prompting, sem “peça ao modelo para recriar o que acabamos de ter”. (apps/daemon/src/server.ts — /api/import/claude-design)
• Proxy BYOK compatível com OpenAI. POST /api/proxy/stream aceita { baseUrl, apiKey, model, messages }, normaliza o caminho (…/v1/chat/completions), encaminha chunks SSE de volta ao browser, e rejeita destinos loopback / link-local / RFC1918 para evitar SSRF. Qualquer coisa que fale o schema chat OpenAI funciona — shim Anthropic-via-OpenAI, DeepSeek, Groq, MiMo, OpenRouter, seu vLLM auto-hospedado. MiMo recebe tool_choice: 'none' automaticamente porque seu schema de tools se comporta mal em geração free-form.
• Templates salvos pelo usuário. Uma vez que você gosta de um render, POST /api/templates faz snapshot do HTML + metadata na tabela templates do SQLite. O próximo projeto o escolhe a partir de uma linha “your templates” no seletor — mesma superfície que as 31 enviadas, mas suas.
• Persistência de abas. Todo projeto lembra seus arquivos abertos e a aba ativa na tabela tabs. Reabra o projeto amanhã e o workspace fica exatamente do jeito que você deixou.
• API de lint de artefatos. POST /api/artifacts/lint roda checagens estruturais em um artefato gerado (framing `` quebrado, side files obrigatórios faltando, tokens de paleta velhos) e retorna findings que o agente pode ler de volta no próximo turn. A auto-crítica de cinco dimensões usa isso para fundamentar sua pontuação em evidência real, não vibes.
• Protocolo de sidecar + automação desktop. Processos 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//.sock. tools-dev inspect desktop status \| eval \| screenshot dirige esse canal, então E2E headless funciona contra um shell Electron real sem harnesses sob medida (packages/sidecar-proto/, apps/desktop/src/main/).
• Spawning Windows-friendly. Todo adapter que de outra forma estouraria o limite ~32 KB de argv de CreateProcess em prompts compostos longos (Codex, Gemini, OpenCode, Cursor Agent, Qwen, Pi) alimenta o prompt via stdin. Claude Code e Copilot mantêm -p; o daemon faz fallback para um arquivo de prompt temporário quando até isso transborda.
• Dados de runtime por namespace. OD_DATA_DIR e --namespace te dão árvores .od/ totalmente isoladas, então Playwright, canais beta e seus projetos reais nunca compartilham um arquivo SQLite.

Maquinário anti-AI-slop

Todo o maquinário abaixo é o playbook de huashu-design, portado para a stack de prompts do OD e tornado aplicável por skill via o pre-flight de side files. Leia apps/web/src/prompts/discovery.ts para o fraseado vivo:

• Formulário de perguntas primeiro. O turn 1 é apenas `` — sem thinking, sem ferramentas, sem narração. O usuário escolhe defaults na velocidade do 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 adivinha cores de marca da memória.
• Crítica 5-dim. Antes de emitir ``, o agente pontua silenciosamente sua saída de 1–5 em filosofia / hierarquia / execução / especificidade / contenção. Qualquer coisa abaixo de 3/5 é uma regressão — corrige e re-pontua. Dois passes é normal.
• Checklist P0/P1/P2. Toda skill envia um references/checklist.md com gates P0 rígidos. O agente deve passar P0 antes de emitir.
• Blacklist de slop. Gradientes roxos agressivos, ícones emoji genéricos, card arredondado com accent de borda esquerda, humanos SVG desenhados à mão, Inter como face display, métricas inventadas — explicitamente proibidos no prompt.
• Placeholders honestos > stats falsos. Quando o agente não tem um número real, ele escreve — ou um bloco cinza rotulado, não “10× mais rápido”.

Comparação

Agentes de codificação suportados

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

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

Referências & linhagem

Todo projeto externo do qual este repo toma emprestado. Cada link vai para a fonte para que você possa verificar a procedência.

Texto de procedência long-form — o que tomamos de cada um, o que deliberadamente não tomamos — vive em docs/references.md.

Roadmap

• [x] Daemon + detecção de agente (10 adapters de CLI) + registro de skills + catálogo de design system
• [x] App web + chat + formulário de perguntas + seletor de 5 direções + progresso de todos + preview sandboxed
• [x] 31 skills + 72 design systems + 5 direções visuais + 5 frames de dispositivo
• [x] Projetos backed por SQLite · conversas · mensagens · abas · templates
• [x] Proxy BYOK compatível com OpenAI (/api/proxy/stream) com guard SSRF
• [x] Importação de ZIP do Claude Design (/api/import/claude-design)
• [x] Protocolo de sidecar + desktop Electron com automação IPC (STATUS / EVAL / SCREENSHOT / CONSOLE / CLICK / SHUTDOWN)
• [x] API de lint de artefatos + gate pre-emit de auto-crítica 5-dim
• [ ] Edições cirúrgicas em modo comentário (clique no elemento → instrução → patch) — padrão de open-codesign
• [ ] UX do painel de tweaks emitidos pela IA — building block (skill tweaks) é enviado; painel integrado ao chat ainda pendente
• [ ] Receita de deployment Vercel + tunnel (Topologia B)
• [ ] npx od init em um comando para esqueletar um projeto com DESIGN.md
• [ ] Marketplace de skills (od skills install ) 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/

Entrega em fases → docs/roadmap.md.

Status

Esta é uma implementação inicial — o loop fechado (detectar → escolher skill + design system → chat → parsear `` → preview → salvar) roda end-to-end. A stack de prompts e a biblioteca de skills é onde a maior parte do valor vive, e elas são estáveis. A UI a nível de componente é enviada diariamente.

Dê uma estrela

Se isto te economizou trinta minutos — dê uma ★. Estrelas não pagam aluguel, mas dizem para o próximo designer, agente e contribuidor que este experimento merece sua 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 de 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// usando o schema de 9 seções.
• Conecte uma nova CLI de agente de codificação — uma entrada em apps/daemon/src/agents.ts.

Walkthrough completo, barra para merge, estilo de código e o que não aceitamos → CONTRIBUTING.md (Deutsch, 简体中文).

Contribuidores

Obrigado a todos que ajudaram a mover Open Design adiante — através de código, docs, feedback, novas skills, novos design systems, ou até uma issue afiada. Toda contribuição real conta, e o mural abaixo é a forma mais fácil de dizer isso em alto e bom som.

Se você enviou seu primeiro PR — bem-vindo. A label good-first-issue é o ponto de entrada.

Atividade do repositório

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

Histórico de Stars

Se a curva sobe, esse é o sinal que procuramos. Dê ★ neste repo para empurrá-la.

Licença

Apache-2.0. O skills/guizang-ppt/ empacotado retém sua LICENSE original (MIT) e atribuição de autoria a op7418.