Feature intro showreel
Context
Framer is a website builder positioned around helping designers build beautiful, high-quality websites quickly.
As expectations for web experiences continue to rise, companies are under increasing pressure to ship polished, visually refined sites in shorter timeframes. Design standards evolve rapidly, and what felt modern a year ago can quickly feel outdated. Teams are expected to move fast without compromising on craft.
To support this, Framer introduced Wireframer, an AI-assisted feature that generates page layouts from text prompts. It definitely speeds up the site building process, but layout is only one part of website.
Moving fast also depends on being able to create the other essentials of a website quickly. Things like structure (pages and CMS collections) and design (typography, color, and component styles). Helping create all three together should remove much of the repetitive setup work and allow designers to focus on aesthetics and refinement.
Problem
Moving fast is not just about generating layouts. A significant amount of time is spent creating structure like pages and CMS collections. Even more time is spent establishing design styles and comparing different stylistic directions, which often requires building multiple mockups from scratch, making exploration slow and repetitive.
Prompt-based layout tools also assume a level of expertise. Users need to know what sections belong on a page and be able to describe them clearly. Many teams, especially ones without dedicated web designers, don’t know what a strong pricing page or landing page structure should include, let alone how to articulate it in a prompt.
Also, as things are right now, each page must be generated separately. If speed is the goal, Framer should help define not just layouts, but appropriate pages, sections, and stylistic directions altogether.
Approach
I began with a UI audit, reverse-engineering Framer's existing patterns to ensure the feature design felt native. Without access to the internal design system, I had figure out typography, spacing, interaction patterns, and visual language from the live product myself. The goal was for Kickoff to look indistinguishable from something a Framer designer would ship.
I then studied website builders like Relume to understand how they guide users through site creation. The experience needed to be constrained, yet flexibile enough to generate a strong foundation. I introduced preset design styles and pre-built layout options to make comparison faster and eliminate the need to build multiple mockups from scratch.
Most tools prioritise layout first, and apply design later. I reversed this flow. Users begin by selecting a design direction using a sample page, then choose layouts that are previewed with that design applied. This prevents the disconnect of approving a wireframe that feels wrong once styled.
Feature intro screen
Site description prompt box
SIte description prompt box - speech input
Site structure review - pages
Site structure review - collections
Design step intro screen
Preset selector with 'Airy' preset selected
Preset selector with 'Techy' preset selected
Editing typography - Browsing font pairs
Editing typography - Browsing curated font collections
Editing colors
Editing elements
Editing elements - Images
Layout review of Home page
Home page hero section - Customization options
Pre-layout style selection modal
Pre-layout style selection modal - Fancy layouts only
Solution
A feature flow that defines structure, design direction, and layout in one cohesive process. Thus, bringing down the time to generate pages, CMS collections, style systems, and pre-built sections to mere minutes.
The experience emphasises speed, clarity, and constraint. Users move through three focused steps — design, layout, structure — with curated presets and live previews that make comparison effortless.
Kickoff generates roughly 90% of a complete website foundation, removing repetitive setup work and leaving designers free to refine, customise, and elevate the final aesthetic in the full editor.
Below is a full feature walkthrough, guiding mock users through the entire flow and demonstrating how a complete site foundation can be generated in minutes.
Full feature narrated walkthrough