Cómo Claude Code me convirtió en diseñador de UI

Cómo Claude Code me convirtió en diseñador de UI

Tengo una confesión que me haría quedar en ridículo en cualquier meetup de diseño: llevo años siendo ingeniero de software y todavía no puedo hacer que un botón se vea bien desde cero. ¿Un sistema distribuido complejo? Lo diseño dormido. ¿Elegir una paleta de colores y maquetar una sección hero? Me quedo mirando una pantalla en blanco durante una hora y produzco algo que parece sacado del 2009.

Eso cambió hace tres semanas cuando instalé un simple archivo markdown en mi configuración de Claude Code.

El archivo se llama "front-end design skill" (habilidad de diseño front-end), y transforma Claude Code de un asistente de programación en algo que no esperaba: un diseñador de UI genuinamente capaz que toma un breve prompt de texto y produce secciones hero, landing pages y layouts de componentes que parecen hechos por un diseñador real. No "bastante bien para ser IA". Realmente bien. El tipo de resultado que le mostré a una amiga diseñadora y me preguntó qué shot de Dribbble estaba usando como referencia.

Descubrí esto a través de un desafío de diseño de UI de 30 días que se ha estado realizando en designcourse.com, donde más de 600 participantes están usando Claude Code para generar diseños a partir del mismo brief de negocio. La misma empresa ficticia, las mismas restricciones, resultados totalmente diferentes — porque el diferenciador no es la IA. Es cómo le hablas.

Entré esperando producir mockups mediocres y aprender algunos trucos. Lo que realmente sucedió fue un cambio fundamental en cómo pienso sobre la frontera entre ingeniería y diseño. Y voy a guiarte exactamente por cómo configurar esto, cómo se ve realmente el resultado, y por qué esto importa mucho más que otro titular de "la IA puede hacer imágenes bonitas".

Pero aquí viene la parte que más me sorprendió — y la razón por la que estoy escribiendo esto en lugar de simplemente compartir una captura de pantalla. El sistema de skills detrás de esto no es magia. Es un patrón que aplica a cualquier dominio en el que quieras que Claude Code sea mejor. El diseño simplemente fue el que hizo que el concepto hiciera clic para mí.

Por qué los ingenieros construyen cosas feas (y por qué no es realmente nuestra culpa)

Antes de mostrarte la configuración, quiero abordar algo que me ha molestado durante años. La cultura de la ingeniería trata la habilidad de diseño como opcional — algo deseable que algunas personas traen de nacimiento y otras no. Lo escuchas por todas partes: "Yo soy de backend." "No tengo el gen del diseño." "Haz que funcione y ya, contrataremos a alguien para que lo haga bonito."

Esta mentalidad crea un problema real. La mayoría de los proyectos personales, herramientas internas y MVPs mueren viéndose terribles — no porque la ingeniería sea mala, sino porque la persona que los construyó no pudo cerrar la brecha entre "funciona" y "alguien realmente querría usar esto." Yo mismo he matado tres proyectos personales, no porque el código estuviera roto, sino porque no pude hacer que la landing page se viera lo suficientemente creíble como para que alguien lo tomara en serio.

La brecha de habilidad en diseño no se trata de talento. Se trata de vocabulario. Los diseñadores piensan en términos de jerarquía visual, proporciones de espacio en blanco, contraste de color y ritmo tipográfico. Los ingenieros piensan en términos de flujo de datos, arquitectura de componentes y gestión de estado. Estamos resolviendo problemas diferentes con modelos mentales diferentes, y la brecha de vocabulario significa que incluso cuando sé cómo se ve un buen diseño (lo identifico inmediatamente), no puedo producirlo porque no tengo el lenguaje intermedio adecuado.

Eso es exactamente lo que el front-end design skill le da a Claude Code. Es una capa de traducción — un conjunto de principios de diseño, patrones de componentes y marcos de toma de decisiones visuales escritos como instrucciones que Claude Code incorpora a su contexto. Cuando le pides que construya una sección hero, no solo escribe HTML y CSS. Toma decisiones de diseño: dónde colocar el peso visual, cómo crear contraste, qué animación agrega pulimento sin ser molesta, cómo guiar la mirada del titular al CTA.

