Remix

Remix Storefront Page

Rebuild a competitor page or ad creative adapted to your brand — extracts structure and conversion patterns, regenerates with your products and design tokens

Context

• storefront-craft: Load this skill first on any storefront page generation task.
• visual-craft: Techniques for making vibe-code pages look premium. Load when polishing visual quality.

Workflow

Ad Creative to Landing Page

Generate a high-converting landing page from an ad creative with full scent continuity (headline, palette, CTA, tone match from click to page).

Prerequisites

• At least one ad creative synced (Meta/Google/TikTok)
• Store connected and brand kit configured

Workflow

Step 1 — Context Gathering

get_workspace_details()          → workspace ID, plan tier
get_connected_stores()           → store domain, Shopify data
get_brand_kit()                  → logo, fonts, colors, voice, radius

These three calls ALWAYS run first. No exceptions.

Step 2 — Identify and Analyze the Ad

get_ad_creatives({ store_id, status: "active" })

Present available creatives (thumbnail + headline + spend). User picks one, or use highest-spend active creative.

analyze_ad_creative({ creative_id })

Extracts: headline, subheadline, claims, colorpalette, tone, ctatext, targetaudience, urgencysignals, imagery_style.

Step 3 — Match Persona and Source Assets

match_persona_to_ad({ creative_id })

Maps to persona: demographics, pain points, motivations, objections, buying stage. Determines page tone.

search_design_library({ query: "" })

Find product shots and lifestyle images matching the ad aesthetic. Use generate_asset if library insufficient.

Step 4 — Two-Phase Page Generation

Phase A — Raw HTML + Tailwind (no islands)

Generate full page as HTML + Tailwind. Scent continuity rules:

• Hero headline = ad headline (semantic match, max 2-word variation)
• --lx-accent-color set to ad's dominant color
• CTA text matches or escalates the ad CTA
• First fold answers the same promise the ad made
• Zero navigation links (single CTA focus)

Structure: Hero > Problem/Agitation > Solution > Social Proof > Features > CTA repeat > FAQ

Mark interactive placeholders: ``

Use --lx-* CSS variables in theme_css for all brand colors and fonts.

Phase B — Island Mapping

Replace placeholders with hydrated islands:

Use get_island_schema for exact prop shapes.

Step 5 — Validate and Publish Draft

validate_vibe_page(page_data)
publish_vibe_page(page_data, { publish: false })

Always publish as draft first. Returns preview_url.

Step 6 — Visual Verification

Use Codex Browser to open preview_url, capture desktop and mobile screenshots, and inspect the rendered result. If Browser is unavailable, provide the preview URL and state that visual verification remains manual.

Checklist:

• [ ] Hero headline matches ad headline (scent continuity)
• [ ] Brand colors applied via --lx-* variables (not defaults)
• [ ] Single CTA focus (no nav leakage)
• [ ] Mobile layout not broken (stack, readable text)
• [ ] Islands hydrated (BuyBox shows product data)
• [ ] Social proof section present

If issues found: update_page_section to fix, then re-verify.

Decision Points

| Question | Decision | |----------|----------| | Which ad? | Ask user, or highest-spend active creative | | Which product? | Extract from ad analysis (primary product) | | Draft or live? | Always draft first -- user confirms | | Long or short? | Video ad = longer storytelling; static = concise | | Include pricing? | Only if ad mentions price/discount explicitly |

Quality Gates

• Hero headline >=80% semantic similarity to ad headline
• Color palette matches ad dominant colors (set via --lx-accent-color)
• Single primary CTA throughout (no competing actions)
• Mobile-first layout (most ad traffic is mobile)
• No navigation links that leak traffic from conversion
• Ad urgency signals carried through (countdown, limited stock, etc.)
• Page passes validate_vibe_page with zero errors

Competitor Remix (Rebuild from Reference URL)

Capture a competitor page, decompose its structure, and rebuild it using the user's own brand identity, copy, and products. NEVER copy content -- only structural inspiration.

Prerequisites

• User provides a reference URL
• Store connected and brand kit configured
• User's own product/content available to replace competitor's

