design-range

Design Range

Deixado com seus padrões, o Claude projeta todo produto da mesma forma: Inter ou Geist, um gradiente índigo/violeta, um hero centralizado com dois botões, três cards de feature com ícones em círculos coloridos, rounded-2xl em tudo, sombras cinzas suaves. Fica bonito, e fica igual a todo outro site feito por IA. Este skill existe para quebrar esse padrão de propósito.

A jogada central é simples: não escolha o estilo você mesmo, sorteie-o. Um modelo instruído a "escolher um estilo" sempre cai nas mesmas poucas opções, então a escolha é delegada a um script que amostra de uma biblioteca de direções coerentes e se afasta do que este projeto usou recentemente. Seu trabalho é então se comprometer totalmente com essa direção e executá-la com maestria.

Fluxo de Trabalho

1. Entenda a situação

• O que está sendo construído? Mapeie para um tipo de produto: marketing (landing pages, sites, portfólios também entram aqui se preferir), saas (telas de aplicativo onde as pessoas trabalham), dashboard (analíticos, admin, monitoramento), ecommerce (lojas, páginas de produto e categoria), mobile (telas de app nativo ou mobile-first), portfolio.
• Existe uma marca ou sistema de design existente? Se o projeto já tem tokens estabelecidos, um design-direction.md, ou o usuário está pedindo uma funcionalidade dentro de um app existente, mantenha a direção dele. Variedade é para projetos novos, redesigns e quando o usuário pede algo diferente. Consistência dentro de um produto é uma característica; mesmice entre produtos é o problema.
• O usuário mencionou um estilo? ("luxuoso", "divertido", "escuro e tecnológico"). Traduza isso em filtros (--energy, --mode) ou um --show <id> específico, mas ainda mostre alternativas a menos que ele tenha sido específico.
• Arquivo de gosto. Se references/taste.md tiver conteúdo, leia-o. Ele contém os amores e ódios pessoais do usuário e substitui a biblioteca quando entram em conflito. Suas linhas exclude: e favor: são aplicadas pelo script de sorteio automaticamente; o resto (fontes favoritas, cores, movimentos que ele amou) é para você carregar para qualquer direção que for construída.

2. Sorteie direções

python3 <skill-dir>/scripts/roll.py --product <tipo> [--count 3] [--mode light|dark] [--energy quiet|medium|loud]

Execute a partir da raiz do projeto. Ele lê dois históricos, o .design-history.json do projeto e um ~/.claude/design-range-history.json compartilhado cobrindo todos os projetos, e se afasta de ambos, para que o próximo produto não receba o mesmo visual do anterior. Ele também distribui as cores de destaque: a paleta de cada opção é escolhida para que seu matiz de destaque fique longe das outras opções e de destaques usados recentemente, o que impede que a "variedade" colapse em uma família de cores com fontes diferentes. Ele imprime 3 opções contrastantes, cada uma um briefing completo: mood, fontes com URLs CSS prontas, uma paleta nomeada, um arquétipo de layout, linguagem de formas, movimento, movimentos característicos, coisas a evitar e um bloco @theme do Tailwind v4.

Outros comandos: --list (todas as direções), --show <id> --product <tipo> (uma direção completa, opcionalmente --font N --palette N --layout <id>).

3. Deixe o usuário escolher (quando ele estiver por perto)

Apresente as opções de forma compacta, um bloco curto cada: nome, mood em uma linha, o par de fontes, a paleta como valores hex, a ideia de layout. Pergunte qual, e mencione que eles podem misturar ("fontes da opção 2 com paleta da opção 3") ou sortear novamente.

