Skip to main content

art-direction

Como ir do brief ao mundo visual - escolher e comprometer com uma direcao concreta, paleta com papeis, pares tipograficos, materialidade e o momento memoravel. Use ao iniciar uma superficie nova, ao substituir o visual de um redesign, ou quando uma interface precisa parar de parecer generica. Traz referencias de estilo carregadas sob demanda.

الانتقال إلى التثبيت

معلومات المصدر

المستودع
brunoolf/frontend-craft
آخر نشاط في المصدر
٢٧ أغسطس ٢٠٢٦ في ١٨:٢١
لغة SKILL.md المكتشفة
البرتغالية
النجوم
٠
التفرعات
٠

خيارات التثبيت

يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.

مراجعة ملفات المصدر

اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.

مستكشف الملفات
5 ملفات

عرض SKILL.md

SKILL.md
تعليمات المصدر · معاينة للقراءة فقط
name
art-direction
description
Como ir do brief ao mundo visual - escolher e comprometer com uma direcao concreta, paleta com papeis, pares tipograficos, materialidade e o momento memoravel. Use ao iniciar uma superficie nova, ao substituir o visual de um redesign, ou quando uma interface precisa parar de parecer generica. Traz referencias de estilo carregadas sob demanda.
# Direção de arte Direção não é decoração aplicada no fim. É a decisão que torna todas as outras decisões possíveis — e que, quando falta, produz aquela interface competente que ninguém lembra. ## O problema do adjetivo "Moderno", "clean", "premium", "minimalista", "profissional" não são direções. São o que todo mundo diz querer, e é por isso que tudo se parece. Um adjetivo não exclui nada, e direção que não exclui não decidiu. Empurre até chegar numa **referência concreta**: | Adjetivo | Direção | |---|---| | "clean e moderno" | "catálogo de leilão suíço — muito branco, uma serifada, foto como evidência" | | "premium" | "manual de relojoaria — denso, técnico, nada supérfluo, ouro só onde importa" | | "divertido" | "fanzine dos anos 90 — xerox, colagem, tipo que não se comporta" | Duas ou três perguntas costumam bastar. Não faça um questionário. ## As quatro respostas A direção está pronta quando você responde cada uma em uma frase: 1. **Que mundo é este?** Referência concreta, não adjetivo. 2. **Por que este produto merece este mundo?** Ligado ao usuário e à cena de uso — quem, onde, sob que luz, sob que pressão. Não ao seu gosto. 3. **Qual é o momento?** A coisa única que a pessoa lembra depois de fechar a aba. 4. **O que fica de fora?** O que este mundo torna proibido. Sem isso a direção não segura nada. ## Da direção às escolhas **Cor por papel, não por gosto.** Defina `surface`, `text`, `border`, `accent` e os estados, e diga que trabalho a cor de destaque faz. Uma cor de destaque que aparece em nove lugares não é destaque. Claro ou escuro sai da cena de uso — quem usa isso, onde, sob que luz ambiente — nunca da categoria do produto. **Tipografia como decisão, não default.** Uma família bem explorada em pesos e tamanhos supera três famílias mal combinadas. Ao parear, contraste é o ponto: mesma classe duas vezes vira acidente. Nenhuma fonte é banida por nome — o que se recusa é escolher por omissão. Se você não consegue dizer por que *esta* fonte serve *este* produto, volte. **Materialidade.** Plano, vidro, papel, metal, impresso, tela? Isso decide sombra, borda, raio e ruído de uma vez só, e é o que a maioria dos projetos nunca decide — daí saem as interfaces sem caráter. **Densidade e postura.** Apertado e técnico, ou arejado e editorial? Isso vem do modo da superfície (`surface-modes`), não do seu gosto. **Postura de movimento.** Quieta, viva ou cinematográfica. Registre — é o que `fc-motion-engineer` vai honrar. ## Referências de estilo Carregue **uma** quando ela servir a direção decidida. São pontos de partida, não fôrmas: sirva ao brief, não à referência. - [Brutalista industrial](references/styles/brutalist.md) — grade rígida, contraste extremo de escala, cor utilitária, degradação analógica - [Minimalista editorial](references/styles/minimalist.md) — monocromático quente, contraste tipográfico, grade plana, sem gradiente - [Alta gama](references/styles/high-end.md) — profundidade háptica, materialidade, ritmo espacial, acabamento de agência - [Editorial](references/styles/editorial.md) — hierarquia de revista, imagem como evidência, tipo com voz Se nenhuma serve, não force. A maior parte do bom trabalho está fora de qualquer estilo catalogado. Para consultar paletas, pares tipográficos ou estilos catalogados em volume, use `ui-ux-dataset`. Para extrair a direção de uma referência visual existente, `design-dna`. Para gerar imagens de referência antes de construir, `imagegen-web`. ## Comprometa O erro mais comum não é escolher errado — é escolher pouco. Uma direção meio aplicada some: a paleta ousada usada só num botão, a serifada dramática só num heading e o resto no default. Se você decidiu por um mundo, ele aparece na superfície inteira: fundo, espaçamento, ritmo, forma, movimento. Entre refinado e comprometido, comprometa. ## Registre A direção precisa sobreviver à sessão. Entregue um bloco pronto para `DESIGN.md` com as quatro respostas e a razão de cada escolha. Direção sem o porquê registrado é reaberta do zero na próxima sessão, e o projeto vira uma média de três direções.
عرض على GitHub