tasteskill: Skill Frontend Antirrobô
Landing pages, portfólios e redesigns. Não dashboards, tabelas de dados ou UI de produto com várias etapas. Toda regra abaixo é contextual. Nenhuma delas é acionada automaticamente. Primeiro leia o briefing, depois extraia apenas o que se encaixa.
0. INFERÊNCIA DO BRIEFING (Leia o Ambiente Antes de Qualquer Coisa)
Antes de tocar em código ou ajustar parâmetros, inferir o que o usuário realmente quer. A maioria do design gerado por LLM é ruim porque o modelo salta para uma estética padrão em vez de ler o ambiente.
0.A Leia estes sinais primeiro
- Tipo de página - landing (SaaS / consumidor / agência / evento), portfólio (dev / designer / estúdio criativo), redesign (preservar vs. reformular), editorial / blog.
- Palavras de vibe que o usuário usou - "minimalista", "calmo", "estilo Linear", "Awwwards", "brutalista", "consumidor premium", "Apple-y", "brincalhão", "B2B sério", "editorial", "agência-y", "glassy", "tech escuro".
- Sinais de referência - URLs que ele linkou, screenshots que colou, produtos que nomeou, marcas com as quais está concorrendo.
- Público - Painel de compras B2B vs. consumidor consciente de design vs. recrutador escaneando um portfólio. O público escolhe a estética, não seu gosto.
- Ativos de marca que já existem - logotipo, cor, tipo, fotografia. Para redesigns, estes são material de partida, não entrada opcional (veja Seção 11).
- Restrições silenciosas - públicos focados em acessibilidade, setor público, indústrias reguladas, comércio confiável, produtos infantis. Essas restrições SOBREPÕEM a preferência estética.
0.B Produza uma "Leitura de Design" de uma linha antes de gerar
Antes de qualquer código, declare em uma linha: "Lendo como: <tipo de página> para <público>, com uma linguagem , tendendo a <sistema de design ou família estética>."
Exemplos de leituras:
- "Lendo como: landing B2B SaaS para compradores técnicos, com uma linguagem minimalista estilo Linear, tendendo a utilidades Tailwind + Geist + movimento contido."
- "Lendo como: portfólio de designer solo para gerentes de contratação, com uma linguagem editorial / tipo cinético, tendendo a CSS nativo + animação orientada por scroll + tipografia personalizada."
- "Lendo como: redesign de um site de serviço do setor público, com uma linguagem de confiança primeiro, tendendo a GOV.UK Frontend ou USWDS."
0.C Se o briefing for ambíguo, faça uma pergunta, não adivinhe
Faça exatamente uma pergunta esclarecedora - nunca um despejo de várias perguntas - e apenas quando a leitura de design genuinamente divergir. Exemplo: "Isso deve parecer mais com Linear-limpo ou Awwwards-experimental?"
Se você puder inferir com confiança a partir do contexto, não pergunte. Apenas declare a leitura de design e prossiga.
0.D Disciplina Anti-Padrão
Não use como padrão: gradientes roxos de IA, herói centralizado sobre mesh escuro, três cartões de recurso iguais, glassmorphism genérico em tudo, micro-animações em loop infinito em todo lugar, Inter + slate-900. Estes são os padrões de LLM. Alcance além deles deliberadamente com base na leitura de design.
1. OS TRÊS DIALOS (Configuração Principal)
Após a leitura de design, ajuste três dialos. Toda decisão de layout, movimento e densidade abaixo é controlada por estes.
DESIGN_VARIANCE: 8- 1 = Simetria Perfeita, 10 = Caos ArtísticoMOTION_INTENSITY: 6- 1 = Estático, 10 = Cinemático / FísicaVISUAL_DENSITY: 4- 1 = Galeria de Arte / Arejado, 10 = Cockpit / Dados Densos
Linha de base: 8 / 6 / 4. Use estes a menos que a leitura de design os substitua. Não peça ao usuário para editar este arquivo - as substituições acontecem conversacionalmente.
1.A Inferência de Dial (leitura de design → valores de dial)
| Sinal | VARIANCE | MOTION | DENSITY |
|---|---|---|---|
| "minimalista / limpo / calmo / editorial / estilo Linear" | 5-6 | 3-4 | 2-3 |
| "consumidor premium / Apple-y / luxo / marca" | 7-8 | 5-7 | 3-4 |
| "brincalhão / selvagem / Dribbble / Awwwards / experimental / agência" | 9-10 | 8-10 | 3-4 |
| "landing page / portfólio / site de marketing (padrão)" | 7-9 | 6-8 | 3-5 |
| "confiança primeiro / setor público / regulamentado / acessibilidade crítica" | 3-4 | 2-3 | 4-5 |
| "redesign - preservar" | igual ao existente | +1 | igual ao existente |
| "redesign - reformular" | +2 | +2 | igual ao existente |
1.B Predefinições por Caso de Uso
| Caso de uso | VARIANCE | MOTION | DENSITY |
|---|---|---|---|
| Landing (SaaS, mainstream) | 7 | 6 | 4 |
| Landing (Agência / criativo) | 9 | 8 | 3 |
| Landing (Consumidor premium) | 7 | 6 | 3 |
| Portfólio (Designer / estúdio) | 8 | 7 | 3 |
| Portfólio (Desenvolvedor) | 6 | 5 | 4 |
| Editorial / Blog | 6 | 4 | 3 |
| Serviço do setor público | 3 | 2 | 5 |
| Redesign - preservar | igual | igual+1 | igual |
| Redesign - reformular | +2 | +2 | igual |
1.C Como os Dialos Orientam a Saída
Use estes (ou valores substituídos pelo usuário) como variáveis globais. As referências cruzadas ao longo deste documento referem-se a esses nomes de variáveis exatos - nunca invente aliases como LAYOUT_VARIANCE ou ANIM_LEVEL.
2. MAPEAMENTO BRIEFING → SISTEMA DE DESIGN
Depois de ter a leitura de design (Seção 0) e os dialos (Seção 1), escolha a fundação certa. Não invente CSS para coisas que têm um pacote oficial. Não finja que uma tendência estética é um sistema oficial.
2.A Quando usar um sistema de design real (use pacotes oficiais)
| Briefing parece… | Alcance | Porquê |
|---|---|---|
| Microsoft / SaaS empresarial / dashboards | @fluentui/react-components ou @fluentui/web-components | Fluent UI oficial, tokens da Microsoft, acessibilidade resolvida |
| UI Google-ish, produto com sabor Material | @material/web + tokens Material 3 | Oficial, tematizável via Material Theming |
| B2B / análises empresariais estilo IBM | @carbon/react + @carbon/styles | Carbon oficial, padrões maduros de densidade de dados |
| Superfícies de aplicativo Shopify | componentes web polaris.js / Polaris React | Obrigatório para UI admin do Shopify |
| Produto estilo Atlassian / Jira | @atlaskit/* + @atlaskit/tokens | DS oficial da Atlassian |
| Devtool / página comunitária estilo GitHub | @primer/css ou @primer/react-brand | Primer oficial; variante Brand para marketing |
| Serviço do setor público do Reino Unido | govuk-frontend | Legal / regulatório esperado |
| Setor público dos EUA / confiança primeiro | uswds | Mesmo |
| MVP de agência / negócio local rápido | Bootstrap 5.3 | Chato, rápido, funciona |
| Fundação React moderna acessível | @radix-ui/themes | Primitivas + tema polido |
| SaaS moderno onde você possui os componentes | shadcn/ui (npx shadcn@latest add ...) | Você possui o código, fácil de personalizar; nunca envie estado padrão |
| SaaS moderno / marketing de IA baseado em Tailwind | Utilitários Tailwind v4 + variante dark: | Padrão para builds de indie + pequenas equipes |
Regra de honestidade: se o briefing parecer com um dos sistemas acima, instale e use o pacote oficial. Não recrie seu CSS manualmente. Não importe os tokens de um sistema mas depois substitua 90% deles.
Um sistema por projeto. Não misture Fluent React com Carbon na mesma árvore. Não importe componentes shadcn/ui em um aplicativo Material 3.
2.B Quando o briefing é uma estética, não um sistema
Para estas direções, não há um único pacote oficial. Construa com CSS nativo + Tailwind + uma biblioteca de componentes mantida. Seja honesto nos comentários do código sobre o que é inspiração emprestada vs. material oficial.
| Estética | Implementação honesta |
|---|---|
| Glassmorphism / "vidro fosco" | backdrop-filter, bordas em camadas, sobreposições de destaque. Forneça fallback de preenchimento sólido para prefers-reduced-transparency. |
| Bento (grades de blocos estilo Apple) | CSS Grid com tamanhos de célula mistos. Nenhuma biblioteca única possui isso. |
| Brutalismo | CSS nativo, monoespaçado, bordas brutas. Nenhuma biblioteca. |
| Editorial / revista | Tipo serifado, grade assimétrica, espaçamento generoso. Nenhuma biblioteca. |
| Tech escuro / hacker | Mono + neon de destaque, motivos de terminal. Nenhuma biblioteca. |
| Gradientes Aurora / mesh | SVG ou gradientes radiais em camadas. Nenhuma biblioteca. |
| Tipografia cinética | Animações CSS nativas, animações orientadas por scroll, GSAP para sequências. Nenhuma biblioteca. |
| Apple Liquid Glass | A Apple documenta isso apenas para plataformas Apple. Não existe liquid-glass.css oficial. Implementações web são aproximações usando backdrop-filter + bordas em camadas + destaques. Rotule claramente como aproximação. |
3. ARQUITETURA E CONVENÇÕES PADRÃO
A menos que a leitura de design escolha um sistema de design real (Seção 2.A), estes são os padrões:
3.A Stack
- Framework: React ou Next.js. Padrão para Server Components (RSC).
- SEGURANÇA RSC: Estado global funciona APENAS em Client Components. No Next.js, envolva provedores em um componente
"use client". - ISOLAMENTO DE INTERATIVIDADE: Qualquer componente que use Motion, ouvintes de scroll ou física de ponteiro DEVE ser uma folha isolada com
'use client'no topo. Server Components renderizam apenas layouts estáticos.
- SEGURANÇA RSC: Estado global funciona APENAS em Client Components. No Next.js, envolva provedores em um componente
- Estilização: Tailwind v4 (padrão). Tailwind v3 apenas se o projeto existente exigir.
- Para v4: NÃO use o plugin
tailwindcssempostcss.config.js. Use@tailwindcss/postcssou o plugin Vite.
- Para v4: NÃO use o plugin
- Animação: Motion (a biblioteca anteriormente conhecida como Framer Motion). Importe de
motion/react(import { motion } from "motion/react"). O pacoteframer-motionainda funciona como um alias legado - prefiramotion/reactem código novo. - Fontes: Sempre use
next/font(Next.js) ou auto-hospedagem com@font-face+font-display: swap. Nunca linke Google Fonts via<link>em produção.
3.B Estado
useState/useReducerlocal para UI isolada.- Estado global APENAS para evitar prop-drilling profundo - Zustand, Jotai ou contexto React.
- NUNCA use
useStatepara rastrear valores contínuos impulsionados por entrada do usuário (posição do mouse, progresso de scroll, física de ponteiro, hover magnético). UseuseMotionValue/useTransform/useScrolldo Motion. OuseStatere-renderiza a árvore React a cada alteração e colapsa em dispositivos móveis.
3.C Ícones
- Bibliotecas permitidas (ordem de prioridade):
@phosphor-icons/react,hugeicons-react,@radix-ui/react-icons,@tabler/icons-react. - Desencorajado:
lucide-react. Aceitável apenas quando o usuário explicitamente pedir ou o projeto já depender dele. - NUNCA crie ícones SVG manualmente. Se um glifo estiver faltando, instale uma segunda biblioteca ou componha a partir de primitivas - não desenhe caminhos de ícones do zero.
- Uma família por projeto. Não misture Phosphor com Lucide na mesma árvore de componentes.
- Padronize
strokeWidthglobalmente (ex.:1.5ou2.0).
3.D Política de Emoji
Desencorajado por padrão em código, marcação e texto visível. Substitua símbolos por glifos de biblioteca de ícones. Substituição: permita emojis apenas quando o usuário explicitamente pedir uma vibe brincalhona / estilo chat / social-nativa - e mesmo assim use-os com moderação e intenção.
3.E Responsividade e Mecânicas de Layout
- Padronize breakpoints (
sm 640,md 768,lg 1024,xl 1280,2xl 1536). - Contenha layouts de página usando
max-w-[1400px] mx-autooumax-w-7xl. - Estabilidade de Viewport: NUNCA use
h-screenpara seções Hero de altura total. SEMPRE usemin-h-[100dvh]para evitar saltos de layout em dispositivos móveis (barra de endereço do Safari iOS). - Grid sobre Flex-Math: NUNCA use matemática complexa de porcentagem de flexbox (
w-[calc(33%-1rem)]). SEMPRE use CSS Grid (grid grid-cols-1 md:grid-cols-3 gap-6).
3.F Verificação de Dependência (obrigatório)
Antes de importar QUALQUER biblioteca de terceiros, verifique package.json. Se o pacote estiver faltando, produza o comando de instalação primeiro. Nunca presuma que uma biblioteca existe.
4. DIRETIVAS DE ENGENHARIA DE DESIGN (Correção de Viés)
LLMs usam clichês por padrão. Substitua esses padrões proativamente. Cada regra tem um caminho de substituição sensível ao contexto.
4.1 Tipografia
-
Display / Títulos: Padrão
text-4xl md:text-6xl tracking-tighter leading-none. -
Corpo / Parágrafos: Padrão
text-base text-gray-600 leading-relaxed max-w-[65ch]. -
Escolha de fonte sans:
- Desencorajado como padrão:
Inter. EscolhaGeist,Outfit,Cabinet Grotesk,Satoshiou uma serifa apropriada à marca primeiro. - Substituição: Inter é aceitável quando o usuário explicitamente pedir uma sensação neutra / padrão / estilo Linear, ou quando o briefing for um site de setor público / foco em acessibilidade.
- Desencorajado como padrão:
-
Pares para conhecer:
Geist+Geist Mono,Satoshi+JetBrains Mono,Cabinet Grotesk+Inter Tight,GT America+IBM Plex Mono. -
DISCIPLINA DE SERIFA (MUITO DESENCORAJADO COMO PADRÃO):
- Serifa é muito desencorajada como a fonte padrão para qualquer projeto. "Parece criativo / premium / editorial" NÃO é uma razão para usar serifa. O modelo mental padrão do agente de que "briefing criativo = serifa" é o indicador de IA mais testado em rodadas de produção.
- Serifa é aceitável apenas quando UM destes é explicitamente verdadeiro:
- O briefing da marca literalmente nomeia uma fonte serifada, OU
- A família estética é genuinamente editorial / luxo / publicação / manuscrito / herança / vintage E você pode articular por que esta serifa específica se encaixa nesta marca específica
- Para todo o resto (agência criativa, estúdio de design, marca moderna, consumidor premium, portfólio, estilo de vida), padrão sans-serif display (Geist Display, ABC Diatype, Söhne Breit, Cabinet Grotesk Display, Migra Sans, GT Walsheim, Inter Display, PP Neue Montreal). Fontes sans display não são "chatos" — eles são o padrão pela mesma razão que o preto é o padrão na moda.
- REGRRA DE ÊNFASE (relacionada): Quando você quiser enfatizar uma palavra dentro de um título (o movimento cinético "e design
espacial"), use itálico ou negrito da MESMA fonte. NÃO injete uma palavra serifada aleatória em um título sans (ou vice-versa) apenas para adicionar interesse visual. Ênfase de família mista é amador. Ênfase itálico/negrito na mesma família é a jogada certa. - Especificamente PROIBIDO como padrões:
FraunceseInstrument_Serif(as duas serifas de display favoritas de LLM). - Se uma serifa for justificada (raro, conforme acima), alterne deste pool, NÃO reutilize a mesma serifa em projetos consecutivos: PP Editorial New, GT Sectra Display, Cardinal Grotesque, Reckless Neue, Tiempos Headline, Recoleta, Cormorant Garamond, Playfair Display, EB Garamond, IvyPresto, Migra, Editorial Old, Saol Display, Söhne Breit Kursiv, Domaine Display, Canela, Schnyder, Tobias, NB Architekt, I want a custom one.