visual-design-foundationspor Seth Hobson

Visual Design Foundations Skill.

Una skill de Claude Code y Codex para trabajo de marca y sistemas de diseño: tipografía, teoría del color, sistemas de espaciado e iconografía para visuales cohesivos.

Marca y sistemas de diseño

Descargar OpenDesign Ver guía 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

Encabezados de front matter y sección leídos del archivo upstream el 14/09/2026 · 7218 caracteres en total

01 Qué hace

Qué hace el skill visual-design-foundations en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Este skill enseña a construir sistemas visuales coherentes y accesibles usando escalas tipográficas, teoría del color, sistemas de espaciado y fundamentos de iconografía. Cubre el establecimiento de tokens de diseño con escalas tipográficas modulares, espaciado en cuadrícula de 8 puntos, paletas de color semánticas con requisitos de contraste WCAG y sistemas de tamaño de iconos.

El skill proporciona patrones concretos de implementación para Tailwind CSS, tipografía fluida responsiva, tematización de modo oscuro con tokens semánticos y validación de accesibilidad. Aborda desafíos comunes de diseño visual como el espaciado inconsistente, el contraste pobre y los números mágicos arbitrarios, definiendo escalas basadas en proporciones y sistemas de tokens reutilizables.

Qué produce

Definiciones de tokens de diseño en propiedades personalizadas de CSS o configuración de Tailwind
Componente de icono con variantes de tamaño

Ver el ejemplo de prompt ↗

Cómo funciona

01
Establecer tokens de diseño modulares
Defina escalas tipográficas con dimensionamiento basado en proporciones (0.75rem a 3rem), espaciado en cuadrícula de 8 puntos (4px a 64px) y tokens de color semánticos para marca, estados y neutros.
02
Aplicar tipografía responsiva
Use tipografía fluida con clamp() para un dimensionamiento adaptado al viewport y mantenga un ancho de lectura óptimo de 65 caracteres como máximo.
03
Implementar paletas de color accesibles
Construye sistemas de color que cumplan las ratios de contraste WCAG: 4.5:1 para texto de cuerpo, 3:1 para texto grande y componentes de UI, con verificación programática de contraste.
04
Crea Sistemas de Iconos Consistentes
Define escalas de tamaño de iconos de 12px a 32px con componentes reutilizables que acepten props de tamaño y mantengan el comportamiento flex-shrink-0.
05
Diseña el Modo Oscuro con Tokens Semánticos
Usa una nomenclatura de tokens semántica por propósito en lugar de apariencia, permitiendo el cambio de tema mediante atributos data sin modificar componentes.
06
Mantén el Ritmo Vertical
Aplica reglas de espaciado consistentes a elementos adyacentes usando valores de escala definidos para crear armonía visual en toda la interfaz.

02 Encuentra tu caso de uso

Cuándo usar el Skill visual-design-foundations

Usar el skill visual-design-foundations en Claude Code o Codex cuando el trabajo sea de marca y sistema de diseño de este tipo. El alcance y los límites que siguen están tomados del archivo propio del skill.

Buen caso de uso

Establecer design tokens para un nuevo proyecto
Crear o refinar un sistema de espaciado y tamaño
Construir paletas de colores accesibles
Diseñar sistemas de iconos y activos visuales
Auditoría de diseños en busca de consistencia visual

Qué proporcionar

Especificaciones de themingRequisitos para implementar el modo oscuro o sistemas multi-tema con estrategias de tokens semánticos

03 Dentro del skill

Reglas que el Skill visual-design-foundations le da a Claude Code y Codex

4 instrucciones concretas, valores por defecto y límites que el SKILL.md establece para el agente: la parte del archivo que cambia el resultado.

