Claude Code para Diseñadores: La Configuración de un Diseñador en Activo

La diseñadora con la que trabajé el mes pasado lanzó un refactor completo de un sistema de diseño en tres días. No es ingeniería. No sabe Bash. Nunca había escrito una regex en su vida. Tenía Claude Code, un archivo CLAUDE.md y el criterio de señalar sus propias malas decisiones.

Esa es la versión de esta herramienta de la que nadie habla. Cada artículo sobre Claude Code lo escribe un ingeniero senior, para ingenieros seniors. Está lleno de carriles de agentes, scripts de hooks y flags oscuros. Los diseñadores lo leen, asumen que no es para ellos y cierran la pestaña.

Es para ti. Más que para la mayoría de ingenieros, honestamente. Porque el problema que tienen los diseñadores no es escribir código. Es mantener un sistema de diseño en diez repositorios mientras el equipo sigue añadiendo funcionalidades. Ese es exactamente el problema que Claude Code se desayuna.

Claude Code es un agente, no un autocompletado

Claude Code no es un clon de GitHub Copilot. No es una ventana de chat con tema de código. Es un agente de ejecución prolongada que vive en tu terminal, lee todo tu repositorio, edita archivos, ejecuta tests, abre PRs y te contradice cuando está confundido.

El cambio importante: no espera a que le digas qué línea editar. Le das un objetivo. Decide qué archivos abrir, qué cambiar, si añadir un componente nuevo o modificar uno existente, y cómo mantener el resto del código funcionando mientras lo hace.

Esa es la parte que lo cambia todo para un diseñador. Dejas de señalar líneas concretas. Empiezas a describir resultados. "Actualiza cada componente Button para que use el nuevo token de focus ring, incluida la variante legacy desactivada, y asegúrate de que las historias de Storybook siguen pasando." Eso es una frase. También es un día de trabajo de design ops que desaparece en cuatro minutos.

El trabajo de un diseñador siempre fue el criterio, no la sintaxis. Claude Code convierte el criterio en el producto real.

Instálalo en diez minutos

Necesitas tres cosas: Node.js, una terminal y una cuenta de Claude.

1. Abre la Terminal (Mac: Cmd+Space, escribe Terminal). Vas a escribir dos comandos. Eso es toda la instalación.
2. Instala Node si no lo tienes. Ve a nodejs.org, haz clic en la descarga LTS y ejecútala. Esa parte es un instalador normal con doble clic.
3. En la terminal, pega: npm install -g @anthropic-ai/claude-code
4. Navega hasta tu repositorio de diseño: cd ~/path/to/your/repo
5. Ejecuta: claude

En la primera ejecución, te guía para iniciar sesión. Listo.

El repositorio puede ser cualquier cosa: un paquete de sistema de diseño, un sitio de marketing en Next.js, un Storybook, una exportación de tokens de Figma, una configuración de Tailwind, lo que sea con lo que trabajes. Si es una carpeta con archivos, Claude Code puede leerla.

Escribe CLAUDE.md como un briefing de diseño, no como un readme

CLAUDE.md es el archivo que Claude Code lee primero cada vez que abre un repositorio. Los ingenieros lo usan para comandos de build y rutas de tests. Está bien. También es dejar el noventa por ciento del valor real sobre la mesa.

Trata CLAUDE.md como un briefing de diseño que le estás entregando a un diseñador nuevo. Voz, reglas de marca, qué es este producto, qué nunca hacemos, cómo es el trabajo limpio aquí. Cada frase que pones en CLAUDE.md es una frase que nunca tienes que repetir en el chat.

La plantilla que le doy a cada diseñador que incorporo:

# CLAUDE.md

## What this repo is
One line. "Marketing site for Acme, a B2B analytics tool for finance teams."

## Voice
Three adjectives that describe how we write. Three phrases we never use. One example of a sentence we would ship and one we would cut.

## Design system
Where tokens live (path). Where components live (path). How we name things. Forbidden patterns (no inline styles, no hardcoded hex, no px values for spacing).

