Cómo convertir HTML en una página editable de GemPages con GemPages MCP

Cómo funciona la generación de páginas HTML con GemPages MCP

GemPages MCP admite la generación de páginas mediante IA a partir de HTML, imágenes y URL. Esta guía se centra específicamente en el uso HTML como fuente.

Las páginas de destino HTML pueden provenir de muchas fuentes:

• Un desarrollador interno
• Una agencia creativa o de comercio electrónico
• Claude Code u otra herramienta de codificación de IA
• Un proceso de Figma a HTML
• Un flujo de trabajo de campaña existente
• Una página que tu equipo ya posee
• Otro sistema capaz de producir HTML completo

Aunque el archivo parezca terminado en el navegador, sigue estando separado del flujo de trabajo de la página de la tienda.

Sin una conexión directa, el equipo podría necesitar transferir el código manualmente o pedirle a un desarrollador que reconstruya la página en GemPages. Esto implica otra transferencia de código y otra posibilidad de que cambien el texto, el diseño o los enlaces.

GemPages MCP permite que la IA complete esta transferencia mediante un proceso definido. En lugar de dejar el trabajo finalizado en una carpeta local, el flujo de trabajo crea una página GemPages real que su equipo puede previsualizar y editar.

Cómo GemPages MCP crea una página a partir de HTML

GemPages MCP no trata todo el archivo HTML como un bloque indiferenciado.

Divide el código fuente en secciones semánticas, construye cada sección por separado y valida el resultado antes de continuar.

1. La IA lee el HTML finalizado.

El flujo de trabajo comienza cuando pegas el HTML en la conversación o le indicas a la IA que vaya a un lugar . Html .

Puedes proporcionar:

• Una página de destino HTML
• Varios archivos HTML
• Una carpeta que contiene un lote de páginas

El código HTML fuente ya debería contener el texto, el diseño, las imágenes y el estilo deseados.

Es mejor completar los cambios importantes de contenido o diseño antes de que comience el flujo de trabajo. Empezar con una versión HTML estable reduce la confusión durante una conversión prolongada.

2. La página está dividida en secciones semánticas.

La IA lee el código HTML e identifica las secciones funcionales de la página.

Dependiendo del diseño de la fuente, estos pueden incluir:

• Héroe
• Introducción del producto
• Beneficios
• Caracteristicas
• Cómo funciona
• Comparación de productos
• Social proof
• Testimonios
• Oferta
• Preguntas frecuentes
• Llamada a la acción final

La lista exacta de secciones depende del código HTML proporcionado.

Dividir la página en secciones semánticas proporciona a la IA una estructura clara que seguir. Además, permite que el flujo de trabajo aísle los problemas dentro de una sección específica, en lugar de procesar la página completa en una sola acción masiva.

3. Se recuperan las reglas de generación de GemPages.

Antes de construir la página, la IA recupera las reglas de generación de GemPages.

Estas reglas proporcionan las instrucciones necesarias para traducir el HTML a una página de GemPages. La IA las recupera una sola vez y las utiliza como referencia durante toda la ejecución.

Esto permite mantener los mismos requisitos de construcción a medida que el flujo de trabajo avanza desde la primera sección hasta la última.

4. Cada sección está construida y validada.

La IA procesa una sección a la vez.

Para cada sección, hará lo siguiente:

1. Lea el código HTML correspondiente.
2. Construye la sección de acuerdo con las reglas de generación de GemPages.
3. Validar el resultado generado.
4. Solucione los problemas detectados durante la validación.
5. Arrastra la sección completada a la página.
6. Continúa con la siguiente sección.

Este proceso, sección por sección, puede detectar problemas como los siguientes:

• Copia faltante
• Elementos de página incompletos
• Diferencias de diseño
• Contenido colocado en la sección incorrecta
• Botones que no coinciden con la fuente
• Secciones omitidas durante la construcción
• Otras diferencias entre el HTML y el resultado generado

Una vez que se ha construido y validado una sección, la IA procede a la siguiente.

5. La página completa se crea en GemPages.

Una vez procesadas todas las secciones, el flujo de trabajo completa la página en la aplicación GemPages.

El HTML ya no es solo un archivo de código local. Tu equipo recibe una página que puede abrir y en la que puede seguir trabajando.

6. La IA devuelve los enlaces de la página.

Una vez completada la página, la IA devuelve:

• Una URL de vista previa
• URL del editor

La URL de vista previa le permite inspeccionar la página completa antes de su publicación.

La URL del editor abre la página en GemPages para que tu equipo pueda seguir realizando cambios.

El flujo de trabajo se detiene después de crear la página y devolver estos enlaces. La IA no publica la página automáticamente.

