Pular para o conteúdo principal
Material de apoio
menu

Aula 06 - UI/UX: Design System

2+ (aprofundando)3 horas

Documento de especificação de design (design.md), Design Tokens e introdução a ferramentas de design system

Experiências curtas vs longas

Nem toda experiência precisa ser rápida. Nem toda experiência precisa ser demorada. Existe um espectro - e o jeito que eu projeto o site muda dependendo de onde meu site tá nesse espectro.

Tipo Tempo médio Objetivo Exemplo O que o visitante quer
Curta 3 a 30 segundos Achar algo e sair Linktree, cardápio online, horário Passar rápido, sem obstáculos
Média 30 segundos a 5 minutos Explorar e decidir Catálogo, landing page, portfólio Olhar, comparar, decidir
Longa 5 minutos pra cima Ficar e consumir Blog, curso, rede social Ficar, explorar, conforto

Regra: eu projeto o site de acordo com o tipo de experiência que o visitante espera ter. Um linktree vira experiência curta com 3 botões grandes. Um catálogo vira experiência média com organizações por categorias. Um blog vira experiência longa com menu, busca e conforto visual.

Um catálogo de produtos é uma experiência média. O visitante quer ver os produtos, comparar opções, escolher o que quer e entrar em contato. Então o catálogo precisa de organização por categoria, fotos visíveis, preços claros e botão de contato fácil.

Um linktree é um corredor: eu entro, acho a porta que quero, e saio. Se o corredor tiver 15 portas iguais e nenhuma placa - eu me perco. Um blog é uma biblioteca: se eu quero ler sobre “receitas de bolo”, preciso achar a seção de receitas, depois a subseção de bolos, depois o post específico. Se tudo tá misturado - eu desisto.

Os 6 blocos de conteúdo de sucesso

Todo site de experiência média - como um catálogo, uma landing page ou um portfólio - precisa de 6 blocos pra funcionar bem. Se qualquer um deles faltar, o visitante se perde ou desiste.

Quais são os 6 blocos

# Bloco O que é Por que importa
1 Identidade Quem é, o que faz, pra quem O visitante precisa saber em 5 segundos se é pra ele
2 CTA Principal A ação mais importante O visitante precisa saber o que fazer primeiro
3 Conteúdo/Detalhes O que se oferece de verdade É aqui que o visitante decide se quer ou não
4 Prova Social Depoimentos, fotos, avaliações É o que gera confiança - “outros compraram e gostaram”
5 Navegação Como se locomover entre as seções Sem navegação, o visitante fica preso numa página
6 Rodapé Informações finais, contato, créditos É onde o visitante vai quando quer mais informações

Bloco 1 - Identidade

A identidade é a primeira coisa que o visitante vê. Se em 5 segundos ele não souber quem é, o que faz e pra quem - ele vai embora.

O que precisa ter:

  • Nome do negócio ou pessoa
  • Uma frase curta que explica o que faz
  • Foto ou logo (se tiver)

Exemplo de prompt pra IA:

“Coloque no topo: nome ‘Maria da Padaria’, frase ‘Bolos artesanais feitos com carinho’, com foto de perfil redonda ao lado”

Como ficaria no HTML:

<header>
  <h1>Maria da Padaria</h1>
  <p>Bolos artesanais feitos com carinho</p>
</header>

É como a fachada de uma loja: se eu passo na rua e não consigo ler o nome nem entender o que vendem - eu não entro.

Bloco 2 - CTA Principal

CTA é Call to Action - a ação que eu quero que o visitante faça. Todo site precisa de UM botão principal. Só um.

O que precisa ter:

  • Um botão grande e visível
  • Texto claro do que acontece quando clica
  • Cor de destaque (diferente do resto)

Exemplos de CTAs:

Negócio CTA ideal
Loja de doces “Peça pelo WhatsApp”
Portfólio “Veja meus trabalhos”
Serviço “Agende seu horário”
Evento “Garanta sua vaga”

Exemplo de prompt pra IA:

“Adicione um botão grande e arredondado de cor verde com o texto ‘Peça pelo WhatsApp’, linkando para wa.me/5511999999999”

