Claude Code para diseño.

Qué es realmente Claude Code

Claude Code es la herramienta de codificación agéntica de Anthropic. Lee tu base de código, edita archivos, ejecuta comandos y se integra con tus herramientas de desarrollo — planifica, escribe y verifica el trabajo a partir de tareas en lenguaje natural, en lugar de limitarse a autocompletar líneas.

Se distribuye en varias superficies que comparten el mismo motor: una CLI de terminal, extensiones de IDE para VS Code, Cursor y JetBrains, una aplicación de escritorio con revisión visual de diferencias, y una experiencia web para tareas de larga duración. Tus archivos CLAUDE.md, ajustes y servidores MCP se trasladan a todas ellas.

• Archivo de instrucciones: Claude Code lee un archivo CLAUDE.md en la raíz de tu proyecto al inicio de cada sesión — el lugar natural para codificar tus convenciones de diseño, tokens y listas de verificación de revisión.
• Skills: Las Agent Skills empaquetan instrucciones, scripts y recursos reutilizables que Claude carga bajo demanda, incluida la skill oficial de Frontend Design de Anthropic para el gusto.
• Planificación y subagentes: Puede planificar antes de actuar y generar subagentes que trabajan en distintas partes de una tarea en paralelo, lo que mantiene coherentes las refactorizaciones grandes de UI.

• Proveedor: Anthropic
• Credencial: clave de API de Anthropic (BYOK, a través de la Console) o una suscripción a Claude (Pro / Max)
• Superficies: CLI de terminal, extensiones de VS Code / Cursor / JetBrains, aplicación de escritorio, web

Por qué Claude Code es bueno en diseño

Entre los agentes de codificación, Claude Code tiene reputación de buen gusto en el trabajo de frontend. Hay varias razones que lo explican.

• Decisiones específicas, no vagas: Claude Code tiende a comprometerse con opciones concretas — valores hex exactos, escalas de espaciado, rampas tipográficas y jerarquía de componentes — en lugar de andar con rodeos, que es lo que separa una interfaz real de un marcador de posición.
• Razonamiento consciente de la base de código: Con un contexto de trabajo amplio, refactoriza la UI a través de muchos archivos a la vez, reutilizando tus componentes y tokens existentes en lugar de reinventar estilos puntuales.
• Una skill de frontend oficial: Anthropic ofrece una skill de Frontend Design que hace que Claude escriba primero una dirección de diseño y se aleje deliberadamente de las fuentes de sistema genéricas y los predecibles degradados morados.

La lección es la misma que Anthropic plantea sobre sus propios modelos: Claude no tiene gusto por defecto — librado a su suerte, converge hacia el centro estadístico del diseño web (Inter, degradados morados, sombras suaves). Produce buen diseño cuando le das restricciones. Open Design empaqueta exactamente esos insumos, y por eso ambos encajan (más abajo).

Configura Claude Code para trabajo de diseño, desde cero

Este es el camino completo desde una máquina limpia hasta un Claude Code capaz de construir y verificar UI.

# 1. Install Claude Code (native install, recommended)
curl -fsSL https://claude.ai/install.sh | bash
# or: brew install --cask claude-code
# Windows PowerShell: irm https://claude.ai/install.ps1 | iex

# 2. Start it in your project and sign in on first run
cd your-project
claude            # sign in with your Claude subscription or API key

# 3. Generate project context
/init             # creates a CLAUDE.md for this project

# 4. Add the official Frontend Design skill
claude plugin install frontend-design@claude-plugins-official

# 5. Wire the Figma MCP server (optional, for design handoff)
claude plugin install figma@claude-plugins-official

• Codifica tus reglas de diseño: Coloca tus tokens, primitivas y convenciones en CLAUDE.md y dirige a Claude hacia ellas, para que el resultado coincida con una marca en lugar de recaer en un aspecto genérico.
• Añade verificación en el navegador: Conecta un MCP de Playwright o Chrome para que Claude renderice en un navegador real y compruebe su resultado en distintos breakpoints, en lugar de solo confirmar que la compilación pasa.

El flujo de trabajo de CLAUDE.md y Skills

El bucle de diseño de mayor apalancamiento con Claude Code es alimentarlo con referencias reales más tu contexto de diseño, y luego iterar hasta que la UI coincida — con CLAUDE.md y Skills llevando las restricciones, para que no las vuelvas a explicar en cada prompt.

