Claude Code programa bien y diseña regular — es una limitación conocida y reconocida en el propio ecosistema. Tres herramientas distintas abordan ese hueco desde ángulos complementarios: generación de interfaces, animación, y vocabulario de diseño. Las tres son reales.
Google Stitch: de una descripción de texto a una interfaz completa
Google Stitch (stitch.withgoogle.com) genera pantallas e interfaces completas a partir de una descripción y referencias visuales de Pinterest o Dribbble, y exporta directamente a Claude Code vía un conector MCP. El flujo es real y reproducible: describir la app, exportar el diseño, conectar el MCP, pedirle a Claude Code que implemente el diseño en código de producción. Dos matices: Stitch es gratis hoy como experimento de Google Labs, pero con cuotas mensuales de generación y planes de pago ya anunciados para más adelante — no es gratuito para siempre por diseño; y el conector MCP que lo une a Claude Code es un proyecto de un desarrollador independiente, no oficial de Google, aunque funciona como se describe.
Framer Motion + una skill de diseño + un catálogo de componentes
Un setup documentado en varias fuentes independientes combina tres piezas: la librería de animación Framer Motion, una skill de Claude Code con principios de tipografía y espaciado («UI/UX Pro Max»), y componentes de referencia de 21st.dev. El eslogan que circula — «una web de 10.000 dólares con una sola línea de código» — es marketing del propio material fuente: una comparación cualitativa de percepción de valor, no una tasación real de mercado. Y «una sola línea» es también una simplificación: el proceso real implica varios pasos (instalar Claude Code, instalar Framer Motion, instalar la skill, referenciar componentes), cada uno con su propio comando corto, no uno solo.
Un diccionario visual para dejar de decir «esa cosa que sale al hacer clic»
Un recurso real (con muchos indicios de ser NameThatUI, aunque el vídeo que lo promociona nunca revela el nombre) cataloga más de 70 componentes de interfaz y permite buscarlos por descripción informal — «la capa oscura semitransparente detrás de un popup» — para obtener el nombre técnico correcto y un prompt ya optimizado para pedírselo a un agente de IA. Es una herramienta pequeña pero con un uso muy concreto: mejorar la precisión del vocabulario que usas al pedirle a Claude Code que construya algo, en vez de describir a ciegas lo que tienes en la cabeza.
Cómo lo aplicamos nosotros
Ninguna de las tres piezas sustituye a un criterio de diseño real — las tres son multiplicadores de un criterio que ya tienes, no un atajo para no tenerlo. Un buen sistema de diseño combinado con Claude Code construye rápido; un mal criterio combinado con las mismas herramientas simplemente falla rápido.
Si tu equipo usa Claude Code para desarrollo y el resultado visual se queda corto, podemos ayudarte a montar el flujo de diseño que le falta. Contacta con nosotros.