Skill Wiki
Gallery Hero Sections
20 curated hero section screenshots from Land-book Pro, tagged by pattern type and persona lean. Use to find the right hero shape for a given register.…
$ prime install @community/example-gallery-hero-sectionsProjection
Always in _index.xml · the agent never has to ask for this.
HeroSectionGallery [example] v1.0.0
20 curated hero section screenshots from Land-book Pro, tagged by pattern type and persona lean. Use to find the right hero shape for a given register. The hero is the highest-stakes real estate on any landing page: it must communicate product value, establish visual identity, and direct attention to a primary action — all within the first viewport.
Loaded when retrieval picks the atom as adjacent / supporting.
HeroSectionGallery [example] v1.0.0
20 curated hero section screenshots from Land-book Pro, tagged by pattern type and persona lean. Use to find the right hero shape for a given register. The hero is the highest-stakes real estate on any landing page: it must communicate product value, establish visual identity, and direct attention to a primary action — all within the first viewport.
Observations
- Product UI as hero visual is the dominant B2B pattern. Of the 20 samples, approximately 8 use an actual dashboard, table, workflow diagram, or data visualization as the primary visual object (gtm-analytics, happyrobot, pontera, v7-go, cardless). This is a clear industry signal: showing the product working outperforms generic illustration for SaaS. The visualization style varies — spreadsheet grids, node graphs, card layouts — but the intent is the same: answer 'what does it actually do?' before the user scrolls.
- Dark backgrounds cluster around AI/infrastructure/enterprise. Samples like happyrobot, production-ready-ai-solutions (vecton), v7-go, and interfere all use dark or near-dark backgrounds with bright or glowing accent elements. This dark-SaaS aesthetic has become a visual shorthand for 'technical infrastructure' or 'AI-native product.' Use it when the persona is dense-pragmatist or the product is developer/enterprise-facing.
- Full-bleed photography is reserved for product-tangible categories. Athleats and Veo both use high-quality full-bleed photography because their products are physical (food, sports cameras). Persephone Biosciences uses lab photography. For software-only products, photography is rarely the primary hero element — it signals a different trust register.
- Typographic restraint is a marker of credibility positioning. Client-challenge, inertiajs, and supercommon-systems use near-typographic-only heroes. This approach signals confidence: the product/brand name alone is worth foregrounding. It correlates with tokyo-minimal and swiss-modernist personas where decoration reads as noise.
- Gradient meshes and ambient color are the new 'hero image' for B2C/wellness. Dawn AI, Gogetta, and similar consumer-leaning products use soft gradient meshes instead of photography or UI screenshots. This achieves warmth and distinctiveness without revealing product chrome — useful when the product is intangible (mental health AI, community platform).
Items
- File: aira--ai-sales-agent-for-sales-teams.webp
- Pattern: centered headline + AI product interface mockup + dark background
- Persona Lean:
- dense-pragmatist
- swiss-modernist
- Notes: B2B SaaS tone; product UI preview dominates the lower half
- File: athleats--healthy-performance-driven-recipes-for-athl.webp
- Pattern: full-bleed imagery + bold sans headline + single CTA
- Persona Lean:
- editorial
- warm-institutional
- Notes: Food/fitness imagery; high-contrast text overlay on photo
- File: cardless--embedded-credit-card-platform.webp
- Pattern: split layout + physical product render + fintech copy
- Persona Lean:
- swiss-modernist
- dense-pragmatist
- Notes: Card render on right, credential copy on left; corporate fintech
- File: client-challenge.webp
- Pattern: minimal centered + large logotype + sparse whitespace
- Persona Lean:
- tokyo-minimal
- swiss-modernist
- Notes: Extreme restraint; almost entirely typographic
- File: dawn-ai-for-mental-health--247-support-for-your-mind.webp
- Pattern: centered headline + ambient gradient + soft product card
- Persona Lean:
- editorial
- warm-institutional
- Notes: Soft mesh gradient bg; humanist serif headline; no chrome
- File: fluid-glass.webp
- Pattern: immersive 3D render + large single word headline + glassmorphism
- Persona Lean:
- brutalist-expressive
- editorial
- Notes: 3D fluid material as hero visual; oversized type treatment
- File: gogetta.webp
- Pattern: centered CTA + illustrated character mascot + playful palette
- Persona Lean:
- warm-institutional
- editorial
- Notes: Cartoon mascot as trust anchor; friendly B2B positioning
- File: gtm-analytics--equals.webp
- Pattern: asymmetric split + dense data table preview
- Persona Lean:
- dense-pragmatist
- swiss-modernist
- Notes: Real spreadsheet UI as hero visual; signals power-user product
- File: happyrobot--ai-workers-handle-end-to-end-tasks-at-scal.webp
- Pattern: dark bg + animated workflow diagram + AI agent branding
- Persona Lean:
- dense-pragmatist
- swiss-modernist
- Notes: Node-graph visual; positions product as infrastructure
- File: inertiajs.webp
- Pattern: developer-focused centered text + code snippet CTA
- Persona Lean:
- swiss-modernist
- dense-pragmatist
- Notes: Near-monochrome; code excerpt as primary visual; open-source OSS feel
- File: interfere--build-software-that-never-breaks.webp
- Pattern: bold statement headline + abstract waveform visual
- Persona Lean:
- brutalist-expressive
- swiss-modernist
- Notes: Strong typographic claim; subtle animated background texture
- File: keytail--be-the-answer-everywhere-people-search.webp
- Pattern: search-UI metaphor + centered + product screenshot strip
- Persona Lean:
- warm-institutional
- dense-pragmatist
- Notes: Search bar as primary hero element mirrors product function
- File: modern-vendor-financing-for-b2b-software-and-hardware-p.webp
- Pattern: fintech split + credibility badges + muted palette
- Persona Lean:
- swiss-modernist
- dense-pragmatist
- Notes: Trust signals (logos, badges) prominent; conservative palette
- File: persephone-biosciences.webp
- Pattern: science photography + editorial layout + muted earth tones
- Persona Lean:
- editorial
- warm-institutional
- Notes: Lab imagery; nature-toned palette; positions product with credibility
- File: pontera--infrastructure-for-modern-connected-retireme.webp
- Pattern: B2B platform hero + dashboard screenshot + conservative serif
- Persona Lean:
- dense-pragmatist
- swiss-modernist
- Notes: Dashboard preview shows product depth; financial services tone
- File: production-ready-ai-solutions-for-bfsi--vecton.webp
- Pattern: enterprise dark theme + abstract data visual + bold headline
- Persona Lean:
- dense-pragmatist
- swiss-modernist
- Notes: Heavy enterprise aesthetic; dark bg with glowing data elements
- File: supercommon-systems.webp
- Pattern: experimental layout + deconstructed type + designer-coded feel
- Persona Lean:
- brutalist-expressive
- editorial
- Notes: Non-standard grid; type and imagery overlap; studio portfolio energy
- File: uglycash.webp
- Pattern: anti-design editorial + raw type + intentional low-fi aesthetic
- Persona Lean:
- brutalist-expressive
- Notes: Deliberately rough; uses ugly-as-brand-voice approach
- File: v7-go--ai-agent-platform-for-finance-legal--insuranc.webp
- Pattern: enterprise AI hero + structured data preview + dark SaaS
- Persona Lean:
- dense-pragmatist
- swiss-modernist
- Notes: Structured table/graph UI preview; serious enterprise tone
- File: veo-sports-cameras--record-stream-and-analyse.webp
- Pattern: full-bleed sports photography + bold condensed headline + product CTA
- Persona Lean:
- editorial
- warm-institutional
- Notes: Action photography dominant; product hardware shown in-context
Base Path
resources/landbook/sections-hero
Persona Mapping
- Dense Pragmatist:
- gtm-analytics--equals
- happyrobot--ai-workers-handle-end-to-end-tasks-at-scal
- v7-go--ai-agent-platform-for-finance-legal--insuranc
- pontera--infrastructure-for-modern-connected-retireme
- production-ready-ai-solutions-for-bfsi--vecton
- Swiss Modernist:
- cardless--embedded-credit-card-platform
- inertiajs
- modern-vendor-financing-for-b2b-software-and-hardware-p
- client-challenge
- Editorial:
- dawn-ai-for-mental-health--247-support-for-your-mind
- athleats--healthy-performance-driven-recipes-for-athl
- persephone-biosciences
- fluid-glass
- supercommon-systems
- Warm Institutional:
- gogetta
- keytail--be-the-answer-everywhere-people-search
- athleats--healthy-performance-driven-recipes-for-athl
- veo-sports-cameras--record-stream-and-analyse
- Brutalist Expressive:
- uglycash
- supercommon-systems
- interfere--build-software-that-never-breaks
- fluid-glass
- Tokyo Minimal:
- client-challenge
Agent Workflow
1. Filter by persona first. When prime_compile returns a persona assignment, query this atom and select 2-3 items whose persona_lean overlaps. Do not pass all 20 screenshots to a vision model — token cost and signal-to-noise both suffer.
2. Read the pattern field before looking at images. The pattern description is sufficient for structural decisions (layout, visual hierarchy). The image adds aesthetic nuance (palette, typography feel, density).
3. Use the gallery for triangulation, not copying. If 6 out of 20 samples share a pattern (product UI as hero), that is a category norm. Building toward it is safe. Building against it requires intentional differentiation rationale.
4. Cross-reference landing/ for full-page context. Several products appear in both sections-hero/ and landing/ — checking both gives context for how the hero fits into the overall page rhythm. See the full-landings gallery atom for this.
5. Pattern + notes together tell the layout story. Pattern is structural; notes is aesthetic and tonal. Both inform code generation decisions.
Loaded when retrieval picks the atom as a focal / direct hit.
HeroSectionGallery [example] v1.0.0
20 curated hero section screenshots from Land-book Pro, tagged by pattern type and persona lean. Use to find the right hero shape for a given register. The hero is the highest-stakes real estate on any landing page: it must communicate product value, establish visual identity, and direct attention to a primary action — all within the first viewport.
Observations
- Product UI as hero visual is the dominant B2B pattern. Of the 20 samples, approximately 8 use an actual dashboard, table, workflow diagram, or data visualization as the primary visual object (gtm-analytics, happyrobot, pontera, v7-go, cardless). This is a clear industry signal: showing the product working outperforms generic illustration for SaaS. The visualization style varies — spreadsheet grids, node graphs, card layouts — but the intent is the same: answer 'what does it actually do?' before the user scrolls.
- Dark backgrounds cluster around AI/infrastructure/enterprise. Samples like happyrobot, production-ready-ai-solutions (vecton), v7-go, and interfere all use dark or near-dark backgrounds with bright or glowing accent elements. This dark-SaaS aesthetic has become a visual shorthand for 'technical infrastructure' or 'AI-native product.' Use it when the persona is dense-pragmatist or the product is developer/enterprise-facing.
- Full-bleed photography is reserved for product-tangible categories. Athleats and Veo both use high-quality full-bleed photography because their products are physical (food, sports cameras). Persephone Biosciences uses lab photography. For software-only products, photography is rarely the primary hero element — it signals a different trust register.
- Typographic restraint is a marker of credibility positioning. Client-challenge, inertiajs, and supercommon-systems use near-typographic-only heroes. This approach signals confidence: the product/brand name alone is worth foregrounding. It correlates with tokyo-minimal and swiss-modernist personas where decoration reads as noise.
- Gradient meshes and ambient color are the new 'hero image' for B2C/wellness. Dawn AI, Gogetta, and similar consumer-leaning products use soft gradient meshes instead of photography or UI screenshots. This achieves warmth and distinctiveness without revealing product chrome — useful when the product is intangible (mental health AI, community platform).
Items
- File: aira--ai-sales-agent-for-sales-teams.webp
- Pattern: centered headline + AI product interface mockup + dark background
- Persona Lean:
- dense-pragmatist
- swiss-modernist
- Notes: B2B SaaS tone; product UI preview dominates the lower half
- File: athleats--healthy-performance-driven-recipes-for-athl.webp
- Pattern: full-bleed imagery + bold sans headline + single CTA
- Persona Lean:
- editorial
- warm-institutional
- Notes: Food/fitness imagery; high-contrast text overlay on photo
- File: cardless--embedded-credit-card-platform.webp
- Pattern: split layout + physical product render + fintech copy
- Persona Lean:
- swiss-modernist
- dense-pragmatist
- Notes: Card render on right, credential copy on left; corporate fintech
- File: client-challenge.webp
- Pattern: minimal centered + large logotype + sparse whitespace
- Persona Lean:
- tokyo-minimal
- swiss-modernist
- Notes: Extreme restraint; almost entirely typographic
- File: dawn-ai-for-mental-health--247-support-for-your-mind.webp
- Pattern: centered headline + ambient gradient + soft product card
- Persona Lean:
- editorial
- warm-institutional
- Notes: Soft mesh gradient bg; humanist serif headline; no chrome
- File: fluid-glass.webp
- Pattern: immersive 3D render + large single word headline + glassmorphism
- Persona Lean:
- brutalist-expressive
- editorial
- Notes: 3D fluid material as hero visual; oversized type treatment
- File: gogetta.webp
- Pattern: centered CTA + illustrated character mascot + playful palette
- Persona Lean:
- warm-institutional
- editorial
- Notes: Cartoon mascot as trust anchor; friendly B2B positioning
- File: gtm-analytics--equals.webp
- Pattern: asymmetric split + dense data table preview
- Persona Lean:
- dense-pragmatist
- swiss-modernist
- Notes: Real spreadsheet UI as hero visual; signals power-user product
- File: happyrobot--ai-workers-handle-end-to-end-tasks-at-scal.webp
- Pattern: dark bg + animated workflow diagram + AI agent branding
- Persona Lean:
- dense-pragmatist
- swiss-modernist
- Notes: Node-graph visual; positions product as infrastructure
- File: inertiajs.webp
- Pattern: developer-focused centered text + code snippet CTA
- Persona Lean:
- swiss-modernist
- dense-pragmatist
- Notes: Near-monochrome; code excerpt as primary visual; open-source OSS feel
- File: interfere--build-software-that-never-breaks.webp
- Pattern: bold statement headline + abstract waveform visual
- Persona Lean:
- brutalist-expressive
- swiss-modernist
- Notes: Strong typographic claim; subtle animated background texture
- File: keytail--be-the-answer-everywhere-people-search.webp
- Pattern: search-UI metaphor + centered + product screenshot strip
- Persona Lean:
- warm-institutional
- dense-pragmatist
- Notes: Search bar as primary hero element mirrors product function
- File: modern-vendor-financing-for-b2b-software-and-hardware-p.webp
- Pattern: fintech split + credibility badges + muted palette
- Persona Lean:
- swiss-modernist
- dense-pragmatist
- Notes: Trust signals (logos, badges) prominent; conservative palette
- File: persephone-biosciences.webp
- Pattern: science photography + editorial layout + muted earth tones
- Persona Lean:
- editorial
- warm-institutional
- Notes: Lab imagery; nature-toned palette; positions product with credibility
- File: pontera--infrastructure-for-modern-connected-retireme.webp
- Pattern: B2B platform hero + dashboard screenshot + conservative serif
- Persona Lean:
- dense-pragmatist
- swiss-modernist
- Notes: Dashboard preview shows product depth; financial services tone
- File: production-ready-ai-solutions-for-bfsi--vecton.webp
- Pattern: enterprise dark theme + abstract data visual + bold headline
- Persona Lean:
- dense-pragmatist
- swiss-modernist
- Notes: Heavy enterprise aesthetic; dark bg with glowing data elements
- File: supercommon-systems.webp
- Pattern: experimental layout + deconstructed type + designer-coded feel
- Persona Lean:
- brutalist-expressive
- editorial
- Notes: Non-standard grid; type and imagery overlap; studio portfolio energy
- File: uglycash.webp
- Pattern: anti-design editorial + raw type + intentional low-fi aesthetic
- Persona Lean:
- brutalist-expressive
- Notes: Deliberately rough; uses ugly-as-brand-voice approach
- File: v7-go--ai-agent-platform-for-finance-legal--insuranc.webp
- Pattern: enterprise AI hero + structured data preview + dark SaaS
- Persona Lean:
- dense-pragmatist
- swiss-modernist
- Notes: Structured table/graph UI preview; serious enterprise tone
- File: veo-sports-cameras--record-stream-and-analyse.webp
- Pattern: full-bleed sports photography + bold condensed headline + product CTA
- Persona Lean:
- editorial
- warm-institutional
- Notes: Action photography dominant; product hardware shown in-context
Base Path
resources/landbook/sections-hero
Persona Mapping
- Dense Pragmatist:
- gtm-analytics--equals
- happyrobot--ai-workers-handle-end-to-end-tasks-at-scal
- v7-go--ai-agent-platform-for-finance-legal--insuranc
- pontera--infrastructure-for-modern-connected-retireme
- production-ready-ai-solutions-for-bfsi--vecton
- Swiss Modernist:
- cardless--embedded-credit-card-platform
- inertiajs
- modern-vendor-financing-for-b2b-software-and-hardware-p
- client-challenge
- Editorial:
- dawn-ai-for-mental-health--247-support-for-your-mind
- athleats--healthy-performance-driven-recipes-for-athl
- persephone-biosciences
- fluid-glass
- supercommon-systems
- Warm Institutional:
- gogetta
- keytail--be-the-answer-everywhere-people-search
- athleats--healthy-performance-driven-recipes-for-athl
- veo-sports-cameras--record-stream-and-analyse
- Brutalist Expressive:
- uglycash
- supercommon-systems
- interfere--build-software-that-never-breaks
- fluid-glass
- Tokyo Minimal:
- client-challenge
Agent Workflow
1. Filter by persona first. When prime_compile returns a persona assignment, query this atom and select 2-3 items whose persona_lean overlaps. Do not pass all 20 screenshots to a vision model — token cost and signal-to-noise both suffer.
2. Read the pattern field before looking at images. The pattern description is sufficient for structural decisions (layout, visual hierarchy). The image adds aesthetic nuance (palette, typography feel, density).
3. Use the gallery for triangulation, not copying. If 6 out of 20 samples share a pattern (product UI as hero), that is a category norm. Building toward it is safe. Building against it requires intentional differentiation rationale.
4. Cross-reference landing/ for full-page context. Several products appear in both sections-hero/ and landing/ — checking both gives context for how the hero fits into the overall page rhythm. See the full-landings gallery atom for this.
5. Pattern + notes together tell the layout story. Pattern is structural; notes is aesthetic and tonal. Both inform code generation decisions.
Observations
- Product UI as hero visual is the dominant B2B pattern. Of the 20 samples, approximately 8 use an actual dashboard, table, workflow diagram, or data visualization as the primary visual object (gtm-analytics, happyrobot, pontera, v7-go, cardless). This is a clear industry signal: showing the product working outperforms generic illustration for SaaS. The visualization style varies — spreadsheet grids, node graphs, card layouts — but the intent is the same: answer 'what does it actually do?' before the user scrolls.
- Dark backgrounds cluster around AI/infrastructure/enterprise. Samples like happyrobot, production-ready-ai-solutions (vecton), v7-go, and interfere all use dark or near-dark backgrounds with bright or glowing accent elements. This dark-SaaS aesthetic has become a visual shorthand for 'technical infrastructure' or 'AI-native product.' Use it when the persona is dense-pragmatist or the product is developer/enterprise-facing.
- Full-bleed photography is reserved for product-tangible categories. Athleats and Veo both use high-quality full-bleed photography because their products are physical (food, sports cameras). Persephone Biosciences uses lab photography. For software-only products, photography is rarely the primary hero element — it signals a different trust register.
- Typographic restraint is a marker of credibility positioning. Client-challenge, inertiajs, and supercommon-systems use near-typographic-only heroes. This approach signals confidence: the product/brand name alone is worth foregrounding. It correlates with tokyo-minimal and swiss-modernist personas where decoration reads as noise.
- Gradient meshes and ambient color are the new 'hero image' for B2C/wellness. Dawn AI, Gogetta, and similar consumer-leaning products use soft gradient meshes instead of photography or UI screenshots. This achieves warmth and distinctiveness without revealing product chrome — useful when the product is intangible (mental health AI, community platform).
Items
- File: aira--ai-sales-agent-for-sales-teams.webp
- Pattern: centered headline + AI product interface mockup + dark background
- Persona Lean:
- dense-pragmatist
- swiss-modernist
- Notes: B2B SaaS tone; product UI preview dominates the lower half
- File: athleats--healthy-performance-driven-recipes-for-athl.webp
- Pattern: full-bleed imagery + bold sans headline + single CTA
- Persona Lean:
- editorial
- warm-institutional
- Notes: Food/fitness imagery; high-contrast text overlay on photo
- File: cardless--embedded-credit-card-platform.webp
- Pattern: split layout + physical product render + fintech copy
- Persona Lean:
- swiss-modernist
- dense-pragmatist
- Notes: Card render on right, credential copy on left; corporate fintech
- File: client-challenge.webp
- Pattern: minimal centered + large logotype + sparse whitespace
- Persona Lean:
- tokyo-minimal
- swiss-modernist
- Notes: Extreme restraint; almost entirely typographic
- File: dawn-ai-for-mental-health--247-support-for-your-mind.webp
- Pattern: centered headline + ambient gradient + soft product card
- Persona Lean:
- editorial
- warm-institutional
- Notes: Soft mesh gradient bg; humanist serif headline; no chrome
- File: fluid-glass.webp
- Pattern: immersive 3D render + large single word headline + glassmorphism
- Persona Lean:
- brutalist-expressive
- editorial
- Notes: 3D fluid material as hero visual; oversized type treatment
- File: gogetta.webp
- Pattern: centered CTA + illustrated character mascot + playful palette
- Persona Lean:
- warm-institutional
- editorial
- Notes: Cartoon mascot as trust anchor; friendly B2B positioning
- File: gtm-analytics--equals.webp
- Pattern: asymmetric split + dense data table preview
- Persona Lean:
- dense-pragmatist
- swiss-modernist
- Notes: Real spreadsheet UI as hero visual; signals power-user product
- File: happyrobot--ai-workers-handle-end-to-end-tasks-at-scal.webp
- Pattern: dark bg + animated workflow diagram + AI agent branding
- Persona Lean:
- dense-pragmatist
- swiss-modernist
- Notes: Node-graph visual; positions product as infrastructure
- File: inertiajs.webp
- Pattern: developer-focused centered text + code snippet CTA
- Persona Lean:
- swiss-modernist
- dense-pragmatist
- Notes: Near-monochrome; code excerpt as primary visual; open-source OSS feel
- File: interfere--build-software-that-never-breaks.webp
- Pattern: bold statement headline + abstract waveform visual
- Persona Lean:
- brutalist-expressive
- swiss-modernist
- Notes: Strong typographic claim; subtle animated background texture
- File: keytail--be-the-answer-everywhere-people-search.webp
- Pattern: search-UI metaphor + centered + product screenshot strip
- Persona Lean:
- warm-institutional
- dense-pragmatist
- Notes: Search bar as primary hero element mirrors product function
- File: modern-vendor-financing-for-b2b-software-and-hardware-p.webp
- Pattern: fintech split + credibility badges + muted palette
- Persona Lean:
- swiss-modernist
- dense-pragmatist
- Notes: Trust signals (logos, badges) prominent; conservative palette
- File: persephone-biosciences.webp
- Pattern: science photography + editorial layout + muted earth tones
- Persona Lean:
- editorial
- warm-institutional
- Notes: Lab imagery; nature-toned palette; positions product with credibility
- File: pontera--infrastructure-for-modern-connected-retireme.webp
- Pattern: B2B platform hero + dashboard screenshot + conservative serif
- Persona Lean:
- dense-pragmatist
- swiss-modernist
- Notes: Dashboard preview shows product depth; financial services tone
- File: production-ready-ai-solutions-for-bfsi--vecton.webp
- Pattern: enterprise dark theme + abstract data visual + bold headline
- Persona Lean:
- dense-pragmatist
- swiss-modernist
- Notes: Heavy enterprise aesthetic; dark bg with glowing data elements
- File: supercommon-systems.webp
- Pattern: experimental layout + deconstructed type + designer-coded feel
- Persona Lean:
- brutalist-expressive
- editorial
- Notes: Non-standard grid; type and imagery overlap; studio portfolio energy
- File: uglycash.webp
- Pattern: anti-design editorial + raw type + intentional low-fi aesthetic
- Persona Lean:
- brutalist-expressive
- Notes: Deliberately rough; uses ugly-as-brand-voice approach
- File: v7-go--ai-agent-platform-for-finance-legal--insuranc.webp
- Pattern: enterprise AI hero + structured data preview + dark SaaS
- Persona Lean:
- dense-pragmatist
- swiss-modernist
- Notes: Structured table/graph UI preview; serious enterprise tone
- File: veo-sports-cameras--record-stream-and-analyse.webp
- Pattern: full-bleed sports photography + bold condensed headline + product CTA
- Persona Lean:
- editorial
- warm-institutional
- Notes: Action photography dominant; product hardware shown in-context
Base Path
resources/landbook/sections-hero
Persona Mapping
- Dense Pragmatist:
- gtm-analytics--equals
- happyrobot--ai-workers-handle-end-to-end-tasks-at-scal
- v7-go--ai-agent-platform-for-finance-legal--insuranc
- pontera--infrastructure-for-modern-connected-retireme
- production-ready-ai-solutions-for-bfsi--vecton
- Swiss Modernist:
- cardless--embedded-credit-card-platform
- inertiajs
- modern-vendor-financing-for-b2b-software-and-hardware-p
- client-challenge
- Editorial:
- dawn-ai-for-mental-health--247-support-for-your-mind
- athleats--healthy-performance-driven-recipes-for-athl
- persephone-biosciences
- fluid-glass
- supercommon-systems
- Warm Institutional:
- gogetta
- keytail--be-the-answer-everywhere-people-search
- athleats--healthy-performance-driven-recipes-for-athl
- veo-sports-cameras--record-stream-and-analyse
- Brutalist Expressive:
- uglycash
- supercommon-systems
- interfere--build-software-that-never-breaks
- fluid-glass
- Tokyo Minimal:
- client-challenge
Agent Workflow
1. Filter by persona first. When prime_compile returns a persona assignment, query this atom and select 2-3 items whose persona_lean overlaps. Do not pass all 20 screenshots to a vision model — token cost and signal-to-noise both suffer.
2. Read the pattern field before looking at images. The pattern description is sufficient for structural decisions (layout, visual hierarchy). The image adds aesthetic nuance (palette, typography feel, density).
3. Use the gallery for triangulation, not copying. If 6 out of 20 samples share a pattern (product UI as hero), that is a category norm. Building toward it is safe. Building against it requires intentional differentiation rationale.
4. Cross-reference landing/ for full-page context. Several products appear in both sections-hero/ and landing/ — checking both gives context for how the hero fits into the overall page rhythm. See the full-landings gallery atom for this.
5. Pattern + notes together tell the layout story. Pattern is structural; notes is aesthetic and tonal. Both inform code generation decisions.
Source
prime-system/examples/frontend-design/primes/compiled/@community/example-gallery-hero-sections/atom.yaml