Se o usuário disse "apenas construa", ou você está executando sem um humano no loop, escolha por ele, e escolha pela adequação. A aleatoriedade existe para quebrar seus hábitos, não para colocar uma estética noturna em um planejador de jantares. Para cada opção, pergunte: os clientes desta marca se reconheceriam nela? O mood combina com o que o produto faz (calmo para bem-estar e finanças, energético para esporte e vida noturna, preciso para dados, aconchegante para comida e casa)? Escolha a opção que se encaixa melhor. Se nenhuma se encaixar, sorteie novamente (--count 4, ou filtre com --energy/--mode) e escolha do novo conjunto. Uma escolha surpreendente é boa quando você pode dizer em uma frase por que ela se adequa ao produto; diga essa frase ao relatar qual direção você usou. Não atrase a construção esperando uma escolha que ninguém fará.

4. Registre e escreva um arquivo de direção

python3 <skill-dir>/scripts/roll.py --record <id> --font N --palette N --layout <layout-id> --product <tipo>

Isso escreve tanto o histórico do projeto quanto o compartilhado. Em seguida, salve o briefing escolhido como design-direction.md na raiz do projeto. Sessões futuras (e você, daqui a uma hora) o leem para permanecer consistentes dentro deste produto, e o histórico compartilhado impede que o próximo produto receba o mesmo visual.

5. Construa

Leia a referência de plataforma correspondente antes de construir, porque cada tipo de produto tem suas próprias regras de construção:

Produto	Leia
marketing, portfolio	references/marketing.md
saas	references/saas.md
dashboard	references/dashboard.md
ecommerce	references/ecommerce.md
mobile	references/mobile.md

Stack: React + Tailwind por padrão (veja "Configuração da Stack" abaixo). Então:

• Conecte os tokens primeiro. Carregue as fontes, cole o bloco @theme e estilize com os nomes semânticos (bg-bg, bg-surface, text-text, text-muted, border-border, bg-accent, font-display). O script já verificou contraste: use text-accent-ink sempre que um texto colorido com destaque estiver sobre bg ou surface (ele é igual ao destaque quando o destaque já é legível), e text-on-accent para rótulos em botões e badges preenchidos com destaque. Se o briefing mostrar uma linha Contraste, ela informa o que foi ajustado. Classes de paleta Tailwind puras como indigo-500 ou slate-100 são como o visual padrão vaza de volta, então mantenha-as fora dos componentes.

• Comprometa-se com a direção. Use pelo menos dois de seus movimentos característicos visivelmente e trate a lista de "evitar" como restrições rígidas. Uma direção aplicada timidamente (fontes corretas, todo o resto padrão) colapsa de volta ao visual genérico. Se o briefing disser raio 0, nada é arredondado. Se disser sombras com deslocamento duro, não há sombras borradas.

• Deixe o arquétipo de layout moldar a página. O layout sorteado (ex.: sticky-scroll-story, three-pane, hub-and-sheet) está lá para quebrar o esqueleto de hero centralizado + três cards. Construa ao redor dele.

• Estenda a paleta, não a substitua. Você precisará de tons de hover, active e sutis. Derive-os das cores fornecidas (color-mix(in oklch, var(--color-accent) 85%, black), ou modificadores de opacidade como bg-accent/10) em vez de buscar novos matizes.

• Conteúdo real. Escreva um texto plausível e específico para o produto. Lorem ipsum e "Funcionalidade Um" escondem se o design realmente funciona.

• Faça-o se mover. Páginas estáticas parecem templates, e o arquivo de gosto do usuário pede movimento em toda construção. Cada construção recebe todos os quatro itens a seguir, expressos na personalidade de motion da direção (rápido para brutalista e esporte, elástico para brinquedoteca, lento e cinematográfico para cinema, suave para orgânico, escalonado para SO retrô):

  1. Coreografia de entrada ao carregar: as peças do hero chegam em uma sequência curta e escalonada (título, depois texto, depois ações, com 60-120ms de intervalo), não todas de uma vez e não um fade lento único.
  2. Feedback de hover e press em tudo que é clicável, no estilo da direção: um pressionamento com sombra dura, uma escala elástica, um slide de sublinhado, um brilho, uma oscilação.
  3. Uma animação característica tirada dos campos motion ou signature do briefing (brilho, glifo giratório, blob morfando, Ken Burns, máquina de escrever, marquee, formas rotacionando). É o momento que as pessoas lembram, então dê a ele um lugar visível.
  4. Revelações de scroll para seções abaixo da dobra onde couberem (IntersectionObserver ou CSS animation-timeline: view() com um fallback).

  Anime transform e opacity em vez de propriedades de layout para que fique suave, mantenha feedback de UI abaixo de ~300ms e coloque tudo decorativo atrás de @media (prefers-reduced-motion: no-preference) (ou desligue sob reduce) para que pessoas que desativam movimento tenham uma página calma e completa.

