TL; DR
Content to HTML es el segundo de los tres flujos de trabajo especializados disponibles a través de GemPages MCP:
- Investigación de contenido: Transforma la información sobre productos y mercados en conocimientos sobre los clientes, perfiles de compradores y borradores de contenido.
- Contenido a HTML: Convierta un publirreportaje, una lista o un artículo comparativo ya terminado en una página de destino HTML lista para previsualizar.
- HTML a GemPages: Convierte el código HTML aprobado en una página editable en GemPages.
Cada flujo de trabajo puede utilizarse de forma independiente. La función de conversión de contenido a HTML se sitúa entre la investigación y la creación de páginas, ayudando a los equipos a transformar el contenido aprobado en una página visual estructurada antes de incorporarlo a GemPages.
El flujo de trabajo puede:
- Lee el contenido creado por el flujo de trabajo de investigación de contenido o proporcionado por tu equipo.
- Identifique si el artículo es un publirreportaje, una lista o una comparación.
- Adapta el contenido a una estructura adecuada de la biblioteca de plantillas HTML de GemPages.
- Aplicar los colores y la tipografía de la marca guardados.
- Convertir un artículo o un lote completo
- Evite reutilizar la misma plantilla dentro de un lote.
- En lugar de inventar información, marque los datos faltantes con marcadores de posición entre corchetes.
- Cree un archivo landing-page.html completo para su revisión.
Para empezar, abre Claude Code, Claude Cowork u otro entorno de IA compatible e introduce una indicación como la siguiente:
“Utiliza GemCommerce MCP. Convierte content/blog-advertorial-1.md en una página de destino.”
El resultado de este flujo de trabajo es un archivo HTML. No crea ni publica una página en GemPages. Una vez revisado y aprobado el HTML, puede incorporarlo al flujo de trabajo de HTML a GemPages.
Cómo funciona el flujo de trabajo de conversión de contenido a HTML
El flujo de trabajo de conversión de contenido a HTML va más allá de simplemente insertar un artículo en un diseño de página genérico. Primero, analiza el contenido y luego lo relaciona con una estructura apropiada de la biblioteca de plantillas HTML de GemPages.
1. GemPages MCP lee tu artículo terminado.
Puedes proporcionar el contenido de varias maneras:
- Dirige la IA a un archivo de artículo
- Pega el artículo completo en la conversación.
- Utilice un artículo creado mediante el flujo de trabajo de investigación de contenido.
- Proporcione una carpeta que contenga varios artículos terminados.
El contenido no tiene por qué provenir de otro flujo de trabajo de GemPages MCP. Puede utilizar cualquier artículo completo, siempre que la IA pueda acceder a él.
2. GemPages MCP identifica el tipo de contenido.
Actualmente, el flujo de trabajo funciona con tres tipos de contenido:
- Publicitario
- lista
- Comparación
La IA primero intenta identificar el formato automáticamente. Si el tipo de contenido es claro, continúa sin pedirle confirmación.
Si el artículo pudiera ajustarse a más de un formato, o no coincidiera claramente con ninguno de los tres, la IA le pedirá que seleccione el tipo más parecido o que describa la estructura que desea.
Esta clasificación ayuda a la IA a elegir una plantilla que se ajuste al mensaje y la estructura del artículo.
3. GemPages MCP selecciona una plantilla HTML adecuada.
Tras identificar el tipo de contenido, la IA evalúa las opciones pertinentes en la biblioteca de plantillas HTML de GemPages y elige la estructura que mejor se adapta al artículo.
El objetivo no es simplemente encontrar una plantilla que pueda contener el contenido. La plantilla seleccionada debe permitir que los mensajes clave del artículo y el orden narrativo se mantengan claros al presentarse como página de destino.
Dado que el flujo de trabajo utiliza una biblioteca de plantillas investigadas en lugar de generar cada diseño de forma libre, el resultado puede mantenerse visualmente variado sin depender de una estructura de página no probada.
4. GemPages MCP aplica el estilo de tu marca.
La primera vez que crees una página para una tienda, la IA podría solicitarte lo siguiente:
- Color principal de la marca
- Colores secundarios o de acento
- fuente de encabezado
- Fuente del cuerpo
- Tipografía preferida
Puedes proporcionar información precisa, como códigos de color y nombres de fuentes. También puedes subir una imagen o captura de pantalla y pedirle a la IA que analice su estilo visual.
La información confirmada se guarda localmente en:
- estilo-de-marca.md: un archivo de referencia que contiene los colores y la tipografía de su marca.
La IA puede reutilizar este archivo para páginas posteriores creadas para la misma tienda, por lo que no es necesario que respondas a las mismas preguntas cada vez.
Si omite este paso, la IA utilizará el estilo predeterminado de la plantilla seleccionada en lugar de crear colores de marca.
5. GemPages MCP transforma el artículo en HTML.
La IA adapta el artículo a la plantilla seleccionada y crea la página de destino final.
Por cada artículo, usted recibe:
- página-de-aterrizaje.html: la página de destino HTML completada y el principal entregable del flujo de trabajo
En cada lote, cada artículo recibe su propia página HTML. Los artículos se procesan secuencialmente y la misma plantilla no se reutiliza dentro del lote.
El compartido estilo-de-marca.md El archivo se puede reutilizar en todo el lote cuando todas las páginas pertenecen a la misma tienda.
6. La información faltante está marcada con marcadores de posición.
La IA no inventa datos que falten en el contenido original.
Esto incluye información como:
- Testimonios
- Certificaciones
- Términos de garantia
- Reclamaciones de rendimiento
- Descuentos
- Estadísticas
- Resultados específicos del producto
Si la información requerida no está disponible, la IA deja un marcador de posición claro entre corchetes, como por ejemplo:
[Añadir testimonio de cliente verificado]
o bien:
[Insertar período de garantía]
Una vez completada la página, la IA marca estos marcadores de posición para que sepas exactamente qué falta añadir o verificar antes de que la página pase al siguiente paso del flujo de trabajo.
Cómo iniciar un flujo de trabajo de conversión de contenido a HTML paso a paso
Paso 1: Entregue su artículo o lote
Proporcione un artículo completo o un conjunto de artículos.
Para un solo artículo, puede indicarle a la IA el archivo correspondiente:
Utiliza GemCommerce MCP para convertir mi contenido en content/blog-advertorial-1.md en una página de destino HTML.
También puedes pegar el artículo completo directamente en la conversación.
Para un lote, proporcione la carpeta que contiene todos los artículos que desea convertir:
Utilice GemCommerce MCP para convertir cada artículo en contenido/ en archivos HTML de páginas de destino.
Cada artículo debe estar lo suficientemente completo como para convertirse en una página. Las notas preliminares o los esquemas incompletos pueden no proporcionar suficiente información para que el flujo de trabajo produzca un resultado útil.
Paso 2: Confirme el tipo de contenido si se le solicita.
La IA comprueba automáticamente si el artículo es un publirreportaje, una lista o una comparativa.
Si tiene confianza, continúa sin interrumpirte.
Si no está seguro, puede que le pida que:
- Confirme el tipo de contenido detectado.
- Seleccione el tipo compatible más cercano
- Explica el formato que deseas
Puedes responder brevemente:
- Consideren esto como un publirreportaje.
- Utilice una estructura de lista.
- Esta debería ser una página de destino para comparaciones.
También puede agregar una instrucción específica si es necesario:
Utilice la estructura de comparación más similar, pero mantenga la introducción educativa antes de la comparación de productos.
Paso 3: Responda las preguntas sobre el estilo de la marca, si se le formulan.
Si la IA no encuentra un archivo de estilo de marca existente para la tienda, es posible que le pida que introduzca sus colores y tipografía.
Puede proporcionar la información manualmente. Por ejemplo:
- Color primario
- Color secundario
- fuente de encabezado
- Fuente del cuerpo
Como alternativa, suba una imagen clara de su tienda o marca y pregunte:
Analiza esta imagen y utiliza sus colores y tipografía como estilo de marca para la página de destino.
Esta información se guarda en estilo-de-marca.md y se pueden reutilizar para páginas posteriores creadas para la misma tienda.
Paso 4: Deje que el flujo de trabajo se ejecute.
La IA hará lo siguiente:
- Leer el artículo.
- Identifica su tipo de contenido.
- Encuentra una plantilla adecuada.
- Aplique el estilo de marca guardado o proporcionado.
- Adapta el contenido a la plantilla.
- Crear página-de-aterrizaje.html.
- Señale cualquier dato faltante con marcadores de posición entre corchetes.
Este proceso normalmente lleva alrededor de De 10 a 20 minutos por página HTML.
El flujo de trabajo prioriza la compatibilidad entre el artículo y la estructura de la página de destino. No se limita a seleccionar la primera plantilla que se ajuste al número de palabras.
En el caso de un lote, el tiempo total de procesamiento aumenta con el número de artículos, ya que cada uno se procesa por separado.
Paso 5: Revise la página completada.
Cuando página-de-aterrizaje.html Ya está listo, ábrelo en un navegador y revisa el resultado.
Comprobar:
- Si la estructura de la página se ajusta al artículo
- Si el mensaje original sigue siendo claro
- Si falta algún contenido importante
- Si los colores y la tipografía coinciden con su marca
- Si los llamamientos a la acción son apropiados
- Si quedan marcadores de posición entre corchetes
Puedes pedirle a la IA que revise el HTML a través de la conversación. Por ejemplo:
- Mueva la sección de prueba social por encima de los beneficios del producto.
- Acorta el texto principal y haz que la llamada a la acción principal sea más visible.
- Mantén la plantilla actual, pero utiliza una versión más oscura del color principal para los botones.
- Sustituye el contenido actual de las preguntas frecuentes con las preguntas frecuentes de mi artículo original.
Paso 6: Elige qué sucede a continuación
Tras revisar la página, puedes pedirle a la IA que:
- Revisar el HTML actual
- Continúa con el siguiente artículo del lote.
- Completa el lote restante sin detenerte
- Enviar el HTML aprobado al flujo de trabajo HTML a GemPages
Si quieres continuar a GemPages, di:
El código HTML tiene buen aspecto. Utiliza el flujo de trabajo de HTML a GemPages para convertirlo en una página GemPages editable.
El siguiente paso utilizará el código HTML completado para crear una página en GemPages y generar un enlace al editor de GemPages. Luego, podrá revisar, editar y publicar la página cuando esté listo.
Ejemplos de indicaciones
Aquí te presentamos tres maneras de iniciar el flujo de trabajo de conversión de contenido a HTML, dependiendo de la procedencia de tu contenido y de la cantidad de artículos que desees convertir.
1. Convertir un artículo del flujo de trabajo de investigación de contenido
“Utiliza GemCommerce MCP. Convierte content/blog-advertorial-1.md en una página de destino.”
Este es el flujo de trabajo más sencillo para un solo artículo. GemPages MCP lee el archivo seleccionado, identifica si el contenido es un publirreportaje, una lista o un artículo comparativo, y lo asocia con una plantilla adecuada.
Si esta es la primera página que se crea para la tienda, es posible que también se le solicite que proporcione los colores y la tipografía de su marca.
2. Convierte un artículo que hayas escrito tú mismo.
“Utiliza GemCommerce MCP. Aquí tienes un artículo que escribí: [pega el artículo completo]. Conviértelo en una página de destino para mi tienda.”
El artículo original no tiene por qué provenir del flujo de trabajo de Investigación de Contenido. Puede proporcionar cualquier artículo terminado pegándolo directamente en la conversación.
GemPages MCP intentará clasificar el artículo como publirreportaje, lista o comparativa. Si el formato no está claro, es posible que se le pida que confirme el tipo de contenido más aproximado.
3. Convertir un lote completo sin detener el proceso.
“Utiliza GemCommerce MCP. Convierte cada artículo en contenido/páginas de destino. Revisa todo el lote sin detenerte a preguntarme después de cada uno y marca cualquier elemento con marcadores de posición al final.”
Utilice esta opción cuando desee que GemPages MCP procese una carpeta completa de artículos terminados sin tener que esperar la aprobación después de cada página.
Los artículos se procesan de uno en uno. GemPages MCP realiza un seguimiento de las plantillas ya utilizadas en el lote para que las páginas resultantes no tengan todas el mismo diseño.
Si falta alguna información requerida, el flujo de trabajo agrega un marcador de posición entre corchetes en lugar de generar la información. Una vez finalizado el procesamiento por lotes, identifica los marcadores de posición que deben revisarse y completarse.
Consejos para ejecutar el flujo de trabajo sin interrupciones
Consejo 1: Permitir las llamadas a la herramienta GemCommerce MCP
Por defecto, los clientes de MCP, como Claude, pueden solicitar permiso antes de cada llamada a una herramienta de MCP. Dado que este flujo de trabajo implica varias llamadas a herramientas, las solicitudes repetidas pueden interrumpir el proceso.
En Claude Code dentro de Claude Desktop:
- Haga clic en Personalizar en la barra lateral izquierda.
- Vaya a la Conectores.
- Seleccione GemCommerce MCP.
- Habilitar permisos para todas las llamadas a la herramienta GemCommerce MCP.
Active esta opción únicamente cuando reconozca y confíe en el servidor MCP conectado.
Consejo 2: Utilice el modo automático para comandos Bash seguros.
El flujo de trabajo de conversión de contenido a HTML también utiliza comandos bash para leer, crear y administrar archivos locales. Si Claude le pide que apruebe cada comando, el flujo de trabajo podría pausarse 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.
Aspectos que debe conocer antes de ejecutar el flujo de trabajo.
1. Mencione siempre GemCommerce MCP en su solicitud.
GemPages MCP es el sistema de producto y flujo de trabajo. En Claude, GemCommerce MCP es el conector que la IA necesita usar para acceder a esos flujos de trabajo.
Decirlo explícitamente “Utilice GemCommerce MCPEsto ayuda a que la IA se conecte a las herramientas correctas en lugar de intentar generar el HTML mediante otro método.
2. Utilice una herramienta de IA con acceso a archivos locales.
Este flujo de trabajo lee y escribe una serie de archivos locales mientras procesa cada artículo.
Uso:
- Código de Claude
- Claude Cowork en Claude Escritorio
- Otra herramienta de IA compatible con acceso a archivos locales
Un entorno de IA basado únicamente en chat y sin acceso a archivos locales no puede ejecutar el flujo de trabajo completo.
3. Comience con contenido terminado.
El flujo de trabajo está diseñado para convertir un artículo completo a HTML. No está pensado para transformar una idea o un esquema en un artículo completo.
Si su contenido aún está incompleto, termínelo primero o utilice el flujo de trabajo de Investigación de contenido antes de comenzar con la conversión de contenido a HTML.
4. Utilice un modelo que pueda manejar un contexto grande.
Elija un modelo que pueda manejar cómodamente aproximadamente 200 tokens de contexto, como Opus con esfuerzo medio o alto.
Esto es especialmente importante para los lotes, donde la IA puede necesitar realizar un seguimiento de varios artículos, información de plantillas, estilos de marca, asignaciones de contenido, archivos generados y uso previo de plantillas.
5. Los artículos en lotes se procesan secuencialmente.
Los artículos de un lote siempre se procesan de uno en uno, nunca en paralelo.
Esto permite que el flujo de trabajo realice un seguimiento de las plantillas que ya se han utilizado y evita que se aplique la misma plantilla dos veces dentro del mismo lote.
6. Un archivo de estilo de marca se puede reutilizar para la misma tienda.
estilo-de-marca.md Normalmente, solo se crea la primera vez que se construye una página para una tienda.
Posteriormente, se puede reutilizar para páginas posteriores de la misma tienda, incluidas las páginas de un mismo lote. Si trabaja con varias tiendas, asegúrese de que la IA utilice el archivo de estilo de marca correcto para cada una.
7. La IA no inventa datos faltantes.
Si falta un testimonio, una certificación, una cláusula de garantía, una estadística u otro detalle fáctico, la IA utiliza un marcador de posición entre corchetes en lugar de inventarlo.
Resuelva siempre estos marcadores de posición antes de enviar la página para su publicación.
8. Omitir las preguntas sobre la marca afecta la coherencia visual.
Si no proporciona los colores y la tipografía de su marca, la IA utilizará el estilo predeterminado de la plantilla.
La página aún se puede generar, pero puede requerir ajustes visuales adicionales para que coincida con tu tienda.
9. Dedique entre 10 y 20 minutos por página.
El flujo de trabajo dedica tiempo a asociar cada artículo con la estructura de página de destino adecuada. En un lote, los artículos se procesan secuencialmente, por lo que el tiempo total aumenta con el número de páginas.
10. El flujo de trabajo no crea ni publica una página de GemPages.
El resultado final de Content to HTML es página-de-aterrizaje.html.
Puedes previsualizar y revisar este archivo, pero aún no se ha convertido en una página de GemPages y no se publica automáticamente en tu tienda.
Siguiente paso: Convierte tu HTML en una página editable de GemPages.
Una vez que haya revisado página-de-aterrizaje.htmlUna vez resueltos los marcadores de posición y aprobado el contenido y el diseño de la página, puede pasar al tercer flujo de trabajo de GemPages MCP: HTML a GemPages.
El flujo de trabajo de HTML a GemPages toma el archivo HTML finalizado, lo divide en secciones semánticas, construye y valida esas secciones y crea la página dentro de GemPages.
Una vez finalizado el proceso, GemPages MCP devuelve un enlace al editor de GemPages. Su equipo podrá entonces abrir la página, realizar los últimos cambios y publicarla manualmente cuando esté lista.
Tu mensaje puede ser tan simple como:
“Utiliza GemCommerce MCP para convertir landing-page.html en una página editable de GemPages.”
gracias por tus comentarios