## Components we have
One-line descriptions of Button, Card, Hero, Nav, etc. So Claude does not build a new one when we already have it.

## What clean work looks like
A short paragraph. "We ship small, focused PRs. We update the Storybook story when we change a component. We never introduce a new dependency without asking."

## What to ask before proceeding
"If you are about to add a new color, stop and ask. If you are about to rename a component, stop and ask."

## Review standards
"Every change must pass typecheck and lint. Screenshots of before/after for any visual change."

Escríbelo una vez por repositorio. Actualízalo cuando aprendas algo nuevo sobre cómo el agente la caga en tu base de código. Se acumula.

Los cinco flujos de trabajo que importan

La mayoría de tutoriales de Claude Code listan veinte funcionalidades. Cinco de ellas son donde aparece el noventa por ciento del valor de un diseñador.

Mantenimiento del sistema de diseño. "Encuentra cada lugar donde todavía usamos los valores de espaciado antiguos (8px, 16px, 24px) y reemplázalos con tokens (--space-2, --space-4, --space-6). Actualiza los componentes. Mantén las historias pasando." Dos minutos. Históricamente una semana.

Refactor de componentes. "Nuestro Button ha crecido hasta doce variantes. Audítalas. Dime cuáles tres se usan realmente y cuáles nueve están muertas. Luego propón una API consolidada e impleméntala detrás de un feature flag." Revisas la propuesta. Dices que sí. Se lanza.

De Figma a página. Pega una captura de Figma o, mejor, conecta Figma MCP (guía aparte próximamente). Di "construye esta sección hero usando nuestros componentes y tokens existentes, no nuevos." Te da un PR que coincide con el diseño en una o dos rondas de feedback.

Propagación de tokens. La marca actualiza un color. "Reemplaza --color-accent en todo el monorepo y ejecuta typecheck." El trabajo no es escribir, es tener valor. Claude Code tiene valor ilimitado y cero ego.

Revisión visual. "Arranca el servidor de desarrollo, toma capturas de pantalla de cada página y dime cuáles tienen espaciado roto u overflow comparado con el último deploy." Este es mágico si tu repositorio tiene Playwright o una configuración similar. Detecta cosas que tu ojo pasa por alto.

Dale el Figma, no la captura de pantalla

Si solo tienes un PNG, pega el PNG. Claude Code maneja imágenes. Se perderá la exactitud del espaciado y algún matiz tipográfico, pero la estructura llegará.

Si tienes Figma, conecta el servidor Figma MCP. Es una instalación de cinco minutos que le da a Claude Code acceso de lectura directo a tus frames de Figma. IDs de frames, nombres de capas, valores de espaciado, enlaces a tokens, toda la estructura. La calidad del resultado sube en picado. El modelo deja de adivinar.

De cualquier manera, una regla: dale siempre tu sistema de diseño existente, no un lienzo en blanco. "Construye esto con nuestros componentes" gana a "construye esto" absolutamente siempre. Si dejas el lienzo en blanco, Claude Code inventará componentes que ya tienes. Eso es trabajo desperdiciado.

Dónde Claude Code deja de ganarse tu confianza

Sé honesto contigo mismo. Aquí es donde la herramienta falla hoy.

Ilustración de marca real. Cualquier cosa que requiera un estilo artístico específico, trabajo de personajes dibujados a mano o mascotas de marca que tengan que parecerse a tu marca. Claude Code llama a generadores, no tiene criterio. Para eso sigues necesitando a Prismlight, Runesmith o un ilustrador humano.

Criterio subjetivo de maquetación. Puede maquetar una página correctamente. No puede decirte que la página es emocionalmente aburrida. No puede decirte que el hero necesita más aire. No puede sentir que una decisión de peso está mal. Eso sigues siendo tú.

Decisiones de producto desde cero. Puede implementar lo que le pidas. No puede decirte si deberías pedírselo. Ese sigue siendo el trabajo del diseñador, el que realmente se paga.

