Skills de IA para Diseñadores: Claude Code, Cursor y Tokens

Skills de IA en una frase

Las skills de IA para diseñadores son paquetes Markdown versionados-cargados por Claude Code o Cursor-que codifican producto, UX y UI. Se apoyan en design tokens exportados y AGENTS.md (contrato del repo) en la raíz, no los sustituyen. Sin ese stack, los asistentes generan pantallas creíbles que ignoran tu escala y roles semánticos.

La mayoría de artículos listan skills para instalar. Este documenta qué se rompió cuando las instalamos igual-y qué arregló la deriva de tokens en PR.

Para quién es

Perfiles ilustrativos, no requisitos. Elige la fila que encaje con cómo entregas UI; si solo necesitas mocks en lienzo, usa Claude Design en lugar de skills en el repo.

Qué nos falló

• Demasiadas skills: cinco packs a la vez; el review se fue a reconciliar tono, no a calidad de UI.
• Skills antes de AGENTS.md (contrato del repo): diffs pulidos hasta que el PR mostró nombres var(--ds-*) inexistentes en tokens.css.
• MCP sin tokens: el frame abierto coincidía, el siguiente componente ignoró el sistema.
• Sin higiene de export: skills citaban roles semánticos con rellenos sin tokenizar en Figma.

Skills más útiles que sí mantuvimos

• UX writing - vacíos, errores y onboarding alineados a roles de contenido tokenizados
• Accesibilidad - WCAG con variables de color semánticas en Figma
• Frontend craft - layout y espaciado contra tokens.css

Research, motion y packs de decisiones de producto fueron opcionales. Respuesta práctica a “mejores Claude skills”: tres skills fijadas en git, no quince packs instalados.

Caso: violaciones de tokens en PR

La mejora vino de reglas de nombres y critique repetible, no de un modelo mayor. Mide literales en PR dos sprints antes de un tercer pack.

Checklist de workflow con IA

• □ Exportar tokens (DTCG + tokens.css en git)
• □ Crear AGENTS.md (contrato del repo) en la raíz (rutas, nombres, sin hex nuevo en componentes)
• □ Añadir skill de UX writing (copia local, versión fijada)
• □ Añadir skill de accesibilidad
• □ Probar en un ticket real en Claude Code o Cursor
• □ Auditoría de cobertura antes del merge

Qué es una skill (y qué no)

Una skill de Claude o regla de Cursor son instrucciones persistentes antes de generar: UX, accesibilidad o craft de frontend. No sustituye Claude Design en lienzo. Docs: Claude Code, reglas de Cursor, AGENTS.md.

Claude skills vs reglas de Cursor

Usamos el mismo Markdown en ambos clientes tras exportar tokens. Cursor no sustituye Claude Code en pasadas grandes de UI; las skills no sustituyen Cursor en tweaks diarios.

Pipeline visual (design system)

Figma Variables
        ↓ auditoría / export (Atomize)
JSON DTCG + tokens.css en git
        ↓
AGENTS.md
        ↓
Skills de Claude (copias locales)
        ↓
Claude Code / Cursor
        ↳ opcional: Figma MCP

Detalle DTCG: workflows de IA con tokens.

Skills que usamos en trabajo de design system

• AGENTS.md (contrato del repo) en la raíz: rutas de tokens, sin hex nuevo en componentes; se actualiza con la biblioteca Figma.
• Copias locales de las tres skills anteriores; versiones fijadas en git.
• Claude Code + Cursor en ramas con tokens.css.
• Atomize: sin tokenizar y cobertura antes de MCP o codegen.

No instales estas skills si…

Expectativas equivocadas, no repetición del checklist.

• Quieres que las skills sustituyan Figma o tu biblioteca de variables.
• Solo necesitas mocks en Claude Design sin path de codegen en el repo.
• Planeas más de dos packs comunitarios sin dueño claro en git.

Claude skills vs AGENTS.md

AGENTS.md es el contrato del repo (tokens, prohibiciones). Las skills son playbooks por disciplina. AGENTS.md sin skills funciona; skills sin AGENTS.md derivan a UI genérica.

Cómo crear tu propia skill de Claude

1. Plantilla de Claude Code o el mismo Markdown en .cursor/rules/.
2. 10–15 reglas de critique con rutas a tokens.css; prueba en Claude Code y Cursor en un ticket.

Skills vs Figma MCP vs Atomize

Veredicto: skills de IA para diseñadores

Las skills son la última capa: tokens, AGENTS.md (contrato del repo), las tres skills que mantuvimos, menos violaciones en PR, MCP opcional. El mismo flujo funciona en Claude Code y Cursor si ambos leen el mismo AGENTS.md y tokens.css.