O que carouso faz?

Propósito

Produza posts em carrossel em duas fases. A Fase 1 bloqueia um sistema de design com o usuário: tokens de marca mais uma biblioteca de padrões de layout. A Fase 2 compõe cada carrossel a partir desses padrões: escolha padrões por slide, escreva o texto, coloque imagens, renderize através de portões de qualidade.

Bloqueie os tokens. Libere a composição. É isso que mantém cada carrossel fiel à marca sem parecer um modelo.

Usando um modelo (caminho padrão)

Seis modelos prontos são fornecidos em templates/. Cada um é um visual bloqueado (cores, fontes, tokens claro e escuro) mais um esqueleto de slide, então não é necessário nenhum onboarding. A galeria de pré-visualização está em README.md.

Disparadores: "modelo 3", "modelo no 3", "pakai modelo 3", "use o modelo 2 para ...", ou um nome de modelo ("xícara matinal"). Corresponda o número ou nome ao templates/NN-slug/template.json.

Arquivos por modelo: tokens.css (a pele), template.json (nome, fontes, tamanho, sequência de slides com padrões e modos), sample.html (o carrossel de amostra finalizado para copiar).

Resolva o modelo. Leia templates/NN-slug/template.json. Se a pessoa não forneceu nenhum número e nenhum sistema personalizado existe, liste cada modelo (número, nome, vibe) a partir dos arquivos template.json e pergunte qual. Um número desconhecido recebe a mesma lista.
Colete o briefing. Pergunte uma vez, em uma mensagem, o que estiver faltando: tópico e ângulo (obrigatório), nome da marca e identificador (os placeholders do modelo são usados quando eles recusam), número de slides (o padrão é o comprimento da sequência, permitido de 5 a 10), imagens com um mapa de posicionamento (opcional, veja o passo 6). O idioma do carrossel segue o idioma do briefing. Traduza também cada string fixa na marcação: "Mito", "Fato", "Salve isto" e o rodapé NN / TT permanecem, as palavras mudam.
Planeje a partir da sequência. Comece a partir da sequence do modelo. Mantenha a capa primeiro, o takeaway por último e o modo de cada slide conforme listado. Para um número diferente de slides, remova ou repita os slides do meio na ordem da sequência, mantendo os modos alternados e sem dois slides adjacentes no mesmo padrão. Troque um padrão do meio quando o conteúdo se encaixa melhor em outro (números para stat-band ou big-number, etapas para process-steps, uma linha para quote), mantendo o modo daquele slide. Use cover-split apenas quando uma imagem de capa verificada for fornecida. Uma imagem colocada vai para o slide como um slot .photo (veja abaixo), ou em um slide image-hero quando a foto é o ponto principal. Escreva o plano como uma lista (número do slide, padrão, modo, conteúdo de uma linha) antes de construir.
Escreva o texto de acordo com os padrões de texto abaixo. Substitua cada linha de amostra. Nada do tópico de amostra pode permanecer.
Construa o HTML. Crie carousels/<slug>/index.html copiando o sample.html do modelo escolhido. Altere apenas o link tokens.css para ../../templates/NN-slug/tokens.css. Os links fonts.css e system.css já são resolvidos a partir dessa profundidade. Mantenha ou remova blocos <section> de acordo com o plano, copie blocos de padrão de design-system/patterns.html para slides adicionados, aplique a classe mode-dark de acordo com o plano, preencha marca, identificador e os contadores NN / TT.
Imagens passam pelo portão rígido na Fase 2, passo 4 abaixo. Coloque cópias locais em carousels/<slug>/images/ e registre a proveniência em carousels/<slug>/provenance.log.
Renderize com o tamanho e fontes do modelo de template.json:

python3 scripts/render_carousel.py --html carousels/<slug>/index.html --out carousels/<slug>/ \
    --width 1080 --height 1440 --slides <N> --check-fonts "<fonts from template.json, comma separated>"

Corrija o HTML até que todos os portões passem. Nunca abra mão de um portão. 8. Verificação visual final como na Fase 2, passo 7, então entregue slide_01.jpg a slide_NN.jpg. Modelos não precisam de last-used.json, porque os modos vêm do modelo.

As fontes estão agrupadas em fonts/, então não é necessário instalar nada além do Playwright.

Uma pessoa que deseja seu próprio visual em vez dos seis modelos usa o caminho personalizado abaixo.

Sistema de design personalizado (caminho opcional)

