transcript
show notes
Hoy os presento Product Design, una skill de Codex que crea propuestas visuales, las convierte en código y mantiene la coherencia del proyecto.
Pero antes, recordemos que esta semana continúa el curso de marketing mix con IA. En la tercera clase definimos precios equilibrando valor, posicionamiento y rentabilidad, y en la cuarta elegimos los canales de distribución más adecuados para cada proyecto. Así convertimos el marketing mix en decisiones más coherentes y conectadas con el cliente.
Ahora sí, vamos al lío con una herramienta que me tiene el corazón robado. Cuando trabajaba con Claude utilizaba Claude Design para preparar interfaces, maquetaciones y propuestas visuales. Es una solución muy potente y pensada para profesionales, con elementos editables y exportación a Figma, pero también puede consumir bastantes tokens. Os hablé de ella en el episodio dedicado a Claude Design y tenéis disponible el curso completo de Claude Design.
Al pasarme a Codex busqué una alternativa más ajustada a lo que necesito y encontré Product Design, una skill oficial que podemos instalar y utilizar dentro del propio agente. No pretende sustituir todas las funciones de una herramienta profesional, pero para mi flujo de trabajo va sobradísima y consume muy pocos recursos en comparación.
El primer uso consiste en crear propuestas visuales para un proyecto. Podemos pedirle la web de un consultor, un ecommerce, una academia, un membership site o cualquier otra aplicación. Si partimos de cero, quizá nos hará alguna pregunta para entender la idea. Si el proyecto ya existe, revisará los archivos y el contexto disponible antes de diseñar.
A partir de esa información genera tres variantes diferentes. Una puede ser más sobria, otra más editorial y otra más moderna o futurista. Prefiero no dirigirla demasiado al principio porque sé poco de diseño y me interesa ver caminos que yo no habría imaginado. Si ninguna propuesta encaja, le pido tres más y continuamos hasta encontrar una buena dirección.
Cuando elegimos una variante, podemos abrirla y señalar elementos concretos. Seleccionamos el logotipo, un botón, el menú o cualquier zona que queramos cambiar y añadimos una indicación sobre el propio diseño. La skill conserva la propuesta seleccionada y regenera únicamente aquello que hemos marcado, sin obligarnos a empezar de nuevo.
El resultado de esta primera fase es una imagen, no un documento con todos los elementos separados. Sin embargo, ahí empieza otra de sus funciones más útiles. Puede convertir esa imagen en código y construir una página web a partir del diseño aprobado.
También podemos saltarnos la generación inicial. Si ya tenemos una captura creada por otra persona, se la entregamos y le pedimos que la reproduzca. Incluso podemos facilitar una URL para que analice una web existente y la convierta en código. Esto resulta especialmente práctico cuando queremos trasladar un proyecto hecho con WordPress a otra tecnología o reconstruir una interfaz que ya tenemos clara.
Product Design aprovecha además el contexto acumulado dentro del proyecto. Si encuentra documentación, imágenes, vocabulario, decisiones anteriores o una base de código, utiliza ese material para entender qué estamos creando. No hace falta volver a contarle desde cero cuál es el público, qué estilo buscamos o cómo se organiza el producto.
Cuando conviene, también puede investigar buenas prácticas relacionadas con el tipo de proyecto. No se diseña igual un banco online que un eCommerce o una academia. El agente puede revisar criterios de usabilidad y patrones habituales del sector antes de proponer la interfaz.
Otra ventaja importante es que deja documentada la dirección visual. Guarda referencias, colores y decisiones para que las páginas futuras mantengan el mismo lenguaje. Si tres meses después añadimos una sección de contacto o unas preguntas frecuentes, Codex puede recuperar ese contexto y crearla con el mismo estilo, en lugar de producir una página que parezca pertenecer a otro proyecto.
Finalmente, podemos compartir el resultado con clientes, socios o colaboradores. Si todavía estamos eligiendo una propuesta, generamos una dirección para enseñar el diseño. Si ya hemos construido la web, podemos publicarla mediante Sites y decidir quién tendrá acceso. Os expliqué esta posibilidad en el episodio sobre Codex Sites.
Evidentemente, Product Design no es Figma, Sketch ni Claude Design. Un profesional puede necesitar herramientas con mucho más control. En mi caso, quiero obtener varias propuestas, elegir una, retocar algunos detalles, convertirla en código y compartirla. Para ese recorrido me ofrece exactamente lo que necesito.
En definitiva, esta skill convierte a Codex en un compañero de diseño capaz de explorar alternativas, recoger comentarios, construir la interfaz y recordar las decisiones visuales del proyecto. Es sencilla, económica en tokens y especialmente útil para quienes queremos buenos resultados sin dominar herramientas profesionales. :)
Como siempre, muchas gracias por vuestras valoraciones de cinco estrellas en Apple Podcasts y Spotify, por suscribiros a los cursos y por estar ahí, al otro lado. Nos escuchamos mañana miércoles con más marketing online, como siempre, a las 07:07. Hasta entonces, ¡muy buenos días!