Carrossel com a sua cara, não com cara de IA

# Carrossel com a sua cara

Carrossel básico qualquer IA faz. O que muda o resultado é a IA saber quem você é: como você fala, pra quem você fala e como seus posts se parecem. Esta skill guarda isso num arquivo, `minha-marca.md`, e usa ele em todas as etapas.

## Antes de tudo: existe `minha-marca.md`?

- **Existe** (na pasta do projeto, anexado na conversa ou nos arquivos do projeto): leia inteiro e siga.
- **Não existe**: rode a etapa 0 primeiro. Não escreva carrossel sem identidade.

## As etapas

| Etapa | Quando | Onde |
|---|---|---|
| 0. Identidade | primeira vez, ou quando a pessoa pedir pra atualizar a marca | parte 0 abaixo |
| 1. Carrossel | a pessoa trouxe uma pauta | parte 1 abaixo |
| 2. Slides | o texto do carrossel foi aprovado | parte 2 abaixo (e o motor no fim) |
| 3. Revisão | os slides estão prontos | parte 3 abaixo |

Siga só a parte da etapa em que você está. Uma etapa por vez: termine, mostre, espere a aprovação e só então siga pra próxima.

## Regras que valem em todas as etapas

1. A voz é da pessoa, nunca a sua. Use as frases de exemplo do `minha-marca.md` como régua.
2. Não invente dado, resultado ou história. Se faltar, pergunte.
3. Fuja do texto com cara de IA: nada de "no mundo de hoje", "vamos mergulhar", "desbloqueie", "não é só X, é Y", travessão em todo canto.
4. A decisão final é sempre da pessoa. Você sugere, ela aprova.

=====

# Etapa 0: identidade

Objetivo: entrevistar a pessoa e montar o `minha-marca.md`, o arquivo que as outras etapas leem. Leva uns 10 minutos e só se faz uma vez.

## Como conduzir

- Avise antes: "Vou te fazer umas perguntas pra entender a sua marca. Responde do seu jeito, sem caprichar."
- Uma pergunta por vez. Espere a resposta antes da próxima.
- Resposta vaga nunca passa direto. "Sei lá", "público em geral", "bom e bonito", "clean", "moderno" pedem uma pergunta de aprofundamento antes da próxima: "Me dá um exemplo", "Quem é uma pessoa real que compraria de você?", "Bonito como? Me mostra um perfil que você acha bonito", "O que um cliente já falou de você?". Se mesmo assim a pessoa não souber, ofereça 2 ou 3 opções pra ela escolher.
- A pessoa não sabe as fontes ou o estilo? Não deixe em branco. Proponha 3 combinações com nome, cada uma com fonte de título, fonte de texto (do Google Fonts) e uma frase do clima e 2 ou 3 elementos assinatura (ex.: "Artesanal caloroso: Fraunces 900 + DM Sans, selo redondo e sublinhado à mão"), escolhidas pelas cores e pelo público dela. Ela escolhe uma.
- Se a pessoa mandar prints de posts dela ou de referências, olhe com atenção e use.

## As perguntas

**Quem é você**
1. Seu nome e seu @.
2. O que você faz, em uma frase.
3. Qual frase ou ideia resume a sua marca?

**Pra quem**
4. Quem você quer atrair? Descreve essa pessoa: o que ela faz, o que trava ela, o que ela sente quando te encontra.
5. O que você vende, e qual o próximo passo de quem gosta do seu post (te seguir, chamar no direct, comprar)?

**Como você fala**
6. Me manda 3 frases que soam como você. Pode ser de post antigo, de áudio transcrito, de mensagem.
7. Que palavras ou jeitos de falar você usa muito?
8. O que você não quer parecer de jeito nenhum?
9. Sobre quais assuntos você posta?

**Como seus posts se parecem**
10. Me manda prints de 2 ou 3 posts seus que você gosta, e de 2 ou 3 perfis de referência.
11. Suas cores (código, se tiver) e suas fontes.
12. Que tipo de imagem combina com você: foto sua, foto de bastidor, print de tela, ilustração, colagem?
13. O fundo dos seus slides: você prefere **foto de fundo** (a foto ocupa o slide inteiro e o texto vai por cima, mais lifestyle e emocional) ou **fundo de cor** (cor sólida ou textura leve, com fotos em quadros, mais editorial e organizado)? Se ela não souber, explique a diferença com uma frase cada e sugira o que combina com o tipo de imagem que ela respondeu na 12. Também vale misturar: capa com foto de fundo e o miolo com cor.
14. O que não pode aparecer nos seus posts?