1. Parte de las referencias visuales más claras que tengas — e incluye varios estados (escritorio y móvil, hover, vacío, cargando), no solo una única toma principal.
2. Sé específico en el prompt; los prompts vagos producen UI genérica incluso con un agente potente.
3. Mantén tu sistema de diseño y tus convenciones en CLAUDE.md, e indícale a Claude dónde viven los tokens y las primitivas canónicas.
4. Añade la skill de Frontend Design para que Claude se comprometa con una dirección estética real antes de escribir código.
5. Conecta la verificación en el navegador para que Claude renderice, redimensione a los breakpoints y compare con las referencias — no solo confirme que compila.

Arrastra una imagen de referencia a la sesión y formula el prompt con restricciones concretas:

claude "Implement reference-desktop.png and reference-mobile.png in
  React + Vite + Tailwind + TypeScript.
  Reuse the design-system components and tokens described in CLAUDE.md.
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser, verify it matches the references across
  breakpoints, and iterate until it does."

Ejecuta un servidor de desarrollo en paralelo, mantén los prompts pequeños y enfocados, y confirma las buenas iteraciones / revierte las malas (diciéndole a Claude cuándo reviertes) para que cada pasada parta de una base limpia. Usa el modo de planificación para refactorizaciones más grandes, de modo que puedas revisar el enfoque antes de que se modifique cualquier archivo.

Claude Code + Figma: round-trip diseño ↔ código

En febrero de 2026, Anthropic y Figma lanzaron una integración bidireccional de primera clase a través del servidor MCP de Figma. Funciona en ambas direcciones.

• Diseño → Código: Selecciona un frame en Figma o pega un enlace en Claude Code, extrae el contexto de diseño y pídele que implemente el diseño usando tu biblioteca de componentes existente. Code Connect mantiene el resultado alineado con tus componentes reales.
• Código → Diseño: Construye y previsualiza una funcionalidad en el navegador, y luego di “Send this to Figma” para capturar la UI en ejecución como capas editables de Figma — pantalla completa o un elemento seleccionado.

Instálalo una vez con claude plugin install figma@claude-plugins-official (el MCP de Dev Mode requiere un plan de pago de Figma). El mismo MCP de Figma está disponible para Claude Code, Codex, Cursor y VS Code — exactamente el tipo de capacidad portátil y multiagente que Open Design está hecho para orquestar.

Claude Code vs Codex vs Cursor para diseño

No hay un único ganador para el trabajo de diseño — cada agente tiene una fortaleza distinta, y los equipos con experiencia los combinan. Un resumen justo:

El veredicto recurrente de la comunidad es que el gusto proviene de las personas: los tres recaen en una estética genérica sin skills, referencias y restricciones. Ese es el verdadero problema a resolver — y tiene forma de herramienta de diseño, no de modelo.

Escollos y cómo evitar el aspecto de “bazofia de IA”

Incluso con la reputación de buen gusto de Claude Code, la queja más común sobre el diseño generado por IA es que parece genérico — fuentes Inter, degradados morados sobre blanco, sombras suaves, esquinas redondeadas excesivas, una estética que “grita que esto lo hizo una IA”. La propia Anthropic lo atribuye a la convergencia distribucional: las opciones seguras dominan los datos de entrenamiento web. Otros problemas reportados incluyen diseños móviles rotos e instrucciones que se filtran en el texto de la UI.

• Instala la skill de Frontend Design: Obliga a Claude a comprometerse con una dirección real y evita explícitamente las fuentes y degradados sobreutilizados por la IA.
• Habilita la verificación en el navegador: Haz que Claude renderice y se autoverifique en distintos breakpoints para que los diseños no se rompan en silencio en móvil.
• Aporta tokens y referencias: Los tokens de diseño reales y las capturas de referencia son la mayor palanca sobre la calidad del resultado.
• Codifica reglas en CLAUDE.md: Pon reglas de estilo como “sin tarjetas hero, máximo dos tipografías, jerarquía centrada en la marca” donde el agente las lea en cada ejecución.

Observa que cada mitigación consiste en dar al agente un contexto de diseño curado. Mantener ese contexto a mano, proyecto a proyecto, es el trabajo pesado que Open Design elimina.

Diseñar con Claude Code dentro de Open Design

Open Design es la capa de diseño open-source que el flujo de trabajo anterior no deja de pedir. Trata a Claude Code como un adaptador de primera parte y lo envuelve en una biblioteca curada de skills y sistemas de diseño, una canalización de render estructurada y una UI de escritorio local — para que el contexto de diseño que hace bueno a Claude Code esté ahí desde la primera ejecución, no se ensamble a mano cada vez.

1. Instala Open Design y selecciona Claude Code como tu agente.
2. Autentícate con tu clave de API de Anthropic (BYOK) o tu suscripción a Claude — las credenciales permanecen en tu máquina y nunca pasan por nuestros servidores.
3. Elige un sistema de diseño y una skill, y luego genera presentaciones, prototipos y landing pages con un gusto consistente.
4. Cada artefacto y archivo DESIGN.md vive en tu propio repositorio, no en una nube alojada.

El mismo agente Claude Code, la misma clave — más un flujo de trabajo de diseño real, portátil y open-source a su alrededor. Es local-first y Apache-2.0, así que nada de tu trabajo ni de tus credenciales sale de tu máquina.

Preguntas frecuentes

1. 01 ¿Es Claude Code bueno para el trabajo de diseño? +

   Sí — es ampliamente considerado el agente de codificación con mejor gusto para el frontend, tomando decisiones específicas y conscientes de la base de código sobre valores hex, espaciado y escalas tipográficas. Con la skill de Frontend Design, un sistema de diseño e imágenes de referencia reales en contexto, produce UI responsive de calidad de producción y puede verificarla en un navegador. Sin ese contexto tiende a recaer en un aspecto genérico, que es la brecha que Open Design cubre.

2. 02 ¿Necesito una suscripción a Claude para diseñar con Claude Code? +

   Puedes usar una clave de API de Anthropic (BYOK, a través de la Console) o una suscripción a Claude (Pro / Max). En cualquier caso, Open Design nunca actúa como proxy de tus credenciales — las usa directamente tu agente en tu máquina.

3. 03 ¿Claude Code o Codex para diseño de frontend? +

   Ambos son fuertes. Claude Code es conocido por decisiones de diseño específicas y conscientes de la base de código y por su razonamiento de frontend; Codex tiene un fuerte pulido visual y destaca en compilaciones delegadas en sandbox. Muchos equipos usan ambos — Open Design te permite cambiar de agente sin cambiar tu flujo de trabajo de diseño.

4. 04 ¿Cómo conecto Claude Code con Figma? +

   Instala el plugin oficial de Figma con claude plugin install figma@claude-plugins-official. Después podrás implementar frames de Figma en código usando el contexto de diseño, y enviar una UI en ejecución de vuelta a frames editables de Figma con “Send this to Figma”. El MCP de Dev Mode requiere un plan de pago de Figma.

5. 05 ¿Qué son las Skills y CLAUDE.md? +

   CLAUDE.md es un archivo markdown en la raíz de tu proyecto que Claude Code lee al inicio de cada sesión — el lugar para codificar tus convenciones de diseño. Las Skills empaquetan instrucciones y recursos reutilizables que Claude carga bajo demanda, incluida la skill oficial de Frontend Design de Anthropic. Open Design incluye una biblioteca curada de ambos para que te saltes la configuración por proyecto.

6. 06 ¿Cómo evito la estética genérica de “bazofia de IA”? +

   Instala la skill de Frontend Design, aporta tokens de diseño reales y capturas de referencia, codifica las reglas de marca en CLAUDE.md y habilita la verificación en el navegador. Open Design incluye todo esto como una biblioteca curada para que te saltes la configuración por proyecto.

7. 07 ¿Está Open Design afiliado a Anthropic? +

   No. Claude Code es un producto de Anthropic; Open Design es un proyecto open-source independiente que lo soporta como adaptador de primera parte. Claude y Claude Code son marcas comerciales de Anthropic.

8. 08 ¿Están seguros mis archivos y credenciales? +

   Sí — Open Design es local-first y Apache-2.0. Tus archivos, artefactos y DESIGN.md permanecen en tu propio repositorio, y tus credenciales de Anthropic las usa directamente tu agente, sin enrutarse nunca a través de los servidores de Open Design.