Comic Page Redesign

comic-page-redesign

Pega um HTML existente, analisa estrutura/conteudo, faz perguntas pontuais ao usuario sobre branding/cores/tom, e gera uma nova versao aplicando o design system comic/HQ.

Quando usar

• Usuario tem uma pagina HTML (landing, formulario, sales page, about, qualquer coisa) e quer aplicar o visual comic/HQ
• Usuario diz "deixa com a cara do meu evento" ou "aplica o design da v5"
• Aluno quer recriar a pagina dele no estilo do mentor

Processo

1. Ler o HTML original

Le o arquivo HTML inteiro. Identifica:

• Estrutura: quais sections existem? (hero, features, pricing, FAQ, footer, formulario, depoimentos, etc)
• Conteudo: headlines, subheadlines, paragrafos, CTAs, listas
• Visual atual: cores usadas, fontes, imagens, layout
• Funcionalidades JS: forms, sliders, accordions — preservar comportamento

2. Fazer perguntas (uma de cada vez, conversacional)

NAO despejar tudo. Pergunta uma por vez, aguardar resposta. Se a info ja for obvia do HTML, pula a pergunta.

Perguntas obrigatorias:

1. Cor principal da marca: "Qual a cor principal? (vou usar como accent primario tipo o --orange do exemplo)"
2. Cor secundaria: "Tem uma cor secundaria de destaque? (vou usar como --yellow — pra marca-texto, badges, etc)"
3. Nivel de irreverencia: "Quao comic tu quer? (1 — discreto, 2 — equilibrado, 3 — explosivo cheio de stickers e numeros gigantes)"
4. Mantem todo o conteudo ou pode adaptar?: "Posso ajustar o copy pra ficar mais punchy ou mantenho exatamente o que ta?"
5. Output: "Salva como index-comic.html ou outro nome?"

Perguntas opcionais (so se relevante):

• Stickers/badges decorativos no hero? (POW!, BOOM!, NOVO!, etc)
• Tem logo? Onde aplicar?
• Tem foto/imagens? Onde encaixar?

3. Aplicar o design system

Reescreve o HTML inteiro mantendo:

• Mesma estrutura semantica (sections, headings, lists)
• Mesmo conteudo (a menos que liberado pra adaptar)
• Mesma funcionalidade (forms, JS)

Mas substituindo CSS pelo design system abaixo, e reorganizando markup pros patterns descritos.

4. Salvar e reportar

Salva no caminho combinado. Reporta:

• Que arquivo gerou
• Resumo das transformacoes principais
• Sugere abrir no navegador pra ver
• Lista 2-3 coisas que ele pode querer ajustar manualmente

DESIGN SYSTEM — REFERENCIA COMPLETA

Tokens CSS (sempre incluir no :root)

Ajusta --accent-primary e --accent-secondary pras cores que o usuario escolheu. Demais ficam fixos.

:root {
  --cream:     #FFF3CC;
  --cream-2:   #FFF8E7;
  --paper:     #FFFBEB;
  --ink:       #1A1A1A;
  --ink-soft:  #4a4a4a;

  --accent-primary:   #FF5722;  /* cor principal da marca */
  --accent-primary-d: #E64A19;
  --accent-secondary: #FFC107;  /* secundaria — marca-texto */
  --accent-secondary-d: #FFA000;

  --blue:      #2196F3;
  --blue-l:    #BBDEFB;
  --pink:      #EC407A;
  --green:     #4CAF50;
  --red:       #E53935;

  --shadow:    6px 6px 0 var(--ink);
  --shadow-md: 5px 5px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
  --border:    3px solid var(--ink);
  --border-thick: 4px solid var(--ink);
}

Reset minimo

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: hidden; }

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--cream);
  color: var(--ink);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

Fontes (Google Fonts — sempre incluir)

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Bowlby+One&family=DM+Sans:wght@400;500;700;900&family=Caveat:wght@600;700&display=swap" rel="stylesheet">

Hierarquia tipografica:

• Bowlby One — mega titles do hero, numeros gigantes, badges, KPIs
• Anton — section titles, card titles (sempre uppercase)
• DM Sans — body, hints, opcoes
• Caveat — handwritten/signature (opcional, usar com moderacao)

Nunca usar mais de 4 fontes na pagina. Bowlby One e Anton sao parecidas em peso — usar Bowlby So pra mega-destaques.