Cómo crear una página de GemPages desde HTML paso a paso

Ejecute el flujo de trabajo en Claude Code, Claude Cowork en Claude Desktop u otro entorno de IA compatible con GemCommerce MCP y acceso a archivos locales.

La interfaz puede variar entre clientes, pero el proceso principal sigue siendo el mismo.

Antes de comenzar, siga la guía de configuración de GemPages MCP para conectar GemCommerce MCP con su herramienta de IA y su tienda Shopify.

Paso 1: Preparar el HTML

Comience con una página de destino HTML terminada.

La fuente ya debería contener lo previsto:

• Copia de página
• Estructura de la sección
• Imágenes
• Tipografía
• Color
• Botones
• Enlaces
• Estilo adaptable

Revise el archivo antes de convertirlo y confirme que está utilizando la versión correcta.

Los nombres de archivo claros pueden ayudar a prevenir errores, especialmente cuando se almacenan varios archivos o versiones en la misma carpeta.

Por ejemplo:

• Rebajas de verano aprobadas.html
• lanzamiento-producto-final.html
• página-de-comparación-v3.html

Evite nombres de archivo como:

• nuevo.html
• test2.html
• final-final.html

Para realizar una conversión por lotes, coloque los archivos HTML correspondientes en una carpeta con un nombre claro.

Paso 2: Abrir un entorno de IA compatible

Abra Claude Code, Claude Cowork en la aplicación de escritorio de Claude u otro entorno de IA con:

• GemCommerce MCP
• Acceso a archivos locales
• Permiso para leer y escribir los archivos de flujo de trabajo.

El flujo de trabajo crea una carpeta de ejecución que contiene archivos de sección, registros y artefactos de compilación. Depende de estos archivos para realizar un seguimiento del progreso y reanudarse correctamente en caso de interrupción.

Un entorno de IA basado únicamente en chat y sin acceso a archivos locales no puede completar la conversión de forma fiable.

Para aprender cómo conectar GemCommerce MCP a Claude o Codex, siga nuestras instrucciones. Guía de configuración de GemPages MCP. 

Paso 3: Solicitar explícitamente a la IA que utilice GemCommerce MCP.

Comience la indicación con:

Utilice GemCommerce MCP.

Esta instrucción le indica a la IA que se conecte a las herramientas correctas en lugar de adivinar cómo se debe procesar el HTML.

Por ejemplo:

Utilice GemCommerce MCP. página-de-aterrizaje.html en una página de GemPages en mi tienda.

Paso 4: Proporcione un archivo HTML o un lote.

Puedes pegar el código HTML en la conversación o indicarle a la IA la ubicación de un archivo local.

Para una página:

“Utilice GemCommerce MCP. Turn página-de-aterrizaje.html en una página de GemPages en mi tienda”.

Para un archivo adjunto:

“Utiliza GemCommerce MCP. Convierte el código HTML adjunto en una página de GemPages para mi tienda”.

Para varios archivos:

“Utilice GemCommerce MCP. Cree páginas GemPages para cada página-de-aterrizaje.html bajo páginas/lote-2026-07/Hay seis archivos en la carpeta.

Indique el nombre exacto del archivo o la carpeta siempre que sea posible. Evite instrucciones como «use el archivo más reciente» cuando haya varias versiones disponibles.

Paso 5: Deja que la IA construya la página.

Tras recibir el HTML, la IA hará lo siguiente:

1. Lee la página.
2. Divídelo en secciones semánticas.
3. Recuperar las reglas de generación de GemPages.
4. Construye la primera sección.
5. Validar el resultado.
6. Empuja la sección hacia la página.
7. Repita el proceso para cada una de las secciones restantes.

Normalmente no es necesario que proporcione más información durante esta etapa.

Sin embargo, permanezca cerca de la conversación al inicio de la ejecución. Es posible que la IA necesite permiso para usar una herramienta MCP, acceder a un archivo o ejecutar un comando local.

Paso 6: Reciba las URL de vista previa y del editor.

Una vez que se ha creado y validado cada sección, la IA devuelve los enlaces a la página completada.

Abra la URL de vista previa para inspeccionar el resultado.

Abra la URL del editor cuando la página requiera más cambios.

Para un lote, confirme que cada archivo HTML tenga una página correspondiente y un conjunto de enlaces.

Paso 7: Revisa la página en GemPages

Compara la página convertida con el HTML original.

Revisa la página desde la sección principal hasta la llamada a la acción final, en lugar de comprobar solo las primeras secciones.

Confirma eso:

• Todas las secciones están incluidas
• La copia se ha transferido correctamente.
• Las imágenes aparecen en las ubicaciones correctas.
• La tipografía y los colores coinciden con la fuente.
• El espaciado entre secciones permanece constante.
• Los botones y enlaces funcionan.
• La página se comporta correctamente en todos los tamaños de pantalla.
• Los elementos interactivos funcionan según lo previsto.

Paso 8: Realice los cambios finales en el editor.

Utilice la URL del editor para solucionar cualquier problema que se encuentre durante la revisión.

Vuelve a previsualizar la página después de realizar los cambios.

La página debe superar las revisiones de contenido, diseño, técnicas y comerciales de tu equipo antes de su publicación.

Paso 9: Publica la página tú mismo

GemPages MCP no publica la página por usted.

Cuando la página esté lista, publíquela manualmente a través de GemPages.

Esto permite que la versión final para el cliente y el momento del lanzamiento estén bajo el control de tu equipo.

Ejemplos de indicaciones

Una indicación clara debe identificar GemCommerce MCP, el archivo de origen, la acción solicitada y el resultado esperado.

Convertir un archivo HTML adjunto	“Utiliza GemCommerce MCP. Convierte el archivo HTML adjunto en una página de GemPages para mi tienda. Devuelve las URL de vista previa y del editor cuando todas las secciones estén completas”.
Convertir HTML desde una herramienta de codificación de IA	“Utilice GemCommerce MCP. Turn campaña-de-verano.html en una página de GemPages en mi tienda. Crea y valida cada sección por separado, luego devuelve las URL de vista previa y del editor.
Convertir un lote de páginas HTML	Utilice GemCommerce MCP. Cree páginas GemPages para cada página-de-aterrizaje.html bajo páginas/lote-2026-07/Hay seis archivos en la carpeta. Procese cada página por separado y devuelva sus URL de vista previa y de edición.

Uso de otros tipos de entrada

Esta guía se centra en la creación de una página GemPages a partir de HTML.

GemPages MCP también admite otras entradas para la generación de páginas mediante IA:

• Imagen: Utilice una imagen o captura de pantalla como referencia visual.
• URL: Utilice una URL de página web existente como origen.

Para obtener instrucciones paso a paso, consulte: Cómo generar una página editable a partir de una imagen con GemPages MCP

Consejos para ejecutar el flujo de trabajo sin interrupciones

Consejo 1: Permitir las llamadas a la herramienta GemCommerce MCP

Por defecto, Claude solicita permiso antes de usar una herramienta MCP. Dado que el flujo de trabajo de HTML a GemPages utiliza muchas llamadas a herramientas, estas solicitudes pueden interrumpir el proceso repetidamente.

Para permitir las llamadas a la herramienta GemCommerce MCP necesarias:

1. Abre Claude Code en la aplicación de escritorio de Claude.
2. Haga clic en Personalizar en la barra lateral izquierda.
3. Vaya a la Conectores → GemCommerce MCP.
4. Abra Permisos de la herramienta.
5. Configure las herramientas GemCommerce MCP necesarias para Permitir siempre.

Otorgue permisos continuos únicamente a un conector que reconozca y en el que confíe.

Consejo 2: Utilice el modo automático para comandos Bash seguros.

El flujo de trabajo utiliza comandos Bash para crear y administrar archivos de sección, registros y artefactos de compilación.

Cuando Claude solicita aprobación para cada comando, la ejecución puede detenerse con frecuencia.

En Claude Code dentro de la aplicación Claude Desktop, configure la conversación en Modo automáticoDe esta forma, Claude puede ejecutar los comandos que considere seguros sin necesidad de solicitar aprobación cada vez.

Revise la configuración de permisos antes de habilitar el modo automático, especialmente cuando la conversación tenga acceso para almacenar información o archivos locales.

Aspectos que debe conocer antes de ejecutar el flujo de trabajo.

Revise los siguientes puntos antes de comenzar una conversión.

1. Indique explícitamente “Utilice GemCommerce MCP”.

Comience el mensaje indicándole a la IA que utilice GemCommerce MCP.

Sin esta instrucción, la IA podría intentar otro método o no lograr conectarse a las herramientas necesarias.

2. Utilice un entorno con acceso a archivos locales.

Ejecute el flujo de trabajo en Claude Code, Claude Cowork u otro entorno compatible con acceso a archivos locales.

El flujo de trabajo crea una carpeta de ejecución que contiene:

• Archivos de sección
• Registros de progreso
• Resultados de la validación
• Construir artefactos
• Datos utilizados para reanudar la conversión

Una interfaz que solo permite chat y no tiene acceso a archivos locales no puede gestionar de forma fiable la ejecución completa.

