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

La diseñadora con la que trabajé el mes pasado entregó una refactorización completa del sistema de diseño en tres días. No es ingeniera. No sabe Bash. Nunca había escrito una expresión regular en su vida. Tenía Claude Code, un archivo CLAUDE.md y el hábito 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 está escrito por un ingeniero senior, para ingenieros senior. 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 los ingenieros, honestamente. Porque el problema de 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 resuelve en un desayuno.

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 larga duración que vive en tu terminal, lee todo tu repositorio, edita archivos, ejecuta pruebas, abre PRs y te responde cuando está confundido.

El cambio importante: no espera a que le digas qué línea editar. Le das un objetivo. Determina qué archivos abrir, qué cambiar, si añadir un nuevo componente 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 específicas. Empiezas a describir resultados. Describir resultados bien es su propia disciplina, tratada en ingeniería de prompts para diseñadores. "Actualiza cada componente Button para usar el nuevo token de anillo de enfoque, incluyendo la variante deshabilitada heredada, y asegúrate de que las historias de Storybook sigan pasando." Eso es una oración. También es un día de trabajo de design ops que desaparece en cuatro minutos.

El trabajo del 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, 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 a tu repositorio de diseño: cd ~/path/to/your/repo
5. Ejecuta: claude

La primera vez, 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 brief 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 compilación y rutas de pruebas. Está bien. También es dejar el noventa por ciento del valor real sobre la mesa.

Trata CLAUDE.md como un brief de diseño que le entregas a un diseñador completamente nuevo. Voz, reglas de marca, qué es este producto, qué nunca hacemos, cómo se ve el trabajo limpio aquí. Cada oración que pones en CLAUDE.md es una oración que nunca tendrás 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 falla en tu base de código. Se acumula.

Los cinco flujos de trabajo que importan

La mayoría de los tutoriales de Claude Code listan veinte funciones. 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.

Refactorización 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 propone una API consolidada e impleméntala detrás de un feature flag." Revisas la propuesta. Dices que sí. Se entrega.

De Figma a página. Pega una captura de pantalla de Figma o, mejor, conecta Figma MCP. 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 retroalimentación.

Propagación de tokens. La marca actualiza un color. "Reemplaza --color-accent en todo el monorepo y ejecuta typecheck." El trabajo no es escribir código, es valentía. Claude Code tiene valentía ilimitada y ego cero.

Revisión visual. "Inicia el servidor de desarrollo, toma capturas de pantalla de cada página y dime cuáles tienen espaciado roto o desbordamiento 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 algunos matices tipográficos, pero la estructura llegará.

Si tienes Figma, conecta el servidor Figma MCP. Eso 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 de tokens, toda la estructura. La calidad del resultado sube drásticamente. El modelo deja de adivinar.

De cualquier manera, una regla: siempre dale tu sistema de diseño existente, no un lienzo en blanco. "Construye esto con nuestros componentes" supera 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 tienen que parecer tu marca. Claude Code llama a generadores, no tiene criterio. Todavía le das el brief a Prismlight, Runesmith o a un ilustrador humano para eso.

Criterio subjetivo de layout. Puede diseñar 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 tipográfico está mal. Eso todavía eres tú.

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

Cualquier cosa donde el repositorio es un desastre. Si tu base de código no tiene un sistema consistente, ni CLAUDE.md, ni convención de nombres, ni tokens, Claude Code empeorará el desastre más rápido. Tienes que limpiar la base primero. Eso es frustrante pero también es justo.

Si quieres más análisis de flujos de trabajo de IA, explora el resto de Brainy Papers. Si quieres esto instalado 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, aquí está la lista real.

• Instalar Claude Code (comando npm, un minuto)
• Iniciar sesión y verificar que la sesión funciona
• Elegir un repositorio. Solo uno. Empieza pequeño.
• Escribir CLAUDE.md usando la plantilla anterior. Dedica una hora.
• Elegir uno de los cinco flujos de trabajo. Hacerlo de principio a fin.
• Revisar el diff cuidadosamente. No lo apruebes a ciegas. Eres el director de arte.
• Dile a Claude dónde se equivocó. Actualiza CLAUDE.md con la lección.
• Hacer otro flujo de trabajo. Hacerlo mañana.

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

Preguntas frecuentes

¿Necesito saber programar para usar Claude Code?

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

¿Es Claude Code seguro 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, fusiona cuando esté bien. Git te protege. También lo hace requerir que los PRs pasen las pruebas.

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 a partir de prompts pero no viven en tu repositorio a largo plazo. Claude Code es sin interfaz, vive en cualquier repositorio y es el más poderoso para bases de código existentes. Para prototipos completamente nuevos, v0 o Lovable es más rápido. Para trabajo de producto real, gana Claude Code.

¿Cuánto cuesta Claude Code?

Una suscripción a Claude Max lo cubre, y eso es por donde deberían empezar la mayoría de los diseñadores. Los equipos más intensivos pasan a los precios de 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 realmente quiere la funcionalidad. Mantén esas en tus manos. 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 los ingenieros que realmente construían la cosa. Eso significaba que los diseñadores esperaban. Por capacidad de sprint. Por trabajo de backend. Por que alguien más escribiera el código.

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 brief de diseño. Entrega el trabajo al agente. Revisa el diff como revisarías el mockup de un junior, con estándares. Devuélvelo cuando está mal. Envíalo cuando está bien.

La refactorización del sistema de diseño es de tres días, no tres sprints. El sitio de marketing se entrega esta semana, no el próximo trimestre. La actualización de tokens se propaga en minutos, no días de seguimiento.

Instálalo. Escribe el brief. Entrega el trabajo.