We open-sourced the skill packs we use internally to generate Shopify landing pages with Claude Code, OpenAI Codex, and Cursor.
One prompt in. Working page out. Add-to-cart, product data from your store, reviews section, sticky CTA, responsive mobile layout. Published to your own domain in about 60 seconds.
Works with Fable 5, Opus, Sonnet, Codex, GPT-5 - any model that supports tool use.
Repo:
https://github.com/Aetheria-Labs1/storefront-skill-packs
This is what a generated page looks like for a haircare brand:
Claude Fable with Lexsis AI MCP , Brand - Moxie Beauty India
What Skill Packs Actually Are
Skill packs are markdown files you drop into your AI coding agent's config directory. They contain structured knowledge about how to build high-converting Shopify pages - extracted from patterns across 500+ stores we've analyzed.
They cover four areas:
Conversion psychology - AIDA section ordering, price anchoring (strikethrough + current price), trust escalation ladders, CTA copy patterns, cognitive load limits (max 3 choices per section).
Vertical expertise - Beauty brands need ingredient storytelling and before/after layouts. Supplement brands need clinical proof sections and dark backgrounds. Fashion needs editorial grids. Each vertical has different patterns that convert.
Traffic source optimization - A page receiving Meta ad traffic needs message-match with the ad creative, mobile-first layout, and trust stacking near the fold. Google traffic expects information density and comparison tables. TikTok traffic needs a 3-second visual hook and UGC aesthetic.
Workflow orchestration - Which MCP tools to call in what order, what can run in parallel, when to check brand assets before generating new ones.
Available Packs
Skills Packs
If you prefer a video tutorial, watch it here:
Full Setup Guide (Zero to First Generated Page)
Step 1: Install Lexsis AI on Shopify
Find Lexsis AI in the Shopify App Store*. Click "Add app" and authorize.
Lexsis AI app on Shopify App Store
We are facing some issue with our app review at the moment , We will edit the link to the app here once its live , For now , you can DM us or Book a demo on our website and we can install this as a custom app on your store
After installing , You need to head to the Lexsis platform to create your account.
Step 2 : Create an account
You can create an account here -
Step 3 : Select your workspace type
Choose between brand and agency mode.
After selecting ,fill up your actual brand details, you will see an option to connect to your Shopify domain.
Step 4: Connect Shopify
Link your store. This syncs your product catalog (images, variants, prices), collections, theme settings, and navigation menus into Lexsis.
If you face any issues in connection, please do reach out to us at
support@trylexsis.com or you can DM us here on X @trylexsis or @addddiiie
Once the connection succeds , check back on your shopify store for the catalogue sync and brand kit sync to trigger in the background (may take anywhere between 2 to 5 minutes)
The Lexsis app dashboard in your Shopify admin
Step 5: Brand Kit (Automatic)
Lexsis auto-generates a Brand Kit from your connected store:
-
Logo detection
-
Color palette extraction from your theme
-
Typography identification
-
Voice/tone analysis from existing product copy
This feeds into every page the AI generates. Your pages come out on-brand without manual theming.
Once your catalogue is synced you will find all your products visible in the dashboard
Store catalogue synced to Lexsis app
Design.md of your brand used as context
Design tokens extracted for theming
Step 6: Create an API Key
Go to Settings > API Keys. Click "Create API Key". Select admin permissions.
Copy this key. You'll paste it into your MCP config in the next step.
Step 7: Install the Skill Packs
git clone https://github.com/Aetheria-Labs1/storefront-skill-packs
cd storefront-skill-packs/starter
./install.sh --target /path/to/your/project
The installer detects whether you're using Claude Code, Codex, or Cursor and copies the appropriate files.
Step 8: Connect the Lexsis AI MCP Server
The MCP server gives your AI agent access to tools: image generation, page validation, publishing, brand kit fetching, product listing, ad creative analysis.
Claude Code
Create .mcp.json in your project root:
{
"mcpServers": {
"lexsis-ai": {
"type": "http",
"url": "https://mcp.trylexsis.com/mcp",
"headers": {
"Authorization": "Bearer YOUR_API_KEY_HERE"
}
}
}
}
For more supported platfroms , please check installation guide on
https://docs.trylexsis.com/docs/getting-started/authentication
Step 9: Generate Your First Page
This is my session using it with OpenAI Codex
Once you have installed the skills , you will verify to see if they are visible using / (slash) commandsOnce you have installed the skills , you will verify to see if they are visible using / (slash) commands
Codex view using / commands
You can also install industry specific skills according to your niche and are also welcome to contribute more
To test if your authenticated correctly with the MCP is just to ask it get your details
Prompt -
Connect to my Lexsis workspace using the Storefront MCP and enumerate all available tools, resources, prompts, and capabilities exposed by the server. Briefly describe what each tool does and identify any available storefront, Shopify, page management, or AI-related operations.
Find example prompts here - https://docs.trylexsis.com/docs/getting-started/quickstart
Once you have confirmed authentication you can ask it to create any page for the following use cases:
-
From an ad creative: Upload your Meta ad image. The agent extracts the visual style, headline, claims, and color palette, then builds a landing page that continues that visual story post-click.
-
From a competitor URL: Point the agent at a competitor's product page. It deconstructs the layout, identifies the conversion patterns, and rebuilds the page for your brand with your products and brand kit.
-
From a brief: Describe what you sell, who buys it, and where the traffic comes from. The agent picks the right vertical patterns and traffic-source optimizations automatically.
Why Fable 5 Is Relevant Here
Fable 5 is Anthropic's fastest model. For this workflow, speed matters because:
-
Skill packs front-load the design decisions. The model doesn't need to reason about what makes a good landing page - that knowledge is pre-loaded. It spends tokens on execution, not deliberation.
-
The architecture is vibe-code. Raw HTML + Tailwind. No intermediate abstraction (no config files). The model writes what ships. Fewer layers = fewer tokens = faster output.
-
MCP tools handle the heavy lifting. Image generation, product fetching, page publishing are all external tool calls. The model orchestrates them but doesn't do the compute.
Result: iteration speed matches your ad creative iteration. New ad? New landing page. Same effort.
What happens behind the scenes:
-
Agent pulls your brand kit (colors, fonts, logo) via MCP
-
Fetches product data from Shopify (real images, real price, real variants)
-
Generates a hero background image matching your brand aesthetic
-
Writes full HTML with Tailwind CSS, conversion-optimized section ordering
-
Adds working commerce islands (BuyBox with add-to-cart, CartDrawer, ReviewCarousel)
-
Validates page structure (no broken islands, no security violations, proper heading hierarchy)
-
Publishes to your Shopify store with your permission
You get a live URL back. Page is functional immediately.
How Skills and MCP Work Together
You can use skills without the MCP server. You'll get excellent design guidance and HTML output, but you won't be able to generate images or publish directly to Shopify. For the full loop (prompt to live page), you need both.
Contributing
MIT licensed. The repo structure makes it straightforward to add packs:
your-pack-name/
├── claude/skills/ # One SKILL.md per knowledge area
├── claude/commands/ # Slash commands for specific workflows
├── codex/skills/ # Same content, Codex format
├── cursor/rules/ # Same content, .mdc rule files
└── install.sh # Auto-installer
Useful contributions: new verticals (pet, fitness, electronics, SaaS), new traffic sources (Pinterest, email, affiliate), improved conversion patterns with data backing them.
Repo:
https://github.com/Aetheria-Labs1/storefront-skill-packs
Pages We Designed in Minutes
A few examples across different brands and verticals - each built from a single prompt:
Different brands, different aesthetics, different product types. Same workflow. Same 60-second generation time.
To learn more about what we do:
What's Coming Next
More workflow integrations. Step-by-step guides for using skill packs with Claude Code, Codex, Cursor. We want any Shopify brand to be able to dynamically A/B test landing pages without touching code.
Per-user dynamic landing pages. Identifying each visitor uniquely and serving them a different page variant based on their intent signal - what they searched, what ad they clicked, what they browsed before.
Intent-based pages that rank. Landing pages built around search intent that are fully optimized for SEO and AI search engines (Google AI Overviews, Perplexity, ChatGPT). Pages that both convert paid traffic AND earn organic visibility through AEO compatibility.
Custom attribution tracking. Server-to-server attribution connected to your ad platforms - Meta CAPI, TikTok Events API. Know exactly which landing page variant drove which purchase, tied back to the original ad creative.
Closing
Five minutes to set up. Sixty seconds per page.
Star the repo:
https://github.com/Aetheria-Labs1/storefront-skill-packs
Sign up:
Want us to do this for your brand? Book a demo:
