citycraft

Construtor de Landing Pages

Filosofia

Esta skill produz landing pages que são visualmente audaciosas — não o típico template de contêineres aninhados, grades de cartões e layout previsível. Cada saída deve parecer um artefato de design deliberado:

• Layout ousado — Divisores com clip-path em vez de linhas horizontais. Tipografia sangrando para fora da tela. Elementos rompendo sua grade. Títulos em viewport inteira.
• SVG como núcleo do design — Não enfeites decorativos. Caminhos SVG animam no scroll, ícones têm personalidade, texturas de fundo vêm de ruído <feTurbulence>.
• Senso de camadas e profundidade — GSAP ScrollTrigger cria profundidade espacial genuína: seções que se sobrepõem e cobrem a anterior, painéis fixos enquanto o conteúdo desliza sobre eles, parallax em camadas z separadas.
• Textura nos fundos — Toda seção tem textura. Nunca um fundo sólido e plano.
• Navegação surpreendente — O nav nunca é uma barra horizontal padrão.

---

Ativos Inclusos (USE ESTES — não reinvente)

Esta skill vem com ativos pré-construídos. Leia e use-os diretamente:

Arquivo	O que contém	Quando usar
assets/style-preview-template.html	Cartões de pré-visualização para 57 estilos	Passo 2: usar sed para preencher __PRODUCT_NAME__ + __PRODUCT_HEADLINE__, salvar como style-preview.html, abrir
assets/options-preview-template.html	Demonstrações interativas: estilos de nav, variantes de cor, estilos de transição, variantes de hero/features/testimonials	Passo 3: usar sed para preencher tokens de cor da cidade + nome do produto, salvar como options-preview.html, abrir
assets/textures.css	6 classes de textura CSS (.texture-kyoto, .texture-paris, .texture-tokyo, etc.)	Copiar a classe correspondente para style.css
assets/gsap-snippets.js	6 funções de animação GSAP (entrada com blur, revelação de linha, parallax, sticky steps, blast menu, magnetic pill)	Copiar as funções relevantes para main.js
assets/clip-paths.css	8 classes de divisor com clip-path (.clip-diagonal-br, .clip-parallelogram, .clip-arc-bottom, etc.)	Usar pelo menos 2 em style.css para divisores de seção
assets/sections/hero-variants.html	3 templates de Hero (fullscreen expansivo / tela dividida / minimalista descendente)	Passo 4: escolher a variante que corresponde à preferência tipográfica do usuário, copiar e adaptar
assets/sections/features-variants.html	6 templates de Features (grandes números / alternância / timeline / bento grid / scroll horizontal / FAQ expansível)	Passo 4: escolher com base no tipo de conteúdo (estatísticas → grandes números, como funciona → timeline)
assets/sections/testimonial-variants.html	6 templates de Testimonials (cards compactos / citação única / mosaico / faixa horizontal / balões de diálogo / mural de avatares)	Passo 4: escolher com base no volume de depoimentos e preferência de estilo visual
assets/sections/conversion-variants.html	Tabela de preços, FAQ, mural de marcas, CTA poderoso	Passo 4: copiar a seção relevante, todas usam propriedades customizadas CSS
references/product-demo-hero.md	Princípios de hero com demonstração do produto + guia de design de cena	Ler quando o usuário quiser mostrar o fluxo de trabalho do produto no hero (ver Passo 3/4)

A garantia de qualidade desta skill vem do uso destes ativos. Eles codificam decisões de design específicas que tornam as saídas distintas. Não descreva o que fazer — copie o código e adapte-o.

---

O Fluxo de Trabalho

Passo 1: Entender o Produto

Reutilizar o produto e estilo que o usuário já forneceu; perguntar apenas quando faltar informação do produto:

"Me conte sobre o que é sua landing page — nome do produto/serviço e uma frase de descrição."

Quando o usuário já forneceu a descrição do produto, já escolheu uma cidade ou delegou a decisão ao Agent, ir diretamente para a etapa correspondente.

Passo 2–3: Pré-visualização opcional de estilo e layout

Quando o usuário já tiver uma escolha, reutilizá-la diretamente; quando o Agent precisar escolher, ler a entrada da cidade relevante, justificar a escolha e prosseguir. Se for necessário comparar, gerar pré-visualização local seguindo o fluxo de pré-visualização. Se não houver capacidade de pré-visualização disponível, oferecer algumas opções na conversa, sem considerar que abrir a página significa que o usuário já escolheu.