Me estoy adelantando. Déjame mostrarte la configuración real, porque toma unos dos minutos y el resultado es inmediato.

Configurar el Front-End Design Skill (2 minutos, sin experiencia en diseño necesaria)

El sistema de skills en Claude Code es una de sus funcionalidades más infravaloradas. Los skills son archivos markdown que inyectan conocimiento e instrucciones específicas de un dominio en el contexto de Claude Code. Piensa en ellos como darle a tu asistente de IA un curso intensivo en una disciplina específica antes de que empiece a trabajar.

Este es el proceso exacto de configuración:

Paso 1: Encuentra tu directorio de configuración de Claude Code.

La ruta depende de tu sistema operativo:

macOS: ~/.claude/
Linux: ~/.claude/
Windows: %USERPROFILE%\.claude\

Paso 2: Crea la estructura de carpetas para skills.

mkdir -p ~/.claude/skills/designer

Paso 3: Descarga y coloca el archivo del skill.

El front-end design skill es un archivo markdown (normalmente llamado skill.md) que contiene instrucciones detalladas sobre principios de diseño, patrones de componentes, teoría del color, tipografía, estrategias de layout y directrices de animación. Colócalo en la carpeta que acabas de crear:

~/.claude/skills/designer/skill.md

Paso 4: Reinicia Claude Code.

Cierra y vuelve a abrir tu terminal. Claude Code detectará automáticamente el nuevo skill al arrancar.

Paso 5: Usa el skill.

Cuando quieras resultados con calidad de diseño, añade como prefijo a tu prompt /frontend design. Esto le indica a Claude Code que active el contexto del skill de diseño antes de procesar tu solicitud.

Eso es todo. Dos minutos. Sin paquetes npm, sin dependencias, sin archivos de configuración. Solo un archivo markdown en la carpeta correcta.

Consejo pro: Puedes echar un vistazo dentro del archivo del skill para entender qué le está enseñando realmente a Claude Code. Es inglés legible — principios de diseño, patrones de componentes, mejores prácticas de CSS, directrices de animación. Leerlo me enseñó más sobre fundamentos de diseño que la mayoría de los posts de "diseño para desarrolladores" que he encontrado. El archivo del skill en sí es educativo, incluso antes de que la IA lo use.

Ahora déjame mostrarte qué pasa cuando realmente usas esto.

Mi primer prompt — Y por qué el resultado me hizo replantearlo todo

El desafío de 30 días asignó un concepto de negocio específico para el primer reto: un servicio de inspección de viviendas con IA que usa visión por computadora para analizar imágenes de espacios de acceso, techos y cimientos, detectando defectos y generando automáticamente informes de inspección estandarizados.

Todos reciben la misma idea de negocio. Las mismas restricciones. La prueba es qué tan bien puedes comunicar tu visión de diseño a través de un prompt.

Mi primer intento fue deliberadamente mínimo. Quería ver qué podía hacer el skill con casi ninguna guía:

/frontend design Create a hero section for an AI home inspection
business that uses computer vision to detect structural defects
in crawl spaces, roofs, and foundations, then generates automated
inspection reports.

Treinta segundos después, tenía un archivo HTML completo con CSS embebido. Lo abrí en un navegador y — no estoy exagerando — mi primera reacción fue "espera, eso está realmente bien."

Un layout de dos columnas. Tipografía sans-serif limpia con jerarquía visual adecuada. Un titular en negrita que comunicaba la propuesta de valor sin ser verboso. Texto de apoyo que explicaba el servicio de forma concisa. Un botón CTA prominente con buen contraste. Un fondo degradado sutil que se sentía moderno sin ser tendencioso. En el lado derecho, un elemento de UI placeholder sugiriendo la interfaz de inspección, con una suave animación CSS que atraía la mirada sin ser molesta.

¿Era perfecto? No. La paleta de colores era un poco genérica — azules y blancos seguros que gritaban "plantilla de startup tech." La animación era ingeniosa pero no del todo correcta para una marca de inspección de viviendas. El copy era funcional pero le faltaba personalidad.

