![Imagem de capa de [Descoberta open source #2] oh-my-design dá marca a agentes de código](/assets/images/posts/7a855f56-283c-465d-b072-3e16af7791ae/oh-my-design-ai-design-workflow-1.jpg)
Esta é a segunda edição da série que escolhe repositórios escondidos e os explora. Em Descoberta open source — parte 1, analisamos um app desktop que delega a gestão de uma conta do Threads à IA; desta vez, o projeto é de um desenvolvedor coreano. oh-my-design é uma ferramenta que instala um sistema de design em agentes de código.
A motivação é clara. Quando pedimos uma UI a um agente de IA, cada tela acaba com uma marca diferente. Ontem, um botão azul; hoje, um gradiente roxo. O DESIGN.md, que resolve isso com um contrato de arquivos, foi abordado em artigo separado. É uma especificação publicada pelo Google Stitch: você coloca em um arquivo Markdown do repositório os tokens de design e as regras da marca, e faz o agente lê-lo sempre. oh-my-design traz esse contrato para o terreno de “o que eu digito na segunda-feira de manhã?”.
repositório foi publicado em abril de 2026, já ultrapassou 400 estrelas e usa a licença MIT. O autor é um desenvolvedor coreano, talvez por isso o catálogo tenha uma quantidade incomum de serviços locais, como Toss, Baemin, Danggeun e Bunjang. Esse é um dos diferenciais práticos do projeto, ao qual voltaremos mais adiante.
Uma linha para instalar, quatro agentes
A instalação é só isso.
npx oh-my-design-cli@latestO instalador interativo detecta quais agentes existem no projeto e instala os bundles por canal. A abrangência de suporte, resumida em README, é a seguinte.
| Agente | Itens instalados |
|---|---|
| Claude Code | Bundle completo — 20 skills, 18 subagentes, hooks e dados do catálogo abaixo de .claude/ |
| Codex | Skills de .agents/skills/, funções dos subagentes de .codex/agents/ e catálogo local |
| OpenCode | O mesmo bundle abaixo de .opencode/ |
| Cursor | Um arquivo de regras do projeto + catálogo compartilhado. Skills, subagentes e hooks não são instalados |
É visível que o Cursor recebe um tratamento diferente. Como não tem um canal para executar skills e subagentes, ele usa um canal rules-only intencional, que grava apenas o contrato “priorize DESIGN.md” em um arquivo de regras. A documentação não esconde essa diferença e a explica separadamente na seção “caminho exato de uso do Cursor”, o que é honesto.
Depois da instalação, reinicie o agente e faça o diagnóstico com npx oh-my-design-cli@latest doctor. Esse é o limite da CLI. Ela apenas instala e diagnostica; depois, todo o trabalho de design acontece em linguagem natural dentro da sessão do agente. Não há chave de API separada, daemon residente nem servidor MCP (Model Context Protocol, padrão para conectar ferramentas externas a agentes). Na prática, o catálogo era inicialmente fornecido via MCP, mas isso foi abandonado. A decisão foi que as skills lessem diretamente os arquivos locais, por ser mais simples; a implementação anterior permanece apenas arquivada em packages/mcp/.
440 referências empresariais: o essencial não é a quantidade, mas a evidência
O pacote contém 440 referências que reconstroem sistemas de design empresariais no formato DESIGN.md. Toss, Stripe, Linear, Apple e Airbnb. É possível conferir todas em site do catálogo, e cada referência oferece um twin Markdown bruto no endereço oh-my-design.kr/<id>/design.md, permitindo que o agente também as busque diretamente pela URL. Há ainda uma página Builder para escolher uma referência na web e baixar o DESIGN.md; a documentação orienta o Cursor, que não instala skills, a usar esse caminho.
Olhando apenas para o número, você pode pensar: “rasparam a web e fizeram 440 itens”. Mas abrir os arquivos muda a impressão. O frontmatter da referência do Toss traz evidências para cada claim. Ao lado do valor tokens.colors.primary: #3182f6, informa em qual tela (documentação de botões móveis do TDS), por qual método (captura de computed style e comparação com a documentação oficial) e quando (2026-07-11) foi verificado. O corpo segue a mesma linha. Ele registra a quantidade de observações, como “Toss Product Sans foi observado como primeira fonte em 810 elementos visíveis”, e alerta para não misturar o azul do logotipo da marca com o azul da UI real (#3182f6). Também deixa “desconhecido” como desconhecido: não há indicação de fonte oficial sobre direitos de redistribuição da fonte.
Isso não significa que todos os 440 itens tenham essa densidade. O catálogo publica suas próprias classificações: no momento em que este texto foi escrito, havia 141 Verified v2, 159 Partial e 140 snapshots Legacy. Ou seja, apenas cerca de um terço passou pelo novo pipeline de verificação. O documento de especificação do repositório diz: “verified datas são timestamps, não classificações de qualidade”, e a página do catálogo reforça: “a confiança é calculada por evidência, atualidade e conflitos; não é inferida do carimbo de data”. Explicitar as limitações dos próprios dados por meio de classificações é uma virtude rara em projetos desse tipo.
Além dos tokens, Voice
A especificação original do DESIGN.md é centrada em tokens como cor, tipografia e espaçamento. oh-my-design usa especificação do Google Stitch como base e acrescenta as seções Voice, Narrative, Principles, Personas, States e Motion. É o espaço para registrar “como esta marca fala”, algo que os códigos de cor sozinhos não capturam.
É interessante como o site oficial demonstra essa diferença. O mesmo prompt é enviado ao mesmo modelo, alternando entre ler e não ler o DESIGN.md, e as UIs resultantes são colocadas lado a lado. O CTA padrão “Get Started” vira “Comece em 3 segundos” quando recebe a referência do Toss, e o toast “Error 500: Internal Server Error” muda para “Sync paused — we’ll retry in 4 seconds” com a referência do Linear. Até “No data available”, na tela vazia, vira “Nothing here yet — and that’s a good place to begin” após passar pela referência da Anthropic.
Não é uma diferença nos valores dos tokens, mas inteiramente no tom de voz. O site resume essa ideia como “Tokens get you halfway. Voice takes you home.” Tokens levam você até a metade; a voz completa o restante.
Como funcionam as 20 skills
As skills são o núcleo do bundle. O fluxo principal é omd:init. Diga “crie um DESIGN.md para um app de registro de refeições da família; use Toss como referência, mas traga apenas valores verificados”, e a skill recomenda referências do catálogo → pede confirmação ao usuário → escreve um DESIGN.md na raiz do projeto, preservando o tom da referência escolhida e incorporando o contexto do projeto. O interessante é que nenhum subcomando da CLI é chamado nesse processo. Até o cálculo da pontuação de recomendação é feito pelo agente, lendo arquivos locais dentro da sessão.
Também há omd:feel, que verifica a qualidade da interface; omd:slop-audit, que detecta a UI sem graça típica de IA; e o loop de preferências (omd:learn / omd:remember / omd:taste). Nesse loop, uma correção feita pelo usuário durante o trabalho (“deixe o botão mais angular”) é acumulada em .omd/preferences.md e aplicada na próxima tarefa. Com “mostre minhas preferências”, o sistema exibe em uma tela só o que aprendeu até agora e o que está pendente.
O segredo para essas skills serem ativadas por linguagem natural, sem comandos de barra, são os hooks. Durante a instalação, hooks UserPromptSubmit, SessionStart e PostToolUse são registrados em .claude/settings.json, e um script Node decide a cada prompt se deve ativar uma skill. É conveniente, mas cria uma camada que interfere em todo prompt.
Os subagentes são compostos por omd-master e 17 especialistas em pesquisa de UX, auditoria de a11y, testes de persona e refinamento de copy. A lista detalhada está em documentação oficial.
O que saber antes de escrever
Mais uma vez, registro os pontos de atenção.
Não se deve confundir a situação legal das referências. Como a cláusula de licença do README deixa claro, o código é MIT, mas as referências são ativos de cada empresa e foram reconstruídas para fins de consulta educacional. “No estilo Toss” é um ponto de partida para inspiração, não uma licença para copiar as cores, fontes e textos do Toss. É por isso que a própria referência do Toss informa que não foi possível confirmar os direitos de redistribuição da Toss Product Sans.
Os valores envelhecem. As cores e a tipografia das referências são snapshots medidos em uma data específica. Quando uma empresa faz rebranding, começam a ficar desalinhados a partir desse momento. É preciso criar o hábito de verificar a data verified no frontmatter; como mencionado, o novo schema de verificação v2 ainda cobre apenas parte das referências.
Muitos arquivos são instalados no projeto. Skills, subagentes, hooks e o catálogo entram em .claude/ do repositório (ou no caminho específico de cada canal). Isso não importa em um repositório pessoal, mas exige acordo antes de fazer commit em um repositório de equipe. A manutenção, por outro lado, foi bem pensada. Arquivos gerenciados recebem marcadores e hashes para serem atualizados no lugar durante a reinstalação; arquivos alterados pelo usuário não são sobrescritos, mas ignorados (skipped-drift), e doctor informa um comando de restauração com escopo limitado.
O ritmo de releases é rápido. referência do npm Do primeiro lançamento, no fim de abril de 2026, chegou à versão 1.9.0 em apenas três meses. Nesse intervalo, houve mudanças estruturais, como a remoção do MCP, e existe até um MIGRATION.md separado para usuários da versão 0.1.x. Pelo lado positivo, o projeto é ativo; pelo lado cauteloso, não há garantia de que o fluxo de trabalho será o mesmo daqui a seis meses.
A qualidade das inferências, no fim, depende do agente. A ferramenta apenas fornece um bom contexto; quem desenha a UI ainda é o Claude Code ou o Codex. Quem já usou contratos baseados em arquivos sabe que haverá dias em que o agente ignora até um DESIGN.md. Por isso, mecanismos de verificação como omd:harness e doctor vêm junto com o pacote.
Resumo
- oh-my-design é uma CLI open source que instala um fluxo de design baseado em DESIGN.md nos agentes de código Claude Code, Codex, OpenCode e Cursor. Usa a licença MIT e é um projeto de um desenvolvedor coreano.
- O pacote contém 440 referências empresariais, e cada valor informa em qual tela, por qual método e quando foi verificado. Porém, o novo schema de verificação ainda se aplica apenas a parte delas (cerca de 140).
- A especificação DESIGN.md do Google Stitch recebe Voice, Narrative, Personas e outros elementos, formalizando também o tom de voz da marca, que os tokens sozinhos não capturam.
- É baseado em arquivos locais. Funciona dentro das sessões dos agentes existentes sem chave de API, daemon ou servidor MCP; o método MCP inicial foi removido intencionalmente.
- As referências são ativos de cada empresa e não devem ser copiadas literalmente; como snapshots medidos, podem envelhecer. Em repositórios de equipe, é preciso chegar a um acordo sobre o commit dos arquivos instalados.
O repositório está em https://github.com/kwakseongjae/oh-my-design; o catálogo e a documentação, em oh-my-design.kr. Na próxima edição, exploraremos outro repositório escondido.
Continue lendo
Série de descobertas open source
- Edição anterior: [Descoberta open source #1] AutoThreads, um app desktop open source que delega a gestão de uma conta do Threads à IA
Tópicos relacionados
Fontes e verificação
- oh-my-design READMEkwakseongjae · Documentação oficial · Consultado 9 de agosto de 2026Evidência: 4 agentes compatíveis e instalações por canal, mais de 20 skills, 18 subagentes e 440 referências, sem necessidade de chave de API, daemon ou servidor MCP, arquivo da implementação MCP, licença MIT e situação legal das referências
- Design Systems 카탈로그oh-my-design · Dados oficiais · Consultado 9 de agosto de 2026Evidência: Distribuição das classificações de qualidade (141 Verified v2 · 159 Partial · 140 Legacy) e o princípio de que “confiança é calculada por evidência, atualidade e conflitos”
- oh-my-design 공식 문서oh-my-design · Documentação oficial · Consultado 9 de agosto de 2026Evidência: Configuração detalhada de skills e subagentes e opções de instalação
- Google Stitch DESIGN.md OverviewGoogle · Documentação oficial · Consultado 9 de agosto de 2026Evidência: Fonte da especificação DESIGN.md usada por oh-my-design como base para extensões
- oh-my-design-cli — npmnpm registry · Dados oficiais · Consultado 9 de agosto de 2026Evidência: Primeiro lançamento no fim de abril de 2026; histórico de releases até a versão 1.9.0 (2026-07-21)