Editing a Bernard site from Claude Design - see the change on the real page before it goes anywhere

Bernard moved your site. Now the content needs work: a headline that is not landing, copy that reads like it was written for a different buyer, a section in the wrong order. You can do that in Bernard's own editor. You can also do it from Claude, which is useful when you want to see the change in context before it goes anywhere near your live site.

This is how that setup works, and what to actually type.

What you get

Claude can read your Bernard site, rebuild a page as an editable design file, let you push individual changes back, and publish when you say so. The useful part is the middle: you edit a faithful copy of the page, not a wireframe, and the changes you make map back to specific elements on the real thing.

Connecting the two

Think of it as introducing Claude to your site once, and giving it a specific, limited set of permissions, the same way you would add a new person to your team's tools.

You do this from your account settings. You approve the connection, and from then on Claude can see the sites you can see. With Claude on the web there is nothing to paste, install or maintain; a desktop app takes a pasted setup prompt. If you want to revoke it later, you revoke it the same way you would remove someone's access.

What Claude can do once connected: look at your pages, read your styling, make changes, and publish if you ask. What it cannot do: make anything public on its own.

That last point is worth spelling out, because it is the thing that makes this safe to try.

Every change lands in a draft first. Your live site is untouched until a publish is explicitly approved. You can make twenty changes, look at them all, and throw them away, and nobody outside your business will have seen anything. There is a preview link for the draft you can open as many times as you like.

Changes cannot quietly overwrite each other. When Claude edits a heading, it checks the current wording first. If the page has changed underneath, because you edited it in Bernard yourself or a colleague did, the change is refused rather than silently stamping over work Claude has not seen. It is the difference between a careful assistant and one who assumes nothing moved while they were out of the room.

The workflow

Four steps, and the middle two are where you spend your time.

1. Claude reads the real page: structure, copy, and the actual colours and fonts the site uses.
2. It rebuilds the page as an editable design file. You edit that.
3. You tell it to push what you changed. It goes to the draft.
4. You review the draft, then publish.

Step 1 matters more than it sounds. Ask Claude to build "a page like my homepage" and you get its guess at your brand. Ask it to read the real page first and you get your actual accent colour, your actual fonts, your actual words. The difference is not subtle. On our own site the guessed accent was an orange nowhere near the brown the site actually uses, because the brand notes described the palette in words, and words are not a colour.

What to tell Claude

Start with the import. Be specific about which site; if you have a few, the names look similar in a list.

Read the homepage of my knowcode-tech site and rebuild it as an editable mockup. Use the real copy and the real colours and fonts from the site itself, not your interpretation of the brand.

Then edit. You can change things directly in the design file, or describe what you want:

The h1 is doing too much. Split it so "Fractional CTO" sits on its own line above the claim.

When you are happy, push:

Push that change back to Bernard.

Claude works out which element changed and updates that one. Ask for a look first if you want it:

Dry run it first and tell me what would change.

Before publishing, get the summary:

What is in the draft right now? One page or several, and what is the net effect on the live site?

That answer is worth reading. Three separate edits to one heading show up as three changes, but the net effect on your live site is one heading. Those are different things and you want to know which you are approving.

Then:

Publish it.

You get two links back: one that shows the change immediately, and your normal URL, which can serve an older cached copy for a few minutes longer. Do not panic at the second one.

Prompts that earn their keep

A few that do more work than they look like they should.

Why is this heading that colour? Show me what is overriding what.

Useful when a change does not seem to take effect and you are about to blame the cache.

Read the words on every page and tell me where I have used "platform" when I mean "product".

Cheap across a whole site, and the sort of consistency pass nobody does by hand.

Check this page does not scroll sideways on a phone, and tell me whether the body text is readable enough against its background.

Numbers, not a screenshot you squint at.

Before you change anything, show me the current wording so I can check it is the bit I think it is.

Where it stops

Two honest limits, because finding them mid-task is worse than knowing.

Photographs do not travel inside the design file. Claude can read your page's words and layout, and it can hand you a short-lived link to each image, but in the rebuilt design file they show up as empty slots you drop files into. Any layout decision that depends on the imagery is guesswork until you do.

Some sections are Bernard's own. Shop and course pages are regenerated from your products and lessons, and the sign-up and registration forms Bernard builds are its own blocks, so their headings and consent wording are edited in Bernard directly rather than on the page. Given those are often the highest-value words on the page, it is worth knowing which side of the line they sit on before you start.

Worth doing

The reason to work this way is not speed. It is that you see the change in the context of the page, on your real colours with your real type, before it touches anything public. A copy decision made in a text field and the same decision made looking at the actual hero are not the same decision.