Lo que importa es esto: era un punto de partida creíble. No un wireframe. No un boceto. Una sección hero completamente renderizada y responsive que podía mostrar a alguien y tener una conversación productiva sobre la dirección del diseño. Como desarrollador, nunca había sido capaz de producir ese punto de partida por mi cuenta. O pasaba horas obteniendo algo mediocre, o me saltaba el diseño por completo e iba directo a la funcionalidad.

El segundo prompt es donde las cosas se pusieron interesantes.

La iteración es la verdadera habilidad — Cómo pasé de bueno a genuinamente impresionante

El poder de este flujo de trabajo no está en el primer resultado. Está en la velocidad de iteración. Este es el prompt de seguimiento que envié:

Adjust the design: use a warm, earthy color palette (think terracotta,
sage green, warm grays) to feel more grounded and trustworthy for
homeowners. Replace the animation with a subtle parallax effect on the
hero image. Make the headline bolder and more direct — something that
addresses the homeowner's anxiety about hidden structural problems. Add
a secondary CTA for a free demo.

Doce segundos después, una sección hero completamente rediseñada. La misma estructura, pero la vibra era totalmente diferente. Los tonos tierra la hacían sentir confiable — como una empresa a la que realmente dejarías entrar a tu casa. El titular ahora decía algo sobre encontrar los problemas antes de que encuentren tu billetera. El efecto parallax añadía profundidad sin ser efectista. Dos CTAs: "Obtén tu inspección gratuita" (primario) y "Mira cómo funciona" (secundario, estilo con borde).

Esta versión era dramáticamente mejor. No porque la IA fuera dramáticamente más inteligente, sino porque yo fui capaz de articular lo que quería a través de un lenguaje de diseño específico. Y ese es el currículo oculto de todo este ejercicio — usar herramientas de diseño con IA te enseña a pensar sobre diseño en términos concretos y comunicables.

Tercer prompt — la pasada de pulido:

The layout is great. Refine these details: add a trust bar below the
fold with logos for "As Featured In" placeholders. Increase whitespace
between the headline and body copy by about 20%. The secondary CTA
should have a hover animation that fills with the primary color. Add a
subtle noise texture to the background for warmth.

Seis segundos. Cada una de esas cuatro peticiones fue implementada con precisión. La textura de ruido añadió una cualidad táctil que llevó el diseño de "limpio" a "artesanal." La barra de confianza creó credibilidad instantánea. La animación de hover en el CTA secundario era suave y satisfactoria.

Tres prompts. Quizás cinco minutos en total, incluyendo el tiempo que pasé pensando qué pedir. Y el resultado era algo que genuinamente pondría en un sitio web en producción.

Aquí tienes un desglose de lo que aprendí sobre el prompting efectivo de diseño durante el desafío:

El punto ideal está en el tercer o cuarto prompt. Tu primer prompt establece la estructura. Tu segundo prompt clava el estado de ánimo y la personalidad. Tu tercer prompt maneja los detalles que separan lo amateur de lo profesional. La mayoría de la gente se detiene en el primer prompt y se pregunta por qué el diseño con IA "no se ve tan bien."

Lo que 600 personas diseñando lo mismo me enseñaron sobre los prompts

El aspecto más fascinante de este desafío no son los diseños individuales — es la variación. La misma IA, el mismo archivo de skill, el mismo concepto de negocio, casi 200 diseños enviados solo en el primer reto. Cada uno se ve diferente.

Algunos fueron oscuros y dramáticos — secciones hero casi cinematográficas con fotografía de alto contraste y tipografía audaz. Otros fueron minimalistas y limpios — mucho espacio en blanco, colores discretos, dejando que el copy hiciera el trabajo. Algunos fueron a modo ilustración completa — gráficos con estilo personalizado y acentos dibujados a mano que hacían que el servicio de inspección con IA se sintiera accesible en lugar de frío.

La variación demuestra algo importante: el front-end design skill no impone un estilo. Le da a Claude Code alfabetización en diseño — la capacidad de tomar decisiones visuales informadas — pero la dirección viene enteramente del humano. Tu prompt es el director creativo. La IA es el diseñador de producción ejecutando tu visión.