Halftone de fundo (sutil — NAO atrapalha leitura)

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(rgba(26,26,26,0.45) 0.8px, transparent 1px);
  background-size: 42px 42px;
  opacity: 0.28;
  pointer-events: none;
  z-index: 0;
}

IMPORTANTE: opacity 0.28 com pontos de 0.8px espacados a 42px. NAO aumentar densidade — fica visivel demais e atrapalha leitura.

Mega title (hero)

Texto em Bowlby One com text-shadow amarelo (efeito 3D HQ).

.mega-title {
  font-family: 'Bowlby One', sans-serif;
  font-size: clamp(48px, 11vw, 84px);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -1px;
  color: var(--ink);
  text-shadow: 5px 5px 0 var(--accent-secondary);
}

Section title

.section-title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(28px, 6.5vw, 42px);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  margin-bottom: 14px;
}

Numero gigante (pra sections numeradas)

.q-number {
  font-family: 'Bowlby One', sans-serif;
  font-size: clamp(64px, 18vw, 110px);
  line-height: 0.85;
  color: var(--accent-primary);
  -webkit-text-stroke: 3px var(--ink);
  text-stroke: 3px var(--ink);
  display: inline-block;
  transform: rotate(-3deg);
  text-shadow: 4px 4px 0 var(--accent-secondary);
  margin-bottom: 16px;
}

Cards (padrao base)

.card {
  background: var(--paper);
  border: var(--border-thick);
  box-shadow: var(--shadow);
  padding: 22px 20px;
  margin-bottom: 20px;
}
.card.rot-left  { transform: rotate(-1deg); }
.card.rot-right { transform: rotate(1deg); }

Cards de opcao (clicaveis)

.opt {
  background: var(--paper);
  color: var(--ink);
  border: var(--border-thick);
  box-shadow: var(--shadow);
  padding: 16px 20px;
  text-align: left;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s cubic-bezier(.4,1.6,.6,1), box-shadow 0.12s, background 0.15s;
  min-height: 60px;
}
.opt:nth-child(odd)  { transform: rotate(-0.7deg); }
.opt:nth-child(even) { transform: rotate(0.7deg); }
.opt:hover {
  background: var(--accent-secondary);
  transform: translate(-2px, -2px) rotate(0);
  box-shadow: 8px 8px 0 var(--ink);
}
.opt:active, .opt.selected {
  background: var(--accent-primary);
  color: #fff;
  transform: translate(3px, 3px) rotate(0);
  box-shadow: 1px 1px 0 var(--ink);
}

Botoes

.btn-primary {
  display: inline-block;
  background: var(--accent-primary);
  color: #fff;
  border: var(--border-thick);
  box-shadow: var(--shadow);
  padding: 16px 32px;
  font-family: 'Bowlby One', sans-serif;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.1s, box-shadow 0.1s;
  min-height: 56px;
}
.btn-primary:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.btn-primary:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }

.btn-dark {
  display: inline-block;
  background: var(--ink);
  color: var(--accent-secondary);
  border: var(--border-thick);
  box-shadow: var(--shadow);
  padding: 16px 32px;
  font-family: 'Bowlby One', sans-serif;
  font-size: 17px;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
}
.btn-dark:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--accent-primary); }

Inputs

input[type="text"], input[type="tel"], input[type="email"], textarea {
  width: 100%;
  background: var(--paper);
  color: var(--ink);
  border: var(--border-thick);
  box-shadow: var(--shadow-md);
  padding: 14px 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  font-weight: 500;
  outline: none;
}
input:focus, textarea:focus {
  background: #fff;
  transform: translate(-1px, -1px);
  box-shadow: 7px 7px 0 var(--ink);
}

Marca-texto / highlight

Pra destacar palavras importantes em texto corrido:

strong, .highlight {
  background: var(--accent-secondary);
  padding: 0 4px;
  font-weight: 700;
}

Badge / tag

.badge {
  display: inline-block;
  background: var(--ink);
  color: var(--accent-secondary);
  font-family: 'Bowlby One', sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  padding: 6px 12px;
  text-transform: uppercase;
  transform: rotate(-2deg);
  border: 2px solid var(--ink);
}

Sticker (SVG starburst)

Sticker absoluto rotacionado no canto de um hero ou card.

<div class="sticker sticker-pow"><span>OFERTA!</span></div>