Como ficaria no HTML:

<a href="https://wa.me/5511999999999" class="botao-cta">
  Peça pelo WhatsApp
</a>

O CTA é como o caixa de uma loja: precisa ser fácil de achar. Se o visitante precisa procurar onde pedir - ele desiste.

Bloco 3 - Conteúdo/Detalhes

Aqui é onde mora o coração do site. É onde o visitante vê os produtos, os serviços, os preços, as fotos. É onde ele decide se quer ou não comprar.

O que precisa ter:

  • Produtos ou serviços organizados por categoria
  • Fotos visíveis (com tamanho bom)
  • Preços claros (não em letra miúda)
  • Descrição curta de cada item

Dica de organização:

Antes (ruim) Depois (bom)
Tudo misturado numa lista só Organizado por categoria
Foto pequena demais Foto com tamanho visível
Preço escondido no texto Preço em destaque
Descrição longa demais Descrição curta e direta

Exemplo de prompt pra IA:

“Organize os produtos em seções: ‘Bolos’, ‘Tortas’, ‘Doces’. Cada produto com foto à esquerda, nome em negrito, descrição curta e preço visível. Use tags semânticas: article para cada produto, section para cada categoria”

Como ficaria no HTML:

<section id="bolos">
  <h2>Bolos</h2>
  <article class="produto">
    <img src="bolo-chocolate.jpg" alt="Bolo de chocolate">
    <div class="info">
      <h3>Bolo de Chocolate</h3>
      <p>Bolo fofo com cobertura cremosa</p>
      <span class="preco">R$ 45,00</span>
    </div>
  </article>
</section>

É como as prateleiras de um supermercado: produtos organizados por seção, com preço visível e fácil de achar.

Bloco 4 - Prova Social

Prova social é o que gera confiança. Quando o visitante vê que outras pessoas compraram, gostaram e recomendaram - ele se sente mais seguro.

O que pode ter:

Tipo de prova social Exemplo
Depoimentos “Ótimo bolo, minha família adorou! - Fernanda”
Avaliação por estrelas ⭐⭐⭐⭐⭐ (4.9/5)
Número de clientes “Mais de 500 clientes atendidos”
Fotos de clientes usando Foto de alguém comendo o bolo
Logos de empresas parceiras “Entrega para ifood, rappi e iFood”

Exemplo de prompt pra IA:

“Adicione uma seção de depoimentos com 3 avaliações de clientes, cada uma com nome, texto curto e estrelas. Use a tag blockquote pra cada depoimento”

Como ficaria no HTML:

<section id="depoimentos">
  <h2>O que nossos clientes dizem</h2>
  <blockquote>
    <p>"Bolo incrível, pedia pra festa da minha filha!"</p>
    <cite>- Fernanda S.</cite>
  </blockquote>
</section>

É como ver a fila de um restaurante: se tá todo mundo comendo lá, provavelmente é bom. Se tá vazio, eu desconfio.

Bloco 5 - Navegação

Navegação é como o visitante se locomove entre as seções do site. Sem navegação, ele fica preso numa página e não consegue ver tudo.

Quando preciso de navegação:

Tipo de site Navegação necessária
Linktree Nenhuma - tudo numa tela
Catálogo Simples - categorias como âncoras
Portfólio Simples - menu com 3-4 itens
Blog Completa - categorias, busca, filtros

Para um catálogo, a navegação mais simples funciona como âncoras:

<nav>
  <a href="#bolos">Bolos</a>
  <a href="#tortas">Tortas</a>
  <a href="#doces">Doces</a>
  <a href="#contato">Contato</a>
</nav>

A navegação é como as placas de um aeroporto: se eu não sei onde fica o portão de embarque, eu fico perdido. Se tem placa apontando - eu chego rápido.

Bloco 6 - Rodapé

O rodapé é o último contato do visitante com o site. É onde ele vai quando quer mais informações: endereço, telefone, horário, redes sociais.

O que precisa ter:

  • Nome do negócio
  • Formas de contato (telefone, WhatsApp, e-mail)
  • Endereço (se tiver)
  • Redes sociais
  • Horário de funcionamento (se tiver)