Revisé docenas de envíos y noté patrones en lo que separaba los diseños más fuertes de los más débiles:

Los diseños fuertes describían una sensación, no solo características. "Haz que se sienta como el sitio web de un contratista familiar de confianza, pero moderno" produce resultados fundamentalmente diferentes que "agrega un encabezado con el nombre de la empresa y un botón CTA."

Los diseños fuertes especificaban lo que no querían. "Nada de vibra de foto de stock. Nada de estética genérica de startup tech. Nada de degradados que parezcan todas las landing pages SaaS." Las restricciones afinan las decisiones de la IA.

Los diseños fuertes iteraron. Los mejores envíos compartieron abiertamente que usaron de 4 a 7 prompts para llegar a su diseño final. Nadie produjo su mejor trabajo al primer intento. Eso no es una limitación de la IA — así es como funciona el diseño, punto.

Los diseños débiles trataron a la IA como una máquina expendedora. Un prompt, aceptar el resultado, listo. Los resultados eran competentes pero poco memorables — técnicamente sólidos pero sin ese toque humano que hace que el diseño se sienta intencional.

Esto se mapea perfectamente a cómo he visto a los ingenieros interactuar con herramientas de IA para programar, por cierto. Los que obtienen resultados mediocres son los que envían un solo prompt y aceptan lo que sea que salga. Los que obtienen resultados excepcionales tratan a la IA como un colaborador — dan un prompt, revisan, redirigen, refinan. La herramienta amplifica tu gusto y criterio. No los reemplaza.

Si has seguido mis publicaciones sobre construir un segundo cerebro con Claude Code, esto debería sonarte familiar. El mismo principio aplica — resultados de calidad requieren contexto de calidad y refinamiento iterativo, no un único prompt perfecto.

Más allá de las secciones hero — Por qué el patrón de skills importa más que el diseño

Aquí es donde quiero ampliar la perspectiva, porque el desafío de diseño está genial pero el patrón subyacente es lo que realmente me emociona como ingeniero.

El front-end design skill es un archivo markdown con instrucciones. Eso es todo lo que es. Un conjunto de principios, patrones y directrices que Claude Code lee y aplica. El mismo mecanismo funciona para literalmente cualquier dominio.

¿Quieres que Claude Code escriba mejores migraciones de base de datos? Crea un archivo de skill con las convenciones de migración de tu equipo, patrones de nomenclatura, estrategias de rollback y errores comunes. ¿Quieres que genere mejores casos de prueba? Escribe un skill que describa tu filosofía de testing, requisitos de cobertura y patrones de aserción.

He empezado a crear skills para todo lo que hago repetidamente:

• Skill de diseño de API: Convenciones REST, patrones de paginación, formatos de respuesta de error, estrategia de versionado
• Skill de revisión de código: Qué busco durante las revisiones, anti-patrones comunes en nuestro codebase, checklist de seguridad
• Skill de documentación: Estructura de documentación de nuestro equipo, directrices de tono, plantillas de ejemplo

Cada uno es un archivo markdown. Cada uno toma quizás 30 minutos para escribir inicialmente. Y cada uno hace que Claude Code sea dramáticamente mejor en ese tipo específico de trabajo.

El skill de diseño simplemente resulta ser el ejemplo más visualmente impactante. Cuando Claude Code produce una sección hero hermosa, la mejora es inmediatamente obvia. Cuando produce una migración de base de datos mejor estructurada, la mejora es igual de real pero menos fotogénica.

Consejo pro: Los skills se componen de forma elegante. He empezado a combinar mi skill de diseño front-end con un archivo de contexto específico del proyecto. Cuando digo "construye una sección hero para nuestro producto," Claude Code ahora recurre tanto a principios generales de diseño (del skill) como a conocimiento específico de la marca (del archivo de contexto) — nuestra paleta de colores, nuestras elecciones tipográficas, nuestro lenguaje de diseño. El resultado se siente como si viniera de nuestro equipo de diseño, no de una IA genérica.

Esta componibilidad es donde vive el verdadero poder. Skills + contexto persistente + prompting iterativo = calidad de resultado que es genuinamente difícil de distinguir del trabajo producido por humanos.

