O que splatstudio-landing-deck faz?
Skill irmão do splatstudio-landing. Mesmo
sistema visual Atelier Zero (papel quente, Inter Tight + Playfair Display,
ênfase em itálico-serifado, pontos coral), mas paginado como um pacote
de slides horizontal no estilo revista em vez de uma página de rolagem longa.
O modelo de navegação é intencionalmente emprestado do skill
guizang-ppt — teclas ←/→, roda do mouse /
swipe, ESC para grade de visão geral — para que pareça a virada de
uma revista impressa, página por página, em vez de um slide deck web
com rolagem.
inputs.json + ../splatstudio-landing/styles.css
│
└──────────► scripts/compose.ts
│
▼
<out>/index.html
(um viewport por slide, swipe horizontal)
O que você obtém
- Um único arquivo HTML autossuficiente com N slides do tamanho do viewport, dispostos horizontalmente em uma faixa flex transformada.
- Navegação por teclado:
←/→·↑/↓· PageUp/PageDown · Espaço · Home/End. - Roda do mouse + swipe touch (com proteção de momentum para que um único movimento no trackpad não ultrapasse).
- Faixa cromada por slide: marca, título do deck, local,
ano em numeração romana, contador de slides ao vivo (
01 / 11). - Barra de progresso coral na parte inferior que preenche conforme você avança.
- Indicador de pontos próximo ao final; clique em qualquer ponto para saltar.
- Grade de visão geral com ESC — miniaturas redimensionadas de cada slide,
clique para saltar. Espelha a UX de visão geral do
guizang-ppt. - Reutiliza a mesma biblioteca de 16 imagens do skill irmão — sem ativos duplicados.
Tipos de slide
| Tipo | Use para |
|---|---|
cover | Placa de título no início. Cópia em 2 colunas + arte colagem. |
section | Divisor em numeração romana entre capítulos. Centralizado, sangria total. |
content | Sobrancelha + título + corpo + marcadores + arte colagem opcional. |
stats | Até 4 células grandes de estatísticas (valor · rótulo · sub-rótulo). |
quote | Citação em destaque + autor. Retrato colagem opcional à direita. |
cta | Pitch de encerramento + 1-2 botões. |
end | Palavra de encerramento em itálico-serifado gigante + rodapé de assinatura. |
Um pitch típico de 11 slides:
1. cover — placa de título, colagem herói
2. section — "I. O problema"
3. content — sobre / manifesto, marcadores
4. content — capacidades, marcadores
5. stats — 4 números
6. section — "II. Como se sente"
7. content — método, marcadores
8. content — trabalhos selecionados
9. quote — depoimento de cliente
10. cta — ação primária + secundária
11. end — encerramento gigante + assinatura
Fluxo de trabalho
1. Crie inputs.json
Comece a partir de inputs.example.json (o deck
de pitch Open Design). O bloco de marca, estratégia de imagem e caminho de
ativos espelham o skill irmão — se você já preencheu um resumo de
splatstudio-landing, copie brand e imagery diretamente.
Para cada slide, escolha um kind e preencha os campos tipados de
schema.ts. MixedText (linha de base sem serifa +
ênfase em itálico-serifado + ponto coral de terminação) é a mesma
codificação usada pelo skill irmão — veja o inputs.example.json dele.
2. (Opcional) Gerar ou criar imagens placeholder
Este skill não envia seu próprio gerador de imagens ou script
placeholder — ele compartilha a biblioteca de 16 slots de
splatstudio-landing. Para regenerar ou criar placeholders:
# gerar via gpt-image-2 (fal.ai)
FAL_KEY=... npx tsx ../splatstudio-landing/scripts/imagegen.ts ../splatstudio-landing/inputs.example.json --out=../splatstudio-landing/assets/
# ou placeholders SVG com textura de papel
npx tsx ../splatstudio-landing/scripts/placeholder.ts ../splatstudio-landing/assets/
Defina o inputs.imagery.assets_path do seu deck para onde esses
PNGs estiverem (padrão no exemplo: ../splatstudio-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 ../splatstudio-landing/styles.css, aplica regras
específicas do deck (faixa flex horizontal, layouts de slide, HUD,
navegação por pontos, grade de visão geral com ESC, manipuladores de
teclado / roda / touch) e escreve um único arquivo HTML autossuficiente.
4. Autoverificação
- Abra o HTML em uma nova aba do navegador; o slide 1 (cover) aparece
com a faixa cromada no canto superior direito mostrando
01 / N. - Pressione
→(ou Espaço, ou role para baixo). Desliza suavemente um viewport para a direita; a navegação por pontos avança; a barra de progresso coral avança. - Pressione
End. Salta para o slide final. - Pressione
Home. Retorna ao slide 1. - Pressione
Esc. A grade de visão geral aparece com miniaturas redimensionadas; clique em qualquer bloco para saltar e dispensar a visão geral. - Redimensione para 1080px e 640px. Os slides de capa / conteúdo colapsam para uma única coluna; a navegação por pontos ainda funciona; as faixas cromadas encolhem.
-
prefers-reduced-motion: reduce(DevTools → Rendering): as transições de página permanecem rápidas e não induzem enjoo. - Lighthouse: contraste AA, font-display swap, sem mudança de layout.
Limites
- Reutilize a folha de estilo do skill irmão. O compositor lê
../splatstudio-landing/styles.cssno momento da compilação. Não mantenha uma cópia duplicada aqui; se os tokens do Atelier Zero evoluírem, edite-os uma vez no skill irmão. - Reutilize a biblioteca de imagens do skill irmão. Não há necessidade de re-prompt ou re-renderizar — as mesmas 16 placas funcionam para ambas as superfícies.
- Mantenha os slides em um único viewport. Se o conteúdo de um slide não couber em 100vh × 100vw a 1280×800, ele transbordará e parecerá apertado. Corte a cópia ou divida em dois slides.
- Não mude para scroll-snap vertical. A postura de swipe horizontal é o que faz este skill parecer uma revista; um scroller vertical seria apenas uma landing page longa.
- Não adicione um roteador. Este é um artefato de arquivo único. Decks de várias páginas estão fora do escopo; para uma experiência com vários decks, renderize cada deck separadamente e vincule a partir de um índice pai.
Veja também
splatstudio-landing— skill irmão de landing page.guizang-ppt— o padrão de navegação de deck revista que este skill empresta.design-systems/atelier-zero/DESIGN.md— especificação de tokens.