ecommerce-creative

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:

1. Read all files in context/ for brand knowledge
2. Read references/ for structural best practices
3. If a specific product is requested, find it in context/products.md
4. 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

1. Standalone HTML — single file, inline CSS, no external dependencies
2. Mobile first — responsive, looks great on 375px+
3. On-brand — follows brand.md colors, fonts, voice exactly
4. Conversion-optimized — follows references/conversion-rules.md
5. 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

1. Read context → understand brand + product + angle
2. Pick LP structure from references/lp-patterns.md
3. Pull copy from context/copy-bank.md (or write new copy in brand voice)
4. Assemble sections with real images from context/assets.md
5. 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]