Crea una infografía a partir de notas con Codex
Este ejemplo es el resultado real de la guía: contenido DOM legible y adaptable que puedes recrear, no una imagen de un posible resultado.
Herramientas
- OpenAI / Codex
El resultado real
El flujo de Codex en 4 pasos
Una tarea clara empieza por el objetivo y solo termina al comprobar el resultado visible.
- 01
Define el objetivo
Describe el resultado que debe verse después del cambio.
- 02
Aporta contexto
Indica el proyecto, los archivos relevantes, los patrones existentes o un ejemplo.
- 03
Guía el trabajo
Lee los avances, responde preguntas y corrige la dirección con feedback concreto.
- 04
Comprueba el resultado
Revisa el diff, las pruebas y el comportamiento visible en el navegador.
- Diff
- Pruebas
- Navegador
Recorrido en vídeo
El recorrido silencioso muestra el mismo camino desde las notas, pasando por Codex, hasta los cuatro pasos. La explicación completa aparece debajo.
Qué ocurre en el vídeo
- 1Cuatro notas de aprendizaje son el punto de partida.
- 2Codex recibe la fuente, el objetivo, los límites y el criterio de finalización.
- 3El contenido se convierte en cuatro pasos accesibles en la web.
- 4El diff, las pruebas y la revisión en el navegador cierran el flujo.
Material de partida
Estas cuatro notas son el material de partida real. Definen el contenido, pero todavía no su jerarquía visual.
- 01Define el objetivo: describe el resultado que buscas.
- 02Aporta contexto: indica el proyecto, los archivos relevantes o un ejemplo.
- 03Guía el trabajo: responde preguntas y corrige la dirección.
- 04Comprueba el resultado: revisa el diff, ejecuta pruebas y abre el cambio en el navegador.
La tarea para Codex
El prompt separa a propósito el contrato de la tarea de la infografía de cuatro pasos que produce.
1 · Objetivo
Objetivo: Convierte las siguientes notas de aprendizaje en una infografía web adaptable titulada “El flujo de Codex en 4 pasos”.
2 · Contexto
Contexto: Usa solo estas ideas: definir el objetivo, aportar contexto, guiar el trabajo y comprobar el resultado. La infografía forma parte de la interfaz existente y debe usar sus componentes, tokens de diseño e idioma.
3 · Límites
Límites: No incluyas texto dentro de una imagen, no añadas dependencias y no cambies nada fuera de la infografía y sus pruebas. Los iconos funcionales deben usar el sistema existente.
4 · Finalizado cuando
Finalizado cuando: Los cuatro pasos aparecen como contenido DOM accesible y en el orden definido, funcionan a 390 y 1280 píxeles sin desbordamiento horizontal, admiten tema claro y oscuro, incluyen una prueba específica y se han comprobado en el navegador.
¿Por qué este bloque?
El objetivo describe el resultado final visible, incluido su título. Codex trabaja hacia un artefacto concreto en lugar de una intención vaga.
Objetivo: Convierte las siguientes notas de aprendizaje en una infografía web adaptable titulada “El flujo de Codex en 4 pasos”.
Contexto: Usa solo estas ideas: definir el objetivo, aportar contexto, guiar el trabajo y comprobar el resultado. La infografía forma parte de la interfaz existente y debe usar sus componentes, tokens de diseño e idioma.
Límites: No incluyas texto dentro de una imagen, no añadas dependencias y no cambies nada fuera de la infografía y sus pruebas. Los iconos funcionales deben usar el sistema existente.
Finalizado cuando: Los cuatro pasos aparecen como contenido DOM accesible y en el orden definido, funcionan a 390 y 1280 píxeles sin desbordamiento horizontal, admiten tema claro y oscuro, incluyen una prueba específica y se han comprobado en el navegador.Aplícalo a tu propio caso
Mantén los cuatro bloques y sustituye su contenido por tu propio proyecto. Edita el prompt de ejemplo aquí mismo.
Recréalo paso a paso
Paso 1
Acota la fuente
Da a Codex solo las cuatro notas y señálalas como fuente autorizada.
Paso 2
Describe el resultado
Pide una infografía DOM adaptable en lugar de una imagen con texto incrustado.
Paso 3
Protege los patrones
Exige tokens, componentes e iconos existentes y descarta dependencias nuevas.
Paso 4
Exige pruebas
Incluye una prueba, dos anchos, ambos temas y la revisión en navegador en la definición de finalizado.
Lista de comprobación
0/4 criterios comprobados
Autoevaluación
Autoevaluación: ¿piensas como el encargo?
Tres preguntas comprueban los principios detrás de la fórmula y del flujo de trabajo, sin memorizar nada.
1 / 3
Fuentes oficiales
Las marcas solo identifican las herramientas; Creaiter no afirma ninguna colaboración.