Build a website in one day with AI
GET STARTED
Introduction
This tutorial assumes you already have a Framer template. If you don’t have a template, you can find templates on our website, installable in one click.
This practical guide walks you step by step from a Framer template to a finished website.
It is designed for beginners: easy to follow, practical to apply, and focused on the essentials of building and launching a website.
How to use AI on Framer
There are two ways to use AI with Framer. Both can achieve the same results; the main difference is the interface.
If you already subscribe to ChatGPT or Claude, I recommend connecting your preferred AI tool to Framer instead of using Framer’s built-in agent.
This lets you use your existing subscription and avoid purchasing additional Framer AI credits.
Framer’s built-in AI Agent
located on the right panel when you open a project
Pros — the quickest and easiest way to begin
Cons — requires Framer AI credits, which you may need to purchase
External AI agent
connect your ChatGPT, Claude, …
Pros — no Framer AI credits to purchase
Cons — requires about five minutes of setup
To set up an external AI agent, follow Framer’s instructions here.
BUILD YOUR WEBSITE
Provide your context
Before you begin, remember that AI produces better results when you provide more detail.
A vague request may still produce something usable, but the AI will have to guess who you are and what your business provides.
Set the guidelines
Providing guidelines is optional, but strongly recommended.
They help AI apply the same design logic, writing style, image treatment, and level of quality across your entire website.
Recommended guidelines prompt
Before we start, here are the building guidelines. Don’t make any edit yet.
BUILDING GUIDELINES
Design:
Study the template and articulate its underlying design system: typographic scale and hierarchy, spacing and grid, color roles (background, text, accent, borders, states), component patterns, button and link styles, image treatment, and section rhythm. Understand the logic behind it — why elements relate as they do — not just the values. Study how sections are built, their containers, how they are structured and sized. This will be a reference for everything you’ll build in this project. When you build, keep the underlying logic — the same kind of scale relationships, the same disciplined spacing, the same section structure with the same container size, the same restraint in how color is used.
Copy:
Write everything in the desired tone of voice. Use the template’s text as a calibration reference for length — headlines, body paragraphs, button labels, captions, and all CMS collection items should sit in the same range as their equivalents. For sections with no equivalent, match the length of comparable sections.
Images:
If a relevant file is provided, place it based on its file name. If no relevant file exists, source a suitable image from Unsplash.
Write your brief
Before editing, tell the AI more about you and your business. This context helps it make decisions that better reflect your identity, design preferences, goals, and other requirements.
The example below is not exhaustive. Use it as a starting point for briefing an AI before you ask it to make any edits.
Note: If you already have PDFs or other documents explaining your business, company story, brand guidelines, or other useful details, attach them to give the AI richer context.
Example business brief prompt
Here is more information about my business. Don’t make any edit yet.
ABOUT THE BUSINESS
Overview:
We are Consulting Co, a management consulting firm based in New York City, founded in 2010 by John Doe, a former Goldman Sachs executive, and Nick Jones, a YC-backed founder. We specialize in strategic planning for Fortune 500 companies. Past clients include Ford, General Motors, Google, and Apple
DESIGN PREFERENCES
Look and feel:
Professional, clean, trustworthy. Generous white space, restrained use of color, nothing decorative for its own sake.
Colors:
White background, dark near-black text, dark green accent used sparingly — links, buttons, rules, small marks.
Typography:
A clean, classic serif for headings and body copy. Set the base size larger than the template’s, with comfortable line length and clear separation between heading levels.
TONE OF VOICE
Established, trustworthy, and professional. Write in plain declarative sentences. Avoid hype, superlatives, and startup language. Confident without being loud — the kind of copy a Fortune 500 board would find credible.
Full redesign in one prompt
A strong first step is to ask AI to adapt the entire template to your brand and general design preferences.
This gives you a realistic first look at what your website could become and provides a clearer foundation—and more inspiration—for the detailed edits that follow.
Recommended starting prompt
Turn this template into a credible website for my company. Using the information I provided, apply my design preferences, rewrite the copy in my tone of voice, and replace the existing images with ones that better reflect my business. For now, preserve the current content structure and adapt it to my company’s context.
Attach any useful brand assets to this prompt, such as your logo, photos, or brand guidelines.
Refine the details
Once the template reflects your brand visually, refine it section by section.
Adjust the layout, content, imagery, and smaller details so the website becomes more distinctive with every edit.
The goal is to move beyond the original template and create a polished site that feels genuinely unique to your business.
Example prompts for refining the design
Add a new section
Add a new section after the “Our Approach” section. Use a similar layout, but place the image on the right. Give the new section a light gray background to visually distinguish it from the section above it.
Restructure an existing section
Turn the “Our Services” section on the homepage into a 4-tile grid
Example prompts for refining the content
Rewrite the copy using your company story
Here is the story of our company. Write relevant copywriting from what you’ve learn, including in the About page.
OUR STORY
The firm began in 2010, when John Doe left a two-decade career in investment banking convinced that most strategy work stopped at the recommendation and never reached execution. He partnered with Nick Jones, who had built and scaled a venture-backed company from the ground up, to combine institutional depth with operator instinct. Fifteen years later, we advise some of the world’s largest companies through inflection points — expansions, restructurings, and pivots that define the next decade of their business.
Write service pages using your business guidelines
Here are our services. Update the content of the websites and make it match our business, including the CMS content.
OUR SERVICES
- Strategic advisory (flagship) — we help companies pivot their strategy and unlock growth potential, from market entry and portfolio decisions through to execution planning.
- Legal consulting advisory — regulatory, governance, and transactional guidance that supports commercial decisions rather than slowing them.
- Operational performance — we work on cost structure, margin, and supply chain to close the gap between strategic intent and operating reality.
- Mergers and acquisitions — diligence, valuation, and integration planning for transactions that have to hold up years after the close.
- Organization and leadership — we design operating models, reporting structures, and succession plans that let large organizations move at the pace their strategy requires.
- Technology and data advisory — we assess systems and data infrastructure against commercial objectives, and sequence modernization so it pays for itself along the way.
Create helpful, SEO-ready blog posts
Using every information you know about our company, write 6 relevant blog posts that could help with SEO. Use relevant keywords for our context, but the articles should feel natural to read.
PUBLISH YOUR SITE
Review your site
When your website is nearly ready, run through this quick checklist before you make it public.
Before you click Publish
Make sure all website copy is clear and consistent with your tone of voice
Check every page for visual bugs and design inconsistencies
In the Settings, confirm that your site title, description, and favicon are complete
Test every link on your website and confirm that each one works
If everything looks good…
You can click “Publish”.
Framer will publish your website to a free subdomain ending in “.framer.app”. Use this link to preview the site in a browser.
Connect domain
Once your website is ready, you can publish it under your own domain name. Here’s how to finish the setup.
Choose a Framer hosting plan
Framer offers several hosting plans for different feature and traffic needs. Most templates works with every Framer plan.
To compare your options, open “Settings” → “Plans.”
Connect your custom domain
To connect a domain you own, open “Settings” → “Domains.”
The process is straightforward, but if this is your first time, follow Framer’s step-by-step tutorial here.
AFTER LAUNCH
Site analytics
Once your website is live, use these practical tips to understand its performance and get more value from it.
Use the Framer built-in Analytics
Framer includes built-in analytics, so you do not need to install anything.
Open “Analytics” to view useful information about visitor behavior, including average session duration and bounce rate.
Connect Google Analytics
If you want to use Google Analytics with your Framer website, connect it from Settings.
Paste your Google Analytics measurement code directly into the “Google Analytics” field.
Monitor SEO & AEO
Paste your website URL into any of these tools to get a quick overview of your search visibility and the improvements you should prioritize. Treat the scores as guidance: different tools use different methods, so focus on issues that appear repeatedly.
Useful tools to monitor SEO
SEOptimer — runs a quick technical and on-page SEO audit with clear recommendations.
Semrush SEO Checker — highlights important SEO issues and explains how to fix them.
SEO Site Checkup — provides a straightforward report covering common technical and content problems.
Useful tools to monitor AEO
Framer AEO — analyzes how well your website is prepared for AI search and highlights opportunities to improve.
AEOCheck — reviews AI visibility, structured data, and whether answer engines can understand your pages.
GeoLens — produces a quick AI visibility score with prioritized improvements.
Monitor performance
A fast, reliable website is easier to use and more likely to convert visitors. Check performance after launch and whenever you add new pages, images, or animations.
Run a performance test
Use Google PageSpeed Insights to test your homepage and most important pages on mobile and desktop. Focus on the issues marked as most impactful instead of chasing a perfect score.
Keep the site lightweight
Resize large images before uploading them, avoid unnecessary animations and third-party scripts, and retest after major changes. If a page becomes slower, simplify the elements causing the delay.