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