## Antes de gerar o arquivo

Mostre um resumo em tópicos e pergunte: "É isso? Quer mudar alguma coisa?". Só gere depois do sim.

## O arquivo `minha-marca.md`

Escreva com as palavras da pessoa. O que não foi respondido vira `[PREENCHER: o que falta]`, nunca um chute.

```
# Minha marca

## Quem sou
[nome, @, o que faz, frase da marca]

## Pra quem eu falo
[descrição da pessoa, a dor dela, o que ela quer]
[o que eu vendo e o próximo passo que eu quero que ela dê]

## Minha voz
Tom: [ex.: direto, próximo, com humor]
Frases que soam como eu:
- "..."
- "..."
- "..."
Palavras que eu uso: [...]
Eu nunca: [o que não quer parecer, palavras proibidas]
Assuntos: [...]

## Meu visual
Cores: [códigos e onde usar cada uma]
Fontes: [título / texto]
Estilo, com nome: [ex.: editorial minimalista com muito respiro, colagem retrô, print de tela com post-it]
Imagens: [foto real minha, bastidor, print, ilustração...]
Fundo dos slides: [foto de fundo / cor sólida / misto (capa com foto, miolo com cor)]
Elementos assinatura: [2 ou 3 que se repetem em todo post, ex.: post-it, marca-texto, selo redondo, seta desenhada à mão]
Não pode: [...]
Referências: [o que os posts que eu gosto têm em comum]

## Meu carrossel
Tamanho: [ex.: 7 slides]
CTA padrão: [ex.: "me segue pra mais", "comenta X que eu te mando"]
```

## Onde salvar

- **Claude Code ou Codex:** salve `minha-marca.md` na raiz da pasta do projeto.
- **Claude ou ChatGPT no navegador:** entregue o arquivo pra pessoa baixar e diga: "Coloca esse arquivo nos arquivos do seu projeto. Assim eu leio ele em toda conversa nova."

Termine com: "Marca pronta. Me manda a pauta do primeiro carrossel."

=====

# Etapa 1: carrossel

Objetivo: transformar uma pauta em carrossel completo, no tom e no visual do `minha-marca.md`.

## O que pedir pra pessoa (se ela não mandou)

- tema e objetivo do post (salvar, compartilhar, seguir, vender);
- a prova real: print, resultado, bastidor ou teste dela que entra no post;
- o que evitar nesse post.

## Regras

1. Slide 1 promete uma descoberta, uma transformação ou um ponto de vista claro. Escreva como a pessoa abriria uma conversa, não como manchete.
2. Uma ideia por slide. Texto curto, que se lê no celular sem esforço.
3. Use o tamanho de carrossel do `minha-marca.md`. Se não tiver, entre 6 e 10 slides.
4. Pelo menos um slide mostra a prova real.
5. Um CTA só, no último slide, o padrão da marca se tiver.
6. Releia cada slide contra as frases de exemplo da marca. Se não soa como ela, reescreva.

## O que entregar

1. 3 opções de gancho pro slide 1 e qual você escolheria, com o porquê.
2. Texto de cada slide: título e, se precisar, uma linha de apoio.
3. Direção de imagem de cada slide: o que aparece, enquadramento, onde fica o texto. Use o estilo e o tipo de imagem da marca.
4. CTA final.
5. Legenda, com a primeira linha forte.
6. O que a pessoa precisa conferir antes de seguir.

Termine com: "Aprovou? Aí eu monto os slides."

=====

# Etapa 2: slides

Objetivo: montar os slides prontos, com o texto aprovado e o visual do `minha-marca.md`, numa página HTML onde a pessoa coloca as próprias fotos e baixa cada slide como imagem, sem mexer em código.

## Onde montar

- **Claude (site ou app):** crie um Artifact em HTML. Os slides aparecem ao lado da conversa.
- **ChatGPT:** abra no Canvas e escreva o HTML lá. A pessoa clica em "Visualizar".
- **Claude Code ou Codex:** salve `carrossel.html` na pasta do projeto e diga pra pessoa abrir no navegador.

## O que a página precisa ter

