Compound Design

Compound Design é um framework autoral de Danilo do Amaral para trabalhar com
IA em design e código. AI native: feito para pessoas e para agentes usarem com o
mesmo cuidado. Um método em quatro passos e o que ele produz: artigos que
também são apresentação, um catálogo de skills com licença verificada repositório
a repositório, e um CLI e um servidor MCP para o seu agente usar esse catálogo.

AI native quer dizer duas coisas concretas. Cada parte existe em duas formas, uma
para ler na tela e outra para um agente consumir: o catálogo é página, CLI e MCP;
cada skill tem ficha e markdown; o servidor publica o próprio cartão. E o
framework foi construído com o método que descreve, o que a tabela abaixo mostra.

Site: https://compounddesign.vercel.app

A filosofia

O nome é uma tese: cada coisa que se aprende deve tornar a próxima mais fácil,
não mais difícil. Como juros compostos.

A maior parte do trabalho vai no sentido contrário. Cada coisa nova negocia com
as antigas, e depois de alguns anos gasta-se mais tempo brigando com o que
existe do que construindo em cima. Acumular é inverter isso: em vez de adicionar
complexidade, cada coisa nova ensina algo ao sistema.

O ciclo tem quatro passos — planejar, fazer, revisar, acumular. Os três
primeiros qualquer pessoa que trabalha com IA já faz. O quarto é o que separa
acumular de só produzir: o que se aprendeu vira algo reutilizável e encontrável.
Pule esse passo e foi só trabalho com IA.

Este repositório pratica o que descreve, e por isso é aberto:

Por Danilo do Amaral,
Design Engineer no Pitang Labs, pós-graduado em UX & UI pela EBAC e em UX
Engineering pela PUC Minas.

Fluxos de usuário e histórias com critérios de aceite: docs/fluxos-e-historias.md.
O que falta para fechar a v1, por fase: docs/plano-fechamento-v1.md.
A régua de craft que toda interface passa, com as referências medidas: docs/plano-craft.md.
Como contribuir: CONTRIBUTING.md.
Decisões de arquitetura: docs/adr/.

Bilíngue (pt-BR padrão, en). Next.js App Router + Tailwind + React Bits.

Rodar

npm install
npm run dev

React Bits Pro

Os blocks Pro exigem uma chave de licença. Copie .env.example para .env.local e
preencha:

REACTBITS_LICENSE_KEY=sua-chave

Os registries já estão em components.json. Depois disso:

npx shadcn@latest add @reactbits-pro/<block>     # blocks (planos Pro e Ultimate)
npx shadcn@latest add @reactbits-starter/<nome>  # componentes
npx shadcn@latest add @react-bits/<Nome>-TS-TW   # componentes gratuitos

O código instalado fica versionado no repositório, então o deploy não precisa da chave.

Conteúdo

Itens com "draft": true aparecem com a etiqueta de rascunho no site.

Regenerar os dados da pesquisa a partir do CSV:

node scripts/csv-to-json.mjs

Escrevendo um artigo

O pipeline de MDX descarta atributos com expressão JSX, então toda prop é string:
use <Stat value="43.8" unit="%" label="..." />, nunca value={43.8}. O ponto é o
separador decimal no arquivo; o número é formatado por idioma na renderização.

Componentes disponíveis no MDX: Slide, Stats, Stat, Chart, Callout,
Question, Two. Os gráficos vêm de src/components/charts/Chart.tsx.

Verificações

npm run check:mdx      # roda sozinho antes de todo build
npm run check:numbers

check:mdx compila cada artigo com e sem o bloqueio de JavaScript e compara: se
algo foi descartado em silêncio, o build para e a mensagem aponta a linha. O porquê
está em docs/adr/0001.

check:numbers compara todo percentual citado nos artigos com o JSON da pesquisa.

Fonte dos dados

UX Tools. (2026). State of Prototyping Spring 2026. https://survey.uxtools.co — CC BY 4.0.