--- name: forge-imagegen-web description: Art direction for website reference comps generated by AI image tools. One horizontal image per section, no compressed mood boards, varied composition, palette locked across all images, second-read moment per page. Contains the prompt template + 8 worked prompts for a full landing-page set. Use with Midjourney, DALL-E, ChatGPT Images when producing references for landing pages and marketing sites. license: MIT --- # forge-imagegen-web You are art-directing reference images that a developer or coding model will translate into a real website. Default image-gen output produces compressed mood boards with five sections crammed into one frame, identical compositions across pages (always left-text right-image), and palettes that drift between images. This skill exists to fix that. The deliverable: **a set of images that, if handed to a competent frontend engineer with no other context, would let them rebuild the site faithfully.** Every image is a section, not a slide deck. ## Quick reference (the things you must never ship) 1. Multiple sections crammed into one image ("mood board" format). 2. A vertical image for a website section. 3. The phone-tilted-on-purple-gradient SaaS cliche. 4. Five different palettes across one site's references. 5. The same left-text right-image composition for every section. 6. Stock-photo "person looking at laptop." 7. Fake brand names visible in the image ("TechCorp", "Acme Studio"). 8. AI-generated faces with subtly-wrong hands. 9. `from-purple-500 to-pink-500` SaaS gradient backgrounds. 10. Mixed visual register across one set (photo + 3D blob + watercolor). ## Hard rules ### Output structure **1. One section per image. No mood boards.** A landing page with 8 sections produces 8 images. **2. Every image is horizontal, 16:9 or 21:9.** Vertical does not match how a developer reads a website. **3. Full-bleed compositions, not centered cards.** A "section" image shows the section as it would appear in the browser, edge to edge. **4. No labels, no annotation arrows, no figma-style callouts in the image.** Annotations go in the prompt. ### Composition variety **5. Rotate composition across sections.** | Pattern | When to use | | --- | --- | | Full-bleed image, overlay text | Brand IS the visual | | Typographic-only, no image | Brand is the message | | Right-text left-image | Second hero or features | | Image above text, centered | Reading-first feature | | Asymmetric 60/40 or 70/30 | Most editorial layouts | | Bento grid of cards | Feature comparison | | Full-width quote with small image | Testimonial / social proof | **6. Hero scale varies across sites, not just sections.** Some sites earn a 9-12rem display headline. Others use restrained type with imagery carrying the load. Pick once and hold. ### Palette discipline **7. Pick three colors before any image is generated.** Hex values. Every image uses the same three. No drift. **8. No defaults.** AI image gen's default is beige + sage + terracotta + matte black. Avoid that palette unless the brief asks for it. ### Typography in images **9. Show the actual typographic choice.** If the site uses Editorial Old or Söhne, the image shows recognizable display type. Most tools render text poorly; lean on type mood (weight, scale, tracking, posture) rather than perfect letterforms. **10. No fake brand names visible.** Use the real product name or `[Product]` placeholder. ### Visual narrative **11. The image set tells a story top to bottom.** Hero sells. Social proof builds trust. Problem frames pain. Solution shows product. Features show how. Pricing handles the ask. FAQ removes objections. CTA closes. **12. A "second-read moment" per page.** One section should reward a second look - clever crop, typographic twist, unexpected detail. ### Photography vs illustration vs 3D **13. Pick one register and stay there.** Mixing photo-real product shots with playful 3D blobs and watercolor is the most common identity failure. **14. Photography reads premium when lighting and composition are intentional.** Default AI photo-gen is flat-lit, centered, smiley-stock. Push for off-center subject, deliberate light direction, slightly cropped, environmental context. ### Mockups **15. Show product in context where it helps.** SaaS section with actual UI in a laptop or browser frame beats abstract gradient. **16. No 30-degree tilted iPhones on multicolored gradient backdrops.** 2022 portfolio look. Straight-on or 5-10° angle on clean background. ### Anti-patterns **17. No "AI-shaped people" with off hands and identical Pixar faces.** Use real photo references, or push into stylized illustration where off-ness reads intentional. **18. No `from-purple-500 to-pink-500` SaaS gradient backgrounds.** AI fingerprint. Single near-flat color, subtle dual-tone, or textured surface. **19. No cards-inside-cards meta-mockups.** Each image shows one clear focal subject. ## Prompt template ``` SECTION: [hero | social_proof | problem | solution | features | pricing | faq | cta] ASPECT: 16:9 (or 21:9) COMPOSITION: [one of the layouts in rule 5] PALETTE: bg #..., fg #..., accent #... TYPE_REGISTER: [editorial display | technical mono | soft serif | brutalist sans | ...] SUBJECT: [what the section shows] MOOD: [3 adjectives max] ANTI: [things to avoid] ``` ### Example: SaaS hero ``` SECTION: hero ASPECT: 21:9 COMPOSITION: full-bleed product UI screenshot with overlay text top-left PALETTE: bg #0B0E13, fg #F4F4F2, accent #FF5C2B TYPE_REGISTER: editorial display, tight tracking, oversized weight 600 SUBJECT: dashboard interface for a SQL linting tool, dark theme, code-on-left visualization-on-right MOOD: precise, technical, calm ANTI: no purple gradient, no stock-looking people, no card-in-card UI ``` ### Example: problem section (intentional palette shift) ``` SECTION: problem ASPECT: 16:9 COMPOSITION: editorial 60/40 split. Left: large statement type. Right: small diagram of code with a red highlight on the problem line. PALETTE: bg #F5F2EC (this section is light by design), fg #1A1A1A, accent #FF5C2B TYPE_REGISTER: serif display, large, deliberate SUBJECT: recognizable code snippet with a flagged issue (e.g., SQL ALTER TABLE rewriting a large table) MOOD: deliberate, archival, intentional ANTI: no "person frustrated at laptop" stock, no abstract gradient, no purple ``` ## Common AI-output patterns to reject | Pattern | Why slop | Fix | | --- | --- | --- | | 5 sections in one mood-board image | Useless for engineers | One image per section | | Vertical phone-screen aspect | Wrong for web | 16:9 / 21:9 horizontal | | Tilted iPhone on purple gradient | Cliche | Straight-on, clean background | | Every section left-text right-image | Default AI move | Rotate compositions | | Palette drift across sections | No identity | Three hex values, lock them | | Stock laptop photo | Lazy | Real UI mockup or typographic hero | | "Acme Corp" visible | Fake brand | `[Product]` or real name | | 6 fonts visible | Identity sprawl | One display face, lock weight | | Beige + sage + terracotta + black | AI default palette | Anything else | | Caption labels on the image itself | Treating image as figma frame | Annotate in the prompt | ## Worked example: 8 prompts for one landing page ``` COMMON across all 8: PALETTE: bg #0B0E13, fg #F4F4F2, accent #FF5C2B TYPE: editorial display + JetBrains Mono labels STYLE: photoreal + UI screenshots (NOT 3D, NOT illustrated) ASPECT: 21:9 unless noted ANTI: no purple/violet/pink, no stock people, no tilted phones 01_HERO typographic, no image. Massive display "Skills with teeth." top-left. Mono eyebrow "v0.4 · MIT · 43 skills" tiny above. Italic "teeth" in accent. Generous whitespace below for CTAs. 02_PROOF 5 fictional dev-tool wordmarks in mono-grey, evenly spaced. Mono eyebrow "USED BY" centered above. 03_PROBLEM (16:9, palette shifts to bg #F5F2EC fg #1A1A1A by design). Left 60%: large serif "AI ships indigo gradients on every CTA." Right 40%: small UI screenshot showing the gradient with a red strike mark. 04_SOLUTION back to dark. Centered editorial composition: medium display "Skills with teeth." with mono caption "26 verifier scripts across 43 skills." Single thin orange underline under "teeth" - the second-read moment. 05_FEATURES_BENTO asymmetric bento. Card 1 (50%): UI screenshot of verifier catching a violation. Cards 2-3 (25% each): mono-typeset rule snippets. 06_FEATURES_DEEP editorial right-image left-text. Left prose "Verifiers that hold the floor." Right: terminal mockup of `./verify/forge run --diff` output. 07_PRICING typographic only. Large display "MIT. Use, fork, sell." centered. 08_CTA typographic hero mirroring section 01. "Start with one rule." with small mono `git clone...` block below. ``` What this demonstrates: 8 separate prompts (rule 1); all horizontal (rule 2); same 3 colors throughout (rule 7); 5 different compositions used (rule 5); one intentional palette break for contrast (planned, not drift); photo-real UI mockups consistent within the set, no mixed register (rule 13); second-read moment in 04 (rule 12); no fake brand names; eight tell a story top to bottom (rule 11). ## Workflow 1. **List the sections.** Outline the page top to bottom. 2. **Pick palette, type register, visual register.** Once. 3. **Pick composition per section.** No two adjacent share a composition. 4. **Generate one image per section.** Iterate before moving on. 5. **Contact sheet.** All 8 side by side read as one coherent site. 6. **If two adjacent images break the palette, fix the palette before fixing the image.** ## Verification Manual checklist: - [ ] One image per section. - [ ] All horizontal (16:9 or 21:9). - [ ] Palette consistent across all images (same hex). - [ ] At least three different composition types. - [ ] One section has a second-read moment. - [ ] No banned gradients, no AI-shaped people, no fake brand names. - [ ] Type register consistent. ## When to skip this skill - Brand-kit boards (use [`forge-brandkit`](../forge-brandkit/SKILL.md)). - Mobile app screens (use [`forge-imagegen-mobile`](../forge-imagegen-mobile/SKILL.md)). - Single icon or asset. ## Related skills - [`forge-frontend`](../../design/forge-frontend/SKILL.md) - implementation of the comps. - [`forge-soft`](../../design/forge-soft/SKILL.md), [`forge-brutalist`](../../design/forge-brutalist/SKILL.md), [`forge-minimalist`](../../design/forge-minimalist/SKILL.md) - pick the register the prompts target.