Exemplo de prompt pra IA:

“No rodapé, coloque: nome ‘Maria da Padaria’, WhatsApp, endereço ‘Rua da Liberdade, 123 - São Paulo’, horário ‘Seg a Sex 8h-18h’, ícones de Instagram e TikTok”

Como ficaria no HTML:

<footer>
  <p><strong>Maria da Padaria</strong></p>
  <p>WhatsApp: (11) 99999-9999</p>
  <p>Rua da Liberdade, 123 - São Paulo</p>
  <p>Seg a Sex: 8h às 18h</p>
</footer>

O rodapé é como o cartão de visitas que fica no balcão: quem quer mais informação vai lá pegar.

Resumo dos 6 blocos

┌─────────────────────────────────────────┐
│  1. IDENTIDADE                          │
│  Quem é, o que faz, pra quem            │
├─────────────────────────────────────────┤
│  2. CTA PRINCIPAL                       │
│  Botão grande - a ação mais importante  │
├─────────────────────────────────────────┤
│  3. CONTEÚDO / DETALHES                 │
│  Produtos, serviços, preços, fotos      │
├─────────────────────────────────────────┤
│  4. PROVA SOCIAL                        │
│  Depoimentos, avaliações, confiança     │
├─────────────────────────────────────────┤
│  5. NAVEGAÇÃO                           │
│  Como se locomover entre as seções      │
├─────────────────────────────────────────┤
│  6. RODAPÉ                              │
│  Contato, endereço, redes sociais       │
└─────────────────────────────────────────┘

Regra: se qualquer um desses 6 blocos faltar, o visitante se perde. Se faltar a identidade, ele não sabe quem é. Se faltar o CTA, ele não sabe o que fazer. Se faltar o conteúdo, ele não tem do que decidir. Se faltar a prova social, ele não confia. Se faltar a navegação, ele não se locomove. Se faltar o rodapé, ele não consegue entrar em contato.

Analogias práticas

A analogia da loja

Elemento do site Equivalentes na loja
Identidade Fachada com nome e slogan
CTA Principal Caixa visível na entrada
Conteúdo Prateleiras organizadas por seção
Prova Social Placa “mais vendidos” e fila na porta
Navegação Placas apontando “Roupa Feminina”, “Calçados”, “Acessórios”
Rodapé Cartão de visitas no balcão

Quando eu entro numa loja e não acho o caixa, não sei onde ficam os produtos, não tem placa nenhuma - eu saio. No site é a mesma coisa.

A analogia do corredor

Um corredor é uma experiência curta. Não tem nada pra ver, só tem pra passar.

  • Não precisa de menu
  • Não precisa de conteúdo longo
  • Só precisa ser claro e direto

Um linktree é um corredor: eu entro, acho a porta que quero, e saio. Se o corredor tiver 15 portas iguais e nenhuma placa - eu me perco.

A analogia da biblioteca

Uma biblioteca é uma experiência longa. Tem muita coisa, e eu preciso de organização pra achar o que quero.

  • Precisa de categorias (filosofia, romance, história)
  • Precisa de catalogação (cada livro tem classificação)
  • Precisa de conforto (luz boa, cadeira, mesa)
  • Precisa de navegação (prateleiras numeradas, índice)

Um blog é uma biblioteca: se eu quero ler sobre “receitas de bolo”, preciso achar a seção de receitas, depois a subseção de bolos, depois o post específico. Se tudo tá misturado - eu desisto.

A analogia da aeroporto

Um aeroporto é uma experiência longa com muitos pontos de decisão:

  • Precisa de sinalização forte (placas por todo lado)
  • Precisa de informação clara (horário do voo, portão, embarque)
  • Precisa de fallback (se perdeu, tem um balcão de informação)

Um site multi-páginas é um aeroporto: se eu não sei onde fica o “portão” (a página que quero), preciso de uma placa (navegação) me levando até lá. Se não tem placa, eu fico perdido e perco o voo (o visitante vai embora).

Consistência visual entre páginas

O que é consistência

