| name | ecommerce-creative |
| description | Generate conversion-optimized landing pages for ecommerce brands. Reads brand context, product info, and copy bank to produce high-quality, on-brand HTML landing pages. Use when asked to create landing pages, product pages, or LP variations for ad campaigns. |
Ecommerce Creative — Landing Page Generator
Generate standalone HTML landing pages that are on-brand, mobile responsive, and optimized for conversion.
Before Generating
Always read context first. Before producing any output:
- Read all files in
context/ for brand knowledge
- Read
references/ for structural best practices
- If a specific product is requested, find it in
context/products.md
- If an ad angle is specified, check
context/copy-bank.md for matching copy
Context Directory
The context/ folder is your knowledge base. It contains:
| File | Contains |
|---|
context/brand.md | Brand voice, tone, colors, fonts, logo, taglines, do's/don'ts |
context/products.md | Product catalog — names, pricing, benefits, USPs, ingredients/specs, testimonials |
context/copy-bank.md | Approved headlines, CTAs, ad angles, key messages, scraped/distilled content |
context/assets.md | Image URLs/paths, usage guidelines (hero vs product vs lifestyle) |
context/documents/ | Raw inputs — youtube transcripts, competitor pages, briefs |
If a context file is empty or missing, ask the user to provide that information before generating.
References
Static best practices in references/:
| File | Contains |
|---|
references/lp-patterns.md | Proven LP structures, section types, layout rules |
references/conversion-rules.md | CRO best practices, CTA placement, trust signals |
Output Requirements
- Standalone HTML — single file, inline CSS, no external dependencies
- Mobile first — responsive, looks great on 375px+
- On-brand — follows brand.md colors, fonts, voice exactly
- Conversion-optimized — follows references/conversion-rules.md
- Real content — uses actual product info and approved copy, never lorem ipsum
LP Section Types
Use these as building blocks (order depends on the angle):
- Hero — headline, subheadline, CTA, hero image
- Social Proof — testimonials, ratings, trust badges, press logos
- Benefits — 3-4 key benefits with icons or images
- Product Detail — specs, ingredients, what's included
- Comparison — before/after, us vs them
- FAQ — objection handling
- Final CTA — urgency, guarantee, last push
Workflow
- Read context → understand brand + product + angle
- Pick LP structure from references/lp-patterns.md
- Pull copy from context/copy-bank.md (or write new copy in brand voice)
- Assemble sections with real images from context/assets.md
- Output complete HTML file
Present Results to User
Here's your landing page for [product/angle]:
[Brief description of the LP structure and key decisions]
Key sections:
- Hero: [headline used]
- Social proof: [what's featured]
- CTA: [primary CTA text]
The HTML file is ready at: [path]
