aurora-ember-bio-lab/splatstudio

kami-landing

Produza um documento de página única no sistema de design kami (紙 / 纸). A estética se inspira na impressão editorial, white papers técnicos e correspondência datilografada antiga — o objetivo é conteúdo de qualidade em bom papel, não interface de aplicativo moderna.

Fonte de verdade do sistema de design: design-systems/kami/DESIGN.md. Leia-a antes de entregar. Tokens, regras tipográficas, os "dez invariantes" e cores proibidas estão todos lá.

O que você obtém

Um único arquivo HTML autossuficiente com:

• Tela de pergaminho quente (#f5f4ed) — nunca #ffffff.
• Um único detalhe cromático — azul tinta (#1B365D), usado no número da seção, na palavra de destaque do título, na regra esquerda do manifesto e nos valores das métricas. Em qualquer outro lugar, o azul tinta deve cobrir ≤ 5% da área da superfície do documento.
• Serifa em um único peso (500) para hierarquia — Charter (EN), TsangerJinKai02 / Source Han Serif (CN) ou YuMincho (JA), selecionado pelo parâmetro language. Nenhum itálico em lugar algum.
• Ritmo de impressão justo — entrelinhas de 1,10–1,55, espaçamento entre letras por idioma (0 para EN, 0,35px para CN, 0,02em para JA).
• Pilhas numéricas configuradas com font-variant-numeric: tabular-nums para que colunas de métricas e dígitos de paginação fiquem alinhados de forma limpa.
• Profundidade por meio de anéis de 1px + sombras suaves (0 4px 24px rgba(0,0,0,0.05)). Sem sombras projetadas fortes, sem neumorfismo, sem desfoques de backdrop-filter.
• Preenchimentos de tags como hex sólido (ex.: #E4ECF5), nunca rgba() — renderizadores de impressão pintam duas vezes tags alfa.
• Responsivo em 1280 / 980 / 768 / 560.

Estrutura da página

1. Linha de sobrancelha — alternador de localidade · edição · versão (12px sans maiúsculas)
2. Hero            — título de exibição (96–106px serifa 500), subtítulo (21px),
                     três chips de token do hero (tingidos de papel)
3. Manifesto       — parágrafo de destaque em serifa 400, 20px, 1,65 AE, com
                     regra esquerda azul tinta e rodapé de assinatura
4. Linha de métricas — 3-6 células: valor (24px serifa 500 azul tinta, tabular-nums),
                     rótulo (12px serifa 500 oliva)
5. Capítulos        — numerados (`01`, `02`, …) azul tinta serifa 500 14px,
                     título da seção 28-32px, corpo 14-15px
6. Rodapé          — palavra de destaque (mega serifa 500), licença · ano · contato,
                     índice do site em três colunas em 12px serifa 500

Contrato de fluxo de trabalho

1. Coletar resumo da marca

Use AskQuestion (ou equivalente) para coletar o resumo da marca em partes. Não despeje toda a lista de entrada no usuário; pergunte em duas rodadas:

1. Rodada de identidade — nome, slogan, localização, edição / versão, URL principal, idioma dominante.
2. Rodada de conteúdo — parágrafo do manifesto + assinatura, 3-6 blocos de métrica, 3-5 entradas de capítulo (título + lead + corpo).

2. Escolher a pilha de idiomas

O parâmetro language controla qual pilha --serif é definida em :root. Escolha com base no idioma dominante do manifesto e corpo do capítulo:

language	--serif	Observações
en	Charter, Georgia, Palatino, Times New Roman, serif	padrão
zh-CN	TsangerJinKai02, Source Han Serif SC, Songti SC, Georgia	espaçamento entre letras 0,35px no corpo
ja	YuMincho, Hiragino Mincho ProN, Source Han Serif JP	também substituir --olive por #4d4c48 (os traços de YuMincho são mais finos)

Conteúdo misto de scripts em linha é aceitável — a cadeia de fallback por glifo do navegador lida com isso. Não encadeie todas as três famílias dentro de uma declaração font-family; isso dilui o caráter.

3. Escrever index.html

Gere um único arquivo com todo o CSS embutido. Espelhe a estrutura de example.html e use apenas os tokens de design-systems/kami/DESIGN.md. Não invente novas cores, pesos ou famílias de fontes.

Primitivas de componente que o agente pode inserir (todas definidas no bloco <style> do exemplo):

• .eyebrow, .label — overlines sem serifa
• .metric — par vertical valor + rótulo
• .section-num + .section-title + .section-lede
• .tag.standard, .tag.brush — tags hex sólidas (máximo um brush por página)
• .quote — citação serifa 500 com regra esquerda
• ul.dash — marcadores de travessão em azul tinta
• .code — bloco de código com fundo marfim e borda de 1px
• .footer-kicker — palavra mega serifa 500

Marque cada elemento editável com data-od-id="<slug-único>" para que o modo de comentário do aplicativo host possa segmentá-lo.

4. Autoverificação antes de entregar

• Fundo da página é pergaminho (#f5f4ed), nunca #ffffff.
• Azul tinta (#1B365D) cobre ≤ 5% da superfície visível — conte números de seção, regra do manifesto, valores das métricas, destaque do título. Total ≤ 5%.
• Todos os cinzas são quentes (R ≈ G > B). Nenhum slate-*, nenhum #f3f4f6.
• Peso da serifa permanece em 500 — nenhum font-weight: 700 ou 900 em texto serifado.
• Nenhum font-style: italic em lugar algum. Ênfase troca para cor azul tinta ou um .tag.
• Todas as pilhas numéricas (valores de métrica, paginação, datas, valores financeiros) carregam font-variant-numeric: tabular-nums.
• Todos os preenchimentos de tags são hex sólido (ex.: #E4ECF5), nunca rgba().
• Sombras: no máximo um anel de 1px ou uma sombra suave 0 4px 24px rgba(0,0,0,0.05). Sem sombras projetadas fortes.
• Título ≤ 6 palavras no tamanho de exibição; CJK ≤ 8 caracteres.
• Em 768px e 560px o layout colapsa para uma coluna sem rolagem horizontal.

Arquivos neste skill

design-templates/kami-landing/
├── SKILL.md                 # este contrato
├── README.md                # guia rápido humano
└── example.html             # renderização canônica SplatStudio

Limites

• Não invente novas cores ou tipos de letra. A paleta kami é fixa; se um resumo exigir uma cor de marca, recuse ou renderize a cor da marca como um único detalhe .tag.brush.
• Não introduza uma segunda cor de destaque. Escolha azul tinta ou escolha nada.
• Não misture as três pilhas de fontes em uma declaração; escolha o idioma dominante, substitua --serif em :root e deixe o fallback por glifo do navegador resolver conteúdo misto de scripts em linha.
• Não use rgba() para preenchimentos de tags — renderizadores de impressão pintam duas vezes tags alfa. Use o hex sólido pré-misturado da tabela em design-systems/kami/DESIGN.md §2.
• Não adicione JavaScript para animação. A página é papel, não um aplicativo — o movimento pertence à rolagem do leitor.

Veja também

• design-systems/kami/DESIGN.md — a especificação completa de tokens.
• design-templates/kami-deck/ — skill irmão que produz uma apresentação de slides na mesma linguagem kami.
• Upstream: tw93/kami — skill original do Claude (MIT) que o sistema de design adapta.