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
최근 소스 활동
2026년 8월 27일 18:21
감지된 SKILL.md 언어
포르투갈어
스타
0
포크
0

설치 방법

기본적으로 소스를 먼저 확인하는 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에서 보기