¿Qué hace esta skill?

La Design System Studio Skill genera sistemas de diseño completos desde cero, audita la consistencia visual de interfaces existentes evaluando 10 dimensiones de UI y detecta patrones genéricos típicos de diseños generados por IA. Cubre todo el ciclo: desde la extracción de tokens hasta la puntuación detallada de cada dimensión de tu interfaz, con referencias exactas de archivo y línea para cada problema detectado.

Sistema de diseño desde cero
Inicia un proyecto nuevo con un sistema sólido: tokens, documentación y vista previa interactiva desde el primer día.
Auditoría visual completa
Evalúa 10 dimensiones de UI (color, tipografía, espaciado, componentes, responsive, modo oscuro, animación, accesibilidad, densidad y acabado) con puntuación de 0 a 10.
Detección de patrones genéricos de IA
Identifica gradientes púrpura-azul por defecto, glass morphism sin propósito, esquinas redondeadas arbitrarias y tipografías sin personalidad.
Revisión de pull requests
Comprueba cambios de estilos que podrían romper la consistencia antes de mergear, con referencias exactas archivo:línea.

Ejemplos de uso

🚀 Generar sistema nuevo
Genera un sistema de diseño minimalista con paleta earth-tones para mi app SaaS y produce los tokens y la vista previa.
🔍 Auditar interfaz
Audita la interfaz de http://localhost:3000 en las páginas /, /pricing y /docs y dame la puntuación de cada dimensión.
🧹 Detectar patrones de IA
Ejecuta un slop-check en mi proyecto para detectar gradientes genéricos, glass morphism sin propósito y tipografías sin personalidad.
📋 Revisar PR de estilos
Revisa los cambios de estilos del último pull request y dime si rompen la consistencia del sistema de diseño actual.

Características

Modo generate Crea un sistema completo escaneando CSS, Tailwind o styled-components e investigando competidores. Genera DESIGN.md, design-tokens.json y design-preview.html.
Modo audit con 10 dimensiones Evalúa color, tipografía, espaciado, componentes, responsive, modo oscuro, animación, accesibilidad, densidad de información y acabado con puntuación de 0 a 10.
Modo slop-check Detecta patrones genéricos de IA: gradientes púrpura-azul por defecto, glass morphism sin propósito, esquinas redondeadas arbitrarias y heroes con texto centrado sobre gradientes de stock.
Referencias exactas archivo:línea Cada problema detectado incluye la ubicación precisa en el código para corregirlo sin ambigüedad.
Tokens estructurados en JSON Genera design-tokens.json con todos los tokens listos para integrar en tu pipeline de desarrollo.

Preguntas frecuentes

Escanea CSS, Tailwind y styled-components en busca de patrones existentes antes de generar el sistema de diseño.
No. La skill funciona con Claude Code o Cowork sin configuración adicional. Para el modo audit solo necesitas que la URL sea accesible.
Tres archivos: DESIGN.md con la racionalización de cada decisión, design-tokens.json con los tokens estructurados y design-preview.html con una página interactiva autocontenida.
Sí. Indica la URL de producción y las páginas a evaluar. La skill analizará las 10 dimensiones en cada página indicada.

Skills relacionadas

Mas skills de la misma categoria:

Design System Studio — Genera y Audita Sistemas de Diseño con Claude AI

¿Prefieres escuchar el contenido? Genera la narración de audio con un clic.