Recentemente, criei um design system completo para o meu projeto utilizando inteligência artificial. Hoje vou mostrar uma ferramenta que pode te ajudar a alcançar resultados semelhantes de forma muito mais eficiente.
O Resultado: Um Design System Funcional
No projeto que desenvolvi, tenho todos os componentes organizados de forma estruturada. Comecei com os primitivos – cores e todos os elementos básicos que um design system precisa ter. Depois, construí cada um dos componentes com suas interações: diferentes tipos de botões, labels, menus, campos de busca e diversos outros elementos de interface.
Importante: Não estou sugerind oque isso seja um design system ou desconsiderando o trabalho de profissionais especialistas em Design System. Entendo perfeitamente que isso não cobre todas as especificações e complexidade de um design system com todas as propriedades e cuidados que a disciplina exige. E essa também não é minha intenção.
A minha intenção principal é demonstrar que é possível iniciar um projeto para prototipar seu produto de forma interativa, sem ficar gastando milhares de tokens fazendo aquelas idas e vindas intermináveis com seu agente de IA. E ajudar pessoas que querem avançar em seus projetos sem passar pro essa dor de cabeça.
Por Que Google AI Studio?
Estou trabalhando com o Google AI Studio para essa tarefa específica, e acredito que essa é uma das melhores soluções disponíveis para criar uma biblioteca de componentes visuais. Testei o mesmo prompt em várias outras ferramentas – Lovable, Figma Make, entre outras – e nenhuma delas chegou ao resultado que o Google AI Studio alcançou.
A razão é clara: o Google evoluiu significativamente nos últimos anos tanto em interpretação quanto em criação de imagem, sendo hoje o melhor modelo do mercado nesse aspecto (na data em que estou gravando). Ele é excepcionalmente bom para entender imagens e criar soluções a partir delas.
Observação: O Google ainda não é o melhor modelo para coding e geração de código, mas se passarmos as devidas referências, ele chega lá.
Meu Processo: Passo a Passo
Estou trabalhando em um projeto de aplicativo de café, e vou compartilhar exatamente como cheguei nesse resultado.
1. Estruturando o Prompt com Referências
Criei um prompt (que está disponeivel a seguir) referenciando outras bibliotecas para facilitar o lado de coding:
- Google Fonts para os ícones da interface
- Tailwind CSS como biblioteca de componentes
- React como framework
Passei as URLs da documentação como referência e deixei claro que usaria:
- React
- Fontes do Material Symbols
- Componentes de React da biblioteca Tailwind CSS UI
Dessa forma, já facilito o caminho para a IA.
Create a Complete Design System Using Tailwind CSS as the Reference Foundation
##Input
Provided visual reference
Tailwind CSS documentation: https://catalyst.tailwindui.com/docs
Use Material Symbols Fonts - weight 200: https://fonts.google.com/icons
Use Next.js and React.js
*Design System Structure
Foundation
Design Principles
Design Tokens (based on Tailwind CSS)
Primitives
Colors (Tailwind palette)
Spacing (Tailwind scale: 0, 1, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96)
Typography (font-family, sizes, weights, line-height)
Border Radius (rounded-none, sm, md, lg, xl, 2xl, 3xl, full)
*Components
Buttons (primary, secondary, outline, ghost, sizes: sm, md, lg)
Icons (size: 16, 20, 24, 32, 40)
Menu/Navigation
Inputs (text, search)
Dropdowns/Select
Checkboxes & Radio buttons
*Technical Requirements
Use Tailwind CSS design tokens
Components must be reusable
Include states: default, hover, active, disabled, focus
Document implementation code for each component
##Output
Design System organized in one single page with all the elements listed above.2. Começando pelos Fundamentos
Pedi primeiro para criar os foundations – os princípios e design tokens, os primitivos: cores, espaçamento, tipografia, etc.
3. Trabalhando com Referências Visuais
Enviei uma imagem de referência criada no Figma, passando para a IA uma ideia clara do mood visual que eu queria aplicar, já com alguns componentes desenhados.
4. Componente por Componente
Para garantir consistência, trabalhei cada componente individualmente:
- Mandei imagens específicas do componente
- Header
- Botões
- Tags
- Cards
Fui ajustando e passando as cores que gostaria componente por componente. Vou compartilhar o prompt principal e outras dicas para facilitar o processo.
Avaliando o Código Gerado
Uma etapa crucial é avaliar o código que a IA gerou. Mesmo com alguma noção básica de programação, você consegue identificar que ele organizou tudo na estrutura de componentes de forma apropriada.
É possível ver cada um dos elementos e editá-los quando necessário. O código inclui:
- Elemento principal com chamadas para as referências (Tailwind CSS, Google Fonts, etc.)
- Cada componente criado separadamente
- Possibilidade de fazer download do projeto
- Opção de conectar no GitHub
Testando com uma Página Showcase
Depois de construir os elementos essenciais, pedi para a IA criar uma página showcase para avaliar o quão avançado estava na capacidade de resolver meu problema real.
A página já apresenta interações funcionais, como o menu, criada somente depois de ter construído cada um dos componentes e interações. Agora, quando for construir as jornadas completas que estão no Figma, será muito mais fácil – já tenho quase todos os componentes prontos e só preciso aplicá-los.
Essa foi a dica de hoje: pare de gastar milhares de tokens tentando fazer back e forward com seu agente de IA. Estruture bem seu processo, trabalhe com referências claras e construa componente por componente.
Espero que isso ajude no seu processo de construção de produtos com IA.
Quer aprofundar seus conhecimentos em IA aplicada a Produto e Design? Confira nosso novo curso de Inteligência Artificial para Designers & Product Managers na plataforma PunkMetrics.