Consistência é quando todas as páginas do site parecem ser do mesmo lugar. Mesmas cores, mesmas fontes, mesmo estilo, mesma estrutura.

É como uma loja com várias filiais: se eu entro na filial da Liberdade e é azul com branco, e entro na filial da Consolação e é verde com amarelo - eu fico confuso. As duas precisam parecer a mesma loja.

Por que consistência importa

Sem consistência Com consistência
Cada página parece um site diferente Todo o site parece um só
Visitante se perde entre páginas Visitante se sente em “casa”
Parece amadorismo Parece profissionalismo
Cores e fontes mudam o tempo todo Cores e fontes são previsíveis

O que precisa ser consistente

Elemento Deve ser igual em todas as páginas?
Cores Sim - mesma paleta em todo o site
Fontes Sim - mesma família tipográfica
Botões Sim - mesmo estilo de botão
Cabeçalho Sim - mesmo logo e menu em todas
Rodapé Sim - mesmas informações
Espaçamento Sim - mesma sensação de respiro
Hierarquia Sim - títulos do mesmo tamanho

Como garantir consistência com CSS

A consistência vem de definir uma vez só as regras visuais e aplicar em todas as páginas.

Exemplo de prompt pra IA:

“Crie um arquivo CSS que defina: cores (azul escuro #1a365d como principal, branco #ffffff como fundo, cinza #6c757d como texto secundário), fonte (Montserrat pra títulos, Open Sans pra corpo), botões (arredondados, 48px de altura, azul escuro com texto branco). Aplique essas regras em todas as páginas do catálogo”

Como ficaria no CSS:

:root {
  --cor-principal: #1a365d;
  --cor-fundo: #ffffff;
  --cor-texto: #333333;
  --cor-secundaria: #6c757d;
  --fonte-titulo: 'Montserrat', sans-serif;
  --fonte-corpo: 'Open Sans', sans-serif;
}

body {
  font-family: var(--fonte-corpo);
  color: var(--cor-texto);
  background: var(--cor-fundo);
}

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  color: var(--cor-principal);
}

.botao-cta {
  background: var(--cor-principal);
  color: white;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 18px;
  border: none;
  cursor: pointer;
}

Variáveis CSS (o :root) são como uma receita central: eu defino as cores e fontes uma vez, e todas as páginas usam as mesmas. Se eu quiser trocar a cor principal, mudo em UM lugar e muda em todo o site.

Documento de especificação - design.md

O que é o design.md

O design.md é um documento que guarda as decisões de design do site. Não é código - é um arquivo de texto que explica por que o site é de um jeito, não só como ele é.

Os tokens CSS são o prato servido: o que o navegador mostra. O design.md é a receita escrita: o documento que explica como e por quê. Um cozinheiro muda a receita antes de mudar o prato - a mesma lógica vale pro site.

Por que o design.md importa

Sem design.md Com design.md
As decisões ficam na minha cabeça Tudo registrado num arquivo
Cada prompt a IA “reinventa” o estilo A IA segue o mesmo arquivo sempre
Eu explico o design de novo toda vez O arquivo já explica por mim
Nova página pode sair diferente Todo o site fica no mesmo padrão

O que vai dentro do design.md

Item O que é
Personalidade Que sensação o site deve passar (caseiro, moderno, sério)
Cores As 5 cores com a função de cada uma
Tipografia As 2 fontes (títulos e corpo) e os tamanhos
Espaçamento A escala de espaço (8, 16, 24, 32, 48, 64)
Tom Como o site “fala” com o visitante (informal, elegante)

Usando materiais de referência

O design.md pode incluir materiais de referência - coisas que eu encontrei e quero usar como inspiração. A IA entende esses materiais e aplica no site.

Tipo de referência Como usar Exemplo
Screenshots Tirar print de sites que gostei e colar no prompt “Use este layout como referência”
Trechos CSS Copiar o CSS de um site que funcionou bem “Copie este estilo de botão”
Sites existentes Apontar o link e explicar o que gostei “Adote a hierarquia visual daqui”
Paletas de cor Salvar os hex das cores que combinam “Use estas 5 cores com estas funções”