Use este caminho apenas quando a pessoa pedir seu próprio visual, ou enviar uma captura de tela ou HTML de referência, em vez de escolher um modelo. Quando nenhum modelo foi escolhido e nenhum sistema de design bloqueado existe ainda, ofereça os modelos primeiro e execute o onboarding abaixo apenas se eles quiserem um personalizado. Quando este caminho for executado, não comece a projetar. Abra primeiro o diálogo de onboarding. Faça uma pergunta de cada vez, nesta ordem, cada uma com as escolhas listadas. Aceite uma resposta personalizada a qualquer momento. Sete perguntas, depois projete. Se o usuário enviar uma captura de tela ou referência HTML em vez de responder, pule o diálogo e vá para a Fase 1, opção B.

Estilo. "Qual vibe o carrossel deve ter?" Escolhas: Divertido e amigável / Limpo e minimalista / Ousado e marcante / Quente e elegante / Escuro e premium.
Cores. "Escolha um clima de cor." Escolhas: Terra quente (marrons, creme, laranja) / Natural fresco (verdes, creme) / Calma oceânica (azuis, branco) / Contraste ousado (preto, branco, um acento forte) / Pastel suave.
Fontes. "Escolha uma sensação de tipo. Não precisa nomear as fontes." Escolhas: Arredondado e divertido / Serifa elegante / Negrito e moderno / Limpo e simples. Mapeie internamente, nunca mostre nomes de fontes: arredondado-diverto para Baloo 2 + Quicksand; elegante-serif para Playfair Display + Plus Jakarta Sans; negrito-moderno para Albert Sans + Plus Jakarta Sans; limpo-simples para Plus Jakarta Sans + Quicksand. Todas as cinco famílias estão agrupadas em fonts/: link fonts/fonts.css do HTML do carrossel.
Marca. "Nome da marca e identificador para a marca d'água?" Texto livre, uma mensagem. Exemplo: "Morning Cup / @morningcup".
Tópico. "Sobre o que geralmente são os carrosséis?" Texto livre, uma linha. Isso define o tom do texto e o conteúdo de amostra.
Idioma. "Indonésio ou Inglês?" Duas opções. Isso define todas as strings fixas: gatilhos, CTA, rodapé.
Nome do sistema. "Como devemos chamar este sistema de design?" Texto livre, uma mensagem. Sugira um padrão a partir da marca e estilo, por exemplo "morningcup-playful". O nome importa porque o usuário pode manter vários sistemas e escolher um por carrossel.

Após a sétima resposta, resuma as escolhas bloqueadas em uma mensagem curta e depois vá para a Fase 1.

Fase 1: bloquear o sistema de design

Duas formas de entrada. Escolha uma.

A. Gerar a partir das respostas do onboarding. Defina os tokens :root em design-system/system.css para a marca (cores, fontes, raio). Renderize três padrões de amostra nesses tokens (uma capa, um corpo, um fechamento) e mostre-os ao usuário. Itere até aprovação.

B. Adaptar a partir de uma referência. O usuário envia uma captura de tela ou um arquivo HTML de um carrossel que ele gosta. Estude: papéis de cor, escala tipográfica, ritmo de espaçamento, elementos recorrentes. Codifique o que você aprendeu como tokens :root, depois renderize os padrões de amostra. Itere até aprovação.

Portão de aprovação. O sistema entra em produção apenas após o usuário aprovar as amostras renderizadas. Salve-o sob seu nome de sistema (por exemplo design-systems/morningcup-playful/, contendo system.css, patterns.html, e last-used.json). Para construir outro sistema depois, execute o diálogo de onboarding novamente a partir da pergunta 1.

Fase 2: compor um carrossel

1. Colete o briefing

Esclareça isso antes de começar. Pergunte sobre o que estiver faltando. Não adivinhe.

Tópico e ângulo, como uma frase de gancho.
Sistema de design: qual sistema bloqueado usar. Padrão para o mais recente aprovado. Pergunte quando vários existirem. (No caminho do modelo, o modelo é o sistema de design.)
Número de slides (padrão 6-10) e tamanho (padrão 1080x1440, que é o que system.css renderiza; uma altura diferente precisa de uma substituição de altura .slide correspondente).
Imagens. Para cada imagem: a fonte (caminho do arquivo carregado, URL direta ou URL do artigo), o slide de destino e a função (herói, dividido ou inline). Sem um mapa de posicionamento explícito, não use imagens.

2. Planeje a composição

Leia o last-used.json do sistema e o catálogo de padrões em design-system/PATTERNS.md. Atribua um padrão por slide:

