SHELEG Design
Visão Geral
Uma página parece cinematográfica não por muitas animações, mas por uma única fonte de verdade (posição de scroll medida) impulsionando muitas respostas baratas, em camadas e independentemente degradáveis. Centralize o scroll em um único store; as camadas o leem por frame e reagem em sua própria linguagem. Nada faz crossfade — as coisas reimplantam-se. Cada camada degrada para um estado estático e calmo.
REFERÊNCIA OBRIGATÓRIA — para o caminho cinematográfico: leia SHELEG_DESIGN.md antes de implementar uma página conduzida por scroll — arquitetura, matemática de morph, a ponte DOM↔WebGL, a receita de build (§11), o mapa de arquivos.
Trabalhos de UI de produto não exigem esta leitura; a única regra que exigiriam é repetida aqui: onde os tokens de movimento de um pacote diferem dos padrões do SHELEG, o pacote vence.
OBRIGATÓRIO ANTES DE QUALQUER ANIMAÇÃO: leia MOTION_DOCTRINE.md. O SHELEG_DESIGN.md diz como o movimento é construído; a doutrina diz se deve construí-lo — a tabela de frequência que mata animação em caminhos de alta repetição, a árvore de easing e a proibição de ease-in, o teto de duração, as formas proibidas e o contrato de movimento reduzido.
Quando Usar
- Landing pages / marketing / hero onde o movimento é um objetivo declarado; fundos de partículas ou WebGL vinculados ao scroll; gráficos, fluxos de etapas, trilhos, parallax vinculados ao scroll
- Um site de scroll existente que parece nervoso, instável ou fora de fase
- UI de produto que precisa de um sistema visual bloqueado — dashboards, admin, ferramentas internas/dev, tokens, claro/escuro — apenas pacote de estilo, via
workbench - Superfícies de produto de IA: chat e UI de agente, saída em streaming, logs de execução, erros de modelo, estados de conteúdo gerado e confirmação (
AI_PRODUCT_PATTERNS.md) - Mover um sistema visual através da fronteira do Figma em qualquer direção (
FIGMA_BRIDGE.md)
Nunca aplique a camada de movimento cinematográfica a: UI de produto, sites de documentação, sites de conteúdo estático — ou qualquer página cujo sistema visual ou cópia ainda não esteja finalizado. A UI de produto leva a metade do pacote de estilo e nada mais.
Padrão Central — cinco princípios, em ordem
- Um relógio. Todo movimento deriva de um único estado de scroll medido; nenhuma camada mede o scroll por si só, então as camadas nunca podem derivar fora de fase.
- Leia por frame, notifique raramente. Consumidores quentes (WebGL/canvas/rail) leem o store imperativamente, zero renders do framework; apenas mudanças grossas de ato/seção notificam o framework.
- Segure, depois reimplante. Segure uma formação ~80% de uma seção, depois faça morph em uma onda curta, defasada por fase e em arco curvo. Crossfades são proibidos.
- Movimento merecido. Scrub apenas para instrumentos que narram estado ao longo do tempo; movimento de hover/entrada permanece abaixo de 500ms e nunca bloqueia conteúdo.
- Degrade para calma. Movimento reduzido / ponteiro grosseiro / sem WebGL colapsam para uma página estática e completamente legível. O efeito é um bônus, nunca uma dependência.
Pacotes de Estilo
A metodologia de movimento é agnóstica em relação ao estilo; a identidade visual vem de um pacote de estilo em styles/. Cada arquivo de pacote abre com sua própria descrição completa — esta tabela é para escolher, não para ler em vez do pacote:
| Pacote | Aparência | Escolha para |
|---|---|---|
instrument-console | console aeroespacial quase preto, um azul elétrico, telemetria mono | técnico / sistemas / infra · contrato central |
editorial-luxury | tinta creme e espresso, acento sage, Fraunces/Newsreader | editorial / pesquisa / B2B premium · contrato central |
workbench | UI de produto claro/escuro silenciosa, bordas como elevação, dados mono | dashboards / admin / ferramentas internas & dev (autônomo) · contrato central |
briefing-room | deck escuro 16:9, um tom azul em OKLCH, arte ditherizada | decks de investidores e conselho, briefings, talks como página (autônomo) · contrato central |
atrium | luz do dia creme, um terracota, vidro canelado sobre fotografia | saúde do consumidor, longevidade, bem-estar, DTC de alta confiança · contrato central |
orchard | lajes de aveia quentes, sage mais laranja doce, pílulas soft-3D | biotecnologia amigável ao consumidor, bem-estar DTC, kits e suplementos · contrato central |
field-notes | papel com tom verde pautado por fios finos, acento ferrugem, marcas de corte | código aberto e ferramentas de desenvolvedor vendidas em auditabilidade (autônomo) |
showroom | galeria branca, tinta quase preta, uma sombra de moldura de sete camadas | empresas lideradas por produto cujo melhor argumento é o aplicativo na tela |
blueprint | estoque branco, uma grade de 32px, marcas de registro, sem raio | infraestrutura vendida em precisão — busca vetorial, armazenamento, motores de consulta |
prism | lavagem iridescente com uma borda dura, grotesco sobre corpo mono | a porta de entrada de um projeto de infraestrutura OSS, onde o primeiro passo é um comando |
maquette | mesa quase preta, modelos axonométricos creme, verde-água pálido | infraestrutura de dados empresariais vendida a um comprador de arquitetura |
cyclorama | campo pastel em um loop de 32s, serifa de máquina de escrever, preenchimento laranja | transformação de IA empresarial e consultorias de IA aplicada |
scoreboard | papel quente, tinta primária, laranja quente que apenas marca, numerais pixel | produtos cujo argumento é um número acumulado — crescimento, anúncios, SEO |
Um kit materializado responde a parte do que um pacote central deixa de fora. npx sheleg-design-skill --kit <pacote> produz src/styles.css, cuja metade de componente é CSS escrito para os estados que um pacote central se recusa a especificar — :hover, :focus-visible, :disabled, selecionado. Ele não vem com esta skill, então um agente lendo apenas este pacote os inventará. Busque o kit primeiro, e trate qualquer diferença entre kit e pacote como um defeito em um deles, em vez de uma escolha.
Seis dos treze estão no contrato central, e isso muda o que você obtém. Um pacote marcado como contrato central não especifica ## Componentes, ## Hero, ## Responsivo ou ## Elemento de assinatura — então estados por componente, a viewport de abertura e seu teto de linha, as regras de colapso e o único elemento pelo qual a página é lembrada são seus para decidir, e você diz isso em voz alta quando o faz. Os outros sete respondem a todos os quatro. Essa assimetria é a única coisa sobre a biblioteca com maior probabilidade de fazer você inventar um valor e acreditar que o leu: o que um pacote central afirma é medido com duas casas decimais, e essa precisão não é evidência sobre a metade que ele deixa silenciosa. Cada pacote declara seu próprio nível em uma linha Contrato: acima de seu Registro.
Leia o pacote escolhido por completo antes de estilizar qualquer coisa — ele fornece a paleta, tipo, textura, valores de token de movimento, motivos de assinatura e proibições. Cada pacote vem com uma camada de token pronta em styles/tokens/<pacote>.css — copie esse arquivo literalmente em vez de transcrever tabelas. Para um novo estilo, copie styles/STYLE_PACK_TEMPLATE.md e mantenha todos os cabeçalhos — Registro / Paleta / Tipo / Textura e superfície / Componentes / Hero / Responsivo / Tokens de movimento / Motivos de assinatura / Elemento de assinatura / Sabor do movimento (apenas pacotes cinematográficos) / Micro-interações / Proibições / Pegadinhas — então crie seu tokens/<pacote>.css na mesma alteração; nunca invente valores de token ad hoc.
Calibração — três dials
Um pacote responde qual registro. Ele não responde quão longe. Duas landing pages no mesmo pacote, uma para uma seguradora regulamentada e outra para um estúdio de design, não são a mesma página. Três dials carregam essa diferença, e eles são definidos uma vez, em voz alta, antes de qualquer layout existir.
DESIGN_VARIANCE1–10 — 1 é simetria perfeita, 10 é assimetria deliberada e nenhuma seção igual.MOTION_INTENSITY1–10 — 1 é estático, 10 é cinematográfico e físico.VISUAL_DENSITY1–10 — 1 é uma parede de galeria, 10 é um cockpit.
Linha de base 7 / 5 / 4. Declare os valores e uma linha de raciocínio antes de construir; não peça ao usuário para editar um arquivo, e não se desvie silenciosamente do que você anunciou.
Lendo-os a partir do briefing
| O briefing lê como | VARIANCE | MOTION | DENSITY |
|---|---|---|---|
| minimalista, calmo, editorial, "silencioso como Linear" | 5–6 | 3–4 | 2–3 |
| consumidor premium, liderado por marca, "parece caro" | 7–8 | 5–7 | 3–4 |
| agência, portfólio, experimental, isca de prêmio | 9–10 | 7–9 | 3–4 |
| landing / marketing page, nenhum outro sinal | 7 | 5 | 4 |
| UI de produto: dashboards, admin, ferramentas internas | 4–5 | 2–3 | 6–8 |
| primeiro a confiança: regulamentado, setor público, clínico | 3–4 | 2–3 | 4–5 |
| deck de apresentação | 5–6 | 1–2 | 3–4 |
| redesign, preservar a identidade existente | igualar | igualar +1 | igualar |
| redesign, revisão explícita | +2 | +2 | igualar |
Um briefing pode corresponder a duas linhas, e elas podem discordar por um fator de três. "Um dashboard administrativo interno silencioso" dispara tanto "silencioso como Linear" (DENSITY 2–3) quanto "UI de produto" (DENSITY 6–8). A regra de precedência: a linha que nomeia a superfície vence sobre a linha que nomeia um humor. Uma superfície decide quanto precisa caber; um humor decide como é tratado — em um pacote de UI de produto, "silencioso" é comprado com moderação na cor e no movimento, não com vazio. Diga qual linha você pegou e por que quando duas disparam.
Como eles se vinculam
- O pacote vence nos valores, os dials vencem na quantidade. Um dial nunca inventa uma cor, uma face ou um raio — estes vêm da camada de token do pacote. Ele decide quanta assimetria a grade carrega, quanto da página se move e quão apertado ela é embalada.
MOTION_INTENSITYé limitado pela tabela de frequência, não o contrário. Um 9 em uma tela de configurações ainda significa que o caminho do teclado não anima. LeiaMOTION_DOCTRINE.md§1 primeiro; o dial aumenta o que resta depois que a tabela cortou.- Movimento reivindicado é movimento mostrado. Acima de 4, a página realmente se move — entrada no hero, revelação em seções-chave, resposta na ação primária. Uma página estática anunciando 7 está quebrada. Se o movimento funcional não couber no escopo, abaixe o dial para 3 e envie uma página estática limpa; nunca construa meio movimento que trava, corta ou pula.
- Um pacote autônomo fixa seu próprio teto.
workbenchebriefing-roomnão são cinematográficos;MOTION_INTENSITYacima de 3 em qualquer um deles é uma má interpretação do pacote, não uma escolha ousada.field-notesé autônomo por padrão e pode optar pela camada cinematográfica — ele carrega uma seção## Sabor do movimentodizendo como — então é o único pacote autônomo sem um teto duro. Leia essa seção antes de aumentar o dial nele.
A barra de ofício — o que "pronto" significa, em ordem
Quando qualquer um pode gerar um protótipo com um prompt, o ofício é o único diferencial restante. Designers classificam o que significa (Figma, State of the Designer 2026, n=906): polimento visual 58% · resolução de problemas ponderada 47% · UX clara e intuitiva 36% · emoção e prazer 35% · consistência 15%. Leia isso como uma definição de pronto, nessa ordem:
- Polimento — o pacote aplicado sem exceção: tokens, não literais; nenhum hex, raio ou tamanho de fonte ad hoc em qualquer lugar do diff.
- Pensamento sistêmico — a decisão visual vive em um lugar (a camada de token, o registro
SCENES) e tudo o mais o lê. - UX clara — estrutura e comportamento não são metade desta skill; se os fluxos e estados não estão decididos, pare e decida-os primeiro.
- Emoção — apenas movimento merecido (princípio 4), e nunca ao custo de 1–3.
- Consistência — um ease, um conjunto de duração, um acento, um átomo por trabalho em cada tela.
Carregar sob demanda — três coisas que a camada de pacote não decide
- Profundidade de cena — seis camadas (
SURFACE_COMPOSITION.md), antes de escrever CSS para uma página cinematográfica. Uma cena tem planos; tudo em um plano é a falha que nenhuma quantidade de easing conserta. - Gráficos — passe o pacote para
dataviz(mesmo arquivo), antes de desenhar um gráfico em qualquer pacote. Os nomes dos tokens não são uniformes entre os treze — apenas--bge--inkresolvem em todos os lugares — e uma propriedade personalizada indefinida não gera erro, ela silenciosamente cai em fallback. Adivinhar uma é a maneira mais silenciosa de enviar um gráfico errado. - Superfícies móveis (
MOBILE_SURFACES.md), quando o briefing é uma tela de aplicativo nativo ou uma visualização web móvel — não uma página de desktop cuja única preocupação móvel é o colapso. Cinco regras móveis que os pacotes declaram sozinhos, uma sexta nenhum pacote responde (a rampa de tipo segue a largura da viewport, não o tamanho do texto do usuário), e a metade que nenhum pacote decide em um telefone: convenção da plataforma.
Escolhendo entre pacotes — monte-os, não os imagine
Quando mais de um pacote pode carregar um produto, não discuta sobre isso. Renderize-os.
Monte os pacotes candidatos em uma página existente e populada — cabeçalho real, dados reais, densidade real — alternada por um parâmetro de busca ?variant=<pacote>, e alterne entre eles no navegador. Apenas a camada de token muda; a marcação permanece.
Uma rota descartável com conteúdo de espaço reservado é um vácuo: todo pacote parece bom nela, que é precisamente por que não resolve nada. Se genuinamente não há página populada ainda, a escolha é prematura — construa a página no pacote para o qual o registro do briefing aponta, e revisite quando houver algo real para alternar. Se o briefing não dá nenhum sinal, os padrões são workbench para UI de produto e showroom para uma página de marketing: ambos são silenciosos o suficiente para que mudar para outro depois custe layout, não identidade. (Isso costumava dizer "o pacote padrão" e não nomear nenhum, que não é um fallback.)
O harness de comparação é scaffolding, não uma entrega: ele sai com a mesma alteração que registra a decisão.
Superfícies de produto orientadas por IA
Projetar produtos de IA é agora a terceira habilidade mais demandada nessa mesma pesquisa (37%) — à frente de movimento e IA — e as superfícies são novas: um modelo em streaming, um agente agindo, uma resposta que pode estar errada. Leia AI_PRODUCT_PATTERNS.md antes de projetar superfícies de chat, resultados de streaming ou estados de confirmação gerados por IA.
[Mais conteúdo truncado para tradução, mas a estrutura e as marcações são preservadas]