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
- Install the Obelism plugin for Claude in Claude Code.
- In Claude Design, choose Handoff to Claude Code, or Export as standalone HTML and give Claude the file.
- 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:
createUpload: a URL that takes the file with aPUT(curl -T page.html "<uploadUrl>"), once, within an hour. The file never goes through a tool call.importDesignwith theuploadId(or anhttpsurl) and adesignId: it stores the images and answers an outline of the page in Markdown, sections separated by---, images asasset:<id>.listContentTypes, map each section onto a block type, thencreateEntrywith the samedesignId. WhenimportDesignanswers anentry, the design was imported before:saveEntryover it instead.
The steps, limits and errors are in /agent.md.