tasteskill: Habilidade Frontend Anti-Amadorismo

Páginas de destino, portfólios e redesenhos. Não dashboards, não tabelas de dados, não interfaces de produto com várias etapas. 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 os controles, 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), redesenho (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", "tecnologia escura".
3. Sinais de referência - URLs que eles linkaram, capturas de tela que colaram, produtos que nomearam, marcas com as quais estão competindo.
4. 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 o seu gosto.
5. Ativos de marca já existentes - logotipo, cor, tipografia, fotografia. Para redesenhos, estes são o material de partida, não uma entrada opcional (veja a Seção 11).
6. Restrições silenciosas - públicos com foco em acessibilidade, 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 + animação contida."
• "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 personalizada."
• "Lendo isto como: redesenho de um site de serviço do setor público, com uma linguagem focada em confiança, 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 pelo 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 cartões de recursos iguais, glassmorfismo genérico em tudo, microanimaçõ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 CONTROLES (Configuração Principal)

Após a leitura de design, defina três controles. Cada decisão de layout, movimento e densidade abaixo é controlada por eles.

• 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 Compactados

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 Controles (leitura de design → valores dos controles)

1.B Presets de Casos de Uso

…