The beginner's guide

Build your first website with Pitchpage

Pitchpage turns a single link into a complete, good-looking website. You paste a link, Claude researches the business and writes the words, you pick one of 13 designs, and you download a site that's ready to put online. Add extra pages, ready-made sections, your own pictures and an email sign-up form whenever you like. No coding, and no web design experience needed.

This guide walks you through every screen in the order you'll use them, with pictures. The 1 pink numbers on each screenshot match the numbered notes underneath it.

The whole process in six steps

Pitchpage has six tabs along the top of the left-hand panel. Work through them from left to right. Only the first step is required: after it you already have a finished site, and everything else is polishing.

Above the preview there's also an ✎ Edit on page button. Switch it on to click any text in the preview and type over it, and to move, add or hide sections right on the page. It's explained in Edit on the page.

What you can make

What you'll need

If you want to collect email addresses, you'll also need an account with an email provider (an "autoresponder") such as Mailchimp, Kit, MailerLite or AWeber. That's optional too.

Getting set up

1. Open Pitchpage

There are two ways to use Pitchpage. Both have exactly the same features. The only difference is how Pitchpage connects to Claude, which does the research and writing.

1. API key. Paste the key that starts with sk-ant-. It's stored only in your browser and is never put into the websites you make.
2. Model. Leave this on Sonnet. Choose Haiku for faster, cheaper builds, or Opus for the most polished writing.
3. Save key. On a shared computer, press Forget key when you've finished.

1Step one of six

2. Build your site

Here's what Pitchpage looks like. The controls are on the left, and a live preview of your website is on the right. Everything you change appears in the preview straight away.

1. The six tabs. Build, Design, Content, Images, Sign-up and Export. Work left to right.
2. Live preview. This is your website. Click buttons inside it to see where they go, and click the dashed + buttons to add pictures.
3. Desktop / Mobile. Switch to see how your site looks on a phone. The ✎ Edit on page button sits next to these.
4. Download website. Available at any time, from any tab.

Fill in the Build tab

1. What are you building? Choose Affiliate site if you earn commission by sending people to another company. Choose Page for my own site if you're promoting your own business.
2. Website you're promoting. The company's homepage or the product page. It's optional for affiliates, but it helps Claude's research.
3. Affiliate link. Paste the full link from your affiliate programme. Every button on your site will use this link, so you earn commission on every click.
4. Link check. Pitchpage reads your link and shows the network (Amazon, Awin, ClickBank and so on), the shop it leads to, and your tracking ID. If something looks wrong here, check the link.
5. Copywriting skill. Choose how the words are written, or give Claude your own copywriting rules. See Choose a copywriting style below.
6. What should Claude know? The most important box. Claude can't visit web pages, so paste in the facts: what you're promoting, who it's for, key features and any offers.
7. Research & build site. Press this when you're ready.

The optional settings in the middle are worth a look:

Choose a copywriting style

The Copywriting skill box decides how Claude writes every word on your site. You don't have to change anything: the recommended style works well for most sites.

1. Writing approach. Pick a built-in style:
   · Pitchpage pro copywriter (recommended): benefits before features, specific details instead of hype, honest about trade-offs.
   · Direct response: the classic AIDA and PAS sales structures (grab attention, build desire, ask for action).
   · Story-led and conversational: opens with a relatable moment and reads like a letter from a friend.
   · Premium brand voice: calm, understated, no hype.
   · Helpful, search-friendly content: answers what buyers search for, using the keywords from the research.
2. Your own copywriting skill. Paste in your own rules, a brand style guide or a Claude skill file. Claude follows it for every piece of writing, together with the style above. Choose Only my own skill below to use just yours.
3. Upload skill file. Load a .md or .txt file instead of pasting. The first 14,000 characters are used.

Promoting your own business?

1. Page for my own site. The affiliate link box disappears, and Claude writes as your business ("we" and "our") with no affiliate wording.
2. Your website. Every button goes here. Use a specific page, such as a booking or sign-up page, if you like.

