moodspec
← All integrations

Claude design

Bring designs you made with Claude straight onto a canvas — fonts, palette and components extracted.

Setup · about 2 minutes

  1. Copy the design linkFrom Claude, share the design and copy its link — or export the HTML file.
  2. Paste it on a canvasDrop it into the paste bar. We fetch and parse it in a couple of seconds.
  3. Review what came inFonts, colours and marks land in their zones, each tagged "from Claude design".
  4. Keep what you likeRemove the rest with one click. Nothing is imported silently.
Two ways in
1  Paste the share link of a Claude design into the canvas bar
2  Or drag the exported .html file onto the canvas

moodspec extracts:  typefaces · colour roles · radius & spacing
                    logomarks · copy voice sample

Round trip

Design something with Claude, import it here to keep the parts you liked, then serve that canvas back to Claude Code so the next build continues from the same taste.

Confirm it is connected

On the canvas
Check the tags on the cards that arrived

Everything imported carries a "from Claude design" tag. An empty zone means that part of the design had nothing extractable — a zone is never filled with a guess.

When it does not work

The share link is rejected

The link is not reachable without being signed in as you, and the import fetches it server-side. Export the design to HTML and drag the file onto the canvas instead. Nothing leaves your machine except that file.

Fonts arrived as names with no weights

The design referenced a font the exported HTML does not load, so there was nothing to read the weights from. Set the weights on the type card by hand. The family name is the part worth keeping; the scale is usually yours anyway.

Colours landed with no roles

Roles are a moodspec concept — which colour is ink, which is only ever a button. A design file has no field for that. Assign the roles once on the palette card. It is what makes get_palette useful to an agent, and it is the part no import can infer.

Nothing appeared after the parse finished

The design was an image-heavy export with no live text or CSS to read. Build the parts you want as cards. An import is a shortcut, not the only way onto a canvas.

Questions

Is Claude design included in Claude Code?

They are separate surfaces. Claude design is where a design gets made and Claude Code is where it gets built. moodspec is what carries the decisions between them: import the design here, then serve the canvas back to Claude Code over MCP.

What gets extracted?

Typefaces, colour roles, radius and spacing, logomarks and a copy voice sample. Anything without a clear home is left out rather than guessed at.

Is anything imported silently?

No. Everything arrives tagged "from Claude design", and you remove what you do not want with one click.

Can I round trip a design?

That is the intended path. Design with Claude, import here to keep the parts that worked, then point Claude Code at the canvas so the next build continues from the same taste.

Does importing need Pro?

Importing does not. Serving the canvas to an agent over MCP does, because that is where the private endpoint is generated.
MCP is on Pro — see pricing