El Kit HTML-to-Shopify de GemPages es un kit de herramientas gratuito que le ayuda a utilizar Claude de Anthropic para convertir cualquier código HTML en un archivo .gempages válido.
Una vez generado, puede importar el archivo directamente en Creador de Páginas de GemPages En Shopify, GemPages gestiona la URL y el título de la página, la visibilidad del encabezado y el pie de página, y la indexación en los motores de búsqueda, todo ello sin necesidad de código personalizado para el tema de Shopify.
¿Qué es el Kit HTML-to-Shopify de GemPages?
Tiene una página HTML — un advertorial, un listicle, una página de destino, creada por IA o codificada a mano — que se renderiza correctamente en su navegador. Pero cuando la implementa en Shopify, el tema sobreescribe su diseño, el layout se rompe, o necesita convertirla a Shopify Liquid para que funcione.
La propiedad Kit HTML-to-Shopify de GemPages es un kit de herramientas gratuito que empaqueta su HTML en un archivo que GemPages publica directamente en Shopify. Su HTML se envía tal cual — GemPages lo convierte a Liquid, gestiona la URL y el título de la página, oculta el encabezado y el pie de página, y controla la indexación en motores de búsqueda. Todo esto requeriría, de otro modo, código personalizado en el tema de Shopify.
Qué hace este kit y qué no hace
Qué hace:
- Convierte su HTML a Liquid compatible con Shopify; no necesita escribir Liquid por su cuenta.
- Publica la página en Shopify sin que su tema sobreescriba el diseño.
- Gestiona la URL y el título de la página a través de GemPages.
- Oculta el encabezado y el pie de página para que su página sea independiente.
- Bloquea la indexación en motores de búsqueda cuando es necesario (noindex / nofollow), especialmente útil al ejecutar anuncios pagados, cuando desea que la página sea visible solo para el tráfico de anuncios y no esté indexada por Google.
Qué no hace:
- La página importada no es editable mediante los elementos de arrastrar y soltar de GemPages.
- Perfecciona su HTML primero — con IA, a mano, de la manera que prefiera trabajar — hasta que coincida con sus expectativas; luego GemPages se encarga de la implementación.
- Este flujo de trabajo está diseñado para páginas de preventa, publirreportajes y páginas de destino independientes — no admite bloques de productos ni integraciones con otras aplicaciones de Shopify.
Lo que necesitará
Necesitará tres cosas:
1. GemPages instalado en su tienda Shopify. Instale Creador de Páginas de GemPages en su tienda Shopify.
2. Una cuenta de pago de Claude: Claude Pro, Team o Enterprise. El plan gratuito no incluye Proyectos, que es la función que utilizamos para esta configuración. Puede suscribirse en claude.ai.
3. Los archivos del kit: un pequeño paquete con 4 archivos en su interior.
Descargue el paquete del kit aquí: Proyecto gempages-ai
| Archivo | ¿Qué hace? |
CLAUDE.md |
Le indica a Claude cómo comportarse para esta tarea |
SKILL.md |
Enseña a Claude la habilidad de conversión |
page_schema.md |
La especificación técnica de una página de GemPages |
build_gempages.py |
Un script que empaqueta el archivo final |
Aquí encontrará algunas plantillas HTML adicionales de GemPages incluidas en el paquete del kit. Puede utilizarlas como referencias o puntos de partida para generar su propio contenido con Claude más fácilmente: Plantilla HTML para generación de IA
Dos formas de utilizar el Creador de Exportación
Existen dos opciones de configuración según cómo acceda a Claude:
| Elemento | Opción A (Web) | Opción B (Escritorio) |
|---|---|---|
| Plataforma | claude.ai (navegador) | Aplicación de escritorio de Claude |
| Resultado | Contenido JSON (texto) | Archivo .gempages listo para importar |
| ¿Ejecutar script Python? | Sí, manualmente | No, Claude lo gestiona |
| ¿Instalación adicional? | Ninguna | Se requiere la app de escritorio de Claude |
| Ideal para | Configuración rápida, cualquier dispositivo | Flujo de trabajo optimizado de extremo a extremo |
Opción A: Claude en la web (claude.ai)
Paso 1: Crear un nuevo Proyecto
- Abra claude.ai e inicie sesión.
- En la barra lateral izquierda, haga clic en Proyectos.
- Haga clic en Proyectos Nuevos.
- Asígnele el nombre: Creador de Exportacion de GemPages (o cualquier nombre de su preferencia).
- En la pestaña Mareas Ideales para Lecciones , pegue lo siguiente:
Convierte el código HTML en un archivo .gempages válido que se pueda importar directamente al generador de páginas GemPages en Shopify.
- Haga clic en Crear.
Paso 2: Agregar Instrucciones Personalizadas
Las instrucciones personalizadas le indican a Claude cómo comportarse dentro de este Proyecto.
- Dentro de su nuevo Proyecto, busque en la barra lateral derecha Instrucciones personalizadas.
- Abra el panel de
CLAUDE.mden su computador con cualquier editor de texto. El Notepad (Windows) o TextEdit (Mac) funciona perfectamente; no necesita nada especial. - Seleccione todos el contenido y péguelo en el campo de instrucciones personalizadas de su Proyecto
- Haga clic en Guardar.
Paso 3: Cargar los archivos de Conocimiento del Proyecto
El conocimiento del Proyecto es un conjunto de archivos de referencia que Claude puede leer cuando los necesite. Cargaremos 3 archivos aquí.
- En su Proyecto, busque la sección Conocimiento del Proyecto (generalmente en la barra lateral derecha).
- Haga clic en Añadir contenido (el botón de subir).
- Cargue estos tres archivos uno por uno:
SKILL.mdpage_schema.mdbuild_gempages.py
Paso 4: Probarlo
Todo está configurado. Es hora de utilizarlo. Abra un nuevo chat dentro del proyecto y pruebe estos prompts para verificar que todo funcione correctamente:
Cree un archivo .gempages de ejemplo sencillo para mí.
Por favor, convierta mi código HTML en un archivo .gempages para que pueda importarlo a GemPages en Shopify.
Opción B: Aplicación de escritorio de Claude (modo Cowork)
build_gempages.py directamente y entregar el archivo .gempages terminado — sin necesidad de configuración local de Python.Paso 1: Asegurarse de tener la aplicación de escritorio de Claude
Descárguela desde claude.ai/download si aún no la tiene. Inicie sesión con su cuenta de pago.
Paso 2: Activar el modo Cowork
Abra la aplicación de escritorio, vaya a su configuración y asegúrese de que Cowork esté activado. (Cowork permite que Claude ejecute código en su computador de forma segura y en un entorno aislado.)
Paso 3: Crear el Proyecto y cargar los archivos
- Cree un nuevo proyecto y asígnele el nombre Creador de Exportacion de GemPages (o el que prefiera).
- Cuando se le solicite, haga clic en Seleccionar carpeta.
- Elija (o cree) una carpeta en su computador, p. ej. Creador de Exportacion de GemPages
- Claude tendrá ahora acceso de lectura/escritura a esa carpeta.
Paso 4: Agregar los Archivos del Proyecto
Copie todos los archivos de este paquete en la carpeta que seleccionó:
CLAUDE.mdSKILL.mdpage_schema.mdbuild_gempages.py
Paso 5: Probarlo
Abra un nuevo chat dentro del proyecto y utilice los mismos prompts que en la Opción A. Esta vez, Claude empaquetará el archivo automáticamente y lo entregará directamente en el chat.
Cómo importar el archivo .gempages en GemPages
Después de que Claude genere su archivo .gempages , el paso final es importarlo en Creador de Páginas de GemPages.
Paso 1: Abrir el panel de GemPages
Dentro del administrador de Shopify, abra la aplicación GemPages y navegue hasta la sección Páginas .
Paso 2: Cargar el Archivo .gempages Archivo
En la parte superior del panel de páginas, haga clic en lamer Importar página.
Elija Agregar archivo.
Seleccione el elemento .gempages de su computador.
Paso 3: Importar la página
Haga clic en Importar para confirmar.
gracias por tus comentarios