Watch it build

After you press the button, a checklist shows each part as it's written. It usually takes a minute or two.

1. Progress list. Each part (research, headline, design, products, guide) is ticked off as it finishes. If one shows error, just press Research & build again: finished parts are kept and only the missing one is redone.
2. Research brief. What Claude found out: the audience, the selling points, what buyers worry about, and the disclosure your programme expects. Check the confidence label. If it says low, Claude didn't know the business well. Add more facts to the notes box and build again.

2Step two of six

3. Choose a design

Claude has already picked a design to suit your business. You can switch to any of the 13 designs with one click. Your words, pictures, sections and pages all carry over.

1. Claude's pick. The design Claude chose and why. Press Use Claude's design again to go back to it at any time.
2. Design cards. Click any card to switch. Scroll down to see all 13.
3. Keep my colours and fonts. Tick this (at the bottom of the list) before switching if you want to keep your current colours and fonts. Otherwise each design brings its own.

Website designs

Sales Letter

A classic long-form sales letter on a sheet of paper, signed by you, with P.S. lines.

Best for courses, coaching, info products and offers that need persuading.

Designer Letter

The same letter with a bold coloured header, tinted bands, card-style bullets and a styled offer box.

Best for the same offers, when you want a more polished feel.

Bloglook

A magazine-style blog with a featured post, a grid of posts and an About panel. Each post opens on its own page.

Best for content sites, hobbies, travel, food and family.

ProductPose

The product takes centre stage on a bold background, with benefits arranged around it.

Best for one physical product: supplements, skincare, gadgets.

ProductPose 2

A storefront: black menu bar with drop-downs, a big sale banner, a coloured perks band and a product carousel.

Best for fashion, homeware, gadgets and any shop with several products.

Gazette

A front-page newspaper: big masthead, banner headline, ruled columns, a boxed sidebar and vintage adverts.

Best for news-style reviews, "special reports", finance, history and hobbies.

Vintage Press

Cream paper, a script logo, a tall serif headline, handwritten notes and engraving-style drawings.

Best for coffee, craft, artisan food, heritage brands and creative services.

Infographic

A poster-style page with a big two-colour title, icon circles and numbered step cards.

Best for beginner guides, how-tos and side hustles.

Verdict

An authoritative review site with a "top pick" verdict card and a comparison table.

Best for comparing several products: finance, tools, insurance.

Midnight

Dark and techy, with glowing gradients and a terminal-style shortlist.

Best for AI, software, gaming and gadgets.

Squeeze pages

A squeeze page has one job: collecting email addresses. The sign-up form is built right into the page, at the top, and again at the bottom if you leave the closing section switched on. It uses the words and the email provider connection from the Sign-up tab.

Playbook

A huge centred headline with a coloured accent phrase, proof numbers, a one-line form and tilted "peek inside" cards from your guide.

Best for free guides and reports for professionals, agencies and coaches.

Blueprint

A coloured teaser bar, a headline with one coloured word, tablet mock-ups of your free guide and a bold full-width button.

Best for lifestyle, home, food, fitness and beginner freebies.

Horizon

Your own photo fills the whole screen, with a big hand-lettered headline, the form and social icons over it.

Best for travel, personal brands, "coming soon" pages and waiting lists.

2Step two of six, continued

4. Colours, fonts and style

Further down the Design tab you can make any design your own.

1. Colours. Six colours control the whole site: Page, Panels, Text, Soft text, Buttons and Highlights. Click a square to pick a colour, or type a colour code such as #2F5BFF.
2. Quick palettes. One click applies a complete, ready-matched colour scheme.
3. Fonts. Choose one font for headings and one for body text, from over 30 hand-picked Google fonts.
4. Shape and size. Make corners rounder or squarer, text bigger or smaller, and the page narrower or wider.

Add a header banner