6. Verificação de mesmice antes de finalizar

Olhe para o que construiu e corrija qualquer um destes itens, a menos que a direção os peça explicitamente:

• Inter, Roboto, Arial ou system-ui como a fonte de exibição visível
• Gradiente roxo/índigo/azul-para-violeta em qualquer lugar
• Hero centralizado, título + subtítulo + dois botões, depois uma grade de 3 cards com ícone
• Todo container rounded-xl/2xl com shadow-md/lg
• Ícones dentro de círculos coloridos pastel
• Página cinza-50 com cards brancos como a ideia visual completa
• Todo texto nos mesmos poucos tamanhos; sem contraste tipográfico
• Texto gradiente no título (a menos que seja Chrome Y2K ou Glass Aurora)

Em seguida, uma rápida passada de acabamento: contraste de texto atende WCAG AA (4,5:1 corpo, 3:1 texto grande; ajuste muted se uma paleta falhar em seu bg), todo elemento interativo tem estados hover, focus-visible e disabled, funciona a 375px de largura e animações respeitam prefers-reduced-motion.

Configuração da Stack

Tailwind v4 (padrão): coloque os <link>s das fontes no index.html (ou next/font / @import url(...) no topo do CSS), então o bloco @theme sorteado no arquivo CSS principal após @import "tailwindcss";. Classes como bg-accent, font-display, text-muted funcionam automaticamente.

Tailwind v3: coloque os mesmos valores em theme.extend.colors e theme.extend.fontFamily no tailwind.config.js com os mesmos nomes.

Next.js: prefira next/font/google para fontes do Google (mesmos nomes, underscores para espaços) e mapeie-as para as variáveis CSS. Fontes do Fontshare são carregadas através da URL CSS.

React Native / Expo (para mobile): use NativeWind com a paleta no tailwind.config.js, e carregue fontes com @expo-google-fonts/<nome-da-fonte> ou expo-font. Fontes do Fontshare precisam dos arquivos de fonte baixados em assets/fonts. Se o usuário só quiser um mockup visual, uma página web React em tamanho mobile (quadro 390x844) é suficiente e muito mais rápida; pergunte se não estiver claro.

Previews em arquivo único: se ainda não houver projeto e o usuário só quiser ver, um único arquivo HTML com o CDN do Tailwind (<script src="https://cdn.tailwindcss.com"></script> para config v3, ou @tailwindcss/browser@4 com um <style type="text/tailwindcss">@theme {...}</style> inline) mais React via ESM é aceitável.

Quando o usuário quer ainda mais variedade

• Sortear novamente: execute o script novamente; ele já evita escolhas recentes.
• Remixar: pegue o tipo de uma direção com a paleta de outra. Verifique se o resultado ainda parece coerente (uma fonte pixel com uma paleta de luxo é uma piada, o que é aceitável apenas se esse for o objetivo).
• Nova direção: se o usuário descrever um visual que a biblioteca não tem, adicione-o a assets/directions.json no mesmo formato para que entre em sorteios futuros. Verifique se as fontes existem no Google Fonts ou Fontshare.
• Gosto: quando o usuário disser o que ama ou odeia ("nunca use serifa", "amo brutalismo"), ofereça adicionar a references/taste.md para que se aplique sempre.