.sticker {
  position: absolute;
  top: -30px;
  right: -10px;
  width: 130px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bowlby One', sans-serif;
  font-size: 18px;
  text-align: center;
  color: #fff;
  text-transform: uppercase;
  line-height: 1;
  z-index: 5;
  pointer-events: none;
  transform: rotate(12deg);
}
.sticker span { position: relative; z-index: 2; }
.sticker::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2L57 18L72 8L72 26L88 22L80 38L96 40L84 52L96 62L80 64L88 80L72 76L72 94L57 84L50 98L43 84L28 94L28 76L12 80L20 64L4 62L16 52L4 40L20 38L12 22L28 26L28 8L43 18Z' fill='%23FF5722' stroke='%231A1A1A' stroke-width='3'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;
}

Trocar %23FF5722 no SVG pela cor primaria escolhida (use URL encoding).

Animacao de entrada

@keyframes slideIn {
  from { opacity: 0; transform: translateY(16px) rotate(-0.5deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0); }
}
.fade-in { animation: slideIn 0.4s cubic-bezier(.4,1.6,.6,1); }

Container/layout

.container {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
  padding: 24px 20px 80px;
}

Larguras tipicas:

• Survey/formulario: 680px max
• Landing page: 1200px max (com sections internas de 800px)
• Sales page: 800px-1000px

Mobile

SEMPRE incluir no fim do CSS:

@media (max-width: 600px) {
  .mega-title { font-size: 44px; }
  .opt:nth-child(odd), .opt:nth-child(even) { transform: none; }
  .card.rot-left, .card.rot-right { transform: none; }
  .sticker { width: 100px; height: 100px; font-size: 14px; }
}

Rotacoes saem no mobile pra nao quebrar layout.

REGRAS DURAS

NAO FAZER

• Nao usar mais de 4 fontes
• Nao deixar halftone com opacity > 0.35 (fica ilegivel)
• Nao usar gradientes complexos (vibe e flat color)
• Nao usar border-radius em cards/botoes (sempre quadrado)
• Nao usar Tailwind nem framework — vanilla CSS
• Nao usar libs JS externas a menos que ja existam no HTML original
• Nao remover funcionalidade JS existente (forms, sliders, etc) — preservar
• Nao apagar conteudo do usuario sem permissao
• Nao adicionar dependencias externas alem de Google Fonts

SEMPRE FAZER

• Mobile-first
• Bordas pretas grossas em tudo clicavel
• Sombras solidas (sem blur)
• Rotacoes leves (-1deg a +1deg) nos cards desktop
• Halftone sutil no body::before
• Headers sticky pretos com border-bottom colorida
• Botoes com min-height 48-56px (touch-friendly)
• loading="lazy" em imagens nao-hero
• Width/height nas imagens (evita CLS)
• <meta name="viewport" content="width=device-width, initial-scale=1">

CHECKLIST FINAL

Antes de salvar o HTML, conferir:

• <link> do Google Fonts no <head>
• :root com tokens CSS
• body::before com halftone sutil
• Mega title em Bowlby One com text-shadow amarelo
• Section titles em Anton uppercase
• Pelo menos 1 sticker decorativo (se nivel comic 2 ou 3)
• Numeros gigantes pra sections numeradas (se aplicavel)
• Cards com rotacao alternada
• Botoes primary/dark com sombra solida
• Media query <600px removendo rotacoes
• JS original preservado
• Imagens otimizadas (webp se possivel)
• Funciona em 375px / 414px / 768px / 1024px

EXEMPLO DE FLUXO

Usuario: "Aplica esse design comic na minha pagina landing.html"

Claude:

1. Le landing.html. Identifica: hero, 3 features, pricing, FAQ, footer.
2. Pergunta: "Qual a cor principal da tua marca?"
3. Aguarda resposta. Pergunta: "Cor secundaria pra destaque?"
4. Pergunta: "Quao comic tu quer? 1 discreto, 2 equilibrado, 3 explosivo"
5. Pergunta: "Mantenho o copy ou posso adaptar pra ficar mais punchy?"
6. Pergunta: "Salva como landing-comic.html?"
7. Reescreve o HTML aplicando o design system.
8. Reporta: "Salvei em landing-comic.html. Mudancas principais: hero com sticker POW + mega title em Bowlby One, features viraram cards rotacionados, pricing ficou com badge preto e numero gigante, FAQ virou accordion comic. Manualmente tu pode querer: trocar a foto do hero, ajustar o emoji do sticker, revisar o copy do CTA principal."