Saltar al contenido
Creaitercreate your vision with ai
Iniciar sesiónRegistrarse
Todos los Creaites
Disponible ahora8 minPrincipiante

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.

  1. 01

    Define el objetivo

    Describe el resultado que debe verse después del cambio.

  2. 02

    Aporta contexto

    Indica el proyecto, los archivos relevantes, los patrones existentes o un ejemplo.

  3. 03

    Guía el trabajo

    Lee los avances, responde preguntas y corrige la dirección con feedback concreto.

  4. 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

  1. 1Cuatro notas de aprendizaje son el punto de partida.
  2. 2Codex recibe la fuente, el objetivo, los límites y el criterio de finalización.
  3. 3El contenido se convierte en cuatro pasos accesibles en la web.
  4. 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.

Elige un bloque de la fórmula

Cada bloque resalta su párrafo en el prompt y explica su función.

  1. 1 · Objetivo

    Objetivo: Convierte las siguientes notas de aprendizaje en una infografía web adaptable titulada “El flujo de Codex en 4 pasos”.

  2. 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. 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. 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

  1. Paso 1

    Acota la fuente

    Da a Codex solo las cuatro notas y señálalas como fuente autorizada.

  2. Paso 2

    Describe el resultado

    Pide una infografía DOM adaptable en lugar de una imagen con texto incrustado.

  3. Paso 3

    Protege los patrones

    Exige tokens, componentes e iconos existentes y descarta dependencias nuevas.

  4. 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

¿Por qué el contexto nombra exactamente las cuatro notas como única fuente?

Fuentes oficiales

Las marcas solo identifican las herramientas; Creaiter no afirma ninguna colaboración.

Ajuste de privacidad

¿Podemos medir vistas de página seudónimas y grabaciones de sesión?

Con tu consentimiento, PostHog EU mide qué páginas se abren y además graba tu sesión: los movimientos del ratón, los clics, el desplazamiento y el contenido mostrado se guardan como una reconstrucción reproducible. Las entradas escritas se enmascaran antes del envío. Los contenidos del inicio de sesión, el registro, la recuperación de contraseña, el chat del fundador, el campo de newsletter, la vista de tu correo, tus respuestas del cuestionario y las listas de comprobación no se graban en absoluto; en las páginas de inicio de sesión y registro la grabación se detiene. Las direcciones se guardan siempre sin parámetros de consulta. También se procesan un identificador de dispositivo aleatorio y datos técnicos de conexión como la dirección IP. Además se miden eventos de uso estrictamente definidos: hasta dónde se leyó un artículo, qué elemento se utilizó, qué llamada a la acción se pulsó, cómo terminó una suscripción al boletín, hasta dónde llegas en un curso o en el feed (registrando solo si una tarea fue correcta o incorrecta, nunca tu respuesta), qué vídeo inicias, si cambias de idioma y cómo terminó un intento de inicio de sesión o registro: sin la dirección de correo, sin la contraseña y sin el mensaje de error. Solo se transmiten valores de una lista fija y números enteros de rangos fijos: ninguna entrada y ningún texto libre. También etiquetamos por separado las visitas de producción, internas y de pruebas automatizadas, y derivamos si una visita procede de una interfaz conocida como ChatGPT, Claude o Perplexity a partir de un dominio de referencia conocido o de un valor de campaña estrictamente permitido. No se envían la dirección de referencia completa ni los parámetros de consulta, y esto no permite identificar un modelo de IA concreto. Si el enriquecimiento geográfico basado en IP está activado en el proyecto de PostHog, el servicio puede derivar aproximadamente el país, continente y región; no solicitamos la ubicación del navegador ni del GPS. Además, cada visita se asigna a un área de la página tomada de una lista fija (por ejemplo inicio, blog, herramientas, cuenta): se envía el área, no la dirección. También se miden indicadores de carga y estabilidad de la página (Core Web Vitals: LCP, CLS, INP, FCP), sin contenidos de red. Un clic en un enlace que lleva fuera del sitio se registra solo como dominio de destino de una lista fija, sin ruta, sin parámetros de consulta y sin el texto del enlace. En las herramientas Rueda de ideas, Etiquetado de IA y Reinicio de límites solo se mide el tipo de acción —por ejemplo girar, cambiar una opción, copiar o exportar—, nunca tus entradas ni los resultados. Más información sobre privacidad

Sin tu consentimiento no se carga ningún código de analítica ni se graba nada. Puedes revocarlo en cualquier momento: la revocación finaliza la recogida de inmediato; los datos ya recogidos pueden haberse transmitido en ese momento y se eliminan tras el plazo de conservación.