AI Website How It Works Section Examples
Lovable
Zapier
Otter
GammaThere are 26 how it works sections here, cut from 20 live AI websites such as Lovable, Zapier and Otter. 15% of the AI sites in the library have a how it works section, higher than the 8% across all websites. 80% of them are light-themed and the most common headline fonts are Inter (2), Camera Plain and Degular Display.
At a glance
Live verified metrics- How it works sections
- 26
- Sites
- 20 of 130 AI sites (15%)
- Library-wide
- 8% of all websites have one
- Per site
- 1.3 on average
- Light / dark
- 80% light · 20% dark
- Top heading fonts
- Inter (2), Camera Plain and Degular Display
- Accent colours
- blue 9neutral 5red 2
- Leading sites
- Lovable, Zapier and Otter
What makes a good how it works section on a AI website
How-it-works sections reduce a product to three or four steps, each with a small visual, so a visitor can picture using it. AI products sell capability fast: a demo above the fold, a model or benchmark story, and pricing that scales with usage. Compare these examples with how it works sections from every industry, or see the full homepages on the AI website templates page.
What these 26 how it works sections have in common
On average each one carries 7.9 images or icons, 1.0 buttons and 1.5 links. 21% sit on a dark background, and 67% are taller than half their width — most take a full screen or more.
7 how it works sections worth studying
- Lovable — “One platform. Endless possibilities.”: If you can describe it, you can build it. Create, run, and manage entire products and businesses from scratch. Create an online store... Describe what you… (0 buttons, 13 images, background #fcfbf8).
- Zapier — “How it works”: Sign up to get early access to new innovations, contribute to our research, and connect with fellow builders in our community on Reddit. Each time a… (0 buttons, 4 images, background #fffefb).
- Otter — “How it works”: 1 Apply Tell us about your company, audience, customers, and partnership goals. 2 Connect Our partnerships team will review your application and follow up if there… (0 buttons, 0 images, background #ffffff).
- Gamma — “How to make a presentation with AI.”: Turn any prompt, document, or idea into a complete slide deck. 1 Create a free account in seconds, or sign in if you already have one.… (2 buttons, 2 images, background #ffffff).
- Gorgias — “50 in 50 program”: Today Connect your channels Connect your channels, migrate your data, and get your team up and running with implementation resources that guide the way. Day 7… (0 buttons, 6 images, background #ffffff).
- Crisp — “Build your perfect AI Agent in 4 steps”: Included in the Crisp Plus plan Teach Crisp about your product or business, using the public and private resources you already have. We automatically browse your… (1 buttons, 18 images, background #ffffff).
- Appcues: ACTIVATION Get to know your customers Walk new users through setup with guidance built for them. Highlight the actions that move users from sign-up to success.… (0 buttons, 3 images, background #fbfbfb).
How to use these how it works references
Count the steps and look at how each is illustrated; three or four steps with one visual each is the common pattern. For an AI product, borrow how these sites show real outputs and answer data-privacy questions before the pricing table. Start with Lovable, Zapier and Otter, click a section to open it at full size and copy its build prompt, palette and fonts.
Related searches
Browse all sections or the full A–Z of popular searches.
Library updated