Automating Shopify Page Design with Instant MCP
Lukas Margeriego watch the original →
the gist
The Instant MCP allows AI coding agents like Claude Code to audit, design, and publish Shopify landing pages directly, including automated brand style cloning and product photography.
Integrating Instant MCP with Claude Code
The Instant MCP enables AI agents to interface directly with the Instant platform to manage Shopify storefronts. To set this up, users must create an account on Instant, connect their Shopify store, and generate an access token within the project settings. For Claude Code, the integration is completed by running the installation command and restarting the desktop application. Once connected, the agent gains access to a suite of tools capable of auditing existing pages, generating new layouts from prompts, and pushing updates live to the Shopify store without manual admin intervention.
Page Auditing and Design Generation
Agents can perform automated audits on existing pages by analyzing URLs to identify high-impact improvements. In the provided demonstration, the agent identified naming conflicts, missing pricing sections, and redundant review sections. Upon instruction, the agent implemented a new pricing section and published the changes to the live site. For new builds, the agent generates complete landing pages—including hero sections, FAQs, and testimonials—based on natural language prompts. Users can further refine these designs by uploading product images to the Instant Studio to generate consistent product photography, which can then be swapped into the generated page components.
Brand Style Cloning
Instant includes a brand kit feature that extracts design tokens from existing websites. By providing a target URL, the tool generates a design.md file containing the color palette, typography, and styling rules of the reference site. The agent can then apply these styles to a current project, automatically updating the colors and fonts of the entire page to match the cloned brand identity.