Passo 4: Gerar a Landing Page

Gerar em {product-name}-landing/:

{product-name}-landing/
├── index.html
├── style.css
├── main.js
└── assets/
    └── icons.svg

4a — Montagem via Bash (fazer isso primeiro, antes de escrever qualquer arquivo)

O objetivo é evitar gerar código dos ativos inclusos como tokens do modelo. Em vez disso, usar Bash para copiar e redirecionar os ativos prontos para os arquivos de saída. Apenas conteúdo específico do produto (texto, tokens, sobrescritas) é escrito pelo modelo.

Passo 1 — Criar diretórios

_SKILL_DIR="<caminho absoluto da Skill atual>"
_OUT="./{product-name}-landing"
mkdir -p "$_OUT/assets"

Passo 2 — Montar variantes de seção em um arquivo de staging

Planejar quais variantes usar (ver tabela abaixo), depois redirecionar cada uma para um arquivo de staging:

# Substituir B / C / B / PRICING pelas escolhas reais do usuário
python3 "$_SKILL_DIR/assets/scripts/extract_variant.py" \
  "$_SKILL_DIR/assets/sections/hero-variants.html" B > "$_OUT/_sections.html"
python3 "$_SKILL_DIR/assets/scripts/extract_variant.py" \
  "$_SKILL_DIR/assets/sections/features-variants.html" C >> "$_OUT/_sections.html"
python3 "$_SKILL_DIR/assets/scripts/extract_variant.py" \
  "$_SKILL_DIR/assets/sections/testimonial-variants.html" B >> "$_OUT/_sections.html"
python3 "$_SKILL_DIR/assets/scripts/extract_variant.py" \
  "$_SKILL_DIR/assets/sections/conversion-variants.html" PRICING >> "$_OUT/_sections.html"
python3 "$_SKILL_DIR/assets/scripts/extract_variant.py" \
  "$_SKILL_DIR/assets/sections/conversion-variants.html" CTA >> "$_OUT/_sections.html"

Para testimonials usar: A, B, C, D, E, F Para seções de conversão usar: PRICING, COMPARE_PRICING, BRAND_WALL, CTA, FAQ_A, FAQ_B

Passo 3 — Copiar utilitários CSS inclusos para a base do style.css

# Textura: usar flag --texture (nunca ler o city-styles.md completo)
python3 "$_SKILL_DIR/assets/scripts/get_city_tokens.py" "NOME_DA_CIDADE" --texture > "$_OUT/_texture.css"
# Clip-paths: copiar todas as classes, o modelo escolhe quais aplicar via nomes de classe
cat "$_SKILL_DIR/assets/clip-paths.css" >> "$_OUT/_texture.css"

Passo 4 — Copiar snippets GSAP para a base do main.js

cat "$_SKILL_DIR/assets/gsap-snippets.js" > "$_OUT/_gsap-base.js"

Agora ler os três arquivos de staging (_sections.html, _texture.css, _gsap-base.js) para entender o que está disponível e depois escrever os arquivos finais.

4b — Referência de Variantes de Seção

Sequências de página comuns:

• Ferramenta SaaS: Hero D → Features C → Features A → Testimonials A → Pricing → FAQ A → CTA
• Portfólio de Agência: Hero A → Features B → Testimonials C → CTA
• Ferramenta para Desenvolvedores: Hero B → Features C → Features A → Testimonials A → Pricing → FAQ B → CTA
• Produto de Luxo: Hero C → Features B → Testimonials B → CTA
• App B2C: Hero E → Features E → Testimonials F → CTA

