O que design.md faz?
Defina identidades visuais para agentes de codificação usando um formato estruturado que combina tokens de design legíveis por máquina com raciocínio legível por humanos.
Visão Geral
Este skill permite que você crie e gerencie identidades visuais para projetos de software de forma sistemática. Ao estruturar as decisões de design em tokens (como primary-color, font-family, spacing-unit), os agentes de IA podem aplicar essas regras de forma consistente, enquanto as descrições racionais ajudam desenvolvedores e designers a entender o porquê de cada escolha.
Como Usar
- Crie um arquivo de design no formato Markdown, com frontmatter YAML contendo os tokens.
- Defina os tokens de design no frontmatter, como cores, tipografia e espaçamentos.
- Explique o raciocínio em markdown abaixo do frontmatter, descrevendo o contexto e as motivações.
- Compartilhe o arquivo com seu agente de codificação ou equipe para aplicar o design.
Exemplo de Estrutura
---
name: Meu Projeto
version: 1.0
tokens:
primary-color: "#3490dc"
secondary-color: "#ff7f50"
font-family: "Inter, sans-serif"
spacing-unit: 8px
---
# Raciocínio de Design
Escolhemos `#3490dc` como cor primária porque transmite confiança e modernidade. A tipografia `Inter` foi selecionada por sua legibilidade em telas de alta densidade.
Benefícios
- Consistência: Mantém a identidade visual uniforme em todo o projeto.
- Automação: Agentes de IA podem aplicar os tokens diretamente no código (CSS, temas, etc.).
- Colaboração: Humanos entendem o raciocínio por trás das decisões.
Plataformas Suportadas
- Claude Code
- Cursor
- Codex
- Qualquer agente que leia arquivos Markdown com frontmatter YAML.
Notas
- Certifique-se de que os tokens sejam válidos e sigam um padrão consistente.
- O raciocínio deve ser claro e conciso, evitando ambiguidades.