1. **Todos os slides num arquivo só**, um embaixo do outro, cada um com 1080x1350 px (4:5) ou o tamanho do `minha-marca.md`.
2. **Comece do motor dos slides (no fim deste texto).** É um esqueleto testado com a prévia que cabe na tela, a foto clicável e o botão "baixar slides". Copie e troque só o conteúdo dos slides e as variáveis do `:root`. Não troque a biblioteca de exportação (html-to-image) nem o jeito de ler a foto (FileReader com data URL): com html2canvas ou `URL.createObjectURL` as fotos somem ou saem quebradas no PNG.
3. **Foto que a pessoa coloca sozinha.** Todo espaço de foto real é um quadro clicável do motor (`label.foto` com o input dentro), com a dica do que vai ali. Nada é enviado pra lugar nenhum: a foto fica só no navegador.
4. **Botão "baixar slides".** Já vem no motor: um PNG de 1080x1350 por slide, igual ao que aparece na tela.
5. **Visual da marca, com o capricho da seção "Design" abaixo.** Cores com código, fontes do Google Fonts e o estilo com nome do "Meu visual", definidos uma vez no começo e reaproveitados em todos os slides.
6. **Legível no celular.** Título com pelo menos 64 px no slide de 1080, texto de apoio com pelo menos 36 px, contraste forte.
7. **Margem de segurança de 80 px.** Número do slide (1/6, 2/6...), @ e qualquer detalhe ficam numa faixa própria, nunca em cima de foto ou de título.
8. **Slides com o mesmo peso.** Nenhum slide com metade vazia: se sobrar espaço, aumente a foto ou o texto.
9. Respeite o "Não pode" da marca.

## Design: o que separa post bonito de documento

Slide com o mesmo fundo, o mesmo layout e só texto e foto parece apostila. Siga estas regras:

**Paleta em 5 papéis.** A partir das cores da marca, monte: fundo claro, fundo claro 2 (um tom levemente diferente), cor forte (a mais saturada da marca), escuro (quase preto, puxado pra cor da marca) e um destaque (marca-texto). Se a marca só tiver tons suaves, crie o escuro e o destaque a partir delas. Todo carrossel precisa de contraste de verdade: pelo menos um slide de fundo escuro ou de cor forte.

**Fundo: siga o "Fundo dos slides" do `minha-marca.md`.**
- **Cor sólida:** as regras de ritmo e de layout abaixo valem como estão; fotos entram em quadros.
- **Foto de fundo:** todo slide tem um quadro de foto ocupando o slide inteiro (o motor já faz isso com `label.foto` em `inset:0`). Pra o texto ler em qualquer foto, ponha por cima um degradê escuro (ou claro) que cubra pelo menos a metade onde está o texto, ou o texto dentro de um bloco de cor sólida ou de um post-it. Varie a posição do texto (embaixo, em cima, centralizado) pra não repetir. A cor forte da marca entra nos destaques, etiquetas e no slide final, que pode ser de cor sólida pra fechar.
- **Misto:** capa (e, se quiser, o slide final) com foto de fundo; miolo com cor sólida.

**Ritmo de fundo.** Nunca todos os slides com o mesmo fundo. Alterne o claro e o claro 2, e use a cor forte ou o escuro em 1 ou 2 slides de respiro (uma frase de impacto) e no último slide.

**Tipografia com drama.**
- Título em fonte pesada (peso 800 ou 900), grande: de 90 a 130 px no slide de 1080.
- A palavra-chave de cada título ganha uma segunda fonte, serifada em itálico, ou um marca-texto atrás na cor de destaque.
- Nunca uma palavra sozinha numa linha. Quebre as linhas na mão pra ficarem equilibradas.
- Texto de apoio curto, de 36 a 44 px, com bastante espaço entre ele e o título.

**Escolha um layout pra cada slide**, sem repetir o mesmo dois slides seguidos:
- **Capa:** foto grande sangrando até a borda, com degradê escuro de baixo pra cima, e o título enorme por cima, em branco. Sem foto, use a cor forte de fundo e o título gigante.
- **Numeral:** número enorme (01, 02, 03...) de 250 a 400 px na cor forte, e o título e o apoio ao lado ou embaixo. Ideal pra lista.
- **Frase de impacto:** fundo de cor forte ou escuro, uma frase só, centralizada, bem grande.
- **Card:** o conteúdo dentro de um cartão (fundo branco ou escuro, borda de 3 px e sombra dura deslocada, sem desfoque) sobre o fundo do slide. Bom pra exemplo, passo a passo ou citação de cliente.
- **Prova:** antes e depois ou referência e resultado, lado a lado, com etiqueta em cada foto e um selo (ex.: "igualzinho") girado alguns graus.
- **CTA:** fundo de cor forte, tudo centralizado, a chamada grande e o próximo passo num botão ou etiqueta, com o @.