Se o usuário precisa de...	Use este template	Variante
Hero — declaração ousada massiva	Fullscreen expansivo	A
Hero — visual do produto + manchete	Tela dividida	B
Hero — elegante, foco na história	Minimalista descendente	C
Hero — produto tem um fluxo de trabalho para mostrar	Demonstração do produto	D (ler também references/product-demo-hero.md)
Hero — liderado por tipografia, alto impacto	Explosão tipográfica	E
Hero — storytelling editorial	Rasgo de revista	F
Hero — lançamento lúdico do produto	Cards pop-up	G
Features — foco em dados/métricas	Grandes números	A
Features — screenshots do produto	Exibição alternada	B
Como funciona — passo a passo	Timeline	C
Features — blocos de história modulares	Bento grid	D
Features — faixa de capacidade navegável	Faixa de scroll horizontal	E
Features — tratamento de objeções	FAQ expansível	F
Tabela de preços	Tabela de preços	PRICING
Comparação de preços com alternância	Comparação de preços	COMPARE_PRICING
Testimonials — grid compacto	Grid compacto de cards	A
Testimonials — estilo revista	Mural de citações em coluna única	B
Testimonials — layout mosaico	Mosaico	C
Testimonials — scroll horizontal	Faixa horizontal	D
Testimonials — balões de conversa	Balões de diálogo	E
Testimonials — mural de avatares	Mural de avatares em vídeo	F
Logotipos de marcas confiáveis	Mural de marcas	BRAND_WALL
CTA final	Área de CTA poderosa	CTA
FAQ — layout editorial	Tipo editorial	FAQ_A
FAQ — grid de cards	Tipo foco total	FAQ_B

4c — Escrever os Arquivos de Saída

index.html — Escrever com a ferramenta Write. Nenhum bloco markdown, diretamente para o arquivo.

• Estrutura do documento: <html>, <head> (Google Fonts, CDN GSAP, link para style.css + main.js), <body>
• HTML do Nav correspondente ao estilo de nav selecionado
• Colar blocos <style> e HTML <section> de _sections.html na ordem da página
• Substituir todo o texto de placeholder pelo texto real do produto — adequar ao tom de voz da estética da cidade
• Sem Lorem Ipsum, sem texto de placeholder
• Quebrar a uniformidade do template: variar o peso visual entre os itens de cada seção. O template mostra um padrão repetitivo — tornar um item o ponto focal (fundo de destaque, card maior, selo de destaque, layout interno diferente) e deixar os outros recuarem. Nenhuma seção deve parecer uma grade de clones.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>

style.css — Escrever com a ferramenta Write. Estrutura:

1. Bloco :root — sistema completo de tokens de design: cores dos tokens $CITY_*, fontes escolhidas, escala de espaçamento, raios. Esta é a única parte que o modelo escreve do zero.
2. Colar CSS de textura + clip-path de _texture.css
3. CSS do Nav correspondente ao estilo de nav selecionado (de references/nav-catalog.md)
4. Sobrescritas de layout e tipografia — apenas o que diferir dos padrões da seção

Usar clamp() para TODOS os tamanhos de fonte de título:

• Título principal do Hero: clamp(2.8rem, 7vw, 7rem) — mesmo os expansivos não ultrapassam 7rem
• Título de seção: clamp(2rem, 4vw, 4rem)
• Números grandes/decorativos: clamp(4rem, 10vw, 9rem)
• Subtítulo/texto explicativo: clamp(1rem, 1.4vw, 1.2rem)

NÃO adicionar comentários ao style.css — eles consomem tokens e não agregam valor ao arquivo de saída.

main.js — Escrever com a ferramenta Write. Estrutura:

1. gsap.registerPlugin(ScrollTrigger)
2. Colar as funções relevantes de _gsap-base.js — mínimo obrigatório:
   • initHeroEntrance() — escalonar a entrada dos elementos do hero
   • initParallax() — pelo menos 2 camadas em velocidades diferentes
   • Revelação de títulos de seção ao entrar na viewport
   • initStickySteps() OU initBlastMenu() OU initMagneticPill() — correspondente ao nav/layout
3. Sequência de chamadas no final; ScrollTrigger.refresh() após o carregamento das fontes

NÃO adicionar comentários ao main.js.

assets/icons.svg — Sprite SVG com elementos <symbol>. No mínimo: marca do logotipo, alternância de nav, seta, marca de verificação, 2–3 ícones de funcionalidade relevantes ao produto. O estilo do ícone deve corresponder ao peso do traço e geometria da estética da cidade.

Após todos os arquivos serem escritos, deletar os arquivos de staging:

rm -f "$_OUT/_sections.html" "$_OUT/_texture.css" "$_OUT/_gsap-base.js"

---

Leis de Design (Nunca Quebrar Estas)

