Episode Details

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