ui-design-systempor Alireza Rezvani

UI Design System Skill.

Un skill de Claude Code y Codex para trabajo de marca y sistemas de diseño: tokens de diseño, documentación de componentes, cálculos responsivos y entrega a desarrolladores.

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

Descargar OpenDesign Ver guía de uso

alirezarezvani/claude-skills · product-team/skills/ui-design-system/SKILL.mdSKILL.md

--- name: ui-design-system description: UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use when creating design systems, generating design tokens, maintaining visual consistency, or facilitating design-dev collaboration and developer handoff. --- ## Trigger Terms ## Workflows ## Quick Reference Tables ## Knowledge Base ## Validation Checklist

Encabezado y títulos de sección leídos del archivo original el 14/09/2026 · 10.759 caracteres en total

01 Qué hace

Qué hace el skill ui-design-system 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

Un kit de herramientas de sistema de diseño para convertir un color de marca en un conjunto completo de tokens. design_token_generator.py toma un color hexadecimal más un preset moderno, clásico o lúdico, y devuelve colores, tipografía, espaciado de 8pt, tamaños, bordes, sombras, animación, breakpoints y capas de z-index en json, css, scss o como resumen.

A continuación, cuatro flujos de trabajo cubren la arquitectura de componentes de átomos a plantillas, breakpoints responsivos con tipografía fluida mediante clamp(), la validación de contraste WCAG y el traspaso a desarrolladores en variables CSS de React, configuración de Tailwind o styled-components, además de la sincronización con Figma mediante Tokens Studio. Está pensado para diseñadores de UI sénior que deben documentar tokens y componentes para un equipo de desarrollo.

Qué produce

Documentación de la API de componentes que cubre props, opciones de variantes, estados y requisitos de accesibilidad.
Fragmentos de integración para React con variables CSS, una configuración de tema de Tailwind y styled-components.
Tokens de color semánticos que llevan sus propios colores de contraste.

Ver el ejemplo de prompt ↗

Cómo funciona

01
Corregir el Color de Marca
El flujo de trabajo comienza identificando el color primario de la marca, que el archivo requiere en formato hexadecimal, ya que cada categoría generada se deriva de él.
02
Ejecutar el Generador de Tokens
Una sola llamada al script produce todo el sistema: color, preset de estilo y formato de salida son los tres argumentos que acepta.
03
Mapear Tokens a una Jerarquía de Componentes
Los componentes se organizan en átomos, moléculas, organismos y templates, y luego cada uno se vincula a los grupos de tokens que consume.
04
Definir Breakpoints y Tipografía Fluida
Hay seis breakpoints, de xs a 2xl, y la tipografía fluida se expresa con una fórmula clamp entre un tamaño mínimo y uno máximo.
05
Conectar los Tokens al Código
El workflow de handoff muestra el archivo de tokens importado directamente, un theme de Tailwind construido a partir del JSON y un theme de styled-components que lee las claves de los tokens.
06
Sincronizar con Figma y Dar el Visto Bueno
Los tokens se llevan a Figma mediante el plugin Tokens Studio, y la checklist de handoff confirma que el pipeline, la librería de componentes y la documentación están listos.

02 Encuentra tu caso de uso

Cuándo usar el skill ui-design-system

Use el skill ui-design-system en Claude Code o Codex cuando el trabajo sea de marca y design-system de este tipo. El ajuste y los límites a continuación se toman del propio archivo del skill.

Buen caso de uso

Tiene un único color de marca y necesita un sistema completo de tokens derivado de él.
Está estructurando una librería de componentes y quiere que los tokens se mapeen sobre átomos, moléculas, organismos y templates.
Necesita que se calculen por usted breakpoints, escalas de tipografía fluida o valores de espaciado responsivo.
Se está preparando para entregar un conjunto de tokens terminado al equipo de desarrollo.

Conozca los límites

Los presets de estilo no son un rediseño profundo: la elección de tema sobre todo cambia las familias tipográficas, el radio por defecto y el carácter de las sombras, por ejemplo esquinas redondeadas de 8px en modern frente a 4px en classic.

Qué proporcionar

Un preset de estiloElija una de tres direcciones, modern, classic o playful, ya que el preset cambia las familias tipográficas, el radio de esquina y el tratamiento de sombras en todo el conjunto generado.
El formato de salidaIndique qué formato consume el proyecto receptor: json, css, scss o la vista de resumen, porque eso determina qué produce el handoff.

03 Dentro del skill

Reglas que el Skill ui-design-system Da a Claude Code y Codex

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

