tasteskill: Habilidade Frontend Anti-Amadorismo

Landing pages, portfólios e redesigns. Não dashboards, não tabelas de dados, não interfaces de produto com múltiplos passos. Cada regra abaixo é contextual. Nenhuma delas é ativada automaticamente. Primeiro leia o briefing, depois extraia apenas o que se encaixa.

0. INFERÊNCIA DO BRIEFING (Leia o Ambiente Antes de Tudo)

Antes de tocar no código ou ajustar parâmetros, infira o que o usuário realmente quer. A maioria dos resultados de design de LLM é ruim porque o modelo salta para uma estética padrão em vez de ler o ambiente.

0.A Leia estes sinais primeiro

1. Tipo de página - landing (SaaS / consumidor / agência / evento), portfólio (dev / designer / estúdio criativo), redesign (preservar vs. reformular), editorial / blog.
2. Palavras de "vibe" que o usuário usou - "minimalista", "calmo", "estilo Linear", "Awwwards", "brutalista", "consumidor premium", "estilo Apple", "divertido", "B2B sério", "editorial", "estilo agência", "vidrado", "tech escuro".
3. Sinais de referência - URLs que eles linkaram, screenshots que colaram, produtos que nomearam, marcas com as quais estão competindo.
4. Público - painel de compras B2B vs. consumidor com consciência de design vs. recrutador escaneando um portfólio. O público escolhe a estética, não o seu gosto.
5. Ativos de marca já existentes - logo, cor, tipografia, fotografia. Para redesigns, estes são o material de partida, não uma entrada opcional (veja Seção 11).
6. Restrições silenciosas - públicos com acessibilidade em primeiro lugar, setor público, indústrias regulamentadas, comércio com foco em confiança, produtos para crianças. Essas restrições SOBREPÕEM a preferência estética.

0.B Gere uma "Leitura de Design" de uma linha antes de gerar

Antes de qualquer código, declare em uma linha: "Lendo isto como: <tipo de página> para <público>, com uma linguagem <vibe>, tendendo a <sistema de design ou família estética>."

Exemplos de leituras:

• "Lendo isto como: landing page B2B SaaS para compradores técnicos, com uma linguagem minimalista estilo Linear, tendendo a utilitários Tailwind + Geist + movimento contido."
• "Lendo isto como: portfólio de designer solo para gerentes de contratação, com uma linguagem editorial / tipografia cinética, tendendo a CSS nativo + animação controlada por scroll + tipografia customizada."
• "Lendo isto como: redesign de um site de serviço do setor público, com uma linguagem de confiança em primeiro lugar, 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 monte de perguntas - e apenas quando a leitura de design divergir genuinamente. Exemplo: "Isso deve parecer mais com Linear-clean 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 malha escura, três cards de recursos iguais, glassmorfismo genérico em tudo, micro-animações em loop infinito em todos os lugares, Inter + slate-900. Estes são os padrões de LLM. Vá além deles deliberadamente com base na leitura de design.

1. OS TRÊS AJUSTES (Configuração Principal)

Após a leitura de design, ajuste três parâmetros. Cada decisão de layout, movimento e densidade abaixo é controlada por estes.

• DESIGN_VARIANCE: 8 - 1 = Simetria Perfeita, 10 = Caos Artístico
• MOTION_INTENSITY: 6 - 1 = Estático, 10 = Cinematográfico / Física
• VISUAL_DENSITY: 4 - 1 = Galeria de Arte / Arejado, 10 = Cockpit / Dados Densos

Padrão: 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 dos Ajustes (leitura de design → valores dos ajustes)

1.B Presets de Casos de Uso

…