Workflow

Step 1 — Context Gathering

get_workspace_details()          → workspace ID, plan tier
get_connected_stores()           → store domain, Shopify data
get_brand_kit()                  → logo, fonts, colors, voice, radius

These three calls ALWAYS run first. No exceptions.

Step 2 — Capture Reference Design

capture_design_source({ url })

Screenshots the page and extracts structural layout data.

The agent should analyze the screenshot to extract the competitor's design DNA: color palette, typography, spacing rhythm, border radius, shadow depth, image treatment style, overall aesthetic (minimal, bold, editorial, etc.).

Step 3 — Decompose into Section Map

Analyze captured page into numbered section breakdown:

1. Full-bleed hero — product centered, headline overlay, gradient wash
2. Trust badge row — 4 icons with micro-labels, centered
3. Split feature section — image left, text right, 50/50
4. Testimonial carousel — 3 cards, star ratings, photos
5. Product grid — 3 columns, hover zoom
6. FAQ accordion — 6 items, expandable
7. Final CTA — full-width, contrasting background

For each: note layout pattern, content type, approximate proportions, interactive elements.

Step 4 — Map to Lexsis Capabilities

For each competitor section:

• Island available? Use get_island_schema(island_name) for prop shapes
• Static HTML+Tailwind section? (most common)
• Requires custom interactivity? Flag for JS sandbox

Step 5 — Source User's Own Assets

search_design_library({ query: "" })
list_products({ limit: 10 })

Replace ALL competitor imagery with user's own assets. Generate new if needed:

generate_asset({ prompt: "...", style_reference: "brand_kit" })

CRITICAL: NEVER reference, hotlink, or reuse competitor images/copy/logos.

Step 6 — Two-Phase Generation

Phase A — Raw HTML + Tailwind (no islands)

For each section from the decomposition:

• Structure: Keep competitor's layout pattern (grid, split, stacked)
• Brand: Replace ALL colors/fonts/spacing with user's --lx-* variables
• Content: Write original copy serving user's value proposition
• Images: User's own assets exclusively
• CTAs: Aligned with user's conversion goals

Set all brand tokens in theme_css:

:root { --lx-accent-color: #...; --lx-font-heading: '...', serif; }

Mark interactive placeholders: ``

Phase B — Island Mapping

Replace placeholders with hydrated islands:

Step 7 — Validate and Publish Draft

validate_vibe_page(page_data)
publish_vibe_page(page_data, { publish: false })

Returns preview_url.

Step 8 — Visual Verification

Use Codex Browser to open preview_url, capture desktop and mobile screenshots, and compare the rendered result with the reference structure. If Browser is unavailable, provide the preview URL and state that visual verification remains manual.

Checklist:

• [ ] ZERO competitor content carried over (no copy, images, logos)
• [ ] All colors from user's --lx-* variables (not competitor palette)
• [ ] Structural similarity recognizable but not pixel-perfect
• [ ] User's brand fonts loading (not system fallback)
• [ ] Mobile layout works independently
• [ ] Islands hydrated with user's own product data
• [ ] Original copy serves user's value proposition

If issues found: update_page_section to fix, then re-verify.

Decision Points

| Question | Decision | |----------|----------| | Keep exact structure or adapt? | Adapt: remove irrelevant sections, add where user has more to say | | Which sections to skip? | Competitor-specific (their awards, team), navigation that does not fit | | How close to follow? | Structural only -- proportions, flow, section types | | Interactive elements? | Map to available islands; static equivalent if no island exists |

Quality Gates

• ZERO competitor content (copy, images, logos, brand marks)
• Page uses exclusively user's --lx-* CSS variables
• All images are user's own or freshly generated
• All product references from user's own catalog
• Copy is original, serving user's value proposition
• Mobile layout independent (do not assume competitor's responsive approach)
• Page passes validate_vibe_page with zero errors

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: Aetheria-Labs1
• Source: Aetheria-Labs1/storefront-skills
• License: MIT

Install and usage instructions live in the source repository linked above.