# Comic Page Redesign

> Transforma uma pagina HTML existente em um redesign no estilo "comic/HQ" inspirado no projeto Imersao Time de IA (landing v5 e pesquisa). Bordas pretas grossas, sombras solidas, rotacoes leves, halftone sutil, paleta cream/orange/ yellow/blue, fontes Bowlby One + Anton + DM Sans + Caveat. Le o HTML original, faz perguntas pontuais ao usuario sobre cores/tom/conteudo, e gera uma nova versao aplicando todo o design system. Use quando o usuario pedir pra redesenhar uma pagina HTML, aplicar estilo comic, estilo HQ, estilo v5, ou converter um HTML existente pro design do projeto. Triggers: "comic redesign", "redesign HQ", "design comic", "redesenhar pagina", "estilo v5", "aplicar design comic", "transformar pra HQ", "comic page".

- Skill: `clfigueiredo/comic-page-redesign` (Agent Skill)
- Install (CLI): `npx skillmds@latest add clfigueiredo/comic-page-redesign`
- Raw SKILL.md: https://api.skillmd.com/api/skills/clfigueiredo/comic-page-redesign/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: clfigueiredo (https://skillmd.com/u/clfigueiredo)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/clfigueiredo/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.

```css
: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

```css
* { 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)

```html
<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)

```css
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).

```css
.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

```css
.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)

```css
.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)

```css
.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)

```css
.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

```css
.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

```css
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:

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

### Badge / tag

```css
.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.

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

```css
.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

```css
@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

```css
.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:

```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."