A header banner is a strip across the very top of your site, above the menu. It can show your site name as text, or a picture. It appears on every page, and clicking it takes visitors back to the home page. Find it on the Design tab, just below the design cards.

1. Add a header banner. Tick to switch it on.
2. Text or Image. Choose what the banner shows.
3. Height. Slim, Medium, Large or Extra large, or drag the slider for anything in between. The label tells you how tall it will be on desktop and on phones.
4. Title. Leave it blank to use your site name. You can add a subtitle, choose a background (main colour, gradient, dark, light or a dot pattern), centre or left-align the text, and show your logo beside it.

1. Height. Pick a height first. The best image size changes with it.
2. Best image size. The ideal size for this height, e.g. 2400 × 400 px for Medium, plus the smallest size that still looks sharp. It also tells you how much of the image shows on phones, so you know to keep words and logos in the middle.
3. Upload header image. After uploading you'll see your image's size and either "Good fit for this banner" or a warning if it's too small or the wrong shape.
4. How the image fits. Fill the banner may trim the edges (choose whether to keep the top, middle or bottom in view). Show the whole image never crops, and the banner takes your image's own shape. You can also show the title on top of the image.

Extra options for some designs

When you choose certain designs, an extra group of settings appears on the Design tab.

Letter page backgrounds

The two letter designs sit on a "desk" behind the paper. You can give that desk a colour, a texture or a pattern, including graph paper in the colour of your choice.

1. Background style. Plain colour, graph paper (small squares), graph paper with bold lines, dot grid, ruled notebook lines, diagonal pinstripe, linen weave, paper grain, soft check, shade from the top, spotlight glow, dark edges, a colour band at the top or a two-tone diagonal.
2. Preview tiles. Click a tile to try a style. The tiles show your own colours.
3. Pattern / shade colour and Strength. The colour of the lines, dots or shading, and how strong it is: light, medium or strong.
4. Square size. For graph paper, dots, lines and check: from 8 to 32 pixels.

The base colour underneath is the Page colour in the Colours group, so a navy page with white graph lines gives you a blueprint look.

Horizon: your background photo and social links

