Codex + una herramienta secreta es el flujo de diseño que hemos estado usando en nuestra agencia… y los resultados están a otro nivel.
Llevo meses diciéndolo. Si tu app parece basura de IA, no es un problema de Codex. Es un problema de flujo de trabajo.
La mayoría de los creadores están atrapados en el mismo bucle. Lanzan funciones con IA. El backend funciona. La lógica es sólida. Pero la interfaz parece cualquier otra app hecha con vibe coding. Los usuarios deciden en dos segundos si se siente real.
La solución de antes era contratar a un diseñador. Esperar semanas por los archivos de Figma. Luego ver a tu desarrollador interpretar esos diseños y reconstruirlos en código. Cuando el diseño estaba en vivo, ya habías perdido impulso y quemado dinero que no necesitabas quemar.
Todo ese proceso ahora es opcional.
Para esta guía construí Haven, un concepto de app móvil de bienes raíces. Sistema de diseño completo en 20 minutos. Cada pantalla diseñada en menos de una hora. Código de producción enviado a través de Codex sin reescribir ni una línea de CSS.
Este es el flujo que estoy usando ahora. Y todo creador que lance con IA necesita entender cómo funciona.
Qué es realmente Moonchild
La herramienta secreta es Moonchild.
He probado casi todas las herramientas de diseño con IA que han salido el año pasado. La mayoría se ven bien en la primera pantalla, pero se desmoronan en cuanto construyes una segunda página. La consistencia es el problema. Moonchild lo resuelve como ninguna otra.
Es un lienzo de diseño con chat que comienza desde tu sistema de diseño. No desde un prompt en blanco. No desde una captura de pantalla. Desde tu sistema real. Llevas tu sistema de tres maneras:
→ Importa desde Figma, GitHub o una URL en vivo
→ Describe tu marca al Agentic Design System Builder
→ Inserta inspiración de diseño desde Dribbble o cualquier otro lugar
Una vez que el sistema está dentro, no haces prompts como antes. Pegas un PRD. Genera pantallas completas con tu sistema. A partir de ahí, diriges el arte.
Y la ruta de exportación es lo que cierra el círculo. Moonchild envía un conector MCP que entrega tus diseños directamente a Codex como salida estructurada. No una captura para que Codex interprete. Los datos reales del diseño. Componentes, tokens, layout, todo.
Ese es el flujo. Ahora te explico cómo usarlo realmente.
El problema de cómo la mayoría de los creadores usan IA para diseño
Esto es lo que hace la mayoría.
Le piden a Codex que construya una nueva función. La entrega. Se ve más o menos. Luego le piden la siguiente función. Se ve ligeramente diferente. Para la quinta función, la app parece cinco productos diferentes cosidos.
Esto es lo que la gente quiere decir cuando dice que el diseño con IA es malo.
El modelo no es malo. El flujo de trabajo lo es.
Codex no tiene idea de cuál es tu lenguaje de diseño. Cada prompt es un contexto nuevo. Cada pantalla es una suposición. Cada componente se desvía del anterior. Los colores cambian. La tipografía cambia. Todo se acumula.
La solución es simple. Dale a Codex un sistema a seguir. Luego dale el diseño real para construir.
La mayoría de los flujos le dan solo una cosa. Moonchild más la conexión MCP le da ambas al mismo tiempo.
Paso 1: Construye tu sistema de diseño primero. Siempre.
Este es el paso que todos se saltan. También es el más importante.
En @ignytlabs construimos un sistema de diseño para cada cliente antes de tocar una pantalla. Antes esto tomaba dos días a un diseñador. Moonchild lo hace en unos 20 minutos.
Para esta guía construí Haven, un concepto de app móvil de bienes raíces. Hay varias formas de cargar un sistema de diseño en Moonchild. Puedes importar desde Figma, GitHub o una URL en vivo. Puedes describir tu marca al Agentic Design System Builder. Para Haven hice lo que suelo hacer cuando empiezo desde una vibra. Inspiración de diseño desde Dribbble. Subí tres capturas de apps de bienes raíces que lograban la sensación que buscaba y una descripción breve de qué es Haven y para quién es. La herramienta extrajo el lenguaje de diseño y construyó el sistema desde cero.
Lo que me sorprendió es lo previsualizable que es todo. La mayoría de las herramientas de IA, incluido el flujo Google Stitch del que escribí en mi último artículo, te dan un archivo de tokens plano. Colores. Fuentes. Quizás espaciado. Esto hace algo diferente. Construye una biblioteca de componentes completa y una galería. Cada badge, botón, tarjeta y chip renderizado tal como se verá realmente dentro de tu app. Haz clic en cualquier componente y lo ves en vivo, con controles para probar variantes y tamaños. Justo debajo de la vista previa obtienes el JavaScript real, CSS, ejemplos y dependencias de ese componente. Listo para llevarlo al código.
La galería es la parte que realmente cambia cómo diseñas. En lugar de adivinar cómo debería verse un "badge de marca" o "badge de calificación" en contexto, los ves todos lado a lado. En Venta. En Alquiler. Destacado. Toda la familia de una vez. Tomas decisiones de diseño informadas antes de que se genere una sola pantalla.
Es la diferencia entre una hoja de estilos y un sistema real.
Paso 2: De PRD a UI
Una vez que tu sistema de diseño está dentro, no haces prompts a la antigua.
Pegas un PRD.
Un resumen de función de una página. Un especificación de producto. Una declaración de objetivo. Lo que tengas.
Para Haven pegué un PRD estructurado que cubría la introducción del producto, los objetivos, los usuarios objetivo y roles, las funciones clave y el alcance del MVP, los flujos de usuario completos, el stack técnico y la dirección de diseño. Alrededor de una página. Lo suficientemente específico para darle contexto real a la herramienta. Lo suficientemente estructurado para que extraiga los detalles correctos en las pantallas correctas.
Luego hice algo que la mayoría se salta.
Hice una lluvia de ideas antes de generar una sola pantalla.
Este es el descubrimiento que la mayoría de los creadores se pierden. El modo chat mantiene el contexto completo del PRD. En lugar de soltar el PRD y darle a generar, primero hablas sobre el producto. Confirmas la lista de pantallas. Fijas el patrón de navegación. Defines previamente la jerarquía de las pantallas clave antes de que exista cualquier píxel.
Para Haven pregunté:
→ "Según este PRD, ¿qué pantallas recomiendas construir primero? ¿Me falta algo para una app de bienes raíces?"
→ "¿La navegación principal debería ser una barra inferior con Inicio, Buscar, Favoritos, Perfil? ¿O algo diferente?"
→ "Antes de generar, guíame por el orden de prioridad de la pantalla de Detalle de Propiedad. Fotos primero, luego nombre y precio, luego especificaciones, luego amenidades, luego agente. Confirma o mejora."
→ "Ok, ahora procede a generar estas pantallas tanto en modo claro como oscuro, manteniéndote fiel al sistema de diseño que tengo adjunto. Asegúrate de completar todo el recorrido del usuario y crear todas las pantallas."
Para cuando le di a generar, la herramienta ya conocía el producto mejor que la mayoría de los diseñadores después de su primera llamada con un cliente.
Ahora un apunte rápido sobre variantes. Lee esto con atención.
Una característica interesante: puedes crear diferentes variantes de tus pantallas. Solo tienes que mencionarlo explícitamente a Moonchild y él se encarga. Para Haven quería tres direcciones estéticas diferentes para toda la app antes de comprometerme con una. Este fue el prompt exacto que usé:
“Quiero que generes 3 conceptos completos de diseño UI móvil para Haven:
Concepto 1 - Editorial Cálido: Fondos crema, espaciado generoso, titulares con serifa para los nombres de propiedades, sombras suaves, tratamiento de imagen estilo revista.
Concepto 2 - Moderno Atrevido: Modo oscuro, alto contraste, sans-serif en todo, esquinas afiladas, liderado por fotos con imágenes de borde a borde.
Concepto 3 - Minimal Premium: Paleta neutra (blanco roto, carbón, un acento), tipografía refinada, mucho espacio para respirar, microinteracciones sutiles.
Usa el sistema de diseño conectado como base, pero deja que cada concepto tire del sistema en una dirección estética diferente. Genera pantallas completas, no solo secciones. ¿Qué harás?”
Nota el "¿Qué harás?" al final. Ese es el pequeño detalle que hace que funcione. En lugar de generar todo a ciegas, la herramienta volvió con un plan.
Dijo que construiría 5 pantallas representativas por concepto primero. Yo revisaría las tres direcciones lado a lado. Una vez que eligiera la que quería, diseñaría toda la app en esa dirección.
Eso cambia completamente la ecuación de costos. No estás pagando por tres construcciones completas. Pagas por tres muestras rápidas, luego una sola construcción completa en la dirección que realmente elijas.
Elegí el editorial cálido. El conjunto completo de pantallas llegó después.
Ahora la parte que realmente me sorprendió.
Cada pantalla que genera Moonchild es interactiva en modo de vista previa. No un mockup estático. Realmente interactiva.
Puedes hacer clic en campos de entrada. Tocar botones. Moverte entre pantallas como un usuario real probando el prototipo antes de escribir cualquier código. Para Haven detecté dos problemas de flujo en la vista previa que de otro modo habrían llegado a Codex. La pantalla de detalle de propiedad no tenía una forma obvia de volver a la exploración. El CTA de contactar al agente estaba demasiado abajo. Ambos se habrían enviado si le hubiera entregado el diseño a Codex sin hacer clic primero.
Ese es el descubrimiento. Pruebas el producto antes de que se escriba una sola línea de código.
El bucle de refinamiento es la última pieza.
Cuando una pantalla necesita trabajo, no vuelves a hacer un prompt desde cero. Seleccionas la pantalla, le dices a la herramienta qué cambiar, y genera una v2 en el lugar. ¿Quieres un héroe más cinematográfico? v2. ¿Quieres cambiar un diseño de tarjeta por una vista de lista? v3. Las variantes se acumulan para que puedas comparar y elegir la más fuerte.
Para la pantalla de detalle de propiedad de Haven pasé por tres iteraciones. v1 tenía el bloque del agente demasiado arriba. v2 arregló la jerarquía pero la galería de fotos se veía pequeña. v3 acertó con ambas. Unos 8 minutos de ida y vuelta.
No estás curando desde un lienzo en blanco. Estás refinando una dirección real. Esta es la parte que más se siente como trabajar con un diseñador senior.
Paso 3: Conecta Moonchild a Codex mediante MCP
Aquí es donde el flujo se vuelve ALUCINANTE.
El sistema de diseño le da a Codex las reglas. La conexión MCP le da a Codex algo más poderoso. Acceso directo a la salida real del diseño. No capturas de pantalla. No descripciones de texto del diseño. Datos de diseño estructurados que Codex puede leer y reconstruir.
Así se configura:
→ Ve a Configuración de Moonchild, luego a MCP
→ Copia el comando de instalación para tu configuración
→ Abre Codex CLI
→ Pega el comando de instalación
→ Autentícate con tu cuenta de Moonchild
→ Listo
Una vez conectado, Codex ve tanto tu sistema de diseño como las pantallas específicas de Haven que diseñaste.
Paso 4: Codex entrega el código
Ahora le pides a Codex así:
Obtén el proyecto Haven Real Estate Mobile App usando el MCP de Moonchild, y dime qué pantallas tenemos dentro.
Este primer prompt hace dos cosas. Confirma que el MCP está conectado correctamente. Y le da a Codex visibilidad completa de cada pantalla que diseñaste.
Un consejo rápido antes de dejar que Codex haga algo más pesado. Quédate en modo plan. Codex muestra lo que está a punto de hacer antes de ejecutar. Lee el plan cada vez. Asegúrate de que entiende qué pantallas quieres, en qué orden, y con qué fidelidad. Esta es la diferencia entre que Codex programme lo que realmente necesitas y que Codex programme lo que cree que necesitas.
Una vez que has revisado el plan y lo has dirigido a la pantalla que quieres, Codex extrae los datos de diseño directamente de Moonchild, referencia tu sistema de diseño y escribe el código. Incluso añade los estados hover, transiciones y manejo de casos extremos porque trabaja con datos de diseño reales en lugar de adivinar desde un prompt.
El resultado. UI de calidad de producción en tu código real, coincidiendo exactamente con el diseño, en minutos.
En @ignytlabs solíamos presupuestar dos semanas para el diseño de cada MVP de cliente. Un diseñador construía el archivo Figma. Un desarrollador lo interpretaba. La interpretación se desviaba. Corregíamos. Ciclo. Con este flujo, todo el bucle se reduce a una sola tarde de trabajo. Misma calidad. Mayor margen. Mucho menos cambio de contexto.
Cuándo usar este flujo
Este no es el flujo adecuado para todos los equipos. Sé honesto sobre cuándo encaja.
Úsalo cuando:
→ Estás lanzando MVPs como creador individual o equipo pequeño
→ La consistencia del diseño se rompe entre pantallas
→ No quieres mantener un pipeline separado de Figma a diseñador a desarrollador
→ Ya tienes un sistema de diseño y quieres que se aplique en todas partes
Sáltatelo cuando:
→ Estás a escala con un equipo de diseño interno completo y una biblioteca Figma madura
→ Necesitas una entrega perfecta de píxeles para un sitio de marketing o trabajo de marca donde cada sombra importa
→ Tu código tiene patrones de UI muy personalizados que requieren trabajo de diseño a medida
Para el 80% de los creadores que lanzan MVPs y productos SaaS, este flujo cubre todo lo que necesitas.
Cosas a tener en cuenta
Algunas banderas honestas antes de que ejecutes esto.
La calidad de tu sistema de diseño determina la calidad de tu resultado. Basura entra, basura sale. Un archivo Figma a medias con tres tokens de color producirá pantallas mediocres. Invierte tiempo en el sistema desde el principio. Se paga solo en cada pantalla.
La calidad del PRD importa. Un resumen vago te da pantallas genéricas. Un PRD específico con flujos de usuario, casos extremos y una jerarquía clara te da diseños útiles. No es una limitación de la herramienta. Es una limitación de pensamiento.
Todavía necesitas buen gusto. La herramienta produce. Tú diriges. Elegir la variante correcta y refinarla es donde vive tu criterio. Si te saltas el paso de curación, vuelves a diseñar por vibra.
Algunos componentes necesitan ajustes manuales. Estados animados complejos, patrones de interacción personalizados, todo lo que esté fuera del sistema de diseño necesita un pase manual en Codex. El MCP te lleva al 90%. El último 10% es tu gusto.
Qué significa esto realmente
Esta es mi opinión honesta.
El cuello de botella en el envío de productos construidos con IA nunca ha sido el código. La IA puede escribir el código. El cuello de botella siempre ha sido la capa de diseño. La consistencia, el gusto, el sistema que lo une todo.
Ese cuello de botella acaba de colapsar.
En nuestra agencia solíamos presupuestar dos semanas para el diseño de cada MVP de cliente. Contratar a un diseñador. Esperar archivos Figma. Ver al desarrollador interpretarlo. Ciclo. Lo que solía tomar dos semanas ahora toma dos días. Misma calidad. Entrega más rápida. Mayor margen.
Este es el flujo que los equipos con financiación ya tienen con sus pipelines de Figma más diseñador más desarrollador. La diferencia es que ahora los creadores individuales, las agencias independientes y los pequeños estudios obtienen el mismo apalancamiento sin necesidad de personal.
2026 va a ser INJUSTO para las agencias y creadores que lo descubran primero.
TLDR
→ Deja de culpar a Codex por una mala UI. Codex no es el problema. Tu flujo de trabajo lo es.
→ Paso 1: Construye tu sistema de diseño dentro de Moonchild. Importa desde Figma, GitHub o una URL en vivo. O describe tu marca. O inserta inspiración de Dribbble como hice yo para Haven.
→ Paso 2: Pega tu PRD. Haz una lluvia de ideas en modo chat antes de generar. Fija primero la lista de pantallas y el patrón de navegación.
→ Por defecto se genera una variante. Pide explícitamente múltiples variantes en pantallas principales con diferentes vibras especificadas.
→ Usa la vista previa interactiva para probar el flujo antes de escribir cualquier código. Refina las pantallas con iteraciones v2, v3 en el lugar.
→ Paso 3: Conecta Moonchild a Codex mediante MCP. Esto le da a Codex datos de diseño reales, no capturas de pantalla.
→ Paso 4: Pídele a Codex que construya cada pantalla usando el MCP. La interfaz de calidad de producción se entrega en minutos.
→ La calidad de tu sistema de diseño determina la calidad de tu resultado. Invierte ahí.
→ El ciclo de Figma a entrega a desarrollador ha muerto. Un solo flujo ejecuta ahora diseño y código juntos.
¡Vamos allá!