Dica: quando eu encontro um site que gosto, eu tiro um screenshot, abro o F12 (como aprendi na aula 05), copio o CSS relevante, e levo pro design.md. É assim que eu construo minha referência visual.

Exemplo de prompt com referência:

“Leia o arquivo design.md e crie um catálogo com a paleta de cores, tipografia e espaçamento definidos lá. Use os screenshots que salvei como referência de layout”

Exemplo de design.md

# Design - Catálogo Artesanal

## Personalidade
Caseiro, acolhedor, honesto.

## Cores
- Primária: terracota #C67A4B
- Secundária: bege #F5F0EB
- Fundo: branco suave #FAFAF8
- Texto: marrom escuro #3D2B1F
- Destaque: verde escuro #2d6a4f

## Tipografia
- Títulos: Montserrat (bold)
- Corpo: Open Sans

## Espaçamento
Escala de 8: 8, 16, 24, 32, 48, 64

## Tom
Fala como um artesão conversando com o cliente na feira.

## Referências
- Layout: cardápio do iFood (organização por categoria)
- Botões: estilo WhatsApp (verde, arredondado)
- Cores: paleta de terracota de uma loja de cerâmica

A receita em dois lugares

Decisão humana → design.md (leitura: eu + IA) → tokens CSS (execução: navegador) → UI Kit

O design.md e os tokens CSS são a mesma receita escrita de dois jeitos: o .md é pra ler (eu entendo e explico pra IA), o CSS é pra rodar (o navegador entende). Eu mantenho os dois alinhados.

OpenDesign - design.md como ferramenta

O OpenDesign (open-design.ai) é uma ferramenta open-source que usa o design.md como base pra gerar protótipos, landing pages, slides e dashboards com consistência de marca. Funciona assim: você cria o design.md, o OpenDesign lê o documento e aplica as decisões visuais em todos os outputs. Ferramentas de IA como o OpenCode usam o design.md pra manter consistência ao gerar código. O design.md não é só um documento de referência - é um design system portável.

Prompt pra IA criar o design.md

