visual-design-foundationspor Seth Hobson

Visual Design Foundations Skill.

Uma skill Claude Code e Codex para trabalho de marca e design system: tipografia, teoria das cores, sistemas de espaçamento e iconografia para visuais coesos.

Marca e Sistemas de Design

Baixar OpenDesign Ver guia de uso

wshobson/agents · plugins/ui-design/skills/visual-design-foundations/SKILL.mdSKILL.md

--- name: visual-design-foundations description: Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency. --- ## When to Use This Skill ## Core Systems ## Quick Start: Design Tokens in Tailwind ## Typography Best Practices ## Color Theory ## Spacing Guidelines

Metadados e títulos de seção lidos do arquivo upstream em 14/09/2026 · 7.218 caracteres no total

01 O que faz

O que o Skill visual-design-foundations Faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Este skill ensina como construir sistemas visuais coesos e acessíveis usando escalas tipográficas, teoria das cores, sistemas de espaçamento e fundamentos de iconografia. Ele aborda o estabelecimento de design tokens com escalas de tipo modulares, espaçamento em grade de 8 pontos, paletas de cores semânticas com requisitos de contraste WCAG, e sistemas de dimensionamento de ícones.

O skill fornece padrões concretos de implementação para Tailwind CSS, tipografia fluida responsiva, theming de modo escuro com tokens semânticos e validação de acessibilidade. Ele resolve desafios comuns de design visual, como espaçamento inconsistente, baixo contraste e números mágicos arbitrários, definindo escalas baseadas em proporções e sistemas de tokens reutilizáveis.

O que ele produz

Definições de design tokens em propriedades customizadas do CSS ou na configuração do Tailwind
Componente de ícone com variantes de tamanho

Veja o exemplo de prompt ↗

Como funciona

01
Estabelecer Design Tokens Modulares
Defina escalas tipográficas com dimensionamento baseado em proporções (0.75rem a 3rem), espaçamento em grade de 8 pontos (4px a 64px) e tokens de cor semânticos para marca, estados e neutros.
02
Aplicar Tipografia Responsiva
Use tipografia fluida com clamp() para dimensionamento responsivo à viewport e mantenha a largura de leitura ideal em no máximo 65 caracteres.
03
Implementar Paletas de Cores Acessíveis
Construa sistemas de cor que atendam às taxas de contraste WCAG: 4.5:1 para texto de corpo, 3:1 para texto grande e componentes de UI, com verificação de contraste programática.
04
Criar Sistemas de Ícones Consistentes
Defina escalas de tamanho de ícone de 12px a 32px com componentes reutilizáveis que aceitem props de tamanho e mantenham o comportamento flex-shrink-0.
05
Projetar Modo Escuro com Tokens Semânticos
Use nomenclatura de token semântica por propósito em vez de aparência, permitindo alternância de tema via atributos de dados sem alterações nos componentes.
06
Manter o Ritmo Vertical
Aplique regras de espaçamento consistentes a elementos adjacentes usando valores de escala definidos para criar harmonia visual em toda a interface.

02 Encontre o ideal para você

Quando Usar a visual-design-foundations Skill

Use a visual-design-foundations skill no Claude Code ou Codex quando o trabalho for de brand e design-system deste tipo. Adequação e limites abaixo são retirados do próprio arquivo da skill.

Boa Combinação

Estabelecer design tokens para um novo projeto
Criar ou refinar um sistema de espaçamento e dimensionamento
Construir paletas de cores acessíveis
Projetar sistemas de ícones e recursos visuais
Auditando designs quanto à consistência visual

O Que Fornecer

Especificações de tematizaçãoRequisitos para implementar modo escuro ou sistemas multi-tema com estratégias de tokens semânticos

03 Dentro da skill

Regras que a Skill visual-design-foundations Dá ao Claude Code e ao Codex

