Design System Reference
Veinte guías de estilo frontend con paletas, fuentes y reglas anti-'slop' reales
Probado · Funciona
Qué hace
Incluye veinte guías de estilo frontend detalladas (Bento Grid, Glassmorphism, Swiss Minimal, Neobrutalism y más), cada una con paletas de variables CSS concretas, combinaciones de fuentes y patrones de diseño, además de una lista de verificación compartida de anti-patrones de 'slop' de IA. Se activa al construir o estilizar una UI web en una estética nombrada o al intentar evitar diseños genéricos con aspecto de IA.
Informe de la prueba
Leí la guía de Bento Grid de 451 líneas que incluye: variables CSS reales estilo Apple, combinaciones de fuentes nombradas y una lista negra concreta de 'slop' de IA (sin Inter predeterminado, sin gradiente púrpura sobre blanco). Construir una sección de héroe a partir de ella superó una línea base sin habilidad en especificidad de tokens en lugar de los valores predeterminados genéricos de Tailwind. Advertencia: el flujo de 'recomendación de estilo basado en VS' anunciado reside en un agente de descubrimiento de diseño separado que la instalación de la habilidad NO copia, por lo que de forma independiente es una sólida biblioteca de referencia de estilo en lugar del flujo de trabajo guiado completo.
Probado el: 2026-07-20 · Claude Code 2.x (agent harness)
Instalación
git clone https://github.com/wigtn/wigtn-plugins mkdir -p ~/.claude/skills cd wigtn-plugins && cp -r plugins/wigtn-plugins/skills/design-system-reference ~/.claude/skills/design-system-reference
Comandos y prompts de ejemplo
/design-system-referenceVeinte guías de estilo frontend con paletas, fuentes y reglas anti-'slop' reales
Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):
Style this landing page in a neobrutalist aesthetic with real palettesGive me a glassmorphism style guide with concrete CSS variablesThis UI looks generic and AI-made, help me avoid the slop patterns