Guía

Claude Code para diseñadores: qué es, qué puede y por dónde empezar

Qué es Claude Code, qué puede y qué no puede hacer un diseñador con él, cuánto cuesta y el flujo real de Figma a código, verificación y publicación.

19 de octubre de 2026 · 9 min de lectura

19 de octubre de 2026

9 min de lectura

Soy diseñador de producto. Este año llevé a producción, con Claude Code y sin un equipo de ingeniería, un marketplace de avisos clasificados en Chile: cuentas de usuario, publicación con fotos, mensajes, pagos y moderación. Del primer commit a tener pagos con dinero real funcionando en producción pasaron 18 días.

En el camino aprendí qué puede hacer un diseñador con esta herramienta, qué no, y qué parte del trabajo sigue siendo nuestra. Esto es lo que le diría a un colega que me pregunta por dónde empezar.

Qué es Claude Code, en términos de diseño

Claude Code es un agente de Anthropic que trabaja dentro de tu proyecto. No te entrega un fragmento de código para copiar y pegar: lee tus archivos, los edita, corre comandos (levantar el sitio, correr pruebas, sacar capturas) y te muestra lo que hizo. Funciona en la terminal, en la app de escritorio de Claude (pestaña Code), en VS Code, en JetBrains y en la web.

La mejor analogía que tengo: es como trabajar con alguien del equipo muy rápido, que conoce los frameworks y que hace exactamente lo que entiende que le pediste. Si el pedido es vago, el resultado es vago. Si tu archivo de Figma está desordenado, el código también.

Tres piezas que conviene conocer desde el primer día:

CLAUDE.md: un archivo con las reglas del proyecto que Claude lee al empezar cada sesión. Para un diseñador es el brief permanente.
MCP: el estándar con el que Claude Code se conecta a herramientas externas. Figma tiene un servidor MCP oficial que le permite leer tus frames, variables y componentes.
Skills y subagentes: procedimientos escritos que Claude sigue cuando hace falta (un QA visual, una auditoría de accesibilidad) y agentes con un rol propio que revisan el trabajo sin haberlo hecho.

Qué puede hacer un diseñador con Claude Code

Sin saber programar de antemano, puedes llevar a producción:

Sitios estáticos: landings, portafolios, sitios de clientes, documentación.
Tus frames de Figma convertidos en código con tus tokens y tus componentes, verificados contra el diseño.
Un design system en código: tokens sincronizados con las variables de Figma, componentes con sus estados y una página de catálogo que el equipo puede revisar.
Prototipos que funcionan de verdad, para probar con usuarios algo más real que un prototipo enlazado.
Auditorías con evidencia: accesibilidad WCAG 2.2, contraste, responsive, SEO, rendimiento y UX writing.

Qué no puede (o no deberías hacer solo)

Apps con cuentas, datos y pagos sin entender lo que publicas. Se puede, y mi caso es eso, pero aparecen bases de datos, permisos y seguridad. Si no sabes qué es una política de acceso a datos, no publiques datos de otras personas todavía.
Productos que manejan dinero, salud o datos sensibles sin una revisión de seguridad de alguien que sepa. Claude puede escribir código seguro; tú todavía no puedes comprobar si lo es.
Reemplazar a un equipo de ingeniería en un producto grande. Claude Code acelera equipos; no convierte a un diseñador en un equipo.

El flujo completo, de Figma a producción

Figma ordenado → MCP de Figma → Claude implementa con tus tokens
      → sitio local → verificación con evidencia → tú decides
      → publicación en Cloudflare, solo con tu confirmación

1. Ordena tu archivo de Figma

Claude lee tu archivo de forma muy literal. Cuatro cosas deciden la mitad del resultado:

Variables, no valores sueltos. Una variable color/acento se mapea a tu token --color-acento; un hex suelto obliga a adivinar.
Auto layout en todo lo que tiene estructura: se traduce a flex o grid. Las capas posicionadas a mano se traducen a posiciones absolutas que se rompen en móvil.
Nombres de capas con sentido. «Tarjeta de precio» dice algo; «Frame 427», nada.
Componentes con propiedades (tipo=primario, tamaño=md): le indican a Claude que en el código también es un componente con esas props.

2. Conecta Figma

La forma recomendada instala el plugin oficial de Figma, que trae el servidor MCP y los skills de Figma:

claude plugin install figma@claude-plugins-official

Después reinicia Claude Code, escribe /plugin, ve a la pestaña Installed, elige figma y autoriza con Allow access en el navegador. Para pasarle un diseño: clic derecho en el frame → Copy link to selection, y pegas el link en el pedido. El link trae un node-id, que es lo que le dice qué frame implementar.

Ojo: con el plan gratis de Figma, o con un asiento View o Collab en cualquier plan, el MCP permite hasta 20 llamadas al mes. Alcanza para probar. El paso a paso completo, con la opción manual y los errores comunes, está en Cómo conectar Figma con Claude Code.

3. Escribe las reglas una vez

Cada sesión de Claude Code empieza de cero. Lo que no está escrito, lo vas a repetir. Un CLAUDE.md en la raíz del proyecto lo resuelve:

## Reglas de diseño
- Solo tokens de `src/styles/tokens.css`. Nada de hex ni `text-[#...]`.
- Reutiliza `src/components/` antes de escribir markup nuevo.
- Revisa a 375 y 1440 px antes de decir que terminaste.

## Pregúntame antes de
Crear tokens, cambiar textos de venta o publicar.

Escribe /init y Claude genera un primer CLAUDE.md leyendo tu proyecto; las reglas de diseño las agregas tú. La documentación recomienda mantenerlo bajo 200 líneas. Más ejemplos en Qué es CLAUDE.md.

4. Pide una sección, no un sitio