4 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Usar Espaçamento em Grid de 8 Pontos
Todos os valores de espaçamento devem seguir múltiplos de 4px, de 0.25rem (4px) até 4rem (64px), usando os tokens de escala de espaçamento definidos.
Aplicar Faixas Estritas de Altura de Linha
Os títulos devem usar altura de linha de 1.1 a 1.3, o texto de corpo de 1.5 a 1.7, e os rótulos de UI de 1.2 a 1.4 para uma legibilidade adequada.
Limitar a Largura do Texto a 65 Caracteres
Defina max-width como 65ch para texto de corpo para manter a largura ideal de leitura e evitar cansaço visual em telas largas.
Aplicar Faixas de Espaçamento de Componentes
O padding do card deve ser 16-24px, os espaçamentos entre seções 32-64px, os espaçamentos entre campos de formulário 16-24px, e os espaçamentos entre ícone e texto 8px, usando a escala de espaçamento.

04 Coloque em prática

Instalar visual-design-foundations no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicionar visual-design-foundations ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

npx skills add https://github.com/wshobson/agents --skill visual-design-foundations

Formulário genérico da CLI skills para plugins/ui-design/skills/visual-design-foundations/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê ao Skill uma primeira tarefa de marca e design-system

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu material.

Starter prompt

Create a design token system for [project name] with an 8-point spacing grid, modular typography scale from 12px to 48px, and an accessible color palette including primary brand color [hex value], semantic status colors for success/warning/error, and a complete neutral gray scale. Implement both light and dark mode variants using semantic token naming. Include Tailwind configuration and verification that all text combinations meet WCAG AA contrast requirements.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

Verifique se todas as combinações de cores de texto e componentes de UI atendem aos requisitos de taxa de contraste WCAG usando verificação programática
Teste se o carregamento de fontes usa font-display swap para evitar deslocamento de layout
Garanta que a tipografia responsiva escale suavemente entre tamanhos de viewport usando funções clamp

No OpenDesign importe visual-design-foundations a partir do link do seu SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: Seth Hobson
Repository: github.com/wshobson/agents Branch main
Arquivo da skill: plugins/ui-design/skills/visual-design-foundations/SKILL.md Checksum de conteúdo registrado na verificação; commit 4236bb9
License: MIT Do LICENSE.
Estrelas do repositório: 39.635 Snapshot do GitHub capturado em 14/09/2026 para todo o repositório wshobson/agents, que contém 18 skills neste catálogo. Não é uma classificação ou contagem de uso para visual-design-foundations.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

Quando Usar Esta SkillLista cenários como estabelecer tokens, construir paletas, auditar consistência e implementar modo escuro
Sistemas principaisDefine escala tipográfica modular, grade de espaçamento de 8 pontos e estrutura de tokens de cor semânticos com propriedades customizadas de CSS
Início rápido: tokens de design no TailwindFornece exemplo de configuração do Tailwind estendendo o tema com fontes, tamanhos, cores e valores de espaçamento personalizados
Boas práticas de tipografiaAborda combinações de pareamento de fontes, tipografia fluida responsiva com clamp e prevenção de layout shift durante o carregamento de fontes
Teoria das coresDetalha requisitos de contraste WCAG, estratégia de implementação de modo escuro e função programática de verificação de taxa de contraste
Diretrizes de espaçamentoEspecifica faixas de espaçamento de componentes e demonstra padrões de ritmo vertical para conteúdo em prosa
IconografiaDefine sistema de dimensionamento de ícones de 12px a 32px e fornece implementação de componente de ícone em TypeScript
Boas práticasSete princípios, incluindo estabelecer restrições, documentar decisões, testar acessibilidade e usar nomenclatura semântica
Problemas comunsLista problemas como espaçamento inconsistente, contraste ruim, sobrecarga de fontes, números mágicos e falta de planejamento para modo escuro

A Descrição da Própria Skill

"Aplique tipografia, teoria das cores, sistemas de espaçamento e princípios de iconografia para criar designs visuais coesos. Use ao estabelecer design tokens, construir guias de estilo ou melhorar hierarquia visual e consistência."

Descrição do front-matter do SKILL.md. O arquivo completo tem cerca de 7.218 caracteres. Leia o arquivo completo no GitHub.

Visual Design Foundations

Execute visual-design-foundations em uma Tarefa de Trabalho Real de Marca e Sistema de Design.

Baixe OpenDesign, importe visual-design-foundations pelo link do SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills