How to Turn HTML Into an Editable GemPages Page With GemPages MCP

Use GemCommerce MCP. Turn landing-page.html into a GemPages page on my store.

A finished HTML landing page may already contain the approved copy, layout, images, and calls to action. However, the file still needs to be transferred into the page-building environment before your ecommerce team can review it, continue editing, and publish it to Shopify

The HTML to GemPages workflow handles this final production step. It uses GemPages MCP to read the finished HTML, rebuild the page section by section, validate each section against GemPages’ generation rules, and create an editable page in the GemPages app.

The HTML can come from your developer, agency, AI coding tool, Figma-to-HTML process, or another source. Once the page is created, the AI returns the preview and editor URLs so your team can review the result and publish it when ready.

How the HTML to GemPages Workflow Fits Into GemPages MCP

GemPages MCP connects compatible AI agents with Shopify and GemPages through specialized ecommerce workflows.

The HTML to GemPages workflow focuses on a common production gap: moving a finished landing page from an AI coding or development environment into the place where the ecommerce team will manage it.

HTML landing pages can come from many sources:

• An internal developer
• A creative or ecommerce agency
• Claude Code or another AI coding tool
• A Figma-to-HTML process
• An existing campaign workflow
• A page your team already owns
• Another system capable of producing complete HTML

The file may already look finished in a browser, but it is still separate from the store’s page workflow.

Without a direct connection, the team may need to transfer the code manually or ask a developer to rebuild the page in GemPages. This creates another handoff and another chance for copy, layout, or links to change.

GemPages MCP allows the AI to complete this transfer through a defined process. Instead of leaving the finished work in a local folder, the workflow creates a real GemPages page that your team can preview and edit.

How the HTML to GemPages Workflow Works

The workflow does not push the entire HTML file onto the page as one undifferentiated block.

It divides the source into semantic sections, builds each section separately, and validates the result before moving forward.

1. The AI Reads the Finished HTML

The workflow begins when you paste the HTML into the conversation or point the AI to a local .html file.

You can provide:

• One HTML landing page
• Several HTML files
• A folder containing a batch of pages

The source HTML should already contain the intended copy, layout, images, and styling.

Major content or design changes are better completed before the workflow starts. Beginning with a stable HTML version reduces confusion during a long conversion.

2. The Page Is Divided Into Semantic Sections

The AI reads the HTML and identifies the functional sections of the page.

Depending on the source design, these may include:

• Hero
• Product introduction
• Benefits
• Features
• How it works
• Product comparison
• Social proof
• Testimonials
• Offer
• Frequently asked questions
• Final CTA

The exact section list depends on the HTML supplied.

Dividing the page into semantic sections gives the AI a clear structure to follow. It also allows the workflow to isolate problems within a particular section rather than processing the complete page in one bulk action.

3. GemPages’ Generation Rules Are Retrieved

Before building the page, the AI retrieves GemPages’ generation rules.

These rules provide the instructions needed to translate the HTML into a GemPages page. The AI retrieves them once and uses them as a reference throughout the run.

This keeps the same building requirements in place as the workflow moves from the first section to the last.

4. Each Section Is Built and Validated

The AI processes one section at a time.

For each section, it will:

1. Read the relevant HTML.
2. Build the section according to GemPages’ generation rules.
3. Validate the generated result.
4. Address problems found during validation.
5. Push the completed section onto the page.
6. Continue with the next section.

This section-by-section process may detect problems such as:

• Missing copy
• Incomplete page elements
• Layout differences
• Content placed in the wrong section
• Buttons that do not match the source
• Sections omitted during the build
• Other differences between the HTML and generated result

Once one section has been built and validated, the AI proceeds to the next.

5. The Complete Page Is Created in GemPages

After every section has been processed, the workflow completes the page in the GemPages app.

The HTML is no longer only a local code file. Your team receives a page it can open and continue working on.

6. The AI Returns the Page Links

Once the page is complete, the AI returns:

• A preview URL
• An editor URL

The preview URL allows you to inspect the complete page before publication.

The editor URL opens the page in GemPages so your team can continue making changes.

The workflow stops after creating the page and returning these links. The AI does not publish the page automatically.

How to Start an HTML to GemPages Workflow Step by Step

Run the workflow in Claude Code, Claude Cowork in Claude Desktop, or another compatible AI environment with GemCommerce MCP and local file access.

The interface may differ between clients, but the main process remains the same.

Before starting, follow the GemPages MCP setup guide to connect GemCommerce MCP to your AI tool and Shopify store.

Step 1: Prepare the HTML

Start with a finished HTML landing page.

The source should already contain the intended:

• Page copy
• Section structure
• Images
• Typography
• Colors
• Buttons
• Links
• Responsive styling

Review the file before conversion and confirm that you are using the correct version.

Clear filenames can help prevent mistakes, especially when several files or versions are stored in the same folder.

For example:

• summer-sale-approved.html
• product-launch-final.html
• comparison-page-v3.html

Avoid filenames such as:

• new.html
• test2.html
• final-final.html

For a batch conversion, place the related HTML files in a clearly named folder.

Step 2: Open a Compatible AI Environment

Open Claude Code, Claude Cowork in the Claude Desktop app, or another AI environment with:

• GemCommerce MCP
• Local file access
• Permission to read and write the workflow files

The workflow creates a run folder containing section files, logs, and build artifacts. It depends on these files to track progress and resume correctly when interrupted.

A chat-only AI environment without local file access cannot reliably complete the full conversion.

To learn how to connect GemCommerce MCP to Claude or Codex, follow our GemPages MCP setup guide. 

Step 3: Explicitly Ask the AI to Use GemCommerce MCP

Begin the prompt with:

Use GemCommerce MCP.

This instruction tells the AI to connect to the correct tools rather than guessing how the HTML should be processed.

For example:

Use GemCommerce MCP. Turn landing-page.html into a GemPages page on my store.

Step 4: Provide One HTML File or a Batch

You can paste the HTML into the conversation or point the AI to a local file.

For one page:

“Use GemCommerce MCP. Turn landing-page.html into a GemPages page on my store”.

For an attached file:

“Use GemCommerce MCP. Turn the attached HTML into a GemPages page on my store”.

For several files:

“Use GemCommerce MCP. Build GemPages pages for every landing-page.html under pages/batch-2026-07/. There are six files in the folder”.

State the exact filename or folder whenever possible. Avoid instructions such as “use the latest file” when several versions are available.

Step 5: Let the AI Build the Page

After receiving the HTML, the AI will:

1. Read the page.
2. Divide it into semantic sections.
3. Retrieve GemPages’ generation rules.
4. Build the first section.
5. Validate the result.
6. Push the section onto the page.
7. Repeat the process for each remaining section.

You normally do not need to provide more input during this stage.

However, stay near the conversation during the beginning of the run. The AI may need permission to use an MCP tool, access a file, or run a local command.

Step 6: Receive the Preview and Editor URLs

Once every section has been built and validated, the AI returns the links to the completed page.

Open the preview URL to inspect the result.

Open the editor URL when the page requires further changes.

For a batch, confirm that each HTML file has a corresponding page and set of links.

Step 7: Review the Page in GemPages

Compare the converted page with the original HTML.

Review the page from the Hero through the final CTA rather than checking only the first few sections.

Confirm that:

• All sections are included
• The copy has been transferred correctly
• Images appear in the right locations
• Typography and colors match the source
• Section spacing remains consistent
• Buttons and links work
• The page behaves correctly across screen sizes
• Interactive elements perform as intended

Step 8: Make Final Changes in the Editor

Use the editor URL to address any issues found during review.

Preview the page again after making changes.

The page should pass your team’s content, design, technical, and commercial checks before publication.

Step 9: Publish the Page Yourself

GemPages MCP does not publish the page for you.

When the page is ready, publish it manually through GemPages.

This keeps the final customer-facing version and launch timing under your team’s control.

Prompt Examples

A clear prompt should identify GemCommerce MCP, the source file, the requested action, and the expected output.

Other Input Formats and How to Handle Them

The HTML to GemPages workflow only accepts:

• HTML pasted into the conversation
• A local .html file
• Multiple local HTML files

It does not directly accept:

• A webpage URL
• A Figma design
• A PDF
• A screenshot
• An image

When your source is not HTML, convert it into an HTML file before starting the workflow.

1. You Have a Webpage URL but No HTML

A webpage URL cannot be submitted directly.

Use a Chrome extension capable of saving the page as self-contained HTML, such as Web Page Downloader.

The process is:

1. Open the webpage in Chrome.
2. Open the downloader extension.
3. Select the self-contained HTML option.
4. Download the page as one .html file.
5. Provide that file to GemCommerce MCP.

Choose the self-contained format rather than the default “webpage, complete” format that creates one HTML file and a separate asset folder.

A self-contained HTML file keeps the page’s styles, images, and fonts together in one file.

Once the file is ready, use:

“Use GemCommerce MCP. Turn the attached self-contained HTML file into a GemPages page on my store”.

Only download and reuse a page that you own or have permission to use. Saving a publicly available page does not grant the right to reuse its design, copy, images, or other assets.

2. You Have a Figma Design but No HTML

A Figma file or frame cannot be submitted directly to the HTML to GemPages workflow. It must first be implemented as HTML.

Figma provides an MCP server that can give Claude Code structured access to design information and generate code from selected frames. Figma recommends its remote MCP server for most users. Follow the official Claude Code and Figma MCP setup guide.

After connecting Figma MCP:

1. Provide the relevant Figma frame or page link.
2. Ask the AI to create an HTML implementation.
3. Compare the generated HTML with the Figma design.
4. Correct differences in layout, spacing, colors, typography, and content.
5. Provide the approved HTML to GemCommerce MCP.

For example:

Read the supplied Figma frame and create an HTML implementation that matches its layout, spacing, colors, and typography as closely as possible.

After reviewing the HTML, continue with:

Use GemCommerce MCP. Turn the approved HTML file into a GemPages page on my store.

Spend additional time checking Figma-generated HTML before conversion. The HTML should accurately reflect the approved design before it becomes the input for the GemPages MCP workflow.

3. You Have a PDF, Screenshot, or Image

The workflow cannot directly convert these formats into a GemPages page.

Use another design or development process to recreate the source as HTML first. Review the HTML against the original material, then provide the approved file to GemCommerce MCP.

Tips for Running the Workflow Without Interruptions

Tip 1: Allow GemCommerce MCP Tool Calls

Claude asks for permission before using an MCP tool by default. Since the HTML to GemPages workflow uses many tool calls, these prompts can repeatedly interrupt the process.

To allow the required GemCommerce MCP tool calls:

1. Open Claude Code in the Claude Desktop app.
2. Click Customize in the left sidebar.
3. Go to Connectors → GemCommerce MCP.
4. Open Tool permissions.
5. Set the required GemCommerce MCP tools to Always allow.

Only grant ongoing permission to a connector you recognize and trust.

Tip 2: Use Auto Mode for Safe Bash Commands

The workflow uses Bash commands to create and manage section files, logs, and build artifacts.

When Claude requests approval for every command, the run may stop frequently.

In Claude Code inside the Claude Desktop app, set the conversation to Auto mode. Claude can then run commands it considers safe without requesting approval each time.

Review the permission settings before enabling Auto mode, especially when the conversation has access to store information or local files.

Things to Know Before Running the Workflow

Review the following points before starting a conversion.

1. Explicitly Say “Use GemCommerce MCP”

Begin the prompt by telling the AI to use GemCommerce MCP.

Without this instruction, the AI may attempt another method or fail to connect to the required tools.

2. Use an Environment With Local File Access

Run the workflow in Claude Code, Claude Cowork, or another compatible environment with local file access.

The workflow writes a run folder containing:

• Section files
• Progress logs
• Validation results
• Build artifacts
• Data used to resume the conversion

A chat-only interface without local file access cannot reliably manage the complete run.

3. Use a Model That Can Handle Around 500K Context

A landing page may contain many sections, with a separate building and validation cycle for each one.

Use a model that can comfortably handle around 500K context, such as Opus with Medium or High reasoning effort.

A model with limited context or reasoning capacity may lose track of:

• GemPages’ generation rules
• Previously completed sections
• Earlier validation results
• Page-wide design patterns
• The current stage of the run

This becomes more important for long pages and batch conversions.

4. Prepare HTML Before Starting

The workflow only accepts HTML.

A webpage URL or Figma design must first become a completed HTML file. PDFs, screenshots, and images also require an intermediate HTML implementation.

Do not begin the conversion until the source HTML has been reviewed and approved.

5. Interrupted Runs Can Be Resumed

A dropped connection, exhausted usage budget, or another interruption may stop the workflow before completion.

You normally do not need to restart.

Ask the AI to continue:

Continue the HTML to GemPages workflow from the last completed section. Do not restart the run.

The AI can use the existing section files, logs, and build artifacts to continue from the correct point.

Keep the run folder intact until the page is complete.

6. Long Pages Can Take More Than an Hour

A page with many sections can take more than an hour to complete.

The workflow prioritizes an accurate rebuild over a fast bulk transfer. Each section is built and validated separately against GemPages’ generation rules.

This matters because the output is a page that customers will see and act on. A small difference in copy, layout, or CTA behavior can affect the final experience.

The more sections the page contains, the more building and validation rounds the workflow needs.

What to Review Before Publishing

GemPages MCP returns an editable page, but your team remains responsible for the final review.

Compare Every Section With the Original HTML

Open the original HTML and GemPages preview side by side.

Check that:

• Every section is present
• The section order is correct
• Copy matches the source
• Images appear in the intended locations
• Buttons use the intended labels
• CTA destinations are correct
• No section has been duplicated
• No important content is missing

Review Desktop, Tablet, and Mobile

Check the page at several screen sizes.

Look for:

• Horizontal scrolling
• Text extending outside its container
• Incorrect image crops
• Fixed-width sections
• Buttons that are difficult to tap
• Large gaps between sections
• Tables that do not fit smaller screens
• Sticky elements covering content

Test Page Actions

Click and test every customer-facing action, including:

• CTA buttons
• Product links
• Navigation links
• Anchor links
• Forms
• Accordions
• Other interactive elements

A page can look close to the source while still containing an incorrect link or non-working action.

Verify Content and Offer Information

Check:

• Product names
• Prices
• Discounts
• Shipping information
• Return conditions
• Guarantees
• Customer testimonials
• Competitor comparisons
• Certifications
• Product claims
• Offer expiration dates

The workflow transfers the page. It does not confirm that every commercial statement in the source HTML is accurate.

Make Final Changes in GemPages

Use the editor URL to address any remaining issues.

After making changes, preview the page again and repeat the relevant checks.

Publish only after the content, design, mobile presentation, and customer actions have been reviewed.

When to Use the HTML to GemPages Workflow

Use this workflow when:

• You already have a completed HTML landing page
• A developer has prepared the page
• An agency has delivered the final HTML
• An AI coding tool has generated an approved page
• A Figma design has already been implemented as HTML
• You need to transfer several HTML pages into GemPages
• The ecommerce team needs to manage the page after development

The workflow is designed for teams that have finished HTML and need to bring it into their store workflow without another manual rebuild.