OpenDesigner: monte um sistema de design para o seu projeto com poucas respostas

Para quem é

Para desenvolvedores e pequenas equipes que já usam um assistente de programação com IA, mas cujo projeto ainda não tem um conjunto único de regras visuais: você pode ter apenas algumas telas de design ou descrições faladas, enquanto no código as cores, as fontes e os espaçamentos estão escritos de um jeito diferente em cada página; ou o projeto acabou de começar e ninguém consegue tirar tempo para montar um sistema de design completo antes. É um complemento para as ferramentas de IA que você já usa: ele transforma preferências difíceis de explicar em arquivos que o código consome diretamente, em vez de te levar para outro programa de design; é um projeto open source gratuito sob licença MIT, não substitui o editor que você usa, apenas acrescenta uma camada de recursos a ele. Quem estiver disposto a responder algumas perguntas curtas, a aceitar que os resultados sejam gravados no diretório do projeto e a dar mais uma olhada antes do merge é um bom candidato para experimentar uma vez. Quem acabou de herdar o código de outra pessoa e quer primeiro entender o tom visual também pode usá-lo para um reconhecimento rápido.

Seu primeiro teste em 3 minutos

Verifique primeiro os pré-requisitos: a máquina precisa de Python 3.10 ou superior. O motor é um único arquivo Python e não há dependências para instalar.

Primeiro passo, instale a skill. O caminho recomendado é o marketplace de plugins do Claude Code: digite /plugin marketplace add ckryptickunal/OpenDesigner na conversa, pressione Enter e depois digite /plugin install opendesigner@opendesigner.

Segundo passo, saiba onde a instalação acontece. Ferramentas com suporte a Agent Plugins leem o plugin.json na raiz, enquanto clientes que leem skills pegam os arquivos por convenção no diretório .agents/skills/; clientes que não passam pelo marketplace exigem que você mesmo copie a skill para .agents/skills/ do seu projeto.

Terceiro passo, dispare uma tarefa de baixo risco. Abra seu projeto, diga na conversa "Create a design system for this project." e ele fará no máximo cinco perguntas curtas, cada uma com uma resposta sugerida e a justificativa, bastando confirmar ou reescrever cada uma. Na primeira execução, prefira um diretório limpo ou abra antes um branch, para que os tokens gerados não se misturem ao código existente.

Quarto passo, combine de antemão os efeitos colaterais e os pontos de confirmação. O motor grava os resultados como DESIGN.md, PRODUCT.md e o diretório opendesigner/, que contém os tokens, as diversas exportações e uma página de visão geral. A gravação em disco reescreve diretamente o conteúdo do repositório, então crie um branch ou faça um commit antes; só deixe o motor escrever depois de confirmar as respostas.

Quinto passo, observe os sinais de sucesso observáveis. Os três artefatos acima aparecem no projeto e a autoverificação não reporta erros: o contraste do texto é validado segundo a WCAG 2.2 AA, as áreas de clique têm no mínimo 24 px, o foco de teclado fica visível e a preferência por movimento reduzido é tratada; qualquer erro interrompe o build.

Casos de uso

Caso um: montar a primeira versão de um sistema de design em um projeto novo. Com o plugin instalado, diga no projeto a frase de ativação em inglês acima, responda às no máximo cinco perguntas curtas que ele faz e você obtém um sistema de design completo, não fragmentos soltos. A primeira versão não precisa ser perfeita: ela é o ponto de partida para novas perguntas e iterações. Dali em diante é possível aprofundar: cores, fontes, espaçamentos e animações podem ser refinados um a um em outra rodada de perguntas, e os produtos continuam caindo nos mesmos três arquivos e diretórios. A evidência termina aqui: a documentação oficial define o limite de cinco perguntas e as quatro dimensões de refinamento, mas não diz se o número de perguntas pode ser ajustado nem descreve a forma de interação de cada rodada de refinamento.

Caso dois: reutilizar a mesma skill em um cliente sem marketplace de plugins. Copie a skill para o diretório .agents/skills/ do projeto e, como sempre, peça a geração do sistema de design na conversa e responda às perguntas; a saída e as regras de autoverificação são exatamente as mesmas do caso um. Se o projeto já tiver convenções de nomeação de tokens, confirme antes de copiar que os dois esquemas não vão colidir. A documentação oficial só informa que esses clientes leem skills nesse diretório; não explica como atualizar depois da cópia nem traz etapas extras de dependências ou configuração.

Limites de uso

O motor tem um único requisito inegociável: Python 3.10 ou superior, sem nenhuma dependência a instalar. As formas de instalação também são apenas as que a documentação oficial declara: fora do marketplace de plugins é preciso copiar a skill manualmente, e o projeto não oferece comando de atualização automática nem de verificação para esse caminho manual. Em tempo de execução ele reescreve os arquivos do projeto diretamente, então deixe um branch ou um commit pronto antes de começar. A autoverificação embutida é uma barreira rígida: contraste abaixo da WCAG 2.2 AA, áreas de clique menores que 24 px, foco de teclado invisível ou preferência por movimento reduzido não tratada param o build; ele não corrige nada por você, é preciso corrigir e rodar de novo. A premissa das cinco perguntas é que elas possam ser respondidas de forma breve; quando entram regras de negócio complexas, o motor não tem como decidir. Um sistema de design também não é produto final: os tokens e os documentos ficam no repositório, e tanto a fusão com uma biblioteca de componentes existente quanto a inclusão no controle de versão não estão descritos na documentação oficial, isso cabe a você decidir. Repositório: <https://github.com/ckryptickunal/OpenDesigner >.