# Claude Design o skill de sistema de diseño: qué ruta usar primero

> Una guía práctica para elegir entre Claude Design, una project skill de Claude Code, una skill UI/UX de comunidad o la reparación del sistema de diseño.

- URL: https://blog.laozhang.ai/es/posts/claude-design-system-skill
- Published: 2026-04-20
- Updated: 2026-10-10
- Author: LaoZhang AI Team (https://blog.laozhang.ai/es/about)
- Topic: Claude Code
- Tags: Claude Design, Claude Code, Skills, Design Systems, Anthropic

---
No empieces preguntando qué paquete instalar. Empieza eligiendo la capa correcta. A 10 de octubre de 2026, Claude Design es la ruta oficial de Anthropic cuando necesitas crear artefactos visuales, y está en todos los planes, incluido el gratuito. 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 | Usar Claude Design (todos los planes desde el 8 de octubre de 2026) |
| 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](https://www.anthropic.com/news/claude-design-anthropic-labs), el [Skills overview](https://docs.claude.com/en/docs/agents-and-tools/agent-skills/overview), la [documentación de Claude Code skills](https://code.claude.com/docs/en/skills) y la [documentación de custom skills](https://docs.claude.com/en/docs/agents-and-tools/agent-skills/custom-skills). Los nombres de third-party skills son ejemplos que hay que inspeccionar, no recomendaciones oficiales de Anthropic.

![Tabla para elegir Claude Design, project skill, community UI UX skill o gobernanza](https://blog.laozhang.ai/posts/es/claude-design-system-skill/img/route-board.jpg)

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. En su lanzamiento funcionaba con Claude Opus 4.7, estaba en research preview y llegaba de forma gradual a Claude Pro, Max, Team y Enterprise.

Esas limitaciones de acceso ya no existen. Desde el 16 de septiembre de 2026, Claude Design funciona en cualquier conversación de Claude («Output» > «Design» en el cuadro de mensaje, o una plantilla Design en la pestaña de artefactos) y en Claude Code con `/design`. El 8 de octubre salió de beta y quedó activado por defecto en Free, Pro, Max, Team y Enterprise; en Enterprise se activa por defecto el 15 de octubre, y un propietario puede hacerlo antes en Organization settings > Artifacts. El sitio independiente `claude.ai/design` cierra el 14 de diciembre de 2026 ([ayuda de Claude Design](https://support.claude.com/es/articles/14604416)). Si aun así no lo ves, comprueba que «Cloud code execution and file creation» está activado en Settings > Capabilities o pide ayuda a un propietario en Enterprise. Que no aparezca en el menú es un ajuste, no una skill que falte por instalar.

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.

Ahora las dos capas se cruzan. Según la [ayuda para configurar un sistema de diseño](https://support.claude.com/es/articles/14604397), los sistemas de diseño son artefactos en Claude, en beta en Pro, Max, Team y Enterprise (no en el gratuito). Puedes crearlo en un chat a partir de recursos de marca, presentaciones, logos, fuentes o archivos de Figma, o, si tu sistema de diseño ya existe como componentes de React, ejecutar `/design-sync` en Claude Code, que lee directamente tus tokens y componentes. Los equipos que vienen del sitio independiente migran con «Migrate team design systems». Después, el sistema de diseño se puede usar en cualquier chat, también en Claude Code. Nuestra lectura de dónde termina: la ayuda describe colores, tipografía, componentes y patrones de maquetación que Claude aplica a nuevos diseños y presentaciones, y no habla de ejecutar tests, CI ni reglas del repositorio, así que los cambios de código siguen siendo cosa de una project skill y de checks deterministas.

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.

![Anatomía de una project skill de sistema de diseño en Claude Code](https://blog.laozhang.ai/posts/es/claude-design-system-skill/img/skill-anatomy.jpg)

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.
---

# Design System Skill

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](https://blog.laozhang.ai/es/posts/claude-code-best-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.

![Checklist para revisar community Claude UI UX skills](https://blog.laozhang.ai/posts/es/claude-design-system-skill/img/trust-checklist.jpg)

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](https://blog.laozhang.ai/es/posts/claude-code-best-mcp-servers). Para comparar memoria, skills y MCP, usa Claude Code memory vs MCP vs skills.

## Secuencia mínima para empezar

1. Abre Claude Design desde «Output» > «Design» o la pestaña de artefactos; está en todos los planes desde el 8 de octubre de 2026. Si tus componentes son de React y tienes Pro o superior, `/design-sync` en Claude Code los convierte en un sistema de diseño que Claude Design aplica.
2. Haz inventario del sistema de diseño del repo: tokens, componentes, ejemplos, screenshots, reglas de accesibilidad y checks.
3. Crea `.claude/skills/design-system/SKILL.md` solo si Claude Code necesita esos activos en trabajo UI repetido.
4. Mantén la skill como procedimiento: cuándo usarla, qué leer, qué no romper, qué checks correr.
5. Pruébala con un cambio pequeño de UI. Observa reuse de componentes, fidelidad a tokens, responsive, teclado y contraste.
6. 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](https://blog.laozhang.ai/es/posts/claude-code-memory).

## Preguntas frecuentes

### ¿Existe una skill oficial de Anthropic para sistemas de diseño?

No con ese nombre exacto como producto único. Lo más cercano oficial son los sistemas de diseño de Claude Design (beta, Pro y superiores), que `/design-sync` en Claude Code crea a partir de una librería de componentes React. 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. Desde el otoño de 2026 se conectan directamente: `/design` en Claude Code crea y edita diseños, y `/design-sync` convierte tu librería de componentes en un sistema de diseño.

### ¿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.

## Fuentes

Páginas externas que cita esta guía, en el orden en que aparecen. Última actualización: 2026-10-10.

- [anuncio de Claude Design](https://www.anthropic.com/news/claude-design-anthropic-labs) (anthropic.com)
- [Skills overview](https://docs.claude.com/en/docs/agents-and-tools/agent-skills/overview) (docs.claude.com)
- [documentación de Claude Code skills](https://code.claude.com/docs/en/skills) (code.claude.com)
- [documentación de custom skills](https://docs.claude.com/en/docs/agents-and-tools/agent-skills/custom-skills) (docs.claude.com)
- [ayuda de Claude Design](https://support.claude.com/es/articles/14604416) (support.claude.com)
- [ayuda para configurar un sistema de diseño](https://support.claude.com/es/articles/14604397) (support.claude.com)