design-system-patternspor Seth Hobson

Design System Patterns Skill.

Un skill de Claude Code y Codex para trabajo de marca y sistemas de diseño: sistemas de diseño escalables: tokens, infraestructura de temas, arquitectura de componentes.

Marca y sistemas de diseño
Sistema de diseño

Descargar OpenDesign Ver guía de uso

wshobson/agents · plugins/ui-design/skills/design-system-patterns/SKILL.mdSKILL.md

--- name: design-system-patterns description: Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns. Use when creating design tokens, implementing theme switching, building component libraries, or establishing design system foundations. --- ## When to Use This Skill ## Core Capabilities ## Quick Start ## Detailed patterns and worked examples ## Best Practices

Portada y encabezados de sección leídos del archivo original el 14/09/2026 · 4003 caracteres en total

01 Qué hace

Qué hace el Skill design-system-patterns 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 construye sistemas de diseño escalables con design tokens, infraestructura de theming y patrones de arquitectura de componentes. Crea jerarquías de tokens de tres niveles: tokens primitivos para valores en bruto, tokens semánticos para significado contextual y tokens de componente para usos específicos, y luego implementa el cambio de tema con propiedades personalizadas de CSS y proveedores de contexto de React.

El skill gestiona la generación de tokens multiplataforma para CSS, iOS y Android, establece workflows de Figma a código con Style Dictionary, y diseña bibliotecas de componentes usando compound components, componentes polimórficos, variantes, slots y patrones de UI headless. Detecta preferencias del sistema como prefers-color-scheme y modos de movimiento reducido.

Qué produce

Archivos de tokens multiplataforma generados para CSS, iOS y Android
Bibliotecas de componentes con sistemas de variantes y tamaños
Documentación y directrices del sistema de diseño

Ver el ejemplo de prompt ↗

Cómo funciona

01
Definir Tokens Primitivos
Crea tokens de valores en bruto para colores, tamaños y fuentes que sirven como capa base. Son valores literales como códigos hexadecimales y medidas en píxeles.
02
Construir la Capa de Tokens Semánticos
Hace referencia a los tokens primitivos para crear tokens contextuales como text-primary, surface-elevated y border-default, que transmiten significado en lugar de descripción visual.
03
Crear Tokens Específicos de Componente
Define tokens para usos específicos de componentes, como button-bg y card-border, que hacen referencia a los tokens semánticos.

02 Encuentra tu caso de uso

Cuándo usar el Skill design-system-patterns

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

Buen caso de uso

Creación de tokens de diseño para colores, tipografía, espaciado y sombras
Implementar cambio de tema claro/oscuro con propiedades personalizadas CSS
Construcción de sistemas de tematización multimarca
Arquitecturar bibliotecas de componentes con APIs consistentes
Establecimiento de flujos de trabajo diseño-a-código con Figma tokens

Conozca los límites

Brechas de plataforma donde existen tokens para web pero no para móvil, o viceversa

03 Dentro del skill

Reglas que el Skill design-system-patterns le da a Claude Code y Codex

1 instrucciones concretas, valores predeterminados y límites que el SKILL.md establece para el agente — la parte del archivo que cambia el resultado.

Versionar Tokens con Semver
Trate los cambios de token como cambios de API y use versionado semántico. Las modificaciones de tokens afectan a las aplicaciones consumidoras del mismo modo que los cambios de API.

04 Ponlo a trabajar

Instala design-system-patterns 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ñade design-system-patterns a Claude Code, Codex o Tu Agente

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

Terminal

npx skills add https://github.com/wshobson/agents --skill design-system-patterns

Forma genérica de la CLI skills para plugins/ui-design/skills/design-system-patterns/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

Build a design token system for [our SaaS dashboard] with light and dark themes. Create the three-tier token hierarchy (primitive, semantic, component) for colors, typography, and spacing. Implement CSS custom properties and a React theme context provider with system preference detection and persistent storage. Generate tokens for both web and React Native using Style Dictionary, and set up the compound component pattern for our Button and Card components with size and variant props.

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

Revisa el primer resultado

Antes de aceptar el resultado, busca esto en la transcripción y los archivos:

El resultado se entrega como Sistema de diseño, según lo lista el catálogo para este skill.
El agente nombra el skill design-system-patterns en su plan o transcripción antes de producir el resultado.
Su propio contenido, nombres y números aparecen sin cambios en la salida.

En OpenDesign importe design-system-patterns desde su enlace de SKILL.md: Plugins → Add → Skill → Import from link, y luego selecciónelo 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/design-system-patterns/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 cuenta de uso para design-system-patterns.
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 para design tokens, theming, sistemas multimarca, librerías de componentes y workflows de Figma
Capacidades PrincipalesDetalla design tokens, infraestructura de theming, arquitectura de componentes y capacidades del pipeline de tokens
Design TokensDefine capas de tokens primitivos, semánticos y de componente con convenciones de nomenclatura y generación multiplataforma
Infraestructura de ThemingCubre propiedades personalizadas de CSS, React context, cambio dinámico, preferencias del sistema y modos de accesibilidad
Arquitectura de ComponentesDescribe componentes compuestos, patrones polimórficos, variantes, slots, UI headless y style props
Pipeline de TokensExplica la sincronización con Figma, la configuración de Style Dictionary, las transformaciones y la integración con CI/CD
Inicio RápidoProporciona un ejemplo en TypeScript de la estructura de tokens primitivos y semánticos con propiedades personalizadas de CSS
Buenas PrácticasEnumera siete reglas: nomenclatura semántica, jerarquía, documentación, versionado, pruebas, automatización, migración
Problemas ComunesAdvierte contra la proliferación de tokens, la inconsistencia de nomenclatura, la falta de modo oscuro, los valores codificados, las referencias circulares y las brechas de plataforma

La descripción propia del Skill

«Construye sistemas de diseño escalables con tokens de diseño, infraestructura de tematización y patrones de arquitectura de componentes. Úsalo al crear tokens de diseño, implementar cambio de temas, construir bibliotecas de componentes o establecer fundamentos de sistemas de diseño.»

Descripción del front-matter desde SKILL.md. El archivo completo tiene aproximadamente 4.003 caracteres. Lee el archivo completo en GitHub.

Design System Patterns

Ejecuta design-system-patterns en una Marca Real y una Tarea de trabajo de design-system.

Descarga OpenDesign, importa design-system-patterns desde su enlace SKILL.md, pega el prompt anterior y lee el plan antes del resultado.

Descargar OpenDesign Ver todas las skills