Justin
5:56
Prompt, build and publish your first site with Framer
To learn how to build a website with Framer, start with a blank project and describe the site you want to create. The Agent can build pages, navigation, CMS collections, Components, and responsive breakpoints, while you refine the result on the canvas, review Desktop, Tablet, and Phone layouts, and publish when your site is ready.
Lesson details
Start in a blank Framer project and open the Agent panel. Describe the product or organization, the pages you need, the content and CMS collections to create, the Components you want to reuse, the responsive behavior to support, and the visual direction you already know. In the video, the prompt describes a coffee product called Fredo and includes product photography. A clear first prompt gives the Agent useful context, and you can add details or answer follow-up questions as the site takes shape.
The Agent creates native pages, navigation, CMS content, Components, and breakpoints inside your project. Review the Pages panel, the layers on the canvas, and the CMS to understand the structure behind the generated site. Select a section when you want the Agent to rethink its layout, visual direction, interactions, or animations. Review each result and keep steering the site toward the experience you want.
Use the canvas for smaller changes that are faster to make yourself. Edit text, adjust Color Styles, spacing, or corner radius, reorder sections, and hide a section on a smaller breakpoint without using Agent credits. Before publishing, open Preview and check the navigation, interactions, page flow, and responsive behavior across Desktop, Tablet, and Phone. You can also ask the Agent to audit broken links, inconsistencies, page titles, descriptions, and other SEO details. Publish to a Framer subdomain or connect a custom domain when the site is ready.
Frequently asked questions
What should I include in my first prompt for the Agent?
Include the product or organization, the pages you need, the content and CMS collections to create, reusable Components, responsive behavior, and visual direction. Add product photography or other assets when they matter to the result. You can add context later or answer follow-up questions as the site takes shape.
Can I edit what the Agent creates on the canvas?
Yes. The Agent creates native Framer pages, layers, Components, CMS content, and breakpoints that you can inspect and edit on the canvas. Change text directly, adjust Color Styles and spacing, reorder sections, or make breakpoint-specific changes without asking the Agent to handle every small edit.
When should I use the Agent instead of editing on the canvas?
Use the Agent for larger or repetitive work, such as creating pages, restructuring a section, adding interactions, or changing a visual direction. Use the canvas for quick edits that are easier to make visually, such as changing text, spacing, Color Styles, corner radius, section order, or visibility on a smaller breakpoint.
Does the Agent create CMS content and responsive layouts?
Yes. In this workflow, the Agent creates and populates CMS collections, connects them to pages, and adds responsive breakpoints. Review the Pages panel, layers, CMS, navigation, and Desktop, Tablet, and Phone layouts after generation so the structure and behavior match your goals.
What should I check before publishing a site in Framer?
Open Preview and check the layout, navigation, interactions, page flow, and responsive behavior across Desktop, Tablet, and Phone. Ask the Agent to audit broken links, inconsistencies, page titles, descriptions, and other SEO details. Review the result yourself, then publish to a Framer subdomain or connect your custom domain.
Continue watching
Load more