Usa un Espaciado de Cuadrícula de 8 Puntos
Todos los valores de espaciado deben seguir múltiplos de 4px, desde 0.25rem (4px) hasta 4rem (64px), usando los tokens de escala de espaciado definidos.
Aplica Rangos Estrictos de Altura de Línea
Los encabezados deben usar una altura de línea de 1.1 a 1.3, el texto de cuerpo de 1.5 a 1.7, y las etiquetas de UI de 1.2 a 1.4 para una lectura adecuada.
Limita el Ancho del Texto a 65 Caracteres
Establece el max-width en 65ch para el texto de cuerpo, con el fin de mantener un ancho de lectura óptimo y evitar la fatiga visual en pantallas anchas.
Aplica Rangos de Espaciado de Componentes
El padding de las tarjetas debe ser de 16-24px, los espacios entre secciones de 32-64px, los espacios entre campos de formulario de 16-24px, y los espacios entre icono y texto de 8px, usando la escala de espaciado.

04 Ponlo a trabajar

Instalar visual-design-foundations en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Añadir visual-design-foundations a Claude Code, Codex o su agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal

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

Formulario genérico de la CLI skills para plugins/ui-design/skills/visual-design-foundations/SKILL.md; el repositorio puede documentar su propia ruta.

Dale a la skill una primera tarea de trabajo de marca y sistema de diseño

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su 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.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

Verifica que todas las combinaciones de color de texto y componentes de UI cumplan los requisitos de ratio de contraste WCAG mediante verificación programática
Comprueba que la carga de fuentes use font-display swap para evitar saltos de diseño
Asegura que la tipografía responsiva se escale de forma fluida en distintos tamaños de viewport usando funciones clamp

En OpenDesign importa visual-design-foundations desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, y luego selecciónalo en la barra superior.

Descargar OpenDesign Leer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author: Seth Hobson
Repository: github.com/wshobson/agents Rama main
Archivo de skill: plugins/ui-design/skills/visual-design-foundations/SKILL.md Suma de verificación de contenido registrada en la verificación; commit 4236bb9
License: MIT De LICENSE.
Estrellas del repositorio: 39.635 Instantánea de GitHub tomada el 14-09-2026 para todo el repositorio wshobson/agents, que contiene 18 skills en este catálogo. No es una calificación ni un recuento de uso para visual-design-foundations.
Verificado por OpenDesign: 14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

Cuándo Usar Este SkillEnumera escenarios como establecer tokens, crear paletas, auditar la consistencia e implementar el modo oscuro
Sistemas principalesDefine una escala tipográfica modular, una cuadrícula de espaciado de 8 puntos y una estructura de tokens de color semánticos con propiedades personalizadas de CSS
Inicio rápido: tokens de diseño en TailwindProporciona un ejemplo de configuración de Tailwind que extiende el tema con fuentes, tamaños, colores y valores de espaciado personalizados
Buenas prácticas de tipografíaCubre combinaciones de emparejamiento de fuentes, tipografía fluida y responsiva con clamp, y la prevención de saltos de diseño durante la carga de fuentes
Teoría del colorDetalla los requisitos de contraste WCAG, la estrategia de implementación del modo oscuro y una función programática para comprobar la relación de contraste
Directrices de espaciadoEspecifica los rangos de espaciado de componentes y muestra patrones de ritmo vertical para contenido de prosa
IconografíaDefine un sistema de tamaños de iconos de 12px a 32px y proporciona una implementación de componente de icono en TypeScript
Buenas prácticasSiete principios, entre ellos establecer restricciones, documentar decisiones, probar la accesibilidad y usar nomenclatura semántica
Problemas comunesEnumera problemas como espaciado inconsistente, contraste deficiente, sobrecarga de fuentes, números mágicos y falta de planificación para el modo oscuro

La descripción propia del Skill

Aplique tipografía, teoría del color, sistemas de espaciado y principios de iconografía para crear diseños visuales cohesivos. Use cuando establezca design tokens, construya guías de estilo o mejore la jerarquía visual y consistencia.

Descripción del encabezado de SKILL.md. El archivo completo tiene aproximadamente 7.218 caracteres. Lee el archivo completo en GitHub.

Visual Design Foundations

Ejecuta visual-design-foundations en una tarea de marca y design-system real.

Descarga OpenDesign, importa visual-design-foundations desde su enlace SKILL.md, pega el prompt de arriba y lee el plan antes del resultado.

Descargar OpenDesign Ver todas las skills