Communitygithub.com

Direção de Arte

Use para estabelecer uma direção visual distinta para uma nova interface ou uma reformulação intencional.

O que é Direção de Arte?

Esta skill auxilia desenvolvedores e designers a definirem uma direção visual clara e intencional para novos projetos de UI ou reformulações. Ela impõe um processo estruturado que começa com a leitura de diretrizes de design frontend, do brief e das restrições existentes, garantindo que as decisões sejam fundamentadas no público, conteúdo e propósito do produto. A skill exige a proposição de duas direções materialmente diferentes (indo além de simples trocas de paleta de cores) e guia a comparação delas com base em hierarquia, composição, tipografia e ênfase. Após a escolha, ela registra a direção, a justificativa e o status da decisão em um arquivo 'direction.md', podendo delegar a escolha quando apropriado. O processo de dois passos, que inclui planejamento detalhado de cores e fontes, wireframes ASCII e validação contra o brief e produtos similares, é fundamental para criar uma identidade visual coerente e diferenciada, evitando clichês e priorizando a direção explícita do usuário.

Funciona com✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/alty-oss/dev-design/tree/HEAD/skills/art-direction

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

O que Direção de Arte faz?

Português (Brasil) Leia a diretriz de design frontend incluída antes de escolher a direção. Use seus princípios visuais específicos juntamente com o brief e as restrições do projeto. Leia o brief.md e as restrições existentes. Para novos produtos/reformulações, proponha duas direções materialmente diferentes, cada uma fundamentada no público, conteúdo e propósito. Compare hierarquia, composição, tipografia e ênfase, não apenas trocas de paleta. Registre a direção escolhida, a justificativa e o status/fonte da decisão em direction.md. Se as escolhas foram delegadas, selecione a mais adequada e registre como delegado. Caso contrário, resolva a decisão material antes de implementar uma nova direção. Siga o processo original de duas etapas:

  1. Planeje 4 a 6 cores hexadecimais nomeadas, tipografias e papéis, conceito de layout e wireframe ASCII com alinhamento, e princípios distintivos.
  2. Compare com o brief e um produto similar plausível. Revise escolhas que pareceriam idênticas em assuntos não relacionados; registre a mudança e o motivo. A direção explícita do usuário prevalece, incluindo estilos mencionados como clichês pela fonte. Um projeto com identidade existente normalmente a reutiliza. Use conteúdo real. Concentre a expressão em um elemento memorável; suporte-o com hierarquia disciplinada. Explique fontes/ativos faltantes e use uma alternativa intencional em vez de assumir que um serviço está disponível.

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

Habilidades Relacionadas