No empieces preguntando qué paquete instalar. Empieza eligiendo la capa correcta. A 20 de abril de 2026, Claude Design es la ruta oficial de Anthropic cuando necesitas crear artefactos visuales y tu plan lo permite. Una project skill de Claude Code encaja mejor cuando el resultado debe respetar tokens, componentes, ejemplos y checks del repositorio. Una skill UI/UX de comunidad puede mejorar los defaults de diseño, pero solo después de revisar sus archivos y scripts. Si el sistema de diseño no tiene fuentes fiables, otra skill solo hará que Claude parezca más seguro sobre una base débil.
| Trabajo del lector | Ruta inicial |
|---|---|
| Crear prototipos, one-pagers, slides o conceptos visuales en Claude | Revisar Claude Design y las restricciones de plan |
| Hacer que Claude Code respete componentes y tokens del repo | Usar una project skill bajo .claude/skills/ |
| Mejorar rápido la calidad UI/UX de los primeros borradores | Revisar una community skill antes de instalarla |
| Corregir inconsistencia visual del equipo | Arreglar tokens, ejemplos, screenshots, reglas y checks |
La regla de parada es sencilla: si no hay tokens fiables, ejemplos de componentes, capturas, reglas de accesibilidad y criterios de aceptación, añadir otra skill no corrige el problema. Solo formaliza una fuente de verdad débil.
Son cuatro trabajos distintos
“Límite factual: las afirmaciones de producto y disponibilidad se apoyan en el anuncio de Claude Design, el Skills overview, la documentación de Claude Code skills y la documentación de custom skills. Los nombres de third-party skills son ejemplos que hay que inspeccionar, no recomendaciones oficiales de Anthropic.
El material en español mezcla vídeos sobre Claude Design, documentación oficial de skills, guías de Skills de Claude Code, listas de UI/UX skills, Reddit y páginas de catálogos. Eso confirma demanda real, pero también muestra el riesgo: tratarlo todo como si fuera un único problema de instalación.
Claude Design es una superficie de producto. Sirve cuando quieres crear un resultado visual: mockup, prototype, slide, one-pager, concepto de marca o dirección de interfaz.
Una project skill de Claude Code es una superficie de workflow del repositorio. Sirve cuando Claude Code debe cargar reglas, referencias, ejemplos y checks antes de tocar la UI.
Una community UI/UX skill es un acelerador opcional. Puede aportar proceso, taste defaults o checklists, pero no gobierna tu sistema de diseño.
La gobernanza del sistema de diseño es la fuente real. Tokens, componentes, Storybook, screenshots, reglas de interacción, accesibilidad y CI checks deben existir fuera de la skill.
Para artefactos visuales, mira primero Claude Design
Anthropic presentó Claude Design el 17 de abril de 2026 a través de Anthropic Labs. El anuncio lo describe como una forma de crear diseños, prototipos, slides, one-pagers y otros trabajos visuales con Claude. También dice que está impulsado por Claude Opus 4.7, en research preview, con despliegue gradual para Claude Pro, Max, Team y Enterprise.
Eso convierte a Claude Design en la ruta oficial de producto, pero no en una función universal disponible para todos. La entrada empieza en claude.ai/design, depende del plan y del rollout, y en Enterprise puede requerir activación del administrador.
Cuando Anthropic dice que Claude Design puede aplicar el sistema de diseño de un equipo, habla de una capacidad del producto si se le da acceso. No es lo mismo que tener un archivo local .claude/skills/design-system/SKILL.md para Claude Code.
Si el resultado es una exploración visual, empieza por Claude Design. Si el resultado debe editar código, reutilizar componentes, pasar tests o seguir reglas del repo, la ruta correcta se mueve a Claude Code.
Para fidelidad del repo, crea una project skill
Una project skill de sistema de diseño tiene valor cuando Claude Code necesita aplicar reglas locales una y otra vez. No debería ser un prompt largo que dice “hazlo bonito”. Debería apuntar a los activos que ya definen consistencia, accesibilidad y ajuste de implementación.
La ruta básica puede ser:
text.claude/skills/design-system/SKILL.md
Una forma mínima:
md--- name: design-system description: Use when UI work must follow this repository's tokens, components, examples, accessibility rules, and visual QA checks. --- Use when: - creating or editing UI in this repository - translating a mockup into production components - reviewing visual consistency before a frontend PR Read first: - `design/tokens.json` - `src/components/ui/` - `storybook/` - `docs/design-system.md` Rules: - use existing components before creating new primitives - preserve token names instead of hard-coding colors or spacing - check responsive, keyboard, and contrast behavior - explain any component divergence before editing
La clave es que la skill no intenta contener todo el sistema de diseño. Dice cuándo debe cargarse, qué fuentes leer primero, qué reglas no se pueden romper y qué checks deben pasar. La verdad sigue viviendo en tokens, componentes, docs y tests.
Si lo que necesitas es elegir skills de forma más general, empieza por la guía de Claude Code skills. El enfoque aquí es más estrecho: diseño de interfaz, repositorios y límites entre producto oficial, workflow local y comunidad.
Revisa las skills UI/UX de comunidad antes de instalarlas
En español ya aparecen vídeos, listas y guías sobre skills de Claude para diseñadores. Algunas pueden ser útiles. Ninguna merece confianza automática por estar en una lista o por tener un título atractivo.
Revisa cuatro cosas.
Procedencia. Quién la mantiene, dónde está el repositorio, qué cambió recientemente y si el autor explica el workflow previsto.
Contenido. Abre SKILL.md, referencias, ejemplos y scripts. Si la skill solo contiene frases estéticas, probablemente no sirve para producción. Si incluye scripts, léelos antes de ejecutarlos.
Riesgo. Comprueba ruta de instalación, shell commands, acceso a archivos, acceso a red y pasos que no deberían ejecutarse sin revisión humana.
Encaje. Una skill pensada para React y shadcn quizá no ayuda en una app nativa. Un style pack puede mejorar un borrador, pero no necesariamente respeta tu sistema de componentes.
El orden práctico es inspeccionar, instalar, probar en una rama descartable y quedarte solo con lo que reduce trabajo real.
A veces otra skill es la abstracción equivocada
Usa CLAUDE.md cuando la regla debe estar siempre presente: convenciones de nombres, biblioteca de componentes preferida, expectativas de accesibilidad y comportamiento general del repo.
Usa activos versionados cuando falta verdad. Tokens, stories, screenshots, notas de interacción y criterios de revisión necesitan un lugar propio. La skill puede señalarlos, pero no debería ser su único hogar.
Usa hooks o CI cuando la regla necesita enforcement. Visual regression, typecheck, lint y accessibility checks bloquean errores mejor que una instrucción en prosa.
Usa MCP u otra integración cuando Claude necesita acceso externo real. Si el sistema de diseño vive en Figma privado, un servicio de tokens, un issue tracker o documentación externa, la skill puede describir el flujo, pero la herramienta aporta los datos. Para esa capa, mira la guía de Claude Code MCP servers. Para comparar memoria, skills y MCP, usa Claude Code memory vs MCP vs skills.
Secuencia mínima para empezar
- Comprueba si Claude Design está disponible en tu cuenta u organización.
- Haz inventario del sistema de diseño del repo: tokens, componentes, ejemplos, screenshots, reglas de accesibilidad y checks.
- Crea
.claude/skills/design-system/SKILL.mdsolo si Claude Code necesita esos activos en trabajo UI repetido. - Mantén la skill como procedimiento: cuándo usarla, qué leer, qué no romper, qué checks correr.
- Pruébala con un cambio pequeño de UI. Observa reuse de componentes, fidelidad a tokens, responsive, teclado y contraste.
- Prueba community UI/UX skills solo después, en una rama, y elimina lo que añada ruido.
Si el problema es preferencia persistente del proyecto y no un método task-specific, empieza por la guía de Claude Code memory.
Preguntas frecuentes
¿Existe una skill oficial de Anthropic para sistemas de diseño?
No con ese nombre exacto como producto único. Claude Design es el producto oficial para trabajo visual. Claude Code skills es el mecanismo oficial para instrucciones reutilizables. Una skill de diseño bajo .claude/skills/ es un workflow de proyecto que puedes crear.
¿Un diseñador debe empezar con Claude Design o Claude Code?
Con Claude Design si necesita un artefacto visual. Con Claude Code si el resultado debe editar un repo, reutilizar componentes y pasar checks.
¿Qué debe llevar una project skill de sistema de diseño?
SKILL.md debe contener el procedimiento y apuntar a fuentes reales: token files, component directories, Storybook, docs, screenshots, accessibility rules y checks. La skill es el método, no el sistema.
¿Son seguras las community UI/UX skills?
Depende de procedencia, archivos, scripts, permisos y encaje. Lee el paquete antes de instalarlo y pruébalo en una rama.
¿Cuándo conviene saltarse otra skill?
Cuando lo que falta son archivos fuente, checks o acceso externo. Arregla tokens, components, examples, CI o integrations primero. Una skill debe amplificar un sistema fiable, no esconder uno débil.