Guides · Editing

Pages from Claude Design

Design a landing page in Claude Design, then let Claude put it into Content as a draft built from your space's own blocks, with its images as assets.

2 min read

A page made in Claude Design can become a page of your site: Claude reads the design, builds a draft from the block types your space already has, and stores its images as assets. Your site shows it with its own components, and editors change it like any other page.

How

  1. Install the Obelism plugin for Claude in Claude Code.
  2. In Claude Design, choose Handoff to Claude Code, or Export as standalone HTML and give Claude the file.
  3. Ask Claude to import it into Content, and say where the page goes (/spring-sale). It asks which space and environment if you have more than one.

Claude answers with the draft's path, what it built each section from, and the sections it left out.

What you get

  • A draft, never published: you check it on the canvas and publish it yourself.
  • Only your blocks. Each section of the design becomes the block type whose description fits it best. An import never changes the content model: a section no block fits is left out and named, for you to add by hand or for a developer to make a block for.
  • The site's look, not the design's. Colours, spacing and fonts come from your components; the copy, structure and images come from the design.
  • Images as assets, tagged design:<design> in the media library. The same image twice is one asset.
  • Importing again updates the page. Content remembers which page a design became, so a new version of the design replaces that page's draft, after Claude asks you. Edits made in Content since are replaced too.

For agents

The plugin's import-design skill follows these steps; any agent with the MCP server can:

  1. createUpload: a URL that takes the file with a PUT (curl -T page.html "<uploadUrl>"), once, within an hour. The file never goes through a tool call.
  2. importDesign with the uploadId (or an https url) and a designId: it stores the images and answers an outline of the page in Markdown, sections separated by ---, images as asset:<id>.
  3. listContentTypes, map each section onto a block type, then createEntry with the same designId. When importDesign answers an entry, the design was imported before: saveEntry over it instead.

The steps, limits and errors are in /agent.md.

On this page

Marks in the margin

  • Note
  • Watch out
  • Updated

Scribes marked doubtful lines in the margin. That practice is called obelism.

Stuck on a step?