AULA 13
MÓDULO 0
interface
⏱ 45 min
Ferramentas e IAs para Interface
Figma, Storybook, Tailwind, shadcn/ui. IAs gerativas: v0, Galileo, Uizard, Claude. Documentação de design: Zeroheight, Supernova.
figmastorybooktailwindshadcnv0GalileoUizardZeroheight
Figma e Storybook
O ecossistema de ferramentas de interface evoluiu muito. O fluxo moderno vai de design (Figma) → documentação (Storybook) → implementação (Tailwind + shadcn).
🎨
Figma
DESIGN · PROTOTIPAGEM
Padrão da indústria para design de interfaces. Colaborativo, no browser. Gera tokens exportáveis para código.
📖
Storybook
DOCUMENTAÇÃO DE COMPONENTES
Catálogo interativo de componentes. Dev vê como usar sem perguntar ao designer. Integra com React, Vue, Angular.
🎨
Tailwind CSS
FRAMEWORK CSS UTILITY-FIRST
Classes utilitárias no HTML. Sem CSS personalizado. Consistência por padrão. Usado por Vercel, GitHub, Figma.
🧩
shadcn/ui
COMPONENTES ACESSÍVEIS
Componentes Radix UI + Tailwind. Copia o código para o projeto — você controla tudo. Zero dependência de runtime.
IAs que geram interface
Em 2024–2025 surgiram ferramentas que geram interfaces completas a partir de texto. O resultado ainda precisa de refinamento humano, mas acelera brutalmente a fase de prototipagem.
v0 (Vercel)
TEXT → REACT/TAILWIND
Gera componentes React + Tailwind a partir de texto. Output pronto para produção. Melhor para componentes isolados.
Claude Artifacts
TEXT → HTML/REACT
Gera interfaces interativas diretamente no chat. Ideal para protótipos rápidos e exploração de ideias.
Galileo AI
TEXT → FIGMA
Gera layouts Figma a partir de descrição. Exporta para código. Foco em design fidelity.
Uizard
SKETCH → INTERFACE
Transforma esboços à mão em protótipos clicáveis. Útil na fase de ideação com stakeholders não técnicos.
Documentação de Design
A documentação do Design System precisa viver junto ao código. Ferramentas específicas mantêm essa documentação atualizada e acessível.
Zeroheight
Sincroniza com Figma e Storybook. Documentação always-updated para devs e designers.
Supernova
Exporta tokens do Figma para código (CSS, iOS, Android). Único source of truth para tokens.
javascript
// shadcn/ui — instalar e usar componente // 1. Inicializar shadcn no projeto npx shadcn-ui@latest init // 2. Adicionar componente (copia para /components/ui/) npx shadcn-ui@latest add button npx shadcn-ui@latest add input npx shadcn-ui@latest add card // 3. Usar no componente React import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" export function LoginForm() { return ( <form> <Input type="email" placeholder="seu@email.com" /> <Input type="password" placeholder="Senha" /> <Button type="submit">Entrar</Button> </form> ) }
quiz · aula 13
Teste seus conhecimentos
0/3 respondidas
QUESTÃO 01
O que diferencia shadcn/ui de bibliotecas como Material UI?
QUESTÃO 02
v0 da Vercel gera interfaces em qual formato?
QUESTÃO 03
Para documentar tokens de design sincronizados com Figma, qual ferramenta é mais adequada?
0/3