Startfrom guide · External AI
How to customize a Framer template with an external AI agent
You already have the design. The job now is to make it yours without asking AI to rebuild it from scratch.
This guide uses Sunbeam, a real Startfrom template, to show the external-agent workflow from first connection to final branch review. You will replace the content, update reusable styles, create missing visuals, finish SEO, and keep the template’s responsive system intact. Everything the agent does lands on a separate branch, so your live site cannot change until you review and publish.
Sunbeam case study
15 min read · ~2 h to complete
Updated Jul 2026
SCREENSHOT NEEDED 07
Sunbeam, before and after
Capture the stock Sunbeam hero next to the customized hero from the case-study run. The pair should prove the promise of the guide: same design system, completely different business.
The workflow
The workflow in one minute
The order matters. A single prompt asking AI to “make this template match my business” gives the agent too many decisions at once. Smaller passes are easier to review and easier to undo. And because agent work lands on a review branch, nothing goes live until you approve it.
1
Open your duplicated template and copy its Framer project URL.
2
Connect your agent to that project, or open Framer’s built-in agent.
3
Ask it to inspect the project before changing anything.
4
Give it a short, factual brief about your business.
5
Change one category at a time: copy, colors, typography, then images.
6
Check Desktop, Tablet, and Phone after every meaningful pass.
7
Finish settings, links, forms, analytics, and publishing yourself.
The worked example is the actual Sunbeam project—not a made-up canvas.
Before you start
Pick your agent and know where prompts go
This guide works with any external agent Framer supports: Claude Code, Cursor, and ChatGPT. If you do not have one yet, Claude Code is the easiest place to start. Every tool connects through Framer’s External Agents page.
Prefer zero setup? The guide also works with Framer’s built-in agent: open the agent panel inside the editor and paste the same prompts there. If you go that route, skip Step 01 entirely, the rest works the same.
Wherever it runs, every prompt in this guide goes into the agent’s chat, not into the Framer canvas. Step 07 is the one exception: it runs in ChatGPT Images or any image generator you prefer.
If a pass ever goes wrong, tell the agent to revert its last change, or discard the branch in Framer and start the pass again. Nothing touches your live site until you review and publish.
You’re ready when your agent is installed and Framer’s External Agents page shows your tool as connected.
Step 01
Connect an external agent (optional)
This step is only for external tools like Claude Code, Cursor, or ChatGPT. Using Framer’s built-in agent? Skip straight to Step 02.
First, duplicate the template into your Framer account and open that copy in the editor. The project URL in your browser contains /projects/. Copy the whole URL—not the published site, custom domain, preview link, or marketplace page.
If you have never connected your agent to Framer, open Framer’s External Agents page, choose your tool, and use Copy install prompt. Framer’s setup installs the connection; you do not need to configure a separate MCP server manually.
The first answer should name the correct project and describe what is actually inside it. If the project name is wrong, stop before any edits happen.
You’re done when the agent names your project correctly and lists its pages, styles, and components.
SCREENSHOT NEEDED 01
Copying the project URL
Capture the full browser window with a duplicated Startfrom template open in Framer. Keep the address bar visible and highlight the URL containing /projects/. The project name and editable canvas should remain visible.
Prompt · First connection and inspection
Paste this as your first message. It proves the agent is connected to the right project 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.
SCREENSHOT NEEDED 02
First connection approval
Capture the Framer permission screen shown during the first external-agent connection. Show the project name and the control used to grant access. This state usually requires a fresh project or account connection.
Framer’s official setup page generates the install prompt for Claude Code, Cursor, and other supported tools.
Step 02
Turn your business information into a usable brief
AI cannot replace facts you have not supplied. Before rewriting the website, it needs to know what the business sells, who it is for, what action visitors should take, and which claims are real.
You do not need a worksheet. Let your agent interview you one question at a time, then save the final brief for every later prompt.
This step also reveals missing inputs. If you cannot provide a real testimonial, the correct result is “testimonial needed”—not a fictional customer quote.
You’re done when you have a saved brief made of real facts, plus an honest list of proof still missing.
Prompt · Create the business brief
Run this with your agent. It 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.
SCREENSHOT NEEDED 03
The interview becoming a brief
Capture one real ChatGPT conversation showing an interview question near the top and the resulting structured brief below. Use a real or safely anonymized business so the reader sees that the brief comes from a conversation, not a form.
Step 03
Rewrite one page without breaking the design
Start with Home. Do not ask the agent to rewrite the entire website in one pass. Existing headlines, supporting copy, and CTAs already have layout jobs and responsive behavior; map new content onto those jobs.
Separate the content decision from the Framer operation. First request a proposal only. Correct the facts and approve the sections. Then make a second, tightly scoped implementation request.
You’re done when the Home page reads like your business and nothing is clipped at any breakpoint.
Prompt · Map the existing Home page
A read-only pass: the agent proposes new copy section by section 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
The implementation pass. Run it only after you have corrected and approved the content map.
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.
What to check yourself
The first screen says what the business is and who it is for. The primary CTA stays consistent. Every CTA opens the intended destination. Template claims, customers, and testimonials are removed unless they are true. Mobile headings remain readable instead of merely being shrunk to fit.
Step 04
Change colors through reusable Color styles
Do not ask the agent to “replace every green with blue.” A Framer project can contain reusable styles, component states, gradients, borders, image colors, and local overrides. Blind replacement creates an inconsistent result.
In the real Sunbeam project, reusable colors live under Assets → Styles → Color. The brand group contains several distinct colors, and each can serve a different semantic role.
Approve the mapping by role, not only by swatch. An accent and a success state should not automatically become the same color.
You’re done when every Color style maps to a role in your palette and no weak-contrast pairs remain.
Prompt · Propose a color mapping
Fill in your palette first. The agent maps each existing Color style to a role and waits for approval.
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 through reusable styles and reports anything needing 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
Typography should be changed at the style level, not by editing dozens of individual layers. Sunbeam’s actual Text styles run from H1 through body and small labels under Assets → Styles → Text.
A new font family changes line length, button width, section height, and mobile wrapping even when every size stays the same. Audit the existing type system first, then change the smallest possible set of reusable styles.
You’re done when your fonts are applied through Text styles and nothing wraps or clips on Phone.
Prompt · Change the type system safely
Checks font availability and proposes the smallest possible 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 for wrapping or clipping.
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
Before generating anything, decide what kind of asset you are replacing. Real evidence must stay real; AI imagery is useful when the asset’s job is atmosphere, concept, or decoration.
Do not generate fake product interfaces or fake proof. A polished invented dashboard can make the website less trustworthy than a simple real screenshot.
You’re done when every image slot has a decision: 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 audit of every image on Home, 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
Open ChatGPT, or any image tool you prefer, and upload a screenshot of the target template section plus any visual references you have the right to use. Describe the job of the image, its composition, and the negative space needed for website copy.
If the composition is wrong, edit the generated image instead of restarting with another vague prompt. Keep the materials and lighting; move only what needs to move.
You’re done when you have an image in the right aspect ratio with clean space for your copy.
Prompt · Generate a website image
Run this in ChatGPT with your section screenshot attached. Fill in every bracket before sending.
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.
SCREENSHOT NEEDED 04
Generating the image in ChatGPT
Capture ChatGPT with the target Framer-section screenshot attached, the composition-focused prompt visible, and the chosen result below. A second image can show the Aspect ratio or Save control. Use the real image selected for a template.
Step 08
Let the external agent place the approved image
External agents can work with local files, so give the agent the exact file path and the exact target layer. “Use this image somewhere on the homepage” is not precise enough.
Preserve the existing frame, effects, and responsive layout. The only decisions in this pass are the asset, focal position, fill mode if necessary, and accurate alt text.
You’re done when the new image looks right at Desktop, Tablet, and Phone, and has honest alt text.
Prompt · Replace one image
Gives the agent the exact file and the exact 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.
SCREENSHOT NEEDED 05
Image replacement at Desktop and Phone
Capture the same section at Desktop and Phone after the external agent places the approved image. The two screenshots should make the crop, focal position, and safe area easy to compare.
Step 09
Draft SEO with the agent, then verify it in Framer
The agent can inspect pages, identify missing metadata, and draft titles and descriptions. Some site settings still need manual verification, and external agents cannot read your Framer Analytics data.
After approving the SEO copy, open the relevant Page Settings in Framer and verify the Title, URL, Description, Search Engines setting, and Social Preview image. Then check the site-wide defaults under Settings → General.
For CMS pages, confirm that titles, descriptions, URLs, and social images use the correct CMS fields instead of one repeated static value.
You’re done when every public page has a unique title and description verified in Page Settings.
Prompt · Run a read-only SEO pass
A read-only SEO draft for every public page. You verify the results in Page Settings afterward.
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
A website can look customized while still sending visitors to template destinations. Run one final read-only audit for placeholder content, links, forms, CMS leftovers, metadata, legal pages, and responsive overflow.
Then test the important paths yourself. The agent can inspect configuration, but a real form submission, checkout, phone, domain, and analytics dashboard are the proof that the website works.
You’re done when the must-fix list is empty and you have tested the critical path yourself.
Prompt · Run the launch audit
The final read-only sweep. Everything it finds lands in 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 where the message arrives. Open the primary CTA and complete the next step. Check the site on a real phone. Confirm the custom domain and redirects. Verify analytics and advertising events in their own dashboards. Read every claim as if you were a skeptical customer.
Step 11
Review the branch, then publish
Framer places external-agent changes on a branch, so the published website does not change merely because an agent edited the canvas. One caveat: branches require Framer’s Pro plan or higher. On other plans the agent edits the project directly, so review each pass as it lands and lean on version history if you need to roll back.
Open the branch control beside the project name, review the pending changes, and apply the branch to main only when you are satisfied. Then use Framer’s normal Publish flow and repeat the critical path on the live domain.
You’re done when the branch is applied to main, the site is published, and the live domain passes the same checks.
SCREENSHOT NEEDED 06
Reviewing the agent branch
Capture a real external-agent branch in a duplicated template after a small approved edit. Show the branch name, the Changes area, and the control used to apply the work to main. A second screenshot can show Publish after the branch has been reviewed.
The pattern
One small prompt shape covers everything else
This guide cannot cover every change you will ever want, and it does not need to. Every prompt you copied above is built from the same four parts. When you need something new, write your own request with all four, and it becomes easy for the agent to execute and easy for you to review.
01
Where exactly?
Name the precise place: the project, the page, the section, the layer. “On the Home page, in the Pricing section, the middle card.”
02
What should change?
Ask for one category of change at a time: copy, colors, typography, or a single image. Small passes are easy to check.
03
What must stay?
List what the agent must not touch: the layout, the components, the other pages, anything you did not ask about.
04
What proof do you want?
Say how the agent should prove the result: a summary of what changed, plus a check at Desktop, Tablet, and Phone.
Official references
Keep the source material close
These are the current official pages behind the workflow. Recheck them when Framer or ChatGPT changes its interface.