3. Utilice un modelo que pueda manejar alrededor de 500 contextos.

Una página de destino puede contener muchas secciones, cada una con un ciclo de construcción y validación independiente.

Utilice un modelo que pueda manejar cómodamente alrededor de 500 contextos, como Opus con un esfuerzo de razonamiento medio o alto.

Un modelo con contexto o capacidad de razonamiento limitados puede perder de vista:

• Reglas de generación de GemPages
• Secciones completadas anteriormente
• Resultados de validación anteriores
• Patrones de diseño para toda la página
• La etapa actual de la carrera

Esto cobra mayor importancia para páginas largas y conversiones por lotes.

4. Las carreras interrumpidas pueden reanudarse.

Una pérdida de conexión, el agotamiento del presupuesto de uso u otra interrupción pueden detener el flujo de trabajo antes de su finalización.

Normalmente no es necesario reiniciar.

Pídele a la IA que continúe:

Continúa el flujo de trabajo de HTML a GemPages desde la última sección completada. No reinicies la ejecución.

La IA puede utilizar los archivos de sección, los registros y los artefactos de compilación existentes para continuar desde el punto correcto.

Mantenga intacta la carpeta de ejecución hasta que la página esté completa.

5. Las páginas largas pueden tardar más de una hora.

Una página con muchas secciones puede tardar más de una hora en completarse.

El flujo de trabajo prioriza una reconstrucción precisa sobre una transferencia masiva rápida. Cada sección se construye y valida por separado según las reglas de generación de GemPages.

Esto es importante porque el resultado es una página que los clientes verán y en la que interactuarán. Una pequeña diferencia en el texto, el diseño o el comportamiento del botón de llamada a la acción puede afectar la experiencia final.

Cuantas más secciones contenga la página, más rondas de construcción y validación necesitará el flujo de trabajo.

Qué revisar antes de publicar

GemPages MCP devuelve una página editable, pero su equipo sigue siendo responsable de la revisión final.

Compara cada sección con el HTML original.

Abra el HTML original y la vista previa de GemPages uno al lado del otro.

Mira esto:

• Cada sección está presente
• El orden de las secciones es correcto.
• El texto coincide con la fuente.
• Las imágenes aparecen en las ubicaciones previstas.
• Los botones utilizan las etiquetas previstas.
• Los destinos de CTA son correctos.
• No se ha duplicado ninguna sección.
• No falta ningún contenido importante

Análisis de escritorio, tableta y móvil

Comprueba la página en diferentes tamaños de pantalla.

Buscar:

• desplazamiento horizontal
• Texto que se extiende fuera de su contenedor
• Recortes de imagen incorrectos
• Secciones de ancho fijo
• Botones difíciles de pulsar
• Grandes espacios entre secciones
• Tablas que no se ajustan a pantallas más pequeñas
• Elementos fijos que cubren el contenido

Acciones de página de prueba

Haz clic y prueba cada acción orientada al cliente, incluyendo:

• Botones CTA
• Enlaces de productos
• Enlaces de navegación
• Enlaces de anclaje
• Forms
• acordeones
• Otros elementos interactivos

Una página puede parecer muy similar a la fuente original, pero aun así contener un enlace incorrecto o una acción que no funciona.

Verificar el contenido y la información de la oferta

Comprobar:

• Nombres de productos
• Precios
• Descuentos
• Información de envío
• Condiciones de devolución
• Garantías
• Recomendaciones de clientes
• Comparaciones con competidores
• Certificaciones
• Reclamaciones de productos
• Fechas de vencimiento de la oferta

El flujo de trabajo transfiere la página. No garantiza que todas las declaraciones comerciales en el código HTML fuente sean precisas.

Realizar los cambios finales en GemPages

Utilice la URL del editor para solucionar cualquier problema restante.

Tras realizar los cambios, vuelva a previsualizar la página y repita las comprobaciones pertinentes.

Publica solo después de que se hayan revisado el contenido, el diseño, la presentación para dispositivos móviles y las acciones de los clientes.

Cuándo crear una página de GemPages desde HTML

Utilice HTML como fuente cuando:

• Ya tienes una página de destino HTML completa.
• Un desarrollador ha preparado la página.
• Una agencia ha entregado el HTML final.
• Una herramienta de codificación de IA ha generado una página aprobada.
• Ya se ha implementado un diseño de Figma como HTML.
• Necesitas transferir varias páginas HTML a GemPages.
• El equipo de comercio electrónico necesita gestionar la página después del desarrollo.

El flujo de trabajo está diseñado para equipos que ya han terminado el HTML y necesitan integrarlo en el flujo de trabajo de su tienda sin tener que reconstruirlo manualmente.