← ClaudeAtlas

imagegen-frontend-weblisted

Generate premium horizontal website design-reference images for landing pages, marketing sites, and product pages. Use when the requested deliverable is web design imagery or when an image-first implementation workflow needs upstream section concepts. Produce images only, one standalone image per page section; do not write frontend code or mobile-app screens.
wedabro/bro-skills · ★ 2 · Web & Frontend · score 73
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