| name | remix |
| description | Rebuild a competitor page or ad creative adapted to your brand — extracts structure and conversion patterns, regenerates with your products and design tokens |
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, color_palette, tone, cta_text, target_audience, urgency_signals, 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: "<product/topic from ad>" })
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: <div data-placeholder="BuyBox" class="..."></div>
Use --lx-* CSS variables in theme_css for all brand colors and fonts.
Phase B — Island Mapping
Replace placeholders with hydrated islands:
<div data-island="BuyBox" data-props='{"product":{"title":"...","price":"$29.99","variants":[...]}}'></div>
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:
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: "<relevant product/category>" })
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: <div data-placeholder="BuyBox" class="..."></div>
Phase B — Island Mapping
Replace placeholders with hydrated islands:
<div data-island="BuyBox" data-props='{"product":{"title":"...","price":"$29.99","variants":[...]}}'></div>
<div data-island="FAQ" data-props='{"items":[{"question":"...","answer":"..."}]}'></div>
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:
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