1. Upload background photo. Use a landscape photo, ideally 2400 × 1600 px (at least 1600 × 1000). Keep the main subject away from the side your text is on.
2. Darken the photo. Slide up until the words are easy to read.
3. Text position and Keep in view. Put the text on the left, centre or right, and choose which part of the photo stays visible when the screen is narrower, such as on phones.
4. Social links. Paste the full address (starting https://) of any of Instagram, Facebook, X, YouTube, TikTok, LinkedIn and Pinterest. Only the ones you fill in appear as icons.

3Step three of six

5. Edit the words

Every word on your site can be changed. There are three ways to do it: ask Claude, click and type on the page itself, or use the forms on the Content tab.

Ask Claude to change things

1. Ask Claude to revise. Describe a change in plain English and press Revise content. For example: "Make it more casual", "Add a section about cleaning", or "Cut the FAQ to four questions".
2. Sections on the page. Untick a section to hide it, and use the ↑ ↓ arrows to change the order. Sections you've added from the library are listed here too, with an Edit button.

Edit on the page

The quickest way to change a word. Press ✎ Edit on page above the preview. Text you can edit gets a dashed outline when you point at it.

1. ✎ Edit on page. Switches editing on and off. While it's on, links in the preview don't open, so you can click button labels to change them too.

1. Click any outlined text: a headline, a paragraph, a list item, a button label, a question.
2. Type your change. Bold text and links inside a paragraph are kept.
3. Press Enter to save, or Esc to cancel. Clicking anywhere else also saves.

Point at any section and a small dark toolbar appears in its top corner:

Use the forms

1. Edit boxes. Each section opens into simple boxes. Type and the preview updates as you go. For lists such as products or questions, use + Add, Remove and the arrows.

Besides the main sections, the Content tab also has:

• Site name & search listing: your site name and tagline, and the title and description shown in Google results.
• Testimonials: add real customer quotes. Claude never makes these up, so this list starts empty.
• Sales letter extras: the "From the desk of" line, greeting, callout box, guarantee, sign-off and P.S. lines.
• Blog posts (Bloglook): edit posts, add new ones, or press Write new posts with Claude.
• Disclosure & footer: the affiliate disclosure. Check that it matches your programme's rules.

Simple formatting

In the larger text boxes you can add a little formatting with these shortcuts:

3Step three of six, continued

6. Add sections

Pitchpage has a library of 18 ready-made sections you can add to any page, in any design. Each one automatically uses your design's fonts and colours, so it always looks as if it belongs.

Add a section

1. On the Content tab, press + Add a section under "Sections on the page". Or, with ✎ Edit on page switched on, press + Section on the toolbar of the section you want it to follow.
2. Pick a section from the library.
3. It appears straight away, filled with sensible starter content. Edit it, or press Write with Claude.

Change a section's settings

1. The section. Added sections are listed under Added sections on the Content tab (or inside their page). Click the name to open it.
2. Items. Plans, cards, steps, people, logos and questions each have their own box. Use + Add, Remove and the arrows. Button links can be left blank to use your main link, or set to another page (#page-about) or any web address.
3. Write with Claude. Claude writes the section to suit your site and copywriting style. Where only you know the answer (prices, names, statistics) it leaves a [placeholder] rather than inventing something.

Every section also has a Background menu: Page colour, Soft tint, Dark or Brand colour. Alternating them gives a long page a pleasing rhythm. Use Show in preview to jump to the section, and Delete section (press twice) to remove it.

3Step three of six, continued

7. Add more pages

Turn your page into a full website. Extra pages use your chosen design, appear in your menu and footer, and can be built from the same library sections. Find Extra pages near the top of the Content tab.

1. Choose a page type from the menu and press Add page.
2. The page opens in the preview, already filled with starter text and sections.
3. Press Write with Claude to have the whole page, and every section on it, written for your business.

1. Write with Claude. Writes the page title, menu label, intro, every section, and the page's search listing in one go. Fill in any [square brackets] before you publish.
2. + Add a section to this page. Opens the same library. Each section on the page has its own settings, arrows to reorder and a delete button.

Each page also has:

• Page title and a short Menu label. Untick Show in menu to keep a page out of the navigation.
• Intro text, which can be left empty on pages built from sections.
• Search listing for this page: its own title and description for Google. These go into the separate page files when you download the .zip.
• ↑ ↓ to set the menu order, Show in preview, and Remove.

4Step four of six

8. Add your images

Every design looks complete without pictures, but your own logo and product photos make a big difference.

1. Choose images. Click to pick photos from your computer, or drag them onto this box. Large photos are shrunk automatically.
2. Where it goes. Choose a spot for each image. The menu lists every spot on your site:
3. Describe the image. A short description, such as "walnut coffee grinder". It helps people using screen readers and helps search engines.

5Step five of six

9. Collect email sign-ups

Build an email list from your site. Pick how the sign-up box looks and where it goes, write the words, then connect it to your email provider (your "autoresponder"). It's all on the Sign-up tab.

1. Add an email sign-up form. Tick to switch it on.
2. Box style. Five styles, from simple to fancy. They're shown below.
3. Where it appears. Choose a position on the page, a pop-up or a sticky bar.

The five box styles

Split and Fancy draw a book cover for you using your free gift's title. To use your own picture, click + Image in the preview, or choose "Sign-up box image" on the Images tab.

Where it appears

Inline boxes also appear at the bottom of your extra pages, and at the end of every post in Bloglook. Visitors who close the pop-up or bar won't see it again for a week.

Write the words

1. What do subscribers get? Describe your free gift, such as "Free grinder buying checklist" or "Weekly deals". Only offer something you can really send. Squeeze pages show this on the page and on the guide's cover.
2. Write the sign-up text with Claude. Fills in every box below in your copywriting style. If you haven't named a free gift, Claude writes it as a newsletter rather than promising a download.
3. Headline. Edit any of the words: the small label, headline, text, button, privacy note and thank-you message. You can also ask for the visitor's first name.
4. Benefit points. One per line. Used by the Card, Split and Fancy styles.

Connect your email provider

1. Paste the form code. In your email provider, open the sign-up form you want to use and look for Embed, Embedded form, Publish or HTML code. Copy all of it and paste it here. It works with Mailchimp, Kit (ConvertKit), MailerLite, AWeber, GetResponse, Brevo and others.
2. Connection check. Pitchpage reads where the form sends emails and shows, for example, "Connected to Mailchimp". Your form keeps your site's style but still sends every sign-up to your list.
3. Use my provider's own form design. Tick this to keep your provider's look instead. It's switched on automatically if your provider only gives you a script.

6Step six of six

10. Download your site

When you're happy, download your website. Everything (text, styles, pictures) is packed into the file, so there's nothing else to upload.

1. Before you publish. A quick checklist. A tick means it's done, and ! means it needs a look. The first line tells you how many links use your affiliate link, and if you've added a sign-up form it checks that it's connected.
2. Download website (.html). Saves your site as one file. Double-click it to open it in your browser. Any extra pages are built into this one file.
3. Download as separate pages (.zip). Appears once you've added an extra page. You get one file per page (index.html, about.html, pricing.html and so on), each with its own title and description. Search engines prefer this.
4. Save project (.json). Saves your work in progress, including settings, sections, pages and images, so you can carry on later or on another computer with Open project….

Check it on a phone

Most visitors will be on a phone. Before you publish, press Mobile above the preview to check.

1. Mobile. Shows your site at phone size. Press Desktop to switch back.

After Pitchpage

11. Put your site online

Your downloaded file works with almost any web host. The simplest free option is Netlify Drop:

1. Make a new folder on your computer and put your downloaded file in it.
2. Rename the file to index.html. Web hosts look for this name as the home page.
3. Go to app.netlify.com/drop in your browser.
4. Drag the folder onto the page. In a few seconds you'll get a web address for your live site.
5. Create a free Netlify account to keep the site online and, if you like, connect your own domain name.

Other hosts that work the same way include Cloudflare Pages and GitHub Pages. If you already have a website host, upload index.html using its file manager.

Troubleshooting

13. If something goes wrong

Jargon buster

14. Words explained

Affiliate link

A special link from an affiliate programme that tracks visitors you send, so you earn commission on sales.

Affiliate programme

A scheme where a company pays you for sales you refer. Often run through a network such as Amazon Associates, Awin or ClickBank.

Bridge page

A short page that warms visitors up before sending them on to the shop.

Squeeze page

A page with one goal: getting visitors to sign up with their email address.

Lead magnet

A free gift, such as a checklist or guide, offered in return for an email address.

Autoresponder

An email service, such as Mailchimp or Kit, that stores your subscribers and sends them emails.

Disclosure

A short statement telling visitors you may earn money from your links.

Hero

The big area at the very top of a website, with the main headline and button.

Section

One horizontal block of a page, such as the pricing table or the questions.

Header banner

A strip across the very top of your site showing your name or a picture.

Cut-out

A product photo on a plain white or transparent background, with nothing else in the picture.

Embed code

A snippet of code from another service (a form, widget or map) that shows its content on your page.

Search listing

The title and short description Google shows for your page.

HTML file

The file a website is made of. Pitchpage gives you one file that contains everything.

ZIP file

A single file that holds several files. Unzip it to get them back as a folder.

API key

A private password that lets Pitchpage use Claude through your Anthropic account when it runs outside claude.ai.

Alt text

A short description of an image, for people who can't see it and for search engines.

Web host

A service that puts your website file online so people can visit it.

Pitchpage beginner's guide · Screenshots show an example site for a fictional coffee grinder brand.