Design Systems com IA
Crie, opere e mantenha um design system profissional usando IA como força de trabalho
Ship: seu primeiro layout em 15 minutos
Você entra com as mãos na massa. Recebe um design system pronto (shadcn/ui) e um prompt pronto — e constrói uma página real com IA antes de entender cada peça. Primeiro o valor, depois a anatomia. No fim deste stage existe uma página sua no ar.
- Monte seu arsenal: um DS pronto em minutos~25 min
- O prompt pronto: use antes, entenda depois~30 min
- Verifique antes de confiar: o checklist do engenheiro~35 min
Ticket #001 — Marketing precisa de uma landing page para o lançamento de um produto fictício (você escolhe o produto). Use o DS pronto + o prompt pronto para gerar, verifique com o checklist, corrija o que a IA errou e faça deploy. A página precisa estar pública.
Anatomia: como um design system de verdade é estruturado
Você já usou um DS pronto — agora abre o capô. Tokens em camadas, componentes que separam comportamento de aparência, e o Storybook como contrato vivo. Ao final, você não depende mais do DS dos outros: o seu começa a existir.
- Design tokens: as decisões viram dados~40 min
- Tokens vivos no Tailwind v4: @theme na prática~45 min
- Componentes além do visual: comportamento, variantes e composição~45 min
- Storybook: o contrato vivo do seu DS~40 min
Ticket #002 — A empresa fictícia do Stage 1 quer identidade própria: chega de tema default. Defina a paleta da marca (primitivos + semânticos em @theme, paleta fechada, dark mode), reconstrua 3 componentes (Button, Card e um à sua escolha) com a anatomia Radix+CVA+cn usando APENAS seus tokens semânticos, e documente tudo no Storybook com a11y em modo error.
Prompts como interface de engenharia
Agora você entende o sistema — é hora de transformar esse entendimento em prompts que qualquer um do time (ou você daqui a 6 meses) usa com resultado consistente. O prompt deixa de ser texto improvisado e vira artefato de engenharia: versionado, testável, com anatomia conhecida. É aqui que você escreve o que recebeu pronto no Stage 1.
- Contexto é o segredo: o manual de IA do seu DS~40 min
- Anatomia de um prompt de componente~35 min
- O loop delegar → verificar → delegar maior~45 min
Ticket #003 — Chegaram três demandas de uma vez: um componente DataList (lista com cabeçalho, vazio e loading), um EmptyState ilustrado, e a página de 'meus pedidos' usando ambos. Entregue as três delegando à IA com seus artefatos (manual + prompts versionados), aplicando revisão em camadas. A medida de sucesso não é só o código: é o quanto seus artefatos seguraram a consistência sem intervenção manual.
Manutenção: o design system que não apodrece
Todo DS nasce bonito; quase todos apodrecem — valores hardcoded vazam, componentes copiados divergem do upstream, libs avançam por baixo. Neste stage a IA vira sua equipe de manutenção: auditorias contínuas, evolução de tokens sem quebrar consumidores e atualização de dependências com julgamento. É o stage que separa quem tem um DS de quem tinha.
- Auditoria contínua: a IA como fiscal do sistema~40 min
- Evolua tokens sem quebrar quem consome~40 min
- Atualize as peças: majors sem medo (e sem fé)~40 min
Ticket #004 — A entrega de portfólio. Publique seu design system completo como produto: repositório público com tokens em camadas, mínimo 6 componentes com a anatomia completa, Storybook deployado, manual de IA + prompts versionados, guard-rails de CI ativos — e uma landing page real construída com ele via IA, no ar. Feche com um writeup honesto: o que a IA acertou, onde ela escapou, e como seus artefatos a seguraram.