Skip to content

Connect Claude and restyle a page

Guides

Check availability before connecting

The Beeboo source includes remote MCP and OAuth, but the connection reference does not certify a working production Claude connection. Obtain your workspace's approved MCP URL and confirmation of real-client testing. Your Claude account must expose suitable remote connector support; do not assume a particular plan or menu label provides it.

If that prerequisite is missing, use the CMS or an approved local client instead. Do not send access tokens through chat, create an unapproved remote service, or use an example hostname as though it were production.

Define a layout-only brief

Choose one non-sensitive managed page. Record its exact website, page ID, public URL, language, and current layout. Identify a recoverable page revision and take comparison notes at desktop and phone widths.

A useful first brief is to improve a service grid's spacing and grouping while retaining the existing words, links, images, fonts, and colors. Read permission is enough to inspect and propose. Saving changes requires write permission and your explicit approval. Website access is still checked for the authenticated account on each operation.

Connect and make a narrow change

  1. Add the approved remote MCP URL through Claude's current connection interface. Complete Beeboo OAuth sign-in, verify the application, and review requested scopes. Grant only the access needed for the planned work. A broad write capability is not permission to redesign the whole website.
  2. Ask Claude to list accessible websites and select the exact domain. Have it read the page, its current metadata, and the settings needed to understand design inheritance. Require it to identify native or custom body mode before proposing changes.
  3. Use a prompt such as: “Propose a managed-layout revision for this page only. Preserve all copy, heading text, media, button labels and destinations, fonts, colors, and gradient recipes. Improve service-card spacing and mobile reading order. Show the proposed changes before saving.”
  4. Review whether the proposal uses supported native fields. Current source includes row Surface layout, Text style, Images, Tablet columns, and Padding controls, but deployment support must be checked. Do not accept custom CSS as an undisclosed replacement for missing native controls.
  5. Approve the exact page-local changes. Require a fresh read and expectedPageModifiedAt, with the complete header and unrelated content preserved. Page-wide settings must not be approximated by changing only one section. MCP page updates save directly, so the approval precedes the write.
  6. Read back the saved page and compare its normal public output with the original at the same viewport widths. Check card surfaces, content density, image crops, button alignment, and stacking order. Check for overflow too, but do not use that as the only layout test.

Stop when the design boundary changes

If Claude proposes converting to custom design, treat that as a new decision: the custom body is not visually editable native content. Approve it separately or keep the page managed. On a conflict, re-read before proceeding. Disconnect the app when access is no longer needed. Consult design and styling, assistant connections, and recovery.

Powered by Beeboo, the agentic website builder, from the Xangle team.