Skill de Claude Code · gratis
Tienes design system. Nadie sabe dónde está.
El Figma lo actualizó un diseñador que ya no está en el proyecto. El botón existe en cuatro versiones porque cada quien escribió la suya. Y el azul de la marca aparece como cinco hex distintos, todos parecidos, ninguno igual.
El costo real
Cada componente nuevo se inventa dos veces.
Un dev que no sabe qué existe construye lo que necesita. No es flojera: es que revisar veinte archivos para ver si ya hay un badge de estado cuesta más que escribirlo de nuevo. Así nacen las cuatro versiones del botón.
Lo mismo con los colores. Sin un lugar donde el token se vea, el hex se copia del componente de al lado, que lo copió del de más allá. Cuando hay que cambiar el azul de la marca, el cambio no es de un archivo: es de ciento noventa y cinco.
El problema no es que falte documentación. Es que la documentación vive en otro lado que el código, así que se desincroniza el mismo día que se escribe.
Qué hace, en orden
Seis fases. Detecta antes de escribir, pregunta antes de sobreescribir.
No es un generador que vacía una plantilla encima de tu repo. Lee lo que ya tienes y solo agrega lo que falta:
Detectar contexto
Lee package.json, tailwind.config, components/ui y globals.css. Si el proyecto no es Next.js + Tailwind, aborta con mensaje claro en vez de generar basura.
Confirmar ruta
Default /admin/design-system. Si tu proyecto no tiene /admin, pregunta entre esa, /design-system y /styleguide.
Cargar tu marca
Toma paleta, fonts, escala de radios y patrones del bloque [CUSTOMIZE]. Si está vacío, pide tres datos: primario, acento y font. Nada más.
Nueva o re-run
Si la página ya existe, pregunta: actualizar tokens conservando lo tuyo, reemplazar con respaldo, o cancelar.
Escribir archivos
La página con sus secciones, los wrappers de sección, el swatch de color, la escala tipográfica, y los primitivos de shadcn que falten.
Atar el CLAUDE.md
Mete un bloque marcado en tu CLAUDE.md o AGENTS.md: antes de inventar un componente, checa la página; antes de hardcodear un color, úsalo como token.
- Branding — paleta, fonts y tagline
- Tokens base — semánticos, spacing y radios
- Tipografía — de h1 a xs con tamaño y line-height
- Componentes base — botón, badge, card, tabs, input, progress
- Patrones de dominio — KPIs, badges de estado, tabla, vacíos, formularios
Instalar
Tres comandos y ya está corriendo.
# 1. Agrega el marketplace
claude plugin marketplace add gneuman/gnb-plugins
# 2. Instala el plugin
claude plugin install gnb-design-system@gnb-labs
# 3. Úsalo en cualquier repo Next.js + Tailwind
/gnb-design-systemTambién se dispara solo cuando dices “design system”, “style guide”, “tokens del proyecto” o “página de componentes”.
Todo lo específico de marca —paleta, fonts, escala de radios, qué patrones de dominio generar, el idioma— vive en un bloque [CUSTOMIZE] al final del skill. Los valores que trae funcionan tal cual: forkear es sobreescribir, no rellenar vacíos. La lógica del scaffolder no se toca.
Por qué este y no otro
Se puede correr dos veces sin miedo.
Re-runnable de verdad
Lo auto-generado vive entre marcadores. Corres el skill otra vez, se actualizan los tokens y tus ediciones siguen ahí. La mayoría de los scaffolders son de un solo uso porque al segundo pisan tu trabajo.
Tokens antes que componentes
Primero el color, el radio y la tipografía; el botón se deriva de eso. Al revés terminas con veinte componentes bonitos y ningún acuerdo sobre cuál es el azul de la marca.
Sin la marca de nadie adentro
El skill no trae hex de cliente hardcodeado. Los patrones de dominio salen comentados como ejemplo y tú decides cuáles conservas: no asume que vendes fintech.
Precio
Gratis. Licencia MIT.
El skill es tuyo sin pagar nada y sin dejar el correo. Si lo que quieres es montar esto adentro de tu operación —tus procesos, tu equipo, tus skills— eso se trabaja en el Club de IA: taller quincenal en vivo, cupo de 10 empresas.
Preguntas
Lo que se pregunta antes de instalarlo.
¿Funciona si no uso shadcn?
Funciona, pero copia los primitivos de shadcn que falten. Si ya los tienes, los detecta y los reusa en vez de duplicarlos. Lo que no hace es escribir su propio botón o su propia card cuando shadcn ya los trae.
¿Y si mi proyecto es Vite, Rails o Pages Router?
Aborta y te lo dice en la primera fase. Detecta el stack antes de escribir nada, así que no te deja medio scaffoleado. Hoy soporta Next.js + Tailwind, con App Router de preferencia.
Si lo corro otra vez, ¿pierdo lo que edité a mano?
No. Todo lo auto-generado vive entre marcadores gnb-design-system:start y :end. Lo que escribas fuera de esos marcadores no se toca en un re-run, y si pides reemplazar todo, primero deja un respaldo .bak.
¿Me va a tocar mi tailwind.config?
No sin permiso. Si detecta que falta un token, te reporta cuál y espera confirmación antes de editar. Tampoco instala paquetes por su cuenta.
¿Por qué una ruta en la app y no Figma?
Porque un Figma desactualizado miente y el código en producción no. La página vive dentro de la app, se despliega con ella y refleja lo que el equipo realmente tiene a mano. Cuando diseño y código se contradicen, gana el que está corriendo.
El patrón de empaquetado viene de anthropics/knowledge-work-plugins (Apache 2.0) y buildermethods/bm-skills; la filosofía del bloque [CUSTOMIZE] es de Anthropic. Lo que agrega esta versión: la detección de stack que aborta en vez de generar basura, los marcadores que sobreviven un re-run, y el bloque que se mete a tu CLAUDE.md para que el siguiente agente consulte la página antes de inventar un componente.
Antes de instalar nada más
Te mando cómo se construyen estos skills por dentro.
Cada viernes: una táctica aplicable, la herramienta que la resuelve y qué costó. 3,000+ founders en LATAM. Gratis.