Pero necesito ser honesto sobre las limitaciones, porque las hay reales.

Lo que esto no puede hacer (todavía) — Limitaciones honestas del diseño impulsado por IA

Te haría un flaco favor si presentara esto como "la IA reemplaza a los diseñadores." No lo hace. Ni de cerca. Esto es con lo que he encontrado que realmente tiene dificultades:

Sistemas de diseño complejos de múltiples páginas. El skill funciona de maravilla para componentes y páginas individuales. ¿Construir un sistema de diseño consistente y cohesivo a lo largo de toda una aplicación? Eso todavía requiere pensamiento de diseño humano. La IA puede producir componentes que son individualmente excelentes pero no siempre se sienten como si pertenecieran juntos sin un prompting cuidadoso.

Casos extremos de responsive. El HTML/CSS generado es responsive en el sentido básico — maneja escritorio y móvil. Pero los breakpoints intermedios complicados, los layouts de tablet en horizontal, los casos de "qué pasa cuando este titular tiene 3 palabras contra 12 palabras" — esos todavía necesitan atención manual.

Matices específicos de marca. La IA entiende principios de diseño. No entiende inherentemente el alma de tu marca. Puede generar algo que se ve profesional, pero hacer que se sienta auténticamente como una marca específica requiere o un prompting muy detallado o (mejor) un archivo de contexto específico del proyecto que describa la personalidad de la marca.

Flujos de experiencia de usuario. Una sección hero es una pantalla. Un flujo de onboarding, un funnel de checkout, un formulario de varios pasos — estos requieren entender psicología del usuario, no solo diseño visual. El skill ayuda con la ejecución visual, pero el pensamiento estratégico sobre qué diseñar y por qué sigue siendo territorio enteramente humano.

Refinamiento al píxel perfecto. El resultado te lleva al 85-90% del camino. Ese último 10-15% — el ajuste de kerning, el tweak de 2px de padding, el timing de micro-animación — eso sigue siendo más rápido hacerlo a mano en CSS que describirlo en un prompt.

Quiero ser claro sobre mi posición aquí: esta herramienta hace que los ingenieros sean peligrosos en diseño, no expertos. Ahora puedo producir una landing page creíble en 15 minutos. No podría producir lo que un diseñador senior crea después de una semana de investigación, iteración y pruebas con usuarios. Herramientas diferentes para niveles diferentes de necesidad.

¿Para proyectos personales, herramientas internas, MVPs, hackathons y prototipos rápidos? Esto es más que suficiente. ¿Para aplicaciones de producción con requisitos reales de marca y complejidad de UX? Todavía necesitas un diseñador — pero ahora puedes tener conversaciones mucho más productivas con ellos porque entiendes el vocabulario.

De exportación de Figma a código en producción — El flujo de trabajo completo

Un detalle del desafío que merece su propia sección: el pipeline de Claude Code a Figma. Varios participantes mencionaron usar un plugin que exporta el HTML/CSS generado por Claude Code directamente a Figma como componentes editables.

Probé esto y el flujo de trabajo es genuinamente fluido:

1. Genera el diseño en Claude Code
2. Exporta a Figma usando el plugin
3. Refina en Figma (ajusta espaciado, cambia fuentes, agrega imágenes reales)
4. Comparte con stakeholders o tu equipo de diseño para feedback
5. Itera en Claude Code (para cambios estructurales) o en Figma (para refinamiento visual)

Este flujo de trabajo cierra la brecha entre "ingeniero jugando con IA" y "proceso profesional de revisión de diseño." La exportación a Figma significa que tus diseños generados por IA entran en el mismo flujo de trabajo que tu equipo ya usa. Sin herramientas especiales, sin compartir capturas de pantalla de forma incómoda, sin "confía en mí, se ve bien en mi máquina."

Para equipos donde ingenieros y diseñadores colaboran estrechamente, esto crea una dinámica interesante. Los ingenieros ahora pueden producir propuestas de diseño — rudimentarias pero creíbles — que los diseñadores pueden refinar en lugar de construir desde cero. La conversación de diseño pasa de "¿puedes diseñar esto de la nada?" a "aquí está mi punto de partida, ¿cómo lo mejorarías?"