Abra com um padrão de capa, feche com um padrão de fechamento.
Dois slides adjacentes não compartilham um padrão.
Nunca repita o padrão de capa do carrossel anterior para a mesma marca.
Corresponda o padrão ao conteúdo: números para stat-band ou big-number, sequências para process-steps, uma única linha para quote. Não force o conteúdo em um padrão conflitante.
Alterne os dois modos entre os slides: atribua mode-dark a um slide ou deixe-o claro para que dois slides adjacentes não compartilhem um modo. Comece com o modo oposto do primeiro slide do carrossel anterior (leia last-used.json). Um carrossel pode abrir claro, o próximo abre escuro. Deixe o conteúdo guiar quais slides ficam escuros: pares de contraste (mito vs. fato, problema vs. solução) são slides escuros naturais. Escreva o plano como uma lista simples (número do slide, nome do padrão, modo, conteúdo de uma linha) antes de construir qualquer coisa.

3. Escreva o texto

Uma ideia por slide. Os cabeçalhos ficam abaixo de 8 palavras. O corpo fica abaixo de 25 palavras por slide. Siga os padrões de texto abaixo.

4. Ingerir e verificar imagens (portão rígido)

Baixe ou copie cada imagem para a pasta local images/. Nunca faça hotlink durante a renderização.
Olhe para cada imagem antes de usar. Rejeite-a quando o conteúdo não corresponder ao tópico do slide, quando ela tiver uma marca d'água ou logotipo estrangeiro, quando estiver desfocada ou quando seu lado mais curto estiver abaixo de 900px para uso grande.
Registre a proveniência (URL de origem ou nome do arquivo carregado) em provenance.log.
Nunca use imagens geradas por IA. Esta habilidade não gera imagens, sem exceção.

Slot de foto. Para adicionar uma imagem a qualquer padrão de corpo, coloque <figure class="photo"><img src="images/<arquivo>.jpg" alt="..."></figure> como o último filho do .content daquele slide. Ele dimensiona para a largura do conteúdo em 16:10 e assume o raio e as cores do modelo. Use class="photo wide" (5:2) ou class="photo band" (3:1) em slides densos como myth-fact ou big-number, style="--focus:50% 40%" para definir o ponto de corte e um <figcaption> para uma legenda em um scrim. Para duas fotos, use <div class="photos"> contendo duas <figure class="photo"> (quadradas, lado a lado, mesma calha de two-cards), ou class="photos short" (4:3) em slides densos. Para um slide no estilo herói, coloque a foto de ponta a ponta no topo: adicione photo-top às classes <section>, style="--bleed-h:600px" nela e <figure class="photo-bleed"><img ...></figure> como o primeiro filho. A barra superior fica branca em um scrim e o conteúdo começa abaixo da foto. Use cerca de --bleed-h:440px em slides densos (myth-fact, big-number). Escolha uma foto com uma borda superior calma, pois a barra superior fica sobre ela. Verifique se o slide ainda passa no portão de overflow e mantém pelo menos 40px de ar acima e abaixo do conteúdo.

5. Construa o HTML

Comece a partir do system.css bloqueado (copie o conteúdo <style> ou link o arquivo) e copie os blocos <section> escolhidos de patterns.html. Preencha os slots de texto e imagem. Referencie imagens por caminhos locais relativos ao HTML. Não invente novos layouts por carrossel. Quando o briefing precisar de uma estrutura que nenhum padrão cobre, isso é uma discussão da Fase 1, não uma improvisação da Fase 2.

6. Renderize com o portão de qualidade

Execute scripts/render_carousel.py:

python3 scripts/render_carousel.py --html <arquivo.html> --out <dir-saída> \
    --width 1080 --height 1440 --slides 6 \
    --check-fonts "Plus Jakarta Sans"

(Ajuste largura, altura, slides e fontes de acordo com o briefing e os tokens do sistema.) O script sai com código 1 quando a contagem de .slide difere da solicitação, quando o conteúdo transborda sua zona, quando a caixa delimitadora de um slide difere do tamanho solicitado, quando o texto é menor que 20px ou quando uma fonte verificada falhou ao carregar. Corrija o HTML e renderize novamente até que passe. Nunca abra mão do portão manualmente.

7. Verificação visual final e registro

Abra o slide 1, um slide do meio e o último slide. Confirme se a fonte de exibição foi renderizada, nenhum texto está cortado, nenhum elemento se sobrepõe, as imagens estão sem distorção com os assuntos intactos e a marca, o identificador e o CTA permanecem consistentes. Em seguida, atualize o last-used.json do sistema com o padrão de capa deste carrossel, a sequência completa de padrões e o modo de cada slide (por exemplo {"cover": "cover-big-type", "sequence": ["cover-big-type", "two-cards", "takeaway"], "modes": ["light", "dark", "light"]}).

