Design a new page in Claude Design and put it on my site
Some pages are easier to see than to describe. A landing page for a workshop, a page of services with prices, a portfolio laid out the way you picture it. Claude Design lets you look at the page and change it by hand before it goes anywhere near your site.
The prompt
“Read the homepage of my [site name] site for its real colours, fonts, header and footer. Design a new [page name] page in the same style, about [what the page is for]. Show me the design before you put anything on my site.”
Signed in, Get my prompt fills in your site for you. Otherwise press Copy and fill in the [bracketed] parts. First time? Connect your AI to bernard once: Use your own AI (opens in a new tab).
Before you start
Connect Claude to bernard once, from your Account. The connection and what it allows are in What can I do with Claude Design and my bernard site?. If the page is for a new site, make the site in bernard first (see Start a new website - which way in?).
The steps
1. Start from your real site. Ask Claude to read a page you already have, usually the homepage. It takes your real colours, fonts, header and footer. Without this step, Claude designs from its own idea of your brand.
2. Design the new page. Describe it, then change the design by hand or by asking. Keep your header and footer as they are, so the new page matches the rest of your site.
3. Ask Claude to check it with bernard. bernard has rules about what can go on a page. For example, it does not run scripts a design tool writes. The check tells you what will be kept, what will be removed, and what bernard can do instead.
Check this page with bernard before you save it. Tell me what will be removed and what bernard can switch on instead.
4. Put it on your draft as a new page. Give it a page name and ask Claude to add a link to it in your menu if you want one.
Save this as a new page called [page name] on my draft, and add it to the menu after [existing menu item].
5. Look at the preview. On a phone and on a computer. If something is wrong, say what, and Claude changes the draft.
6. Approve. Press Approve in bernard, or ask Claude to publish. Nothing is public before that.
After it is on your site
You can change the words, photos and links on the new page later, in bernard, in your own AI, or back in Claude Design (Can I edit my site in Claude Design and push the changes back?).
The page’s styling arrives inside the page itself. It is not shared with the rest of your site, so a later site-wide change, such as new colours, may not reach it. Ask for a change to this page’s look page by page. The best way to make it match the rest of your site is step 1: start from a real page. To bring it closer to another page later, see Make this page look like my other page.
Questions people ask
- Will the new page look like the rest of my site?
- It will if Claude reads a real page first. Ask it to start from your homepage or another page you like, so it uses your actual colours, fonts, header and footer, not its own idea of your brand. You see the design, then the draft preview, and you approve before it goes live.
- Does anything moving in the design come across?
- Not as code. bernard does not run scripts that a design tool writes. Before the page goes to your draft, ask Claude to check it with bernard. The check says what will be kept and what will be removed, and often names a bernard switch that does the same job, such as a section that opens and closes.
- What about my photos?
- Use photos that are already on your site, or upload new ones to bernard first. In the design they can show as empty slots. Ask Claude for the photo file, not a link, because a link stops working after a few minutes.
- Can I design a whole new site this way?
- One page at a time works best. Make the site in bernard first, design the homepage, approve it, then design the next page from the approved homepage so every page matches.
- Can it change my shop or course pages?
- No. bernard builds those from your products and lessons. Design ordinary pages in Claude Design, and change shop and course details in bernard.