Start with a Framer template

The blank canvas is the most expensive screen in Framer. Every hour spent deciding a container width or a heading size is an hour not spent on the content that actually sells your work.

This is how we think a template should be used in 2026: as a launch system you edit by hand, steer with prompts, or hand to a coding agent entirely.

Templates as launch systems

A Startfrom template is several hundred small decisions that have already been made and tested: page rhythm, conversion sections, responsive defaults, and CMS patterns that already know what they are doing.

You are not buying pixels. You are buying the part of the project that usually eats the first two weeks:

• Container widths, type scale, and spacing rhythm, already consistent across pages.

• Sections that collapse correctly on tablet and phone.

• CMS collections bound to layouts, so content edits never touch design.

The prompt pack

Each release ships with a prompt pack: short, tested prompts for rewriting copy and generating imagery that stays inside the template’s art direction. Here is the shape of a copy prompt from Parley:

The constraint about structure is the important line. It keeps AI edits inside the layout system instead of inventing new sections that break the responsive passes.

Code components, when you need them

Templates stay native Framer wherever possible, but each one includes a small code override you can extend. This is the entire hover-lift override that ships with Marby:

import type { ComponentType } from "react"

export function withHoverLift(Component: ComponentType): ComponentType {
    return (props) => (
        <Component
            {...props}
            whileHover={{ y: -4, transition: { duration: 0.25 } }}
        />
    )
}

import type { ComponentType } from "react"

export function withHoverLift(Component: ComponentType): ComponentType {
    return (props) => (
        <Component
            {...props}
            whileHover={{ y: -4, transition: { duration: 0.25 } }}
        />
    )
}

import type { ComponentType } from "react"

export function withHoverLift(Component: ComponentType): ComponentType {
    return (props) => (
        <Component
            {...props}
            whileHover={{ y: -4, transition: { duration: 0.25 } }}
        />
    )
}

Vibe coding a standalone build

Some projects outgrow a website builder. The prompt pack includes a handoff prompt that turns the template into a standalone Next.js build in Claude Code, Codex, or whatever tool you prefer:

npx create-next-app@latest mysite --typescript --tailwind
cd mysite
claude "Rebuild the attached Framer template as this Next.js app.
Keep the type scale, spacing tokens, and section order exactly.
Self-host the fonts. Ship responsive at 1200 / 810 / 390."

npx create-next-app@latest mysite --typescript --tailwind
cd mysite
claude "Rebuild the attached Framer template as this Next.js app.
Keep the type scale, spacing tokens, and section order exactly.
Self-host the fonts. Ship responsive at 1200 / 810 / 390."

npx create-next-app@latest mysite --typescript --tailwind
cd mysite
claude "Rebuild the attached Framer template as this Next.js app.
Keep the type scale, spacing tokens, and section order exactly.
Self-host the fonts. Ship responsive at 1200 / 810 / 390."

We used exactly this path to rebuild a client site as a custom Next.js app in a week, self-hosted fonts and all. The template is the spec; the agent does the typing.

Edit, then publish

The workflow is deliberately short:

1. Duplicate the template into your workspace.

2. Replace the copy and images, by hand or with the prompt pack.

3. Adjust color tokens and type styles if the brand needs it.

4. Connect a domain, run the publish checklist, and go live.

Most Startfrom users publish the same day. The adaptation video walks through every step on a real duplicate, so the path from copy to published never depends on guesswork.