Pensamento de design

Aplique este raciocínio em cada etapa. É o que impede a saída de parecer porcaria de IA.

Antes de escrever o texto

Nomeie a ideia única do slide em uma frase. Se você não conseguir, o slide ainda não existe.
Escreva o cabeçalho primeiro, depois corte-o para menos de 8 palavras sem perder o significado.
Prefira substantivos concretos e verbos fortes em vez de adjetivos. Nomeie a hora, a temperatura, a quantidade.
Leia cada linha de volta. Se pudesse pertencer a qualquer marca, reescreva-a para esta.

Antes de colocar elementos

Decida a ordem de leitura primeiro: o que é visto primeiro, segundo, terceiro. O tamanho e o peso devem aplicá-la.
Cada elemento precisa de uma razão para sua posição. Alinhe à grade ou quebre-a deliberadamente (apenas capas).
Trate o espaço em branco como um elemento de design. Quando um slide parece apertado, corte o conteúdo. Nunca encolha o tipo abaixo do mínimo.

Padrões de texto (anti-porcaria)

Frases declarativas curtas. Uma ideia por frase.
Sem travessões. Sem construções "não apenas X, mas Y". Sem tríades forçadas.
Sem aberturas de enchimento e sem vocabulário de IA: "mergulhar", "desbloquear", "elevar", "tapeçaria", "revolucionário", "no mundo acelerado de hoje".
Voz ativa. Palavras simples: "use", não "utilize".
Ganchos usam um de três padrões: uma lacuna de curiosidade, um número específico ou endereço direto.
O subtítulo faz uma promessa, não um resumo. Ele diz o que o leitor ganha ao deslizar.
Sem emojis decorativos em títulos. Sem cabeçalhos em maiúsculas.

Fundamentos de layout

Hierarquia: o cabeçalho é o maior elemento em negrito. Uma palavra ou frase com cor de acento por cabeçalho, nada mais.
Contraste: texto sobre fotos fica em um scrim ou cartão semissólido. Nunca diretamente sobre uma foto ocupada.
Alinhamento: uma margem interna consistente em todos os lugares. Alinhado à esquerda por padrão; capas centralizam deliberadamente.
Tipografia: no máximo duas famílias de fontes. Toda fonte deve carregar; o portão de renderização rejeita fontes não carregadas.
Consistência: uma vez que um sistema de design é escolhido, seus tokens dominam todos os slides daquele carrossel.

Convenções de nomenclatura de arquivos e pastas

templates/              # modelos prontos
  NN-slug/
    template.json       # definição do modelo
    tokens.css          # tokens CSS
    sample.html         # carrossel de exemplo

carousels/              # trabalhos renderizados
  <slug>/
    index.html          # carrossel montado
    images/             # imagens locais
    provenance.log      # log de origem das imagens
    slide_01.jpg …      # saída final

design-systems/         # sistemas de design bloqueados
  <name>/
    system.css          # tokens do sistema
    patterns.html       # padrões renderizados no sistema
    last-used.json      # metadados do último carrossel

design-system/          # catálogo de padrões de código-fonte
  patterns.html         # blocos HTML de padrão
  PATTERNS.md           # documentação do padrão
  system.css            # folha de estilo de base para tokens

fonts/                  # fontes de exibição
  fonts.css             # folha de estilo de fontes linkável

scripts/
  render_carousel.py    # motor de renderização

Registro de alterações

2025-05-10: div2 foi alterado para div.photos
2025-05-07: modo de capa agora é rastreado em last-used.json; esclareceu que a luz ambiente NÃO está bloqueada; nenhum comportamento de modo de bloqueio foi alterado
2025-05-06: div photo.row foi alterado para div.photos
2025-04-30: padrões de layout expandidos em patterns.html: 15 padrões principais mais variantes de modo escuro
2025-04-25: visão geral do padrão movida para PATTERNS.md
2025-04-18: modo escuro alternante adicionado; referência de modo agora rastreada em last-used.json
2025-04-15: validação de imagem adicionada; portão de aprovação do sistema de design adicionado
2025-04-10: exportação de carrossel dividida em fases (Fase 1: tokens/sistema, Fase 2: composição)
2025-04-05: sistema de modelo adicionado; pesquisar por número do modelo ou slug
2025-04-01: projeto inicial

grafisify/carouso

O que é carouso?

Perguntar na sua IA favorita

Prévia

Documentação