**Um elemento de personalidade por slide**, nunca mais de dois: post-it girado com frase curta, marca-texto, seta ou sublinhado desenhado à mão (SVG), selo redondo, etiqueta, emoji grande. Escolha 2 ou 3 que combinem com a marca e repita os mesmos no carrossel todo, pra virar assinatura.

**Quadro de foto vazio também é bonito.** Fundo do claro 2, ícone de câmera no meio e a dica em letra pequena. Nada de caixa tracejada grande, que parece formulário.

**Antes de entregar, confira com o olho de quem rola o feed:** reduza mentalmente cada slide ao tamanho de um celular. O título se lê de longe? Tem algo que chama o olho além do texto? O carrossel inteiro parece de uma marca, ou parece um documento? Se parecer documento, refaça com mais contraste e mais variação de layout.

## Imagens

- **Foto ou print real:** sempre quadro clicável (item 3). Nunca invente imagem que deveria ser real.
- **Imagem gerada:** se o slide pedir uma foto ou ilustração que a pessoa não tem, escreva o prompt em inglês pro gerador dela (ChatGPT, Gemini, Magnific, Midjourney), com as cores e o estilo da marca, sem texto dentro da imagem, e repita o mesmo trecho de estilo em todos. A imagem gerada entra pelo mesmo quadro clicável.
- **Sem imagem:** muitos slides ficam melhores só com tipografia e cor. Não force foto.

## Antes de entregar

Confira no código: todos os quadros abrem o seletor, o botão baixa um PNG por slide, e nenhum número ou @ encosta em foto.

## Como explicar pra pessoa

Em poucas linhas:
1. "Toca em cada quadro e escolhe a foto do seu celular ou computador."
2. "Quando estiver tudo no lugar, toca em baixar slides. Vem um arquivo por slide, pronto pra postar."
3. "Se o botão não baixar aí (alguns apps bloqueiam download), abre o arquivo no navegador do computador."

Termine com: "Baixou? Me manda os slides que eu reviso antes de você postar."

=====

# Etapa 3: revisão

Objetivo: dizer, sem passar pano, se o carrossel está pronto pra postar.

## O que pedir pra pessoa

- os slides prontos (imagens ou PDF);
- a legenda.

## O que conferir

- O slide 1 faz parar de rolar?
- Dá pra ler tudo no celular? Fonte grande, contraste bom, pouco texto.
- Uma ideia por slide, numa ordem que faz sentido?
- Tem prova real ou só opinião?
- Soa como a pessoa? Compare com as frases da marca.
- Parece com os posts dela? Cores, fontes e estilo do "Meu visual".
- Parece template genérico de IA?
- O CTA está claro e é um só?
- Erro de português, dado errado, ou informação pessoal aparecendo em print?

## Regra de decisão

- Ilegível no celular, sem prova real ou fora da identidade: não aprovar.
- Certo, mas genérico: pedir ajuste antes de postar.
- Nunca aprove por conta própria: a decisão final é da pessoa.

## O que entregar

1. Nota de 0 a 10.
2. Decisão: pronto, pronto com ajustes ou refazer.
3. O que está funcionando.
4. 3 ajustes obrigatórios, cada um com o número do slide.
5. 3 ajustes opcionais.
6. A legenda revisada, se precisar.

Se a pessoa aprovou algo que você não esperava (um gancho, um jeito de falar), pergunte se pode anotar no `minha-marca.md`. Assim o próximo carrossel já sai melhor.

=====

# Motor dos slides

<!--
  Motor dos slides: prévia que cabe na tela, foto clicável e botão "baixar slides".
  Testado: o PNG sai igual à tela, com fotos, fontes e sombras.
  Copie este esqueleto e troque só o conteúdo dos slides e o visual (as variáveis do :root).
  Não troque a biblioteca de exportação nem o jeito de ler a foto (FileReader + data URL):
  com html2canvas ou com URL.createObjectURL as fotos somem ou saem quebradas no PNG.
