[How to customize]

MAKE PD PAUL YOURS

This guide shows the three ways to change PD Paul: build new pages with Framer’s AI agent, edit text and images by hand, and look up any colour, text style or component on the Design System page.

Get the template

Step one

01

Template

Step one

START WITH YOUR OWN COPY OF THE STUDIO SITE.

START WITH YOUR OWN COPY OF THE STUDIO SITE.

(001)

Click “Buy PD Paul” in the bottom right corner of any page and pick the licence that suits you.

(002)

After checkout you get a Remix link. Open it and Framer copies the whole site into your own workspace: pages, CMS, components and styles.

(003)

Rename the project, change the copy and images, connect your domain in Site Settings, then publish.

Build with the agent

Step two

02

Agent

Step two

TYPE /DESIGN-SYSTEM, DESCRIBE THE PAGE, AND THE AGENT BUILDS IT IN PD PAUL’S STYLE.

TYPE /DESIGN-SYSTEM, DESCRIBE THE PAGE, AND THE AGENT BUILDS IT IN PD PAUL’S STYLE.

The template comes with a skill called design-system. It tells Framer’s AI agent which colours, text styles, components and spacing PD Paul uses, so new pages match the rest of the site. You can read or change the skill in Site Settings, under Skills.

Poster for the PD Paul walkthrough video

[WALKTHROUGH VIDEO · SOON]

01

OPEN THE AGENT

Open your copy of PD Paul in Framer and start a chat with Framer’s AI agent.

02

TYPE /DESIGN-SYSTEM

Begin your message with /design-system. The agent reads PD Paul’s rules before it changes anything.

03

DESCRIBE THE PAGE

Say what you need in plain words: the page, its sections and the real content. Then check Desktop, Tablet and Phone and publish.

[EXAMPLE PROMPTS — COPY ONE AND CHANGE THE DETAILS]

(001)

/design-system Add a project case study page for “Harbour House”: a full-width hero image, a facts row (location, year, area, team), a gallery of six photos and a short story of the build.

/design-system Add a project case study page for “Harbour House”: a full-width hero image, a facts row (location, year, area, team), a gallery of six photos and a short story of the build.

Case study

(002)

/design-system Add a new service called “Interior Architecture” to the Services collection, with a detail page that uses the same layout as the other services.

/design-system Add a new service called “Interior Architecture” to the Services collection, with a detail page that uses the same layout as the other services.

Service

(003)

/design-system Add a team member, “Sofie Lind, Senior Interior Designer”, to the team on the About page, with a portrait and a two-line bio.

/design-system Add a team member, “Sofie Lind, Senior Interior Designer”, to the team on the About page, with a portrait and a two-line bio.

Team

(004)

/design-system Add an Awards and Press section to the About page: a list of awards with year and project, then three short press quotes.

/design-system Add an Awards and Press section to the About page: a list of awards with year and project, then three short press quotes.

Awards & press

(005)

/design-system Create a Careers page: a short intro, open roles as a list (title, location, type), what working at the studio is like, and an apply link.

/design-system Create a Careers page: a short intro, open roles as a list (title, location, type), what working at the studio is like, and an apply link.

Careers

(006)

/design-system Add a Materials section to the Home page that shows four materials we use (concrete, oak, travertine, linen), each with a photo and one line.

/design-system Add a Materials section to the Home page that shows four materials we use (concrete, oak, travertine, linen), each with a photo and one line.

Materials

Edit by hand

Step three

03

By hand

Step three

NO AGENT NEEDED FOR SMALL CHANGES.

NO AGENT NEEDED FOR SMALL CHANGES.

Most edits take a few clicks in the Framer editor. Change something once in the right place and every page that uses it follows.

(01)

TEXT

Double-click any text on the canvas and type. The text style stays the same, so sizes match on every breakpoint.

(02)

IMAGES

Select an image and choose a new one in the right panel. The frame keeps its size, so the layout does not move.

(03)

PROJECTS, SERVICES, JOURNAL

Works, Services and Blog live in the CMS. Add an item there and the lists and detail pages update by themselves.

(04)

COLOURS

Open Assets and change Base/Stone or Base/Ink. Every page, card and button that uses the style follows.

(05)

FONTS

Every text uses a text style. Change the font in the styles under Assets and the whole site switches.

(06)

NAVBAR AND FOOTER

Edit the Navbar and Footer components once. Every page shows them through Main Layout.

[04 — DESIGN SYSTEM]

EVERY STYLE, ON ONE PAGE.

EVERY STYLE, ON ONE PAGE.

EVERY STYLE, ON ONE PAGE.

In your copy of PD Paul, open the Design System page in the left panel. Six boards show every colour, text style, component and layout rule with the real values. The agent reads the same rules through the /design-system skill.

00

HOW TO USE

The workflow and six example prompts.

01

COLOURS

Stone, Ink and every style built from them.

02

TYPOGRAPHY

All Geist text styles with sizes per breakpoint.

03

COMPONENTS

Every card, button, list and block, live.

04

LAYOUT RULES

Grid, padding, breakpoints, hover and motion.

05

EXAMPLE PAGE

A Careers page built only from the system.

Buy PD Paul

from

$149

Create a free website with Framer, the website builder loved by startups, designers and agencies.