imagegen-frontend-weblisted
Install: claude install-skill wedabro/bro-skills
# Frontend Web Image Direction
Create a coherent set of implementation-ready website section images, not a compressed mood board.
## Output contract
- Generate one separate horizontal image for every requested section.
- Never combine multiple sections into one tall board or tiny overview.
- Keep one palette, typography system, material language, and narrative spine across the set.
- Make each image large enough to inspect and recreate accurately.
- Generate fresh section images; do not crop earlier outputs to simulate missing views.
- Return images only. Do not write code.
## Workflow
1. Infer audience, conversion goal, section list, brand constraints, and required visual tone.
2. Define a compact design bible: palette, type character, imagery, surfaces, grid, CTA language, and recurring motif.
3. Assign each section a distinct composition and purpose before generating.
4. Generate sections individually in narrative order while carrying the same design bible forward.
5. Check legibility, realistic content density, CTA clarity, cross-section consistency, and composition variety.
## Composition rules
- Keep the hero clean and readable; match headline scale to copy length and leave the main CTA visible.
- Vary composition anchors: centered, split, off-grid, full-bleed, product-led, editorial, or data-led as the story requires.
- Do not repeat left-text/right-image layouts throughout the page.
- Use real visual hierarchy instead of filling every section with cards, badges