AI composition library
Browse source-reviewed landing blocks, switch between their Preview and Code views, and see how a page narrative can be assembled from proven pieces.
Browse landing blocks12 of 12 blocks
Each card renders the source component with clearly marked fixture content.
landing / blocks
Closing action
A closing CTA should complete the narrative instead of repeating the hero.
A strong closing callout with an asymmetric action area and optional context or media slot.
DESIGN DIALS
The FAQ stays distinct from pricing and the closing CTA.
A focused FAQ section with semantic disclosure controls and an explicit empty state.
DESIGN DIALS
Vary the grid span and content slot so the feature story has a visual rhythm.
Keep the main promise legible before the details arrive.
Give each supporting claim a place to breathe.
Use a bounded slot for a real screenshot or live preview.
Add one small proof point without flattening the layout.
An asymmetric feature grid with explicit span and tone controls for varied visual rhythm.
DESIGN DIALS
Give the first connection more space, then let the rest become scannable.
Build
Connect the source that already owns the workflow.
Automate
Move useful changes into the next system.
Store
Keep context attached to the operation.
Extend
Leave room for the team’s own tools.
A featured integration followed by a compact ecosystem list, useful for platform pages and products that win through connections.
DESIGN DIALS
Alternate the media side and keep every row anchored to a concrete feature claim.
01 / Shape the input
A story row can carry context without turning into a wall of copy.
02 / Show the result
Use the second row to explain the change the workflow creates.
Alternating product-story rows that pair real media with a focused explanation, proof points, and an optional action.
DESIGN DIALS
Source-reviewed hero block
A split value proposition with one real media boundary and a clear first-viewport action.
A left-aligned value proposition paired with a real media slot for SaaS and product launches.
DESIGN DIALS
A dominant media slot keeps the proof section from becoming a uniform gallery.
Primary view
Use an image, video, or actual product preview with a useful accessible label.
Replace fixture content before shipping
Keep the second item compact and specific.
Use metadata to explain what the media proves.
A featured visual story with supporting case studies or product moments, designed for real screenshots, video, or editorial media.
DESIGN DIALS
Use pricing as its own role; do not ask the CTA or FAQ to carry the same job.
A responsive plan grid with a monthly/yearly control and explicit feature inputs.
DESIGN DIALS
fixture value · replace with scope
fixture value · replace with method
fixture value · replace with period
A low-height proof band that pairs a contextual statement with a small set of source-backed metrics.
DESIGN DIALS
The best page sections give the reader a next move, not another thing to decode.
A single high-signal customer quote with identity, context, and an optional next action instead of a carousel of interchangeable testimonials.
DESIGN DIALS
A proof rail beside a meaningful claim
A compact, responsive trust rail for customer logos, ecosystem partners, or supported platforms without a generic logo wall.
DESIGN DIALS
Four milestones are enough to explain a workflow without inventing motion.
01
Collect the input that starts the journey.
02
Turn raw material into a usable structure.
03
Give people a clear place to make decisions.
04
End with an outcome someone can act on.
A responsive milestone rail for explaining how a product, service, or onboarding path moves from start to outcome.
DESIGN DIALS
Page-level recipes
Recipes are retrieval hints, not rigid templates. They preserve role order, visual language, and the constraints the AI should keep.
A discovery page with persistent desktop filters, a compact mobile filter control, and result-oriented content.
Inspect recipe →6/2/4A platform-oriented landing composition for products whose value depends on the surrounding tools, workflow, or partner ecosystem.
Inspect recipe →8/2/3A visual product page for teams that need to show the workflow, explain the result, and support the claim with evidence.
Inspect recipe →7/3/3A restrained SaaS page skeleton that starts with a split value proposition and moves into varied product proof.
Inspect recipe →7/2/4A proof-led SaaS page that moves from value proposition to trust, product stories, ecosystem fit, and a clear close.
Inspect recipe →6/2/4A product-led landing composition for technical buyers with clear hierarchy and low-motion proof blocks.
Inspect recipe →