open-design-landing-deck

Habilidade irmã de open-design-landing. Mesmo sistema visual do Atelier Zero (papel aquecido, Inter Tight + Playfair Display, ênfase em serifas itálicas, pontos corais), mas paginado como um deck de deslize horizontal estilo revista em vez de uma página longa de rolagem.

O modelo de navegação é intencionalmente emprestado da habilidade guizang-ppt — teclas de seta ←/→, roda / deslize, ESC para a grade de visão geral — então parece uma revista impressa virando página por página em vez de um deck de slides da web rolando.

inputs.json + ../open-design-landing/styles.css
        │
        └──────────► scripts/compose.ts
                            │
                            ▼
                   <out>/index.html
                   (one viewport per slide, horizontal swipe)

O que você recebe

• Um único arquivo HTML autônomo com N slides de tamanho de viewport dispostos horizontalmente em uma trilha flexível transformada.
• Navegação por teclado: ←/→ · ↑/↓ · PageUp/PageDown · Espaço · Home/End.
• Roda + deslize por toque (com proteção de momentum para que um único movimento rápido do trackpad não ultrapasse).
• Faixa de cromo por slide: marca da marca, título do deck, local, ano em numeral romano, contador de slides em tempo real (01 / 11).
• Barra de progresso coral na parte inferior que preenche conforme você avança.
• Faixa de indicador de ponto perto da parte inferior; clique em qualquer ponto para pular.
• Grade de visão geral ESC — miniaturas dimensionadas de cada slide, clique para pular. Espelha a UX de visão geral de guizang-ppt.
• Reutiliza a mesma biblioteca de imagens de 16 slots da habilidade irmã — sem ativos duplicados.

Tipos de slide

Um pitch típico de 11 slides:

1. cover     — title plate, hero collage
2. section   — "I. The problem"
3. content   — about / manifesto, bullets
4. content   — capabilities, bullets
5. stats     — 4 numbers
6. section   — "II. How it feels"
7. content   — method, bullets
8. content   — selected work
9. quote     — customer testimonial
10. cta      — primary + secondary action
11. end      — mega kicker + signature

Fluxo de trabalho

1. Autor inputs.json

Comece em inputs.example.json (o deck de pitch do Open Design). O bloco da marca, a estratégia de imagem e o caminho dos ativos espelham a habilidade irmã — se você já preencheu um brief de open-design-landing, copie brand e imagery verbatim.

Para cada slide, escolha um kind e preencha os campos digitados de schema.ts. MixedText (linha de base sem serifa + trechos de ênfase em serifas itálicas + ponto coral terminador) é a mesma codificação usada pela habilidade irmã — veja sua inputs.example.json.

2. (Opcional) gerar ou stub de imagens

Esta habilidade não envia seu próprio gerador de imagens ou script de placeholder — ela compartilha a biblioteca de 16 slots de open-design-landing. Para regenerar ou stub:

# generate via gpt-image-2 (fal.ai)
FAL_KEY=... npx tsx ../open-design-landing/scripts/imagegen.ts ../open-design-landing/inputs.example.json --out=../open-design-landing/assets/

# or paper-textured SVG placeholders
npx tsx ../open-design-landing/scripts/placeholder.ts ../open-design-landing/assets/

Defina o inputs.imagery.assets_path do seu deck para onde esses PNGs residem (padrão no exemplo: ../open-design-landing/assets/).

3. Compor o deck

npx tsx scripts/compose.ts inputs.json out/index.html

O compositor lê inputs.json, carrega a folha de estilo canônica do Atelier Zero de ../open-design-landing/styles.css, sobrepõe regras específicas do deck (trilha flexível horizontal, layouts de slide, HUD, navegação por pontos, visão geral ESC, manipuladores de teclado / roda / toque) e escreve um arquivo HTML autônomo.

4. Autoverificação

• Abra o HTML em uma nova aba do navegador; o slide 1 (capa) é exibido com a faixa de cromo no canto superior direito mostrando 01 / N.

…