Saltar al contenido

Generador Dinámico de Páginas HTML con OpenAI y Salida Estructurada

Genera dinámicamente páginas HTML con Tailwind CSS a partir de una consulta de usuario, utilizando la salida estructurada de OpenAI para diseñar la UI y luego convertirla a HTML.

Repo Original 7 nodos 6 tipos conectado
Cargando workflow...

Nodos

RespondToWebhook HttpRequest OpenAi Html StickyNote Webhook

Herramientas

Webhook OpenAI

Detalles

ID
2715
Nodos
7
Conex.
Sí
Tipos
6

Pertenece a:

Marketing & Email IT & DevOps webhook openai

¿Qué hace este workflow?

Este workflow permite generar dinámicamente páginas web completas en HTML y CSS con Tailwind a partir de una simple consulta textual de usuario. Utiliza la capacidad de salida estructurada de OpenAI para interpretar la descripción deseada y diseñar la interfaz de usuario, convirtiéndola luego en código HTML funcional y listo para usar. Ideal para equipos de marketing que necesitan crear landing pages rápidamente, desarrolladores que buscan prototipar ideas de UI sin codificar manualmente, o cualquier profesional que requiera contenido web dinámico y personalizado. Automatiza un proceso que de otra manera sería manual y consume mucho tiempo, reduciendo drásticamente los plazos de creación y experimentación con nuevas interfaces o contenidos. Simplifica la producción de activos web, ahorrando horas de diseño y maquetación, y acelerando la publicación de contenido fresco y relevante.

¿Cómo funciona?

Este workflow usa 7 nodos conectados con 6 tipos diferentes: RespondToWebhook, HttpRequest, OpenAi, Html, StickyNote y 1 más. La estructura está totalmente conectada — listo para importar.

¿Para quién es?

Diseñado para equipos de Marketing & Email, IT & DevOps. Nivel básico — ideal si empiezas con n8n.

¿Lo quieres en tu empresa?

→

Lo implementamos por ti end-to-end: integración, deploy, mantenimiento y soporte. Consultoría B2B con Genai Sapiens.

Hablemos de tu proyecto

¿Quieres aprender a hacerlo?

→

Sprints de 30 días con companion IA + comunidad. Aprende n8n, automatización y agentes IA desde cero o nivel avanzado.

Ver formación Momentum

Workflows similares

Genera Páginas HTML Dinámicas y Personalizadas con OpenAI en n8n

basico

Automatiza la Generación de Imágenes con OpenAI DALL-E por Webhook

basico

Crea Contenido Estratégico con IA para Blogs y Redes Sociales

avanzado ★ Alto

Automatiza el Triaje de Incidentes de Seguridad con IA y Notificaciones

basico ★ Alto

Automatiza la Seguridad de Contenido con IA y GPT-4O

avanzado ★ Alto

Genera Imágenes AI desde un Webhook con OpenAI en n8n

basico

Optimiza URLs con IA: Generador de Enlaces Cortos y Redirección API

intermedio ★ Alto
\n {{ $json.message.content.title }}\n\n\n{{ $json.message.content.html }}\n\n"},"typeVersion":1.2},{"id":"193093f4-b1ce-4964-ab10-c3208e343c69","name":"Sticky Note","type":"n8n-nodes-base.stickyNote","position":[1134,62],"parameters":{"color":7,"width":638,"height":503,"content":"## Generate HTML from user query\n\n**HTTP Request node**\n- Send the user query to OpenAI, with a defined JSON response format - *using HTTP Request node as it has not yet been implemented in the OpenAI nodes*\n- The response format is inspired by the [Structured Output defined in OpenAI Introduction post](https://openai.com/index/introducing-structured-outputs-in-the-api)\n- The output is a JSON containing HTML components and attributed\n\n\n**OpenAI node**\n- Format the response from the previous node from JSON format to HTML format"},"typeVersion":1},{"id":"0371156a-211f-4d92-82b1-f14fe60d4b6b","name":"Sticky Note1","type":"n8n-nodes-base.stickyNote","position":[0,60],"parameters":{"color":7,"width":768,"height":503,"content":"## Workflow: Dynamically generate an HTML page from a user request using OpenAI Structured Output\n\n**Overview**\n- This workflow is a experiment to build HTML pages from a user input using the new Structured Output from OpenAI.\n- The Structured Output could be used in a variety of cases. Essentially, it guarantees the output from the GPT will follow a defined structure (JSON object).\n- It uses Tailwind CSS to make it slightly nicer, but any\n\n**How it works**\n- Once active, go to the production URL and add what you'd like to build as the parameter \"query\"\n- Example: https://production_url.com?query=a%20signup%20form\n- OpenAI nodes will first output the UI as a JSON then convert it to HTML\n- Finally, the response is integrated in a HTML container and rendered to the user\n\n**Further thoughts**\n- Results are not yet amazing, it is hard to see the direct value of such an experiment\n- But it showcase the potential of the Structured Output. Being able to guarantee the output format is key to build robust AI applications."},"typeVersion":1},{"id":"06380781-5189-4d99-9ecd-d8913ce40fd5","name":"Webhook","type":"n8n-nodes-base.webhook","position":[820,380],"webhookId":"d962c916-6369-431a-9d80-af6e6a50fdf5","parameters":{"path":"d962c916-6369-431a-9d80-af6e6a50fdf5","options":{"allowedOrigins":"*"},"responseMode":"responseNode"},"typeVersion":2}],"active":true,"pinData":{},"settings":{"executionOrder":"v1"},"versionId":"d2307a2a-5427-4769-94a6-10eab703a788","connections":{"Webhook":{"main":[[{"node":"Open AI - Using Structured Output","type":"main","index":0}]]},"OpenAI - JSON to HTML":{"main":[[{"node":"Format the HTML result","type":"main","index":0}]]},"Format the HTML result":{"main":[[{"node":"Respond to Webhook","type":"main","index":0}]]},"Open AI - Using Structured Output":{"main":[[{"node":"OpenAI - JSON to HTML","type":"main","index":0}]]}}}