“Escreva um arquivo design.md descrevendo o design deste catálogo artesanal. Inclua: personalidade (caseiro, acolhedor), cores com função (primária terracota #C67A4B, secundária bege #F5F0EB, fundo branco suave #FAFAF8, texto marrom escuro #3D2B1F, destaque verde escuro #2d6a4f), tipografia (Montserrat pros títulos, Open Sans pro corpo), espaçamento na escala de 8 e o tom de voz.”

Design Tokens - as variáveis centrais

O que são Design Tokens

Design Tokens são as variáveis centrais de design - cores, fontes, espaçamentos, sombras - definidas num lugar só e usadas em todo o site.

É como a receita de um restaurante: em vez de cada cozinheiro inventar os temperos toda hora, tem um livro com as proporções certas. Todo mundo usa o mesmo livro. Se o chef quiser mudar o sal, muda em UM lugar e muda pra todo mundo.

As 5 cores com função

# Função O que faz Exemplo
1 Cor Primária Identidade do site - a que mais aparece Azul escuro, terracota, verde
2 Cor Secundária Complementa a primária - usada em detalhes Um tom mais claro da primária
3 Cor de Fundo Onde o conteúdo vive - precisa ser suave Branco, bege claro, cinza muito claro
4 Cor de Texto O que o visitante lê - precisa ter contraste Preto, cinza escuro, marrom escuro
5 Cor de Destaque Ação mais importante - botões, CTAs Verde, laranja, vermelho

A escala de espaçamento

Espaçamento segue uma escala fixa: 8, 16, 24, 32, 48, 64. Cada número é múltiplo de 8.

Token Valor Quando usar
--espaco-xs 8px Espaço entre itens pequenos (ícone + texto)
--espaco-sm 16px Espaço entre elementos de um card
--espaco-md 24px Espaço entre seções próximas
--espaco-lg 32px Espaço entre blocos maiores
--espaco-xl 48px Espaço entre seções principais
--espaco-2xl 64px Espaço entre o header e o conteúdo

A regra é simples: se o espaço tá estranho, arredonda pra múltiplo de 8. Nunca use valores aleatórios como 13px ou 27px.

Como criar os tokens no CSS

:root {
  /* === CORES === */
  --cor-primaria: #C67A4B;
  --cor-secundaria: #F5F0EB;
  --cor-fundo: #FAFAF8;
  --cor-texto: #3D2B1F;
  --cor-destaque: #2d6a4f;

  /* === TIPOGRAFIA === */
  --fonte-titulo: 'Montserrat', sans-serif;
  --fonte-corpo: 'Open Sans', sans-serif;

  /* === ESPAÇAMENTO === */
  --espaco-xs: 8px;
  --espaco-sm: 16px;
  --espaco-md: 24px;
  --espaco-lg: 32px;
  --espaco-xl: 48px;
  --espaco-2xl: 64px;
}

Agora, se eu quiser trocar a cor primária de terracota pra azul, mudo UMA linha (--cor-primaria: #2563eb) e TODO o site muda. Sem tokens, eu teria que editar cada seção individualmente.

Prompt pra IA criar tokens

“Crie um arquivo CSS com variáveis CSS (tokens de design) para um catálogo artesanal com a seguinte paleta:

  • Primária: terracota #C67A4B
  • Secundária: bege #F5F0EB
  • Fundo: branco suave #FAFAF8
  • Texto: marrom escuro #3D2B1F
  • Destaque: verde escuro #2d6a4f

Inclua tokens para: cores, tipografia (fontes, tamanhos, pesos), espaçamentos (escala de 8 a 64), bordas e transições. Use fonte Montserrat pros títulos e Open Sans pro corpo.“

Estrutura semântica HTML

O que é semântica

Semântica significa que cada tag HTML tem um significado - não é só uma caixa genérica.

Tag O que significa Quando usar
<header> Cabeçalho de uma seção ou da página Topo do site, topo de cada seção
<main> Conteúdo principal da página Tudo que não é header nem footer
<section> Uma seção temática Cada categoria de produto
<article> Um conteúdo independente Cada produto individual
<nav> Navegação Menu, links de categorias
<footer> Rodapé da página ou seção Contato, créditos
<h1> Título principal Só UM por página - o mais importante
<h2> Subtítulo Títulos de seções
<h3> Subtítulo menor Títulos de itens dentro de uma seção
<blockquote> Citação externa Depoimentos de clientes
<a> Link Botões que levam pra fora
<img> Imagem Fotos de produtos

Por que semântica importa

1. Acessibilidade: leitores de tela (usados por pessoas com deficiência visual) leem as tags pra entender a estrutura. Se tudo é <div>, o leitor de tela não sabe o que é título, o que é parágrafo, o que é navegação.

2. SEO: buscadores como Google usam as tags pra entender o conteúdo. <h1> diz ao Google “esse é o título mais importante”. <article> diz “esse é um conteúdo independente”.

3. Manutenção: quando eu olho o código, sei exatamente o que cada parte faz. <header> é cabeçalho. <section> é seção. <footer> é rodapé. Sem adivinhar.

4. Consistência: tags semânticas forçam uma estrutura lógica. Se eu uso <section> pra cada categoria, todas ficam com o mesmo padrão.

Antes vs Depois - Comparação

Antes (div semântico):

<div>
  <div>Maria da Padaria</div>
  <div>Bolos e doces artesanais</div>
</div>
<div>
  <div>Bolos</div>
  <div>
    <div><img><div>Bolo de Chocolate</div><div>R$ 45</div></div>
  </div>
</div>
<div>
  <div>Contato</div>
  <div>(11) 99999-9999</div>
</div>

Depois (semântico):

<header>
  <h1>Maria da Padaria</h1>
  <p>Bolos e doces artesanais</p>
</header>
<main>
  <section id="bolos">
    <h2>Bolos</h2>
    <article>
      <img alt="Bolo de chocolate">
      <h3>Bolo de Chocolate</h3>
      <span class="preco">R$ 45,00</span>
    </article>
  </section>
</main>
<footer>
  <p><strong>Contato</strong></p>
  <p>(11) 99999-9999</p>
</footer>

A diferença não é visual - os dois mostram a mesma coisa na tela. A diferença é significado: no segundo, eu sei que <h1> é o título principal, <section> é uma seção, <article> é um produto. No primeiro, tudo é <div> - sem significado nenhum.

Prompts pra criar o design system

Prompt 1 - Criar o design.md

“Crie um arquivo design.md descrevendo o design deste site. Inclua: identidade (nome, tom, público), cores com códigos hex e função de cada uma, tipografia (fontes, pesos, tamanhos), espaçamentos (escala de 8px), componentes (botões, cards) e imagens (proporções e estilo).”

Prompt 2 - Gerar tokens CSS a partir do design.md

“Leia o design.md e gere um bloco CSS com variáveis :root contendo todos os Design Tokens definidos: cores (–color-*), fontes (–font-*), espaçamentos (–space-*), border-radius (–radius-*), sombras (–shadow-*). Use o padrão de nomenclatura BEM e valores em px.”

Prompt 3 - Validar o design.md

“Revise este design.md e verifique:

  1. Todas as cores têm códigos hex legíveis?
  2. Os espaçamentos são consistentes (múltiplos de 8px)?
  3. As fontes têm pesos e tamanhos definidos?
  4. Os componentes têm especificações visuais completas?
  5. Falta alguma seção importante?“

Problemas comuns

Problema Causa Solução
“Tudo é div, não tem significado” IA gera HTML genérico Pedir pra reestruturar com tags semânticas (header, section, article, nav, footer)
“Não sei qual bloco tá faltando” Falta de referência Consultar a lista dos 6 blocos e verificar um por um
“O botão de WhatsApp não aparece” Tamanho pequeno ou cor sem contraste Pedir: “botão com 48px de altura, cor de fundo com contraste, texto branco”
“As páginas parecem diferentes” Falta de CSS consistente Criar design.md e tokens CSS (:root) e aplicar em todas as páginas
“O h1 não é o maior título” Hierarquia errada Verificar se só tem UM h1 e se ele tem font-size maior que h2 e h3
“A navegação não funciona” Links âncora sem id Verificar se cada section tem um id que bate com o href do nav
“O rodapé tá escondido” Falta de estilo Adicionar background escuro e padding no footer
“Não tem prova social” Esqueceu de adicionar Pedir pra IA gerar 3 depoimentos com blockquote
“O site não fica bom no celular” Falta media query Pedir: “torne responsivo com @media max-width 768px”
“O código ficou grande demais” Tudo junto num arquivo Separar: HTML na pasta, CSS em style.css, usar link rel=stylesheet
“A IA muda o estilo a cada prompt” Falta design.md Criar design.md e sempre referenciar nos prompts

Design Atômico - como tudo se encaixa

Design Atômico é uma metodologia que organiza um design system em camadas - do mais simples ao mais complexo. Cada camada depende da anterior.

Nível Design Atômico Equivalente na aula
Átomos Peças unitárias, não subdividem Design Tokens (cores, fontes, espaçamentos)
Moléculas Combinações de átomos com função Botão = cor + fonte + espaçamento + borda
Organismos Blocos complexos, compostos por moléculas Os 6 blocos de conteúdo (Identidade, CTA, etc.)
Templates Estrutura da página com slots HTML semântico (header → main → footer)
Páginas Template + conteúdo real O site final que o visitante vê

O fluxo do design system

design.md (receita escrita)
    ↓
ÁTOMOS: tokens CSS (:root)
    ↓
MOLÉCULAS: componentes (botão, card, nav)
    ↓
ORGANISMOS: 6 blocos de conteúdo
    ↓
TEMPLATES: estrutura semântica HTML
    ↓
PÁGINA: site final com conteúdo real

O design.md define o que cada token significa. Os tokens viram variáveis CSS. As moléculas combinam tokens em componentes reutilizáveis (um botão CTA, um card de produto). Os organismos montam esses componentes nos 6 blocos. Os templates organizam os blocos na página com HTML semântico. A página é o resultado final.

Quando eu troco uma cor no design.md, a mudança desce por todas as camadas: o token muda, a molécula muda, o organismo muda, o template muda, a página muda. Tudo conectado.

Referências