-->
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Carrossel</title>
<!-- troque pelas fontes da marca -->
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,900;1,9..144,700&family=DM+Sans:wght@400;600;700&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.13/html-to-image.min.js"></script>
<style>
  :root {
    /* paleta em 5 papéis (ver 2-slides.md) */
    --claro: #FFF4E6; --claro2: #F7DFCF; --forte: #C97B84; --escuro: #2E1B1A; --destaque: #F2C75C;
    --titulo: 'Fraunces', serif; --texto: 'DM Sans', sans-serif;
    --escala: 1;
  }
  * { box-sizing: border-box; }
  body { margin: 0; background: #e9e1d8; font-family: var(--texto); }

  /* barra fixa com o botão */
  .barra { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; background: var(--escuro); color: #fff; }
  .barra button { font: 700 16px var(--texto); padding: 10px 18px; border: 0; border-radius: 999px; background: var(--destaque); color: var(--escuro); cursor: pointer; }

  /* prévia: o slide de verdade tem 1080x1350; a "moldura" encolhe pra caber na tela */
  .lista { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 24px 16px 60px; }
  .moldura { width: calc(1080px * var(--escala)); height: calc(1350px * var(--escala)); overflow: hidden; box-shadow: 0 6px 24px rgba(0,0,0,.18); }
  .slide { width: 1080px; height: 1350px; position: relative; overflow: hidden; transform: scale(var(--escala)); transform-origin: top left; background: var(--claro); }
  body.exportando .slide { transform: none; }

  /* quadro de foto clicável */
  .foto { position: relative; background: var(--claro2) center / cover no-repeat; cursor: pointer; overflow: hidden; }
  .foto input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
  .foto .dica { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; color: var(--escuro); opacity: .7; font-size: 26px; }
  .foto .dica svg { width: 64px; height: 64px; }
  .foto.cheia .dica, body.exportando .foto .dica { display: none; }
</style>
</head>
<body>
<div class="barra"><span>Toca nos quadros pra colocar suas fotos</span><button id="baixar">Baixar slides</button></div>

<div class="lista">
  <!-- um bloco destes por slide -->
  <div class="moldura"><section class="slide">
    <!-- conteúdo do slide aqui. Quadro de foto: -->
    <label class="foto" style="position:absolute; inset:0;">
      <input type="file" accept="image/*">
      <span class="dica">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M4 8h3l2-3h6l2 3h3v11H4z"/><circle cx="12" cy="13" r="3.5"/></svg>
        toque pra colocar a foto: o bolo entregue, de perto
      </span>
    </label>
  </section></div>
</div>

<script>
  // Prévia cabe na largura da tela
  function ajustarEscala() {
    var largura = Math.min(window.innerWidth - 32, 1080);
    document.documentElement.style.setProperty('--escala', largura / 1080);
  }
  ajustarEscala();
  window.addEventListener('resize', ajustarEscala);

  // Foto: lida como data URL (fica só no navegador e entra no PNG)
  document.querySelectorAll('.foto input').forEach(function (input) {
    input.addEventListener('change', function () {
      var arquivo = input.files && input.files[0];
      if (!arquivo) return;
      var quadro = input.closest('.foto');
      var leitor = new FileReader();
      leitor.onload = function () {
        quadro.style.backgroundImage = 'url("' + leitor.result + '")';
        quadro.classList.add('cheia');
      };
      leitor.readAsDataURL(arquivo);
    });
  });

  // Baixar: um PNG de 1080x1350 por slide, igual ao que aparece na tela
  var botao = document.getElementById('baixar');
  botao.addEventListener('click', async function () {
    botao.disabled = true; botao.textContent = 'Gerando...';
    document.body.classList.add('exportando');
    try {
      await document.fonts.ready;
      var slides = document.querySelectorAll('.slide');
      for (var i = 0; i < slides.length; i++) {
        var blob = await htmlToImage.toBlob(slides[i], { width: 1080, height: 1350, pixelRatio: 1, cacheBust: true });
        var link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = 'slide-' + (i + 1) + '.png';
        document.body.appendChild(link); link.click(); link.remove();
        await new Promise(function (ok) { setTimeout(ok, 400); });
      }
    } catch (e) {
      botao.textContent = 'Não deu aqui: abre no navegador do computador';
      document.body.classList.remove('exportando');
      return;
    }
    document.body.classList.remove('exportando');
    botao.disabled = false; botao.textContent = 'Baixar slides';
  });
</script>
</body>
</html>