Color de Marca por Defecto
Cuando no se pasa un color, el generador usa por defecto #0066CC como color principal de marca, de modo que la salida sigue funcionando sin un argumento hexadecimal.
El Espaciado Es una Cuadrícula de 8pt
Los tokens de espaciado siguen una escala basada en una cuadrícula de 8pt que va de 0 a 64, con alias semánticos superpuestos a los pasos numéricos.
Sin Valores Hardcodeados
Las implementaciones de componentes deben referenciar únicamente design tokens; los valores literales en píxeles o hexadecimales en los componentes se consideran una verificación fallida.
Se Incluyen Todas las Variantes
Se espera que los componentes implementen el conjunto completo de variantes, primary, secondary y ghost, en lugar de un subconjunto.
Las Variantes de Tamaño Tienen Dimensiones Fijas
El tamaño small se define como 32px de alto, 12px de padding horizontal y 14px de tamaño de fuente, y md y lg escalan a partir de ahí.
El Contraste Debe Cumplir WCAG AA
Los colores generados se validan a 4.5:1 para texto normal y 3:1 para texto grande, y los colores semánticos deben definir valores de contraste.
Los Objetivos Táctiles Se Mantienen Suficientemente Grandes
Los elementos interactivos deben alcanzar un objetivo táctil mínimo de 44 por 44 píxeles en la lista de verificación de accesibilidad.

04 Ponlo a trabajar

Instalar ui-design-system 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.

Agregar ui-design-system 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/alirezarezvani/claude-skills --skill ui-design-system

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

We have settled on [#0066CC] as the brand primary and I need a complete token set for our SCSS codebase, exported as variables we can import. Please generate the tokens in the classic style, document the Button, Input and Card component APIs with their variants and states, and check that the semantic colors clear WCAG AA before we hand off to the developers.

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:

Confirme que se haya generado cada categoría de token, y no un conjunto parcial.
Verifique que los estados hover, active, focus y disabled funcionen realmente en cada componente.
Compruebe que los indicadores de foco sean visibles y que se usen elementos HTML semánticos.
Asegúrese de que la herramienta de diseño se haya sincronizado antes de dar por finalizado el handoff.
Confirme que haya un pipeline de build configurado para que los tokens exportados lleguen al código.

En OpenDesign importe ui-design-system 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: Alireza Rezvani
Repository: github.com/alirezarezvani/claude-skills Rama main
Archivo de skill: product-team/skills/ui-design-system/SKILL.md Checksum de contenido registrado en la verificación; commit 19392f7
License: MIT De LICENSE.
Estrellas del repositorio: 25.934 Instantánea de GitHub tomada el 14-09-2026 para todo el repositorio alirezarezvani/claude-skills, que contiene 5 skills en este catálogo. No es una calificación ni un recuento de uso para ui-design-system.
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

Términos DesencadenantesFrases entre comillas como generate design tokens que deben dirigir una solicitud a este skill.
WorkflowsCuatro workflows numerados: generación de tokens, sistema de componentes, diseño responsivo, handoff al desarrollador.
Referencia de HerramientaArgumentos, valores por defecto y categorías de salida para design_token_generator.py, con ejemplos de llamadas.
Tablas de Referencia RápidaPasos de escala de color, escala tipográfica 1.25, niveles WCAG y diferencias entre los presets de estilo.
Base de ConocimientoCuatro guías de referencia: token-generation, component-architecture, responsive-calculations, developer-handoff.
Lista de VerificaciónListas de comprobación para generación de tokens, sistema de componentes, accesibilidad y handoff al desarrollador.

La descripción propia del Skill

"Kit de herramientas de sistema de diseño UI para diseñador UI Senior: generación de tokens de diseño, documentación de componentes, cálculos de diseño responsivo y herramientas de entrega a desarrollo. Usar cuando crees sistemas de diseño, generes tokens de diseño, mantengas consistencia visual o facilites la colaboración diseño-desarrollo y la entrega a desarrollo."

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

06 Antes de instalar

Preguntas Sobre el Skill ui-design-system

Las respuestas provienen del SKILL.md tal como se leyó el 2026-09-14, no de una ejecución registrada.

¿Qué necesito para ejecutar el generador?

Un color de marca en hex y una elección de estilo, pasados directamente en la línea de comandos junto con el formato de salida. El archivo muestra llamadas como una paleta clásica con salida CSS, así que no hace falta configurar nada más de antemano.

¿Qué formatos de salida puedo obtener?

JSON es el formato por defecto, y el mismo script escribe custom properties de CSS, variables de SCSS o una vista resumen. Los ejemplos redirigen la salida de SCSS a un partial para poder importarlo directamente.

¿Cómo funciona la sincronización con Figma?

Se instala el plugin Tokens Studio y se importa el JSON generado, tras lo cual los tokens se sincronizan automáticamente con los estilos de Figma. El mismo workflow de entrega también cubre la integración con React, Tailwind y styled-components.

¿Con qué nivel de contraste trabaja?

La tabla de referencia define tanto AA como AAA: AAA necesita 7:1 para texto normal y 4.5:1 para texto grande, mientras que AA es el objetivo más ligero de 4.5:1 y 3:1. Texto grande significa al menos 18pt regular o 14pt bold.

UI Design System

Ejecutar ui-design-system en una marca real y una tarea de trabajo de design-system.

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

Descargar OpenDesign Ver todas las skills