Startfrom guide · AI Agents
How to customize a Framer template with an AI agent
You have the design. Now make it yours—without asking AI to rebuild it.
This guide uses Sunbeam, a Startfrom template, to show the workflow from connection to launch. You’ll rewrite content, update styles, create visuals, finish SEO, and preserve the responsive system. Branches require Framer Pro or Enterprise; lower plans apply edits directly.
One guided run apart: stock Sunbeam left, Ledgerly right. Same layout, same components, different business.
The workflow
The workflow in one minute
Work in passes. One ‘make this template match my business’ prompt creates too many decisions. Change one system at a time so every result is easy to review and undo.
1
Open your duplicated template and copy its Framer project URL.
2
Connect your agent—or open Framer’s built-in agent.
3
Ask it to inspect the project before editing.
4
Give it a short, factual business brief.
5
Work in passes: copy, colors, typography, then images.
6
Check Desktop, Tablet, and Phone after each pass.
7
Test settings, links, forms, analytics, and publishing yourself.
The worked example is the actual Sunbeam project—not a made-up canvas.
Before you start
Choose your agent
Use Claude Code, Cursor, or ChatGPT. New to external agents? Claude Code is the simplest place to start. Connect from Framer’s External Agents page.
Want zero setup? Use Framer’s built-in agent. Paste the same prompts into the editor and skip Step 01.
Paste each prompt into the agent chat. The only exception is Step 07, which runs in ChatGPT Images or another image generator.
If a pass goes wrong, ask the agent to revert it. With a branch, discard the branch; without one, use version history. Your live site changes only when you publish.
You’re ready when your external tool is connected—or Framer’s built-in agent is open.
Step 01
Connect an external agent (optional)
Using Framer’s built-in agent? Skip to Step 02.
Duplicate the template and open your copy. Copy the browser URL containing /projects/—not the live site, preview, custom domain, or marketplace URL.
First time? Open Framer’s External Agents page, choose your tool, and select Copy install prompt. Framer handles the connection.
The first reply should name the correct project and summarize what is inside. If the name is wrong, stop.
You’re done when the agent names the correct project and lists its pages, styles, and components.
Prompt · First connection and inspection
Send this first. It confirms the connection before anything changes.
I want to customize my own copy of this Framer project:
[PASTE YOUR FRAMER PROJECT URL]
Connect to the project and confirm its name.
Before changing anything, give me a short project map containing:
- the pages and CMS pages
- the main reusable components
- the existing Color styles
- the existing Text styles
- any code components or overrides that could be easy to break
Do not edit or publish anything yet.
Framer’s official setup page generates the install prompt for Claude Code, Cursor, and other supported tools.
Copy the full project URL from the address bar, or use Copy Project Link from the tab menu.
The first connection asks you to approve edit access to your copy. Nothing runs before you click Approve.
Step 02
Turn your business information into a usable brief
AI can only work with facts you provide. Give it the offer, audience, desired action, and real proof.
No worksheet needed. Let the agent ask one question at a time, then save the brief for later prompts.
Missing proof is useful information. Write “testimonial needed”—never invent one.
You’re done when you have a factual brief and an honest list of what is still missing.
Prompt · Create the business brief
The agent interviews you, then turns your answers into a reusable brief.
I am adapting a Framer template for my business.
Interview me one question at a time. Ask no more than ten questions in total.
You need to learn:
- what the business sells
- who the primary customer is
- the problem that brings them to the website
- the outcome the offer provides
- what is included and what it costs, if the price is public
- the primary call to action and its real destination
- the proof, customers, reviews, or results I can genuinely show
- the pages I need
- the tone of voice
- any claims, industries, or legal wording that require care
When the interview is complete, return:
1. A one-paragraph business summary.
2. A concise audience and positioning statement.
3. Confirmed proof and a separate list of proof still missing.
4. The primary and secondary calls to action with destinations.
5. A page-by-page content priority.
Do not write website copy yet. Do not invent facts, clients, metrics, reviews, or credentials.
The interview ends as a structured brief: summary, positioning, confirmed proof, and an honest list of what is still missing.
Step 03
Rewrite one page without breaking the design
Start with Home. Every headline, body block, and CTA already has a layout job. Fit the new content to that structure instead of rewriting the whole site.
Separate writing from implementation: approve a read-only content map, then apply it in a second pass.
You’re done when Home sounds like your business and nothing clips at any breakpoint.
Prompt · Map the existing Home page
A read-only, section-by-section copy proposal for your approval.
Project:
[PASTE YOUR FRAMER PROJECT URL]
Here is my approved business brief:
[PASTE THE BUSINESS BRIEF]
Inspect the existing Home page without editing it.
Create a section-by-section content map with these columns:
- existing section and its purpose
- keep, change, or remove
- proposed headline
- proposed supporting copy
- proposed CTA label and destination
- business information or proof still missing
Preserve the current section order and reusable components unless there is a clear reason not to.
Keep proposed headings reasonably close to the visual length of the current headings.
Do not invent testimonials, customer logos, metrics, awards, integrations, or product capabilities.
Do not change the project yet.
Prompt · Apply the approved copy
Run this only after the content map is corrected and approved.
Apply the approved content map to the Home page only.
Change only:
- visible copy
- CTA labels
- CTA destinations I supplied
Reuse the existing sections, components, and Text styles.
Do not change colors, fonts, layout, spacing, images, CMS content, or other pages in this pass.
Do not detach component instances.
After applying the copy, check Desktop, Tablet, and Phone for:
- clipped text
- awkward heading wraps
- overflowing buttons
- fixed-height sections that no longer fit
Summarize what changed and anything that still needs my decision.
Do not publish.
Sunbeam’s hero after the Ledgerly copy pass: same sections and components, a different business.
What to check yourself
The first screen explains the business and audience. The primary CTA stays consistent and every CTA reaches the right destination. Remove template claims, customers, and testimonials unless they are true. Keep mobile headings readable—not merely smaller.
Step 04
Change colors through reusable Color styles
Change colors through reusable styles—not by replacing every green pixel. A project also contains states, gradients, borders, images, and local overrides.
In Sunbeam, reusable colors live in Assets → Styles → Color. Each brand color should have a distinct role.
Map colors by role, not swatch. Accent and success are different jobs.
You’re done when every Color style has a clear role and all text/background pairs pass contrast checks.
Prompt · Propose a color mapping
Add your palette. The agent maps each Color style to a role, then waits.
Inspect the reusable Color styles in this Framer project.
Do not change them yet.
My brand palette is:
- primary: [HEX]
- secondary: [HEX]
- page background: [HEX]
- surface background: [HEX]
- primary text: [HEX]
- muted text: [HEX]
- border: [HEX]
- success, warning, and error colors, if defined: [HEX OR KEEP EXISTING]
Return a mapping from each existing Framer Color style to the proposed value.
For each style, tell me what role it currently serves and which major components use it.
Flag:
- text/background combinations with weak contrast
- colors embedded inside images, logos, gradients, or code components
- one-off local colors that do not use a reusable style
Wait for my approval before editing.
Prompt · Apply the approved colors
Applies the approved mapping and flags anything that needs a separate decision.
Apply the approved color mapping by updating the existing reusable Color styles.
Do not create duplicate styles when an existing style already serves the role.
Do not change colors inside logos, product screenshots, photos, or decorative raster images.
Do not replace error or warning colors unless they were included in the approved mapping.
Check the Home page and shared components at Desktop, Tablet, and Phone.
Pay special attention to buttons, hover/focus states, navigation, cards, form fields, borders, and text contrast.
Return a list of:
- Color styles changed
- local color overrides still present
- images or code components that need a separate decision
Do not publish.
Sunbeam’s actual reusable brand colors in the Framer Assets panel.
Step 05
Change typography through Text styles
Change type through reusable styles—not dozens of individual layers. Sunbeam organizes H1 through labels in Assets → Styles → Text.
A new font changes line length, button width, section height, and mobile wrapping. Audit first; change the smallest possible set of Text styles.
You’re done when fonts use Text styles and nothing wraps or clips on Phone.
Prompt · Change the type system safely
Checks font availability and proposes the smallest safe Text-style change.
Inspect the reusable Text styles in this project and where they are used.
Do not edit yet.
I want to use:
- heading font: [FONT NAME]
- body font: [FONT NAME]
First confirm that the fonts are available in Framer or explain what file or license I need to supply.
Then propose the smallest Text-style mapping needed.
Keep the existing hierarchy, font sizes, line heights, and weights on the first pass unless the new font creates a clear problem.
Flag text layers that use local typography instead of a reusable style.
Wait for approval.
Prompt · Apply the approved typography
Applies the approved fonts and checks every breakpoint.
Apply the approved font-family changes to existing reusable Text styles only.
Do not create local font overrides.
Do not change copy, colors, layout, or images.
Check navigation, buttons, the Home hero, cards, forms, footer, and all three breakpoints for wrapping or clipping.
If a component breaks, explain the smallest responsive adjustment needed before making it.
Do not publish.
Sunbeam’s real reusable Text styles in Framer.
Step 06
Decide which images should be real and which can be generated
First decide what each image must do. Keep evidence real; use AI for atmosphere, concepts, or decoration.
Never generate fake interfaces or proof. A simple real screenshot earns more trust.
You’re done when every image is marked: keep, replace with a real asset, or generate.
Keep real
Evidence and identity
Product screenshots · customer logos · testimonials and avatars · team or founder photography · certifications, awards, and evidence.
Good for AI
Atmosphere and concept
Abstract hero art · decorative backgrounds · conceptual illustrations · textures and supporting visual motifs.
Prompt · Create an image inventory
A read-only Home-page image audit with a keep, replace, or generate recommendation.
Inspect the Home page images without changing anything.
Return an image inventory containing:
- section and layer name
- what the image communicates
- current pixel dimensions or aspect ratio
- frame dimensions
- fill mode and focal position
- whether it needs useful alt text or should be decorative
- how it crops on Desktop, Tablet, and Phone
- recommendation: keep, replace with a real asset, or suitable for AI generation
Do not replace or delete any images yet.
Step 07
Generate an image in ChatGPT for a specific slot
Upload a screenshot of the target section plus references you can use. Specify the image’s job, composition, aspect ratio, and negative space for copy.
Refine the chosen image instead of starting over. Keep what works; move only what does not.
You’re done when the image has the right ratio and clean space for your copy.
Prompt · Generate a website image
Run this in ChatGPT with the section screenshot attached. Fill every bracket first.
I am replacing one image in a Framer website template.
The first attachment is a screenshot of the target section.
Use it only to understand the available space, copy placement, and crop.
The other attachments are approved brand references.
Create one [ASPECT RATIO] image for [PAGE + SECTION].
The image should communicate:
[THE IDEA OR OUTCOME]
Subject and visual treatment:
[SUBJECT, MEDIUM, MATERIALS, CAMERA, OR ILLUSTRATION STYLE]
Composition:
- place the main visual weight on the [LEFT / CENTER / RIGHT]
- keep clean negative space on the [LEFT / CENTER / RIGHT] for website copy
- keep the important subject inside a safe central area for mobile cropping
Palette and lighting:
[BRAND COLORS, BACKGROUND, LIGHTING]
Do not include:
- words or interface labels
- logos or watermarks
- fake dashboards
- charts, customer logos, awards, or proof
- additional objects not requested
Generate the image only. Do not add a website mockup around it.
ChatGPT receives the section screenshot and filled prompt, then returns the asset. This run produced Ledgerly’s layered-paper mark.
Step 08
Let the external agent place the approved image
Give the agent the exact file path and target layer. “Use this image somewhere on the homepage” is not an instruction.
Change only the asset, crop, focal point, fill mode if needed, and alt text. Keep the frame, effects, and responsive layout.
You’re done when the image works at every breakpoint and has honest alt text.
Prompt · Replace one image
Names the exact file and target so only one image changes.
Project:
[PASTE YOUR FRAMER PROJECT URL]
Approved local image:
[PASTE THE FULL LOCAL FILE PATH]
Target:
[PAGE / SECTION / LAYER FROM THE IMAGE INVENTORY]
Replace only that target image.
Preserve the existing frame, dimensions, border radius, effects, and responsive layout.
Use the existing fill mode unless the new composition clearly requires another one.
Set the focal position so the important subject remains visible on Desktop, Tablet, and Phone.
Alt text:
[PASTE USEFUL ALT TEXT, OR STATE THAT THE IMAGE IS DECORATIVE]
Do not change copy, styles, components, or other images.
Do not delete the old asset until I approve the result.
Show or describe the result at all three breakpoints and tell me if the source image needs a different crop.
Do not publish.
The hero after the swap, checked across breakpoints before touching anything else.
Step 09
Draft SEO with the agent, then verify it in Framer
The agent can audit metadata and draft titles and descriptions. You still need to verify Page Settings; external agents cannot read Framer Analytics.
After approval, verify Title, URL, Description, Search Engines, and Social Preview in Page Settings. Then check site-wide defaults in Settings → General.
For CMS pages, bind titles, descriptions, URLs, and social images to the correct fields—not one static value.
You’re done when every public page has a unique title and description verified in Framer.
Prompt · Run a read-only SEO pass
Drafts SEO for every public page. You verify it in Page Settings.
Audit the public pages in this Framer project for launch SEO.
Do not edit anything.
For each page, return:
- page purpose
- current URL
- proposed unique page title
- proposed meta description
- one clear H1 recommendation
- social-preview image needed
- whether the page should be indexed
- missing internal links or obvious duplicate metadata
Use only the approved business brief and existing page content.
Do not invent locations, services, proof, or keywords that the business does not support.
Keep titles and descriptions concise enough to read well in Framer’s preview.
Page Settings is where the page-specific title, URL, description, indexing, and social image are verified.
Settings → General contains the site-wide title, language, default description, accessibility preference, favicon, and social image.
Step 10
Finish the paths that make the website real
Customization is not finished if links still lead to the template. Audit placeholders, navigation, forms, CMS, metadata, legal pages, and responsive overflow.
Then test the real journey yourself. Inspection cannot prove that forms, checkout, phone links, domains, or analytics actually work.
You’re done when the must-fix list is empty and the critical path works end to end.
Prompt · Run the launch audit
A final read-only sweep, returned as a prioritized fix list.
Run a launch audit of this Framer project.
Do not edit or publish anything.
Check for:
- template placeholder copy
- template company names, metrics, testimonials, logos, and avatars
- navigation and footer destinations
- primary and secondary CTA destinations
- mailto and telephone links
- forms, required fields, success states, and delivery destination
- demo CMS items or empty CMS states
- missing image alt text
- missing page titles, descriptions, or social images
- horizontal overflow or clipped content at Desktop, Tablet, and Phone
- terms, privacy, contact, and 404 pages
Return three groups:
1. Must fix before launch.
2. Should fix soon.
3. Optional later improvements.
Human check
Test the critical path yourself
Submit the real form and confirm delivery. Complete the primary CTA. Check the site on a real phone. Verify the domain, redirects, analytics, and ad events. Read every claim like a skeptical customer.
Step 11
Review changes, then publish
External-agent edits use a branch on Framer Pro or Enterprise. On lower plans, changes land directly in the project.
With a branch, review Changes and apply it to main. Without one, review each pass in the canvas and use version history to roll back. Then publish and repeat the critical path on the live domain.
You’re done when the work is reviewed, the site is published, and the live domain passes the same checks.
The branch panel lists every agent branch and its changes. Merge to main only when you are satisfied.
The pattern
Four details make any prompt work
Every prompt above uses the same four parts. Use them for any new request and the result stays easy to execute—and easy to review.
01
Where exactly?
Name the project, page, section, and layer. The fastest method is Copy ID in Framer: paste the ID into your prompt so the agent knows the exact element.
02
What should change?
Ask for one kind of change—copy, color, typography, or one image—and add useful visual or written references. Small passes are easier to review.
03
What must stay?
Name what must not change: layout, components, other pages, or anything outside the request.
04
What proof do you want?
Ask for a change summary and a check at Desktop, Tablet, and Phone.
Official references
Keep the source material close
Official references for this workflow. Recheck them when Framer or ChatGPT changes.