Le mostré mis exportaciones de Figma a la diseñadora de mi proyecto actual. Su reacción: "La estructura es sólida y las elecciones de color son inteligentes. Déjame arreglar la escala tipográfica y ajustar el espaciado." Pasó 20 minutos refinando lo que le habría tomado 2 horas construir desde cero. Los dos ganamos.

Qué cambió en cómo construyo las cosas

Este es el impacto honesto después de tres semanas usando el skill de diseño regularmente:

Tasa de finalización de proyectos personales: Ha subido dramáticamente. Tengo dos proyectos que estaban 90% funcionales pero 0% diseñados. Ambos ahora tienen landing pages que no me da vergüenza compartir. Uno ya tiene sus primeros usuarios reales — algo que no habría pasado con mi anterior enfoque de "ya lo diseñaré después," porque "después" nunca llegaba.

Calidad de herramientas internas: Construí un panel de administración para un proyecto de un cliente la semana pasada. Normalmente, usaría una plantilla genérica de admin y listo. En su lugar, pasé 20 minutos con Claude Code diseñando componentes personalizados que coincidían con la marca del cliente. El cliente lo notó. Específicamente mencionaron lo "pulidas" que se veían las herramientas internas. Eso importa para la retención.

Conversaciones de diseño: Soy un mejor colaborador con diseñadores ahora. No porque la IA me enseñara diseño, sino porque el proceso iterativo de prompting me obligó a articular preferencias de diseño en términos precisos. "Hazlo más cálido" se convirtió en "usa un acento terracota contra grises cálidos con mayor espacio en blanco." Esa precisión se traduce directamente en mejores briefs de diseño, mejor feedback y menos frustración por ambos lados.

Velocidad para prototipar: De idea a prototipo visual compartible bajó de "lo haré este fin de semana" (lo que significaba nunca) a unos 30 minutos. Esa velocidad cambia el cálculo sobre si vale la pena prototipar una idea o no.

El cambio más grande es psicológico. Ya no veo el diseño como un bloqueante. Solía ser lo que se interponía entre mi código terminado y un producto listo para enviar. Ahora es un paso de 30 minutos en el proceso, no una dependencia de semanas en la disponibilidad de alguien más.

Tu turno — El desafío de 10 minutos

Esto es lo que quiero que hagas hoy. No esta semana. Hoy.

Instala el front-end design skill. Dos minutos, los pasos están arriba. Luego abre Claude Code y escribe esto:

/frontend design Create a hero section for [your side project or
current work project]. Modern, clean, [one adjective that describes
the vibe you want]. Include a headline, supporting copy, and a
primary CTA.

Rellena los corchetes. Envíalo. Abre el archivo HTML generado en tu navegador.

Apuesto a que harás lo que yo hice — quedarte sentado unos segundos pensando "espera, esto realmente podría publicarlo." Y entonces enviarás un segundo prompt. Y un tercero. Y antes de que te des cuenta, tendrás una landing page para ese proyecto que llevas seis meses queriendo lanzar.

El desafío de 30 días sigue en marcha en designcourse.com si quieres feedback de la comunidad y la motivación de ver los enfoques de otras personas. Pero honestamente, el desafío es solo el catalizador. El verdadero valor es tener una IA capaz de diseñar en tu terminal, disponible cada vez que necesites hacer que algo se vea bien en lugar de solo hacer que funcione.

Durante años me dije a mí mismo que no era diseñador. Resulta que simplemente no tenía las herramientas adecuadas. Ahora las tengo — y la brecha entre "funcional" y "hermoso" nunca ha sido más pequeña.

¿Qué vas a construir primero?

Trabajemos juntos

¿Buscas construir sistemas de IA, automatizar flujos de trabajo o escalar tu infraestructura tecnológica? Me encantaría ayudarte.

• Fiverr (builds e integraciones personalizadas): fiverr.com/s/EgxYmWD
• Portfolio: mejba.me
• Ramlit Limited (soluciones empresariales): ramlit.com
• ColorPark (diseño y branding): colorpark.io
• xCyberSecurity (servicios de seguridad): xcybersecurity.io