Design System Is All You Need

Ocho guías de estilo de UI con nombre y tokens auto-derivados, aplicadas antes de cualquier código

Por devPnal · devPnal/design-system-is-all-you-need

Probado · Funciona ★ 7.6/10

Design System Is All You Need — Ocho guías de estilo de UI con nombre y tokens auto-derivados, aplicadas antes de cualquier código

Qué hace

Agrupa ocho guías de diseño escritas — neumorphism, glassmorphism, brutalism, skeuomorphism, Material, neon, heritage y el 'pnalism' propio del autor — cada una con reglas comunes, especificaciones por componente y un sistema de tokens derivado de un color temático y una palabra clave de intensidad. Se activa en trabajos de UI: construcción de páginas, dashboards, tarjetas, formularios o cualquier componente frontend, en HTML/CSS, React, SwiftUI o Compose. Se detiene y pregunta qué estilo y qué color hexadecimal antes de escribir cualquier cosa.

Informe de la prueba

Construí la misma tarjeta de inicio de sesión dos veces, una simple y otra bajo la guía de neumorfismo incluida: el archivo guiado contenía 11 tokens de diseño frente a cero, colocó los seis valores de espaciado en la cuadrícula de 8px (el simple lo logró 0 de 6), y dio a cada control un objetivo de 44px más un anillo de enfoque. La misma medición expuso una contradicción dentro de la guía — su regla primary-CTA (etiqueta de color temático en una superficie tintada) calcula un contraste de 2.94:1, por debajo del 4.5:1 que exige su propia lista de verificación final, y peor que el 3.7:1 de la versión simple. El paso 2 de la habilidad apunta a references/meterial-design.md, un archivo que no existe (el real es material-design.md), aunque el nombre correcto aparece en la tabla superior. Espere una parada dura para dos preguntas — estilo y color hexadecimal — antes de que aparezca cualquier salida.

Probado el: 2026-07-29 · Claude Code 2.x (agent harness)

Instalación

git clone https://github.com/devPnal/design-system-is-all-you-need.git
mkdir -p ~/.claude/skills
cd design-system-is-all-you-need && cp -r design-system-is-all-you-need ~/.claude/skills/design-system-is-all-you-need

Comandos y prompts de ejemplo

/design-system-is-all-you-needOcho guías de estilo de UI con nombre y tokens auto-derivados, aplicadas antes de cualquier código

Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):

Build a sign-in card for my app using a neumorphism design style
Design a pricing card component in glassmorphism for our React app
Create a dashboard with a consistent brutalist design system applied

Informe completo →