«Hazme un portafolio» produce algo genérico. Un pedido acotado produce algo tuyo:

Implementa esta sección: https://www.figma.com/design/AbCdEf123/Landing?node-id=12-345
Va en src/pages/index.astro, después de los beneficios.
Antes de escribir código, muéstrame qué variables de Figma calzan con mis tokens
y cuáles no. No pegues colores en hex: si falta un token, pregúntame.

Un detalle que ahorra frustración: la herramienta principal del MCP, get_design_context, devuelve código de referencia en React con Tailwind por defecto. Si tu proyecto es Astro, dilo en el pedido. Ese código es una referencia, no el resultado final: la calidad está en adaptarlo a tus tokens y componentes.

5. Verifica con evidencia

Aquí está la diferencia entre un generador y un colega. Antes de dar algo por terminado:

Capturas de la sección al mismo ancho del frame, comparadas con la captura de Figma. Nunca vas a ver 0 % de diferencia (el navegador dibuja las letras distinto); lo que importa es dónde se concentra.
Accesibilidad con axe y Playwright. Una trampa común: el tag wcag22aa de axe activa una sola regla (target-size) y los tags no se acumulan. Para revisar WCAG 2.2 AA completo hay que listar wcag2a, wcag2aa, wcag21a, wcag21aa y wcag22aa.
Contraste: 4,5:1 para texto normal y 3:1 para componentes y foco.

6. Publica, con confirmación

Para un sitio estático, Cloudflare recomienda hoy Workers con Static Assets (no Pages) para proyectos nuevos. Basta un wrangler.jsonc que apunte a la carpeta del build:

{
  "name": "mi-sitio",
  "compatibility_date": "2026-10-19",
  "assets": { "directory": "./dist", "not_found_handling": "404-page" }
}

npx wrangler login
npx wrangler deploy --dry-run
npx wrangler deploy

El --dry-run compila sin publicar: úsalo siempre primero. Y deja escrito en tu CLAUDE.md que Claude nunca corre el deploy sin que se lo pidas.

Cuánto cuesta, de verdad

Qué	Costo a octubre de 2026	Nota
Claude Pro	US$ 20 al mes, o US$ 17 al mes pagando el año	Incluye Claude Code. El plan gratis de Claude no sirve
Figma con MCP, plan gratis o asiento View/Collab	Hasta 20 llamadas al mes	Para probar
Figma con MCP, asiento Dev o Full en Professional	Hasta 200 llamadas al día; el asiento Dev parte en US$ 12 al mes	Para trabajar a diario
Node.js, Git, Astro, Tailwind, Playwright	Gratis	Código abierto
Cloudflare para sitios estáticos	Gratis	Las peticiones a archivos estáticos son gratis e ilimitadas
Dominio propio	Opcional	Puedes partir con la URL gratuita de `workers.dev`

Por dónde empezar: tu primera tarde

Instala Claude Code. En Mac, Linux o WSL:
```
curl -fsSL https://claude.ai/install.sh | bash
```
En Windows, desde PowerShell:
```
irm https://claude.ai/install.ps1 | iex
```
Abre una terminal nueva y revisa con claude --version.
Instala Node.js en su versión LTS. Astro 7 pide la 22.22 o superior.
Crea un proyecto con npm create astro@latest y, dentro de la carpeta, suma Tailwind con npx astro add tailwind.
Abre Claude Code en esa carpeta escribiendo claude. La primera vez te pide confiar en la carpeta e iniciar sesión con tu cuenta Pro.
Elige el modo de permiso. Desde la v2.1.283, una sesión nueva arranca en modo auto: Claude actúa sin preguntar y un segundo modelo revisa cada acción. Mientras aprendes, pasa a Manual con Shift + Tab para aprobar cada cambio. Para cambios grandes, usa el modo Plan.
Escribe /init y agrega tus reglas de diseño al CLAUDE.md que genera.
Pide una sola sección, revísala con capturas y recién después pide la siguiente.

Errores comunes

Pedir todo de una vez. Un pedido acotado, revisado, y el siguiente.
Aceptar sin mirar. En una semana tienes un sitio que no reconoces. Revisa cada cambio visible.
Creer que el CLAUDE.md bloquea cosas. Claude lo trata como contexto, no como una regla forzada. Lo que tiene que cumplirse siempre va en un hook: un comando que Claude Code ejecuta en un momento fijo y que puede impedir una acción.
Usar bypassPermissions en tu equipo. La documentación lo reserva para contenedores aislados. Con tus archivos y tu sesión de Cloudflare abierta, no.
Gastar las llamadas de Figma en frames gigantes. Pide primero get_metadata (un esqueleto liviano del frame) y después el detalle solo de lo que necesitas.

Fuentes oficiales

Instalación y planes: https://code.claude.com/docs/en/quickstart y https://claude.com/pricing
Modos de permiso: https://code.claude.com/docs/en/permission-modes
CLAUDE.md: https://code.claude.com/docs/en/memory
MCP de Figma: https://help.figma.com/hc/en-us/articles/32132100833559
Límites del MCP de Figma: https://developers.figma.com/docs/figma-mcp-server/rate-limits-access/
Astro en Cloudflare: https://docs.astro.build/en/guides/deploy/cloudflare/

Si quieres el camino armado

Todo lo de este artículo lo convertí en un kit para diseñadores: «Del Figma a producción con Claude Code». Es una guía de 10 capítulos y un pack de 14 skills, 6 subagentes y 3 hooks probados uno por uno, con 5 plantillas de CLAUDE.md y 2 proyectos de partida en Astro. Es de pago; aquí está todo lo que incluye.

Si prefieres probar antes, hay 3 skills del kit gratis (UX writing en español, contraste de colores y SEO básico) en un repositorio público de GitHub. El kit no está afiliado a Anthropic.