Cualquier cosa donde el repositorio es un desastre. Si tu base de código no tiene ningún sistema consistente, ningún CLAUDE.md, ninguna convención de nombres, ningún token, Claude Code empeorará el desastre más rápido. Tienes que limpiar los cimientos primero. Es frustrante pero también es justo.

Si quieres más análisis de flujos de trabajo con IA, explora el resto de Brainy Papers. Si quieres que esto se instale correctamente en tu equipo de diseño, contrata a Brainy y nos encargamos de la configuración más el primer flujo de trabajo real.

La lista de verificación inicial del diseñador

Día uno, esta es la lista real.

• Instala Claude Code (comando npm, un minuto)
• Inicia sesión y verifica que la sesión funciona
• Elige un repositorio. Solo uno. Empieza pequeño.
• Escribe CLAUDE.md usando la plantilla de arriba. Dedícale una hora.
• Elige uno de los cinco flujos de trabajo. Hazlo de principio a fin.
• Revisa el diff con cuidado. No lo apruebes a ciegas. Eres el director de arte.
• Dile a Claude dónde se equivocó. Actualiza CLAUDE.md con la lección.
• Haz otro flujo de trabajo. Hazlo mañana.

Una semana de eso y notarás la diferencia. Un mes y no querrás volver atrás.

Preguntas frecuentes

¿Necesito saber programar para usar Claude Code?

No. Necesitas saber qué quieres, cómo describirlo y leer un diff lo suficientemente bien como para decir "esto está bien" o "esto está mal". Si alguna vez le has dado feedback a un diseñador junior, tienes la habilidad.

¿Es seguro Claude Code en un repositorio de producción?

Sí, si usas una rama. Nunca lo ejecutes en main. Crea una rama, deja que Claude Code trabaje ahí, revisa el PR como cualquier otro PR y fusiona cuando esté bien. Git te protege. También lo hace exigir que los PRs pasen los tests.

Claude Code vs Cursor vs v0 vs Lovable, ¿cuál es la diferencia?

Cursor es un editor completo con Claude integrado. v0 y Lovable generan UI desde prompts pero no viven en tu repositorio a largo plazo. Claude Code es headless, vive en cualquier repositorio y es el más potente para bases de código existentes. Para prototipos nuevos, v0 o Lovable es más rápido. Para trabajo de producto real, Claude Code gana.

¿Cuánto cuesta Claude Code?

Una suscripción a Claude Max lo cubre, y eso es por donde debería empezar la mayoría de diseñadores. Los equipos con más carga pasan a precios por API. De cualquier manera, es barato comparado con el tiempo que ahorra en los flujos de trabajo anteriores.

¿Para qué nunca debería usar Claude Code?

Ilustración de marca, decisiones de criterio subjetivo, estrategia de producto, cualquier cosa que requiera saber por qué un usuario quiere realmente la funcionalidad. Eso quédatelo tú. Dale la ejecución repetitiva a la herramienta.

Ya no eres el junior

Durante mucho tiempo, los diseñadores eran las personas que dibujaban la visión y se la entregaban a ingenieros que construían la cosa de verdad. Eso significaba que los diseñadores esperaban. A que hubiera capacidad en el sprint. A que se hiciera el trabajo de backend. A que alguien más hiciera el tecleo.

Esa era terminó.

El junior ya no es una persona. El junior es un modelo. Tú eres el director de arte.

Escribe CLAUDE.md como un briefing de diseño. Entrégale el trabajo al agente. Revisa el diff como revisarías el mockup de un junior, con estándares. Devuélvelo cuando está mal. Lánzalo cuando está bien.

El refactor del sistema de diseño son tres días, no tres sprints. El sitio de marketing se lanza esta semana, no el próximo trimestre. La actualización de tokens se propaga en minutos, no en días de perseguir a gente.

Instálalo. Escribe el briefing. Lanza el trabajo.