Verifica y corrige visualmente HTML y Markdown generados por IA
Abre el código listo en un editor visual gratuito, mira el resultado con los ojos del usuario y edítalo sin programar
- 1.Abre ChatGPT o Claude y genera código HTML con el prompt. Copia el resultado.
Si el servicio no está disponible en tu región, usa una VPN o un modelo local con Ollama.
ChatGPT ↗Sobre la herramientaPromptGenera una plantilla de correo HTML responsive para [ocasión: p. ej., correo de bienvenida, boletín, anuncio de rebajas]. Incluye CSS en línea, un encabezado con marcador de posición de logo, una sección de contenido con [mensaje principal] y un pie de página con enlace de cancelar suscripción. Hazlo compatible con móvil con ancho máximo de 600px.
Qué hace este promptEl prompt pide a la IA crear una plantilla de correo HTML. Sustituye [ocasión] por el tipo de correo (p. ej., correo de bienvenida) y [mensaje principal] por tu texto. La IA devolverá código HTML listo con estilos integrados. - 2.Abre CodePen - un editor HTML online gratuito con vista previa en vivo. Haz clic en el botón 'Pen' en la esquina superior izquierda.
No hace falta registrarse para ver, pero sí para guardar. El plan gratuito permite crear cantidad ilimitada de pens.
CodePen ↗ - 3.Pega el código HTML generado en el panel HTML (columna izquierda). Si el código contiene CSS, muévelo al panel CSS (columna central). La vista previa aparecerá automáticamente en la columna derecha.
Si el HTML ya tiene estilos en línea, puedes pegar todo el código en el panel HTML - no hace falta el panel CSS.
CodePen ↗ - 4.Verifica el resultado visualmente: cómo se ve el encabezado, el texto, los botones. Cambia la vista a modo móvil haciendo clic en el botón de cambio de tamaño en la barra superior de la vista previa.
Presta atención a la legibilidad del texto, los márgenes y la alineación de los elementos.
CodePen ↗ - 5.Si necesitas hacer cambios, edita el código en el panel izquierdo. Los cambios se reflejarán al instante en la vista previa. Para documentos Markdown usa StackEdit (stackedit.io) - pega el texto en el panel izquierdo y verifica el resultado en el derecho.
StackEdit soporta vista previa en tiempo real y exportación a HTML, PDF y otros formatos.
StackEdit ↗ - 6.Cuando el resultado te parezca bien, copia el código final del editor y úsalo en tu proyecto. Para HTML, haz clic en el botón 'Copy' en la esquina superior derecha del panel HTML en CodePen.
Guarda el pen en CodePen si quieres volver a él más tarde - para eso hace falta un registro gratuito.
CodePen ↗
- gratisChatGPT FreeEl plan gratuito da acceso a GPT-4o mini con un límite en la cantidad de mensajes por hora.
- gratisCodePen FreeEl plan gratuito permite crear cantidad ilimitada de proyectos con vista previa en vivo, sin necesidad de registro para ver.
- gratisStackEditEditor Markdown online completamente gratuito con vista previa en tiempo real y exportación a varios formatos.
Los servicios de IA cambian rápido - las interfaces y los límites gratuitos pueden diferir de lo descrito.