Before you start: gather your brand assets

This is the step most people skip, and it's the reason they end up spending hours instead of minutes. Before you open Framer, have these ready:

• Brand colors: primary, secondary, background, and text colors (hex codes)

• Fonts: heading and body fonts (or close alternatives available in Framer)

• Logo files: light and dark versions if you have them

• Product images: screenshots, photos, or illustrations you want to use

• Copy notes: a sentence or two about what your product does and who it's for

With these in hand, the entire customization process becomes a series of straightforward prompts.

Step 1: Match your brand colors and fonts

This is the single most impactful change. One prompt updates the entire site's visual identity.

Tell the Agent your exact brand values and ask it to apply them to the site's shared styles. For example:

Update the site's shared color and text styles to match my brand. Primary color: [hex]. Background: [hex]. Body text: [hex]. Heading font: [font name]. Body font: [font name]. Apply these to the existing shared styles so every page updates consistently, and don't change the layout.

Because the template already uses shared styles, this one prompt cascades across every page. No need to update colors section by section.

Pro tip: include "adjust the letter spacing accordingly to maintain the current balanced style" in your prompt. Font swaps often throw off spacing, and this catches it upfront.

Step 2: Swap your logo

Attach your logo file to the Agent chat and tell it where to place it:

Replace the logo in the navigation and the footer with the logo I've attached. Keep the current size and position. If the footer uses a different logo version for a dark background, apply the matching version I've attached there.

Being specific about size and position prevents the Agent from resizing your logo and pushing other elements out of place.

Step 3: Rewrite the copy in your voice

This is where the template stops looking like a template. Instead of manually editing every text block, let the Agent rewrite the placeholder copy across a section in one prompt.

Select the section you want to update, then try something like:

Rewrite the placeholder copy in the selected section to describe my product: [a line or two about what it does and who it's for]. Match this tone: [e.g. warm and plain-spoken / direct and technical / friendly and casual]. Keep it about the same length as the current text so the layout doesn't break.

The key detail is "keep it about the same length." Without this, the Agent often writes longer copy that overflows containers and breaks the layout.

Work through your site section by section: hero first, then features, social proof, pricing, and CTA.

Step 4: Replace images

Select the image element on the canvas, attach your replacement, and prompt:

Replace the image in the selected element with the image I've attached. Keep the same crop, size, and position.

Repeat for each image. This is one of the fastest parts of the process because selecting the element first removes all ambiguity for the Agent.

Step 5: Update contact details and links

One prompt handles this site-wide:

Update all contact details and links across the entire site. Email: [X]. Phone: [X]. Address: [X]. Social links: [X]. Replace any placeholder or example values with these.

This catches nav links, footer details, contact pages, and anywhere else the template uses placeholder info.

Step 6: Adjust spacing and corner radius

If the template's default styling doesn't quite match your brand's feel, two quick prompts fix this:

Reduce/Increase the corner radius on all frames, buttons, and images across the site by [X]%. Round each value to the nearest whole number and keep it consistent everywhere.

Review the vertical spacing between sections across the site and make it consistent. Use [X]px of top and bottom padding on every section.

Small adjustments like these take a template from "recognizable" to "looks custom." Sharper corners feel more corporate. Rounder corners feel more friendly. Match it to your brand personality.

Step 7: Run a quick audit

Before you publish, ask the Agent to check for problems:

Audit the site for any remaining placeholder text, broken links, missing images, or inconsistent styles. List everything that needs attention.

This catches things you'd miss on a manual review, especially on pages you forgot to check.

Tips for getting better results

A few things I've learned from customizing templates with the Agent:

• Select the layer or section first before prompting. The more context the Agent has, the fewer mistakes it makes.

• Use @ mentions to reference your existing styles and pages directly in the prompt.

• Work in a branch for big changes so you can review everything before it goes live.

• Be specific. Exact hex codes, font names, and pixel values get better results than vague descriptions like "make it more modern."

• One task per prompt. Don't ask the Agent to change colors, swap images, and rewrite copy in the same prompt. Break it up.

Start for free

You can get started with a free Framer template from Lunis Design and follow the steps above to customize it for your brand. Every Lunis Design template also comes with ready-to-use prompting guides that walk you through each customization step, so you don't have to figure out what to ask the Agent on your own.

Pick a template. Bring your brand assets. Let the AI Agent handle the rest. Your site can go from template to branded and live in under an hour.