1. Sem fundos #ffffff. Nem em seções, nem em cards. Neutros quentes: #f5ede0. Frios: #edf0ee. Escuros: #08060f. Cards recebem um leve tom, nunca branco puro.
2. Sem #6366f1. A cor vem da paleta do estilo da cidade.
3. Decidir o tipo de transição independentemente para cada limite de seção. Cada par de seções adjacentes tem sua própria relação visual — não reutilizar a mesma classe de clip-path em todos os lugares. O usuário escolhe uma direção de transição (geométrica nítida / orgânica suave / sobreposição mesclada / linha mínima / IA automática) na pré-visualização de opções. Usar essa direção para limitar quais classes escolher: GEOMETRIC → diagonais, chanfros, degraus; ORGANIC → curvas, vieiras, arcos; BLEND → sobreposições e dissoluções gradiente; MINIMAL → regras finas. Se __AI_CHOOSE__, primeiro escanear a entrada da cidade selecionada em references/city-styles.md em busca de linguagem sobre divisores/transição. Depois aplicar lógica por limite: considerar o que as duas seções são (hero → features, features → pricing, etc.), sua energia relativa e o ritmo geral da página. Classes disponíveis em assets/clip-paths.css: diagonal (clip-diagonal-*, clip-parallelogram), curvas (clip-round-bottom, clip-scallop, clip-arc-bottom), dissolução gradiente (section-dissolve), regra plana (section-rule).
4. Sem ícones genéricos. Combinar com o peso do traço e geometria do estilo da cidade.
5. No mínimo duas tipografias. Fonte display/serifada para títulos + sem serifa limpa para corpo. De references/city-styles.md. Fontes decorativas/script de destaque (quando um estilo de cidade mencionar uma) devem ser usadas em marcas d'água, citações destacadas ou elementos ornamentais — nunca em botões, nav ou texto do corpo.
6. O Nav deve surpreender. Usar o nav escolhido de references/nav-catalog.md com seu elemento surpresa completo implementado.
7. Usar os ativos inclusos. A textura, snippets GSAP e clip-paths devem vir dos arquivos de ativos da skill — não reimplementados do zero.
8. Correção .line-wrap para CJK. Sempre que a página tiver texto em chinês ou japonês e usar .line-wrap { overflow: hidden } para animações de revelação de linha, adicionar padding-top: 0.15em; margin-top: -0.15em; para evitar que ascendentes CJK sejam cortados no topo.
9. Sem grids de clones. Quando uma seção contiver vários itens repetidos (linhas de funcionalidades, cards de preços, itens de FAQ, depoimentos), eles não devem compartilhar o mesmo tratamento visual. Um item deve ser o ponto focal — maior, com destaque ou com layout distinto — enquanto os outros formam o elenco de apoio. Uma seção deve parecer um pôster com hierarquia visual, não uma planilha de linhas idênticas. Esta é a maior causa de páginas parecerem "templatizadas" em vez de projetadas.

---

Arquivos de Referência

• references/city-styles.md — Parâmetros exatos de design (fontes, cores, texturas, movimento, ícones) para cada estética de cidade
• references/nav-catalog.md — 4 estilos de nav com notas de implementação completas e código GSAP
• references/imagery-derivation.md — Como traduzir qualquer descrição não relacionada a cidade (cena, era, material, emoção) em um sistema concreto de tokens de design. Ler sempre que o usuário descrever algo que não seja um dos 57 cartões de cidade.
• references/product-demo-hero.md — Quando e como construir uma demonstração do fluxo de trabalho do produto orientada por tempo no Hero (Variante D). Inclui guia de design de cena, estrutura de 3 atos, padrões de callback onEnter() e tabela de mapeamento tipo de produto → cena. Ler sempre que o usuário quiser mostrar o processo do produto no hero.

Fatos e Degradação

Avaliações, logotipos de clientes, números de usuários e preços nos templates são apenas exemplos estruturais; se não houver evidência, remover ou substituir por descrições reais do produto, sem inventar endossos. A implementação deve suportar operação por teclado, prefers-reduced-motion e conteúdo legível estático em caso de falha de carregamento de scripts/CDN. As notas de aceitação visual devem descrever a viewport e estado realmente verificados; não afirmar que a aprovação visual foi feita sem renderização.