Plan: Hero Banner Variant Generator

TL;DR: Develop a Node.js-based tool to generate random hero banner variants with varied button and text styles/positions, render them as responsive HTML pages, and capture desktop/mobile screenshots using Playwright. Output includes screenshots and a JSON manifest linking random seeds to variants for reproducibility.

Steps

1. Initialize project structure: Create package.json with dependencies (express for serving, playwright for screenshots, ejs for templating, seedrandom for reproducible randomness).
2. Define variant parameters: Create a config.js file specifying clamped ranges for parameters like button color, background transparency, position; text font, size, spacing, color; and overall layout positions (e.g., text alignment left/center/right, button left/center).
3. Design HTML template: Build an EJS template emulating a Shopify hero section – full-width container with background image placeholder, overlay text (eyebrow, header, subheader), and CTA button. Include responsive CSS for mobile adjustments (e.g., smaller text, stacked layout).
4. Implement variant generation: Write generate.js to produce N variants using random seeds within config ranges. Each variant gets a unique seed, generates parameter values, and prepares data for rendering.
5. Set up rendering server: Create server.js with Express to serve dynamic HTML for each variant based on seed (e.g., /variant/:seed route renders the template with variant data).
6. Automate screenshots: Develop screenshot.js to use Playwright to launch browser, navigate to each variant URL, set desktop viewport (e.g., 1920x1080), screenshot, then set mobile viewport (e.g., 375x667), screenshot. Save images as desktop_{seed}.png and mobile_{seed}.png.
7. Generate manifest: After screenshots, create manifest.json with entries like {"seed": "12345", "desktop": "desktop_12345.png", "mobile": "mobile_12345.png"} for each variant.

Relevant files

• package.json — Dependencies and scripts.
• config.js — Parameter ranges and constants (e.g., NUM_VARIANTS = 10).
• views/template.ejs — HTML/CSS template for hero banner.
• generate.js — Logic to generate variant data from seeds.
• server.js — Express server to render variants.
• screenshot.js — Playwright script to capture screenshots.

Verification

1. Run npm install and verify dependencies install without errors.
2. Execute generate.js and check console output for N variant seeds and data.
3. Start server.js, visit a /variant/:seed URL in browser, confirm banner renders correctly with varied styles.
4. Run screenshot.js, verify output folder contains 2N images (desktop/mobile per variant) and manifest.json with correct mappings.
5. Manually inspect a few screenshots to ensure variations (e.g., button positions, text styles) are applied and responsive.

Decisions

• Responsive design: Implement basic responsive CSS in template for mobile (e.g., media queries for smaller screens), but generate separate mobile screenshots by changing viewport in Playwright to keep initial version simple.
• Background image: Use a placeholder image URL in template; assume user can replace or provide via config if needed.
• Randomness: Use seedrandom library for seeded randomness, ensuring reproducibility from manifest seeds.
• Scope: Focus on lightweight first version with ~10 variants; parameters limited to button and text styling/positions as specified.
• Output location: Screenshots and manifest saved to an 'output' folder in project root.

Further Considerations

1. Background image source: Should the tool include sample images, or expect user-provided URLs? (Recommend user-provided for customization.)
2. Text content: Are eyebrow/header/subheader texts fixed or varied? (Assume fixed placeholders for now, can extend later.)
3. Performance: For large N, consider parallel screenshotting with Playwright's browser contexts.