kami-deck

Habilidade irmã de kami-landing. Produz um único arquivo HTML autônomo: um deck de deslize horizontal em estilo de revista no sistema de design kami (紙 / 纸) — ritmo de impressão, acento azul-tinta, serifado em um peso, sem itálico, sem tons de cinza frios.

O modelo de navegação é intencionalmente emprestado da habilidade guizang-ppt — teclas de seta ←/→, roda / deslize, ESC para a grade de visão geral. A estética permanece kami: slides de conteúdo em pergaminho, capa e slides de capítulo em azul-tinta, serifado em todos os lugares.

Fonte da verdade do sistema de design: design-systems/kami/DESIGN.md. Leia antes de publicar. Tokens, regras de tipografia e cores proibidas vivem lá. Razões de escala específicas do slide (macro × 1.6, espaçamento entre letras × 0.6 vs. impressão) são documentadas em §3 "Hierarquia" e §5 "Princípios de Layout · Slides".

O que você recebe

• N slides de tamanho de viewport (6-15 é o ponto ideal) dispostos horizontalmente em uma única trilha flexível transformada.
• Slides de capa e capítulo invertem o fundo para azul-tinta (#1B365D) com texto marfim — o único lugar onde o tema escuro é usado.
• Slides de conteúdo / estatísticas / citação / CTA permanecem em pergaminho (#f5f4ed) com serifado no peso 500.
• Faixa de cromo por slide: marca da marca · título do deck · contador de slide ativo (01 / 09).
• Números tabulares em todos os contadores, métricas, números de página.
• Livre de coral — o acento do kami é azul-tinta. A barra de progresso e a navegação por pontos também são azul-tinta.
• Navegação por teclado / roda / toque, grade de visão geral ESC, indicador de ponto.
• Pilha multilíngue — EN / zh-CN / ja, definida em :root via o parâmetro language.

Tipos de slide

Um deck típico de 11 slides:

1. cover     — ink-blue title plate
2. chapter   — "01 / Why now"
3. content   — manifesto
4. content   — capabilities + bullets
5. stats     — 4 numbers
6. chapter   — "02 / How it feels"
7. content   — method
8. content   — selected work
9. quote     — testimonial
10. cta      — primary action
11. end      — ink-blue kicker

Fluxo de trabalho

1. Reunir o briefing

Pergunte em duas rodadas (não despeje a lista inteira de uma vez):

1. Rodada de identidade — nome, marca, slogan, localização, edição, idioma.
2. Rodada de conteúdo — para cada slide, tipo + os campos digitados.

2. Escolher a pilha de idiomas

O mesmo que kami-landing: EN → Charter, zh-CN → TsangerJinKai02 / Source Han Serif, ja → YuMincho. JA também substitui --olive por #4d4c48 porque os traços do YuMincho são mais finos.

3. Escrever index.html

Produza um único arquivo com todo o CSS inline. Espelhe a estrutura de example.html. Use apenas os tokens de design-systems/kami/DESIGN.md.

O script de tempo de execução (navegação por teclado / roda / toque, indicador de ponto, barra de progresso, grade de visão geral ESC) deve corresponder ao modelo documentado em open-design-landing-deck/scripts/compose.ts. Não reutilize o CSS do open-design-landing-deck; a linguagem visual é diferente.

4. Autoverificação

• Todos os slides de capa / capítulo / fim usam fundo azul-tinta (#1B365D) com texto marfim. Todos os outros slides estão em pergaminho.
• Capas azul-tinta ≤ 5% da superfície de qualquer slide de pergaminho.
• Títulos de slide usam apenas serifado no peso 500. Sem itálico.
• Todas as pilhas numéricas (contador, métricas, números de página) carregam font-variant-numeric: tabular-nums.
• Pressione → / Space / role. Desliza suavemente um viewport para a direita; a navegação por pontos avança; a barra de progresso azul-tinta avança.
• Pressione Esc. A grade de visão geral aparece com miniaturas dimensionadas.
• Redimensione para 1080px e 640px. Capa / conteúdo colapsam em uma única coluna; a navegação por pontos ainda funciona.

…