Cómo uso Claude Code como arma secreta del diseñador
La semana pasada vi a un amigo diseñador pasar una demostración de Claude Code en Twitter. "Eso es cosa de desarrolladores", dijo, sin apenas mirar la pantalla. Treinta segundos de despido por algo que había remodelado por completo la forma en que construyo interfaces.
Ella no está sola. La mayoría de los diseñadores que conozco tratan a Claude Code como si fuera una habitación cerrada con un letrero de "Solo desarrolladores" en la puerta. Comandos de terminal, sistemas de archivos, generación de código: todo suena como lo opuesto a lo que los diseñadores se inscribieron. Y lo entiendo. La brecha entre arrastrar elementos en Figma y escribir comandos en un cuadro negro parece enorme.
Pero esto es lo que nadie le mostró a mi amigo. No le mostraron el momento en que escribí una sola oración en mi terminal y vi materializarse un panel SaaS completo dentro de su herramienta favorita: Figma. No le mostraron la sincronización bidireccional que te permite enviar cambios de Claude a Figma, modificarlos manualmente y luego devolver esos ajustes a Claude para otra ronda de iteración. Definitivamente no le mostraron Pencil.dev, una herramienta que envuelve todo el poder de Claude Code en una interfaz que en realidad parece algo que usaría un diseñador.
He pasado los últimos meses cerrando la brecha entre Claude Code y los flujos de trabajo de diseño. Algo de lo que encontré fue realmente emocionante. Algunas cosas fueron lo suficientemente frustrantes como para hacerme cerrar mi computadora portátil. Y algunas cosas caían en la categoría de "¿por qué nadie me dijo esto antes?"
De esa última categoría se trata esta publicación.
La confusión que mantiene alejados a los diseñadores
Antes de tocar algo técnico, necesito aclarar el mayor malentendido que veo en las comunidades de diseño. La gente sigue confundiendo a Claude Code con Claude el modelo. Suenan parecidos. Comparten un nombre. Pero son cosas fundamentalmente diferentes, y mezclarlas lleva a expectativas tremendamente equivocadas.
Claude el modelo, aquello con lo que chateas en claude.ai, es un modelo de lenguaje. Escribes texto y obtienes texto. No tiene idea de lo que hay en tu computadora. No puede abrir archivos, crear diseños ni interactuar con ninguna herramienta en su máquina. Piense en ello como un cerebro brillante flotando en un frasco. Inteligente, pero desconectado del mundo físico.
Claude Code es el cuerpo en el que vive el cerebro. Cuando ejecuta Claude Code en su máquina, a través del terminal, la aplicación de escritorio o VS Code, se pone en sus manos. Manos reales. Puede leer sus archivos, escribir otros nuevos, instalar paquetes, comunicarse con API y, sí, generar diseños que lleguen directamente a su espacio de trabajo de Figma. El cerebro de IA subyacente es el mismo (actualmente Claude Opus 4.6), pero el caparazón operativo que lo rodea lo cambia todo.
¿Por qué esto es importante para los diseñadores? Porque si intentaste chatear con Claude en la web y pensaste "esto no puede ayudarme a diseñar nada", tenías razón: acerca de esa interfaz específica. Claude Code es un animal completamente diferente.
Tuve una conversación con un líder de UX en una agencia mediana el mes pasado quien me dijo que había "probado con Claude para el diseño y no funcionó". Cuando le pregunté qué había hecho, describió haber copiado las especificaciones de los componentes de Figma en la ventana de chat y haber pedido sugerencias de diseño. Es como intentar utilizar Photoshop describiendo sus ediciones en un correo electrónico. La herramienta no estaba equivocada, la interfaz sí.
Aquí está el desglose que finalmente me hizo encajar:
| Característica | Modelo Claude (Web/API) | Código Claude |
|---|---|---|
| Acceso al sistema de archivos | Ninguno | Lectura/escritura completa |
| Integración de Figma | Ninguno | Sincronización bidireccional a través de MCP |
| Generación de diseño | Descripciones de texto solamente | Salida visual real |
| Interacción del sistema | Caja de arena aislada | Acceso completo a la máquina |
| Corre donde | Navegador o API | Terminal, aplicación de escritorio, código VS |
Una vez que se asimiló esta distinción, todo lo relacionado con Claude Code para el diseño empezó a tener sentido. Pero entender el concepto es una cosa: configurarlo es donde la mayoría de los diseñadores topan con su primer muro.
Ejecutar Claude Code (sin perder la cabeza)
Voy a ser honesto acerca de algo que la mayoría de los tutoriales omiten. El proceso de instalación de Claude Code no es difícil, pero sí desconocido. Si nunca antes has abierto una terminal, los primeros dos minutos te resultarán incómodos. Esa incomodidad desaparece rápidamente (he visto a diseñadores que nunca habían tocado una línea de comando configurarla completamente en menos de diez minutos), pero no voy a fingir que no existe.
Aquí tienes el paso a paso para Mac. Windows y Linux siguen un patrón similar con comandos diferentes.
Paso 1: abre tu terminal.
No tu navegador. No VS Code (todavía). La aplicación Terminal real en tu Mac. Presiona Cmd+Espacio, escribe "Terminal" y abre el primer resultado. Verás una ventana de texto con un cursor parpadeante. Aquí es donde comienza la magia.
Paso 2: Instale Claude Code.
Copie el comando de instalación de la documentación oficial de Claude para su sistema operativo. Pégalo en la terminal y presiona Enter. El instalador se encarga de todo: dependencias, rutas, configuraciones. Verás algo de texto desplazándose. Deja que termine.
Consejo profesional: Si ve un texto de error rojo durante la instalación, no entre en pánico. Tome una captura de pantalla y péguela en cualquier herramienta de chat de IA (irónicamente, incluso la interfaz web de Claude funciona aquí). Nueve de cada diez veces, la solución es una única dependencia faltante o un problema de permisos. He visto a diseñadores resolver sus propios errores de instalación más rápido que algunos desarrolladores junior con los que he trabajado.
Paso 3: Inicie Claude Code.
Una vez instalado, escriba claude en su terminal y presione Enter. Eso es todo. Ahora estás dentro de una sesión de Claude Code. La terminal se convierte en su ventana de conversación: usted escribe indicaciones, Claude responde y toma medidas.
Paso 4: Instale el complemento Figma MCP.
Esta es la parte que transforma Claude Code de una herramienta de desarrollo a una herramienta de diseño. MCP, que significa Model Context Protocol, es el puente entre Claude Code y herramientas externas como Figma. Copie el comando de instalación del complemento MCP de la documentación y ejecútelo dentro de su sesión activa de Claude Code.
Paso 5: Autentica tu cuenta Figma.
Después de instalar el complemento MCP, Claude Code le pedirá que conecte su cuenta Figma. Su navegador se abrirá con un cuadro de diálogo de permisos. Haga clic en "Permitir". Asegúrese de haber iniciado sesión en la cuenta Figma correcta. Aprendí esto de la manera más difícil cuando accidentalmente conecté mi cuenta personal en lugar de la de mi agencia y pasé veinte minutos preguntándome por qué no aparecía el archivo del equipo.
Ese proceso de cinco pasos es toda la configuración. Sin contenedores Docker. Sin variables de entorno. No hay archivos de configuración para editar manualmente. Y una vez hecho esto, no tendrás que volver a hacerlo nunca más.
Pero la configuración es sólo el requisito previo. Lo que sucede a continuación es cuando las cosas se vuelven realmente interesantes para los diseñadores y donde descubrí algunas capacidades que cambiaron la forma en que abordo el trabajo de diseño en las primeras etapas.
La sincronización bidireccional de Figma que cambió mi flujo de trabajo
La primera vez que probé la integración de Figma MCP, le envié a Claude Code este mensaje:
"Cree un panel negro y morado para una plataforma de análisis SaaS moderna en este archivo Figma".
Pegué la URL en un archivo Figma en blanco. Entonces esperé.
En aproximadamente noventa segundos, Claude Code generó un diseño de panel completo (barra lateral de navegación, tarjetas de métricas, un área de gráfico, tablas de datos, avatares de usuarios) y lo insertó directamente en mi archivo Figma. Cambié a mi pestaña Figma y ahí estaba. No es una captura de pantalla. No es una imagen estática. Capas y componentes reales de Figma que podía seleccionar, mover, cambiar el tamaño y editar.
Mi primera reacción fue de emoción. Mi segunda reacción, unos diez minutos después, fue más matizada.
El diseño generado fue impresionante como punto de partida. La lógica del diseño era sólida, la paleta de colores coincidía con mi sugerencia y la jerarquía de componentes tenía sentido. Pero no estaba listo para la producción. Algunos elementos tenían tamaños extraños. Algunas etiquetas de texto tenían caracteres emoji que no pedí. El comportamiento de respuesta era inexistente: todo estaba posicionado para una ventana gráfica específica.
Aquí es donde la sincronización bidireccional se vuelve poderosa. En lugar de tirar todo a la basura y volver a empezar desde cero, hice lo que haría cualquier diseñador: abrí el archivo Figma y comencé a arreglar las cosas a mano. Eliminé los emojis no deseados. Ajusté el espacio. Reagrupé algunos componentes que estaban mal anidados.
Luego, y esta es la parte que me hizo sentarme derecho, copié la URL de mi archivo Figma actualizado, volví a la terminal de Claude Code y dije: "Hice algunos cambios. Extraiga el diseño actualizado de este archivo Figma y refine la sección de visualización de datos".
Claude Code sacó mis cambios, reconoció lo que había modificado e repitió el diseño conservando mis ediciones manuales. Sincronización bidireccional. Colaboración real entre un diseñador humano y un agente de IA, con Figma como lienzo compartido.
Este es el flujo de trabajo que he adoptado después de un mes de experimentación:
- Generar: envíe a Claude Code un mensaje detallado con una URL de archivo Figma en blanco o parcialmente diseñada.
- Revisar: abre Figma, inspecciona lo que se generó. Identifique qué funciona y qué no.
- Refinar a mano: solucione los problemas obvios usted mismo. Eres diseñador: este es tu superpoder.
- Retroceder: envía la URL de Figma actualizada a Claude Code con instrucciones específicas para la siguiente iteración.
- Repetir: continúe con este ciclo hasta que el diseño cumpla con su estándar.
Lo que hace que esto sea poderoso no es un solo paso. Muchas herramientas pueden generar diseños a partir de indicaciones. El poder está en el circuito: el hecho de que Claude Code trate a Figma como un documento vivo en lugar de un objetivo de exportación de un solo disparo.
Debo mencionar algo que la mayoría del contenido promocional sobre este flujo de trabajo omite convenientemente. Los diseños generados necesitan trabajo real. La capacidad de respuesta es una debilidad conocida: Claude Code tiende a diseñar para una única ventana gráfica y no crea automáticamente variantes de respuesta. La lógica del diseño a veces falla de forma inesperada, especialmente en pantallas más pequeñas. Si está trabajando en una computadora portátil con espacio de pantalla limitado, los resultados serán peores que en una pantalla más grande. Obtuve resultados notablemente mejores cuando trabajo en mi monitor de 27 pulgadas en comparación con la pantalla de mi MacBook.
Estos no son factores decisivos. Son los mismos tipos de problemas con los que se enfrentaría al iterar en cualquier diseño en etapa inicial. La diferencia es que su punto de partida (lo que está iterando) apareció en sesenta segundos en lugar de seis horas.
En realidad no necesitas la terminal (pero ayuda saberla)
Sé lo que algunos diseñadores están pensando ahora mismo. "Todo esto suena genial, pero realmente no quiero escribir comandos en una terminal todos los días".
Punto justo. ¿Y honestamente? No es necesario.
Claude Code viene con una aplicación de escritorio que hace todo lo que hace el terminal, envuelta en una GUI adecuada. Mismo motor subyacente. Misma integración de Figma. Mismas capacidades. Simplemente una interfaz diferente, una con botones y un campo de entrada de texto en lugar de un símbolo del sistema.
Probé ambos exhaustivamente. La aplicación de escritorio es una forma perfectamente válida de trabajar y, para los diseñadores que desean minimizar su exposición a flujos de trabajo basados en terminales, es la elección correcta. Lo he usado para generar de todo, desde diseños de páginas Acerca de nosotros hasta páginas completas de productos de comercio electrónico, y los resultados fueron indistinguibles de los que obtuve a través del terminal.
Dicho esto, seguiría recomendando dedicar una hora a aprender los conceptos básicos del terminal. No porque la aplicación de escritorio sea inferior (no lo es), sino porque la alfabetización del terminal desbloquea todo un universo de herramientas adyacentes. Complementos de MCP, scripts personalizados, flujos de trabajo automatizados, canalizaciones de CI/CD que ejecutan Claude Code como parte de un proceso de implementación: todos estos son terminales primero. No los necesitas ahora. Pero dentro de seis meses, cuando las herramientas de diseño asistidas por IA estén aún más profundamente integradas en los flujos de trabajo profesionales, se alegrará de saber manejar una línea de comando.
Piense en ello como aprender HTML básico como diseñador. No lo necesita para la mayor parte de su trabajo diario. Pero los diseñadores que lo entienden tienen una ventaja permanente sobre aquellos que no lo entienden.
Pencil.dev: cuando quieres el camino más amigable
Aquí es donde las cosas se ponen interesantes para los diseñadores que desean generar diseños de IA pero que realmente, de verdad, no quieren lidiar con terminales o aplicaciones de escritorio que parezcan herramientas de desarrollador.
Pencil.dev es una plataforma de terceros que coloca una interfaz amigable para el diseñador además del motor de Claude Code. Lo conecta a su suscripción de Claude y, en lugar de un mensaje de terminal, obtiene un espacio de trabajo visual donde puede escribir solicitudes de diseño y ver los componentes materializarse en tiempo real en un lienzo en vivo.
Pasé una semana con Pencil y salí con sentimientos encontrados pero en su mayoría positivos.
Lo que hace bien: creación rápida de prototipos. Podría escribir "Crear una página de precios con tres niveles, tema oscuro, tarjetas redondeadas" y ver cómo el diseño se construye pieza por pieza en el lado izquierdo de la pantalla. Pencil también incluye kits de interfaz de usuario y sistemas de diseño prediseñados, para que puedas aplicar un estilo consistente sin describir cada detalle en el mensaje. Para sesiones de lluvia de ideas, paneles de estado de ánimo o generar conceptos rápidos para presentarlos a un cliente, es realmente rápido y sorprendentemente capaz.
Lo que no hace: exportar a Figma. A partir de ahora, Pencil existe en su propio ecosistema. Puede diseñar, iterar y perfeccionar dentro de la plataforma, pero no hay sincronización directa para enviar su trabajo a un archivo Figma. Para los diseñadores cuyo flujo de trabajo completo reside en Figma, esta es una limitación importante. Necesitaría recrear manualmente todo lo que desee conservar, lo que anula parte del propósito.
¿Mi recomendación? Utilice Pencil para la exploración y las primeras ideas: la fase de "¿y si intentáramos esto?" donde la velocidad importa más que la fidelidad. Luego cambie al flujo de trabajo Claude Code + Figma MCP cuando esté listo para crear algo que realmente entregará a los desarrolladores o presentará a los clientes.
Aquí hay una comparación rápida de los tres enfoques:
| Enfoque | Mejor para | Sincronización de Figma | Curva de aprendizaje | Velocidad |
|---|---|---|---|---|
| Código Claude (Terminal) | Control total, flujos de trabajo avanzados | Sí (bidireccional) | Moderado | Rápido |
| Código Claude (aplicación de escritorio) | Diseñadores reacios a los terminales | Sí (bidireccional) | Bajo | Rápido |
| Lápiz.dev | Creación rápida de prototipos, ideación | No | Muy bajo | Muy rápido |
Aquí no existe una única opción "correcta". Utilizo los tres dependiendo de la tarea y sospecho que la mayoría de los diseñadores acabarán adoptando un patrón similar. Lo importante es que la rampa de acceso exista en todos los niveles de comodidad.
Lo que la mayoría de las publicaciones de "Claude Code for Design" no le dirán
Quiero dedicar algo de tiempo a las cosas incómodas porque creo que aquí la honestidad importa más que las exageraciones.
Las demostraciones pulidas son engañosas. Cada presentación de Claude Code que hayas visto en las redes sociales representa el mejor resultado de alguien después de múltiples iteraciones. El primer resultado casi nunca es lo que se publica. He recibido indicaciones para producir diseños con elementos superpuestos, texto invisible sobre fondos del mismo color y jerarquías de componentes tan enredadas que desagruparlos en Figma creó más problemas de los que resolvió. Estos no son casos extremos raros: son parte del flujo de trabajo normal.
La capacidad de respuesta es una verdadera debilidad. Mencioné esto antes, pero vale la pena repetirlo. Claude Code diseña para una única ventana gráfica de forma predeterminada. La creación de variantes responsivas requiere indicaciones explícitas y detalladas y, aun así, los resultados a menudo necesitan ajustes manuales importantes. Si el diseño responsivo es fundamental para su proyecto (¿y cuándo no lo es?), planee realizar un trabajo manual sustancial después del paso de generación de IA.
Tu habilidad para dar indicaciones es muy importante. La brecha entre una sugerencia vaga y una detallada no es lineal, es exponencial. "Hazme un tablero" te dará algo genérico y soso. "Cree un panel de análisis de temática oscura con una barra lateral plegable, cuatro tarjetas KPI en la parte superior que muestren MRR, tasa de abandono, usuarios activos y puntaje NPS, un gráfico de líneas con datos de tendencias de 6 meses a continuación y una tabla ordenable de transacciones recientes en la parte inferior" le brindará algo notablemente cercano a lo que imaginaba. La inversión en aprender a escribir indicaciones detalladas y específicas rinde dividendos literalmente en cada tarea de diseño.
Esto no reemplaza el pensamiento de diseño. Claude Code puede ejecutar diseños visuales, pero no puede realizar investigaciones de usuarios. No puede entrevistar a las partes interesadas. No puede entender por qué un flujo en particular resulta confuso o por qué los usuarios siguen abandonando el paso tres de su incorporación. El juicio sobre el diseño, el pensamiento estratégico, la empatía por los usuarios, siguen siendo enteramente su dominio. Claude Code es una herramienta de producción, no una herramienta de estrategia.
Solía pensar que este último punto era obvio. Luego vi una publicación en LinkedIn del fundador de una startup que afirmaba que había "reemplazado su equipo de diseño con IA". La UX de su aplicación fue, como era de esperar, terrible. Hermosos componentes dispuestos en patrones que no tenían sentido para los humanos reales. Decoración sin diseño. No seas esa persona.
La evaluación honesta es la siguiente: Claude Code hace que la parte de producción del diseño sea dramáticamente más rápida y deja la parte de pensamiento completamente en tus manos. Si eres fuerte en el pensamiento de diseño y débil en la velocidad de producción, Claude Code es genuinamente transformador. Si espera que la IA piense por usted, simplemente producirá malos diseños más rápido.
Lo que realmente he creado con este flujo de trabajo
Los números y la teoría están bien, pero sé lo que me convenció: ver resultados reales. Esto es lo que mi flujo de trabajo Claude Code + Figma realmente produjo durante el último mes.
Paneles de control SaaS: He generado diseños de paneles iniciales para tres proyectos de clientes. Tiempo promedio desde el mensaje hasta el primer borrador de Figma: aproximadamente dos minutos. Tiempo promedio para perfeccionar ese borrador y convertirlo en algo que presentaría a un cliente: unos cuarenta y cinco minutos. Compare eso con mi flujo de trabajo anterior, donde un primer borrador tomaba de dos a tres horas. Los cálculos equivalen a aproximadamente una reducción del tiempo del 60 % en las fases iniciales de diseño.
Páginas de destino: He utilizado Claude Code para generar secciones destacadas en la mitad superior de la página, cuadrículas de funciones y tablas de precios. Las secciones principales tienden a ser los resultados más fuertes: diseños limpios con buena jerarquía visual. Las cuadrículas de funciones necesitan más iteraciones. Las tablas de precios son sorprendentemente buenas desde el primer momento.
Exploración de componentes: Este es mi caso de uso favorito y no lo esperaba. Cuando intento decidir cómo debe verse un elemento de la interfaz de usuario en particular, utilizo rápidamente cinco o seis indicaciones en Claude Code con diferentes direcciones estilísticas. "Muéstrame esta tarjeta con morfismo de vidrio". "Ahora inténtelo con un enfoque brutalista". "¿Qué tal un estilo neumórfico suave?" Realizar cinco exploraciones estilísticas diferentes en tres minutos es muchísimo más eficiente que burlarse de cada una manualmente.
Arranque del sistema de diseño: Utilicé Claude Code para generar una biblioteca de componentes inicial para un nuevo proyecto (botones, entradas, tarjetas, modales, patrones de navegación), todo siguiendo una paleta de colores y una escala de tipos especificada. Me dio alrededor del 70% de lo que necesitaba. El 30% restante requirió refinamiento manual para lograr coherencia y casos extremos. ¿Pero empezar desde el 70% en lugar de cero? Esa es una mejora significativa en el flujo de trabajo.
El plazo realista para sentirse cómodo con este flujo de trabajo: aproximadamente dos semanas de uso regular. Los primeros días se sienten complicados a medida que aprende qué hace que una sugerencia sea buena y no mediocre. Al final de la primera semana, tendrá una biblioteca de patrones de indicaciones que producen resultados útiles de manera constante. En la segunda semana, la herramienta desaparece de tu flujo de trabajo: dejas de pensar en "usar Claude Code" y empiezas a pensar en "diseñar".
Las victorias rápidas llegan rápidamente. Un concepto de página de destino en minutos en lugar de horas. Una variación de componente explorada en segundos en lugar de construida desde cero. Estas primeras victorias lo mantienen motivado durante la curva de aprendizaje.
Las ganancias a largo plazo son mayores. Una vez que haya internalizado los patrones de indicaciones y el flujo de trabajo de sincronización bidireccional, su rendimiento en el trabajo de diseño de producción aumentará sustancialmente. Envío constantemente conceptos de diseño iniciales entre un 50 y un 60 % más rápido que hace seis meses. El listón de la calidad no ha bajado: simplemente dedico menos tiempo a las piezas mecánicas y más a las decisiones que realmente importan.
Hacia dónde se dirige todo esto
Algo en lo que sigo pensando (y para lo que aún no tengo una respuesta clara) es cómo se verán los flujos de trabajo de diseño en doce meses. La integración de Figma MCP es relativamente nueva. Pencil.dev se encuentra en una etapa inicial. El propio Claude Code recibe importantes actualizaciones de capacidades aproximadamente cada trimestre. Las herramientas que describo hoy son las peores que jamás habrán existido.
Sospecho que el paso terminal desaparecerá dentro de un año. No porque los terminales sean malos, sino porque el ecosistema de complementos de Figma se pondrá al día. Puedo imaginar fácilmente un mundo en el que Claude Code sea solo otro panel dentro de Figma: seleccionas un marco, escribes un mensaje y la IA genera o modifica el contenido. Sin terminal. Sin configuración de MCP. Sin cambio de contexto.
Para los diseñadores que comiencen a aprender estas herramientas ahora, esa transición les resultará natural. Para los diseñadores que esperan hasta que llegue la versión "fácil", comenzarán desde cero mientras sus pares ya están en la iteración seis.
Esa es la verdadera razón por la que escribo esto. No porque Claude Code sea perfecto hoy en día, no lo es. No porque todo diseñador necesite convertirse en un experto en terminales: no es así. Sino porque los diseñadores que entienden los flujos de trabajo asistidos por IA en este momento están creando una brecha de habilidades que se agrava cada mes.
¿Mi amigo que pasó por la demostración de Claude Code? Le mostré la integración de Figma al día siguiente. Esa tarde pasó tres horas aprendiendo lo básico. La semana pasada, lo usó para presentar el concepto de un cliente del que había creado un prototipo en quince minutos. El cliente lo aprobó en el acto.
Ella ya no lo llama "cosa de desarrollador".
Así que aquí está mi desafío. Elija uno de los tres enfoques que describí (terminal, aplicación de escritorio o Pencil.dev) y dedique treinta minutos a ello esta semana. Sólo treinta minutos. Generar un diseño. Mira lo que pasa. Porque el peor resultado de intentarlo es que perdiste media hora. Y el mejor resultado es que cambies fundamentalmente tu forma de trabajar.
¿Cuánto valen tus treinta minutos?
Trabajemos juntos
¿Quiere crear sistemas de inteligencia artificial, automatizar flujos de trabajo o ampliar su infraestructura tecnológica? Me encantaría ayudar.
- Fiverr (compilaciones e integraciones personalizadas): fiverr.com/s/EgxYmWD
- Portafolio: mejba.me
- Ramlit Limited (soluciones empresariales): ramlit.com
- ColorPark (diseño y marca): colorpark.io
- xCyberSecurity (servicios de seguridad): xcybersecurity.io
