# moodspec

> A workspace for your design decisions — fonts, colours, logos, references and voice — served to Claude Code, Cursor, Codex, Lovable and Replit over MCP.

moodspec is the layer before a design system: the decisions a design system would
encode, written down early enough that a coding agent can build with them. It is not a
component library, and it does not write code — it answers the questions an agent asks
while it writes code.

## Pricing

### Free — $0 forever
Enough to find out whether writing your taste down changes how you build.
- 1 canvas, stored in this browser
- Unlimited assets, zones and personas
- URL unpacking — fonts, colours, logos, articles
- Export as JSON or Markdown

### Pro — $10 / month
Unlimited canvases, backed up, and readable by every agent you use.
- Unlimited canvases — one per product or client
- A private MCP endpoint per canvas
- Cloud backup and cross-device sync
- Live connectors — Figma, Canva, Framer
- Version history, 30 days

### Business — $24 / editor
One shared canvas your whole team — and every repo — builds against.
- Shared workspace with roles and permissions
- A locked brand canvas only owners can change
- Comments and approvals on every card
- Scoped tokens — one per repo, revocable
- Google Workspace SSO and invoicing

### Enterprise — Custom
For design systems that legal, security and procurement all have opinions about.
- SAML SSO and SCIM provisioning
- Self-hosted or private region
- Audit log export and IP allowlists
- 99.9% uptime SLA, named contact
- Onboarding: we import your design system

### Plan comparison

**THE CANVAS**

- Canvases — Free: 1; Pro: Unlimited; Business: Unlimited; Enterprise: Unlimited
- Assets per canvas (Fonts, colours, logos, articles, personas, motion) — Free: Unlimited; Pro: Unlimited; Business: Unlimited; Enterprise: Unlimited
- URL unpacking (Paste a link — fonts, palette and full text extracted) — Free: yes; Pro: yes; Business: yes; Enterprise: yes
- Live connectors — Figma, Canva, Framer — Free: no; Pro: yes; Business: yes; Enterprise: yes
- Where it lives — Free: This browser; Pro: Cloud; Business: Cloud; Enterprise: Cloud or your own infra
- Version history — Free: no; Pro: 30 days; Business: Unlimited; Enterprise: Unlimited + export
- Export as JSON / Markdown — Free: yes; Pro: yes; Business: yes; Enterprise: yes

**AGENT CONNECTION**

- MCP endpoints — Free: no; Pro: 1 per canvas; Business: 1 per canvas; Enterprise: 1 per canvas
- Claude Code, Codex, Cursor, Lovable, Replit — Free: no; Pro: yes; Business: yes; Enterprise: yes
- Tokens — Free: no; Pro: 1; Business: Per repo, per editor; Enterprise: Per repo, rotation policy
- Revoke a token instantly — Free: no; Pro: yes; Business: yes; Enterprise: yes
- Which repo read what (Read log per canvas) — Free: no; Pro: no; Business: yes; Enterprise: yes

**WORKING TOGETHER**

- Editors — Free: 1; Pro: 1; Business: 3 or more; Enterprise: Unlimited
- Shared workspace — Free: no; Pro: no; Business: yes; Enterprise: yes
- Roles and permissions — Free: no; Pro: no; Business: Owner, editor, viewer; Enterprise: Custom roles
- Locked brand canvas (Only owners can change type, colour or logo) — Free: no; Pro: no; Business: yes; Enterprise: yes
- Comments and approvals — Free: no; Pro: no; Business: yes; Enterprise: yes
- Share a read-only link — Free: no; Pro: yes; Business: yes; Enterprise: yes

**SECURITY AND ADMIN**

- Sign in — Free: no; Pro: Email code or Google; Business: Google Workspace SSO; Enterprise: SAML SSO + SCIM
- Never trained on (Your canvas is never used to train a model) — Free: yes; Pro: yes; Business: yes; Enterprise: yes
- Audit log — Free: no; Pro: no; Business: 90 days; Enterprise: Unlimited + export
- IP allowlist — Free: no; Pro: no; Business: no; Enterprise: yes
- DPA, security review, custom terms — Free: no; Pro: no; Business: DPA on request; Enterprise: yes
- Billing — Free: no; Pro: Card; Business: Card or invoice; Enterprise: Invoice, PO, procurement

**SUPPORT**

- Support — Free: Docs and community; Pro: Email, 2 business days; Business: Priority email, 1 business day; Enterprise: Named contact + shared Slack
- Uptime SLA — Free: no; Pro: no; Business: no; Enterprise: 99.9%
- Onboarding — Free: no; Pro: no; Business: Setup call; Enterprise: We import your design system

## The MCP endpoint

Endpoint: https://mcp.moodspec.app/c/{canvas-slug}
Transport: Streamable HTTP (JSON-RPC 2.0 over POST). Stateless — no session id.
Auth: Authorization: Bearer msk_live_… The token decides which canvas is served;
the slug in the URL is display only, and a mismatch is a 403.

### Tools

- `get_canvas(canvas_id?)` [read] — The whole canvas as structured data — type stack, palette with usage rules, marks, references, personas and voice. Most agents call this once per session.

- `get_typography(canvas_id?, format?)` [read] — Families, weights, the size scale and the pairing rules, with the CSS or @font-face the project should use.

- `get_palette(canvas_id?, space?)` [read] — Colours with roles attached — which is a surface, which is an accent, which one is only ever a button.

- `get_voice(canvas_id?)` [read] — Tone rules, who you are writing for, phrases to avoid, and required legal copy where a market needs it.

- `get_history(canvas_id?, limit?)` [read] — The most recent changes to this canvas, with who made each and why — useful before proposing to change a rule.

- `propose_change(zone, title, reason, card_id?, patch?)` [write] — Suggest an edit to a card. This is the only way an agent can change anything: the proposal enters the approval queue and nothing moves until an owner approves it.

### Response shape
```json
{
  "canvas": "brand soul",
  "version": 41,
  "typography": {
    "heading": { "family": "Newsreader", "weight": 600, "tracking": "-0.03em" },
    "body":    { "family": "Inter", "size": 16, "leading": 1.65 }
  },
  "palette": [
    { "hex": "#101010", "role": "ink" },
    { "hex": "#E8511E", "role": "accent", "rule": "buttons and links only" }
  ],
  "voice": { "avoid": ["Oops", "Uh oh"], "person": "second" },
  "never": ["gradient heroes", "drop shadows on cards"]
}
```

### Scopes

- `canvas:read` (Pro) — Read every zone on the canvas.

- `canvas:write` (Business) — Submit proposals. Never writes directly — proposals go to an owner.

- `history:read` (Business) — Read the change log and who approved what.

### Rate limits

- Pro: 600 / hour. Per token.

- Business: 5,000 / hour. Per token.

- Enterprise: Agreed. Set per deployment.

### Errors

- 401 revoked — The token was revoked or has expired. Issue a new one in canvas settings.

- 403 locked — The token is for a different canvas, or the scope does not cover that tool.

- 429 slow_down — Over the hourly limit. Retry-After says when the window resets.

## Integrations

### Claude Code (MCP)
Add moodspec as an MCP server and Claude reads your canvas before it writes a line of UI.
Config file: ~/.claude/settings.json
```
{
  "mcpServers": {
    "moodspec": {
      "type": "http",
      "url": "https://mcp.moodspec.app/c/brand-soul",
      "headers": { "Authorization": "Bearer msk_live_••••" }
    }
  }
}
```
1. Get your endpoint — On your canvas, press Connect agent. Pro generates a private MCP URL for that canvas.
2. Add the server — Run claude mcp add --transport http moodspec <your-url>, or paste the JSON below into your settings file.
3. Restart Claude Code — Run /mcp to confirm moodspec is listed and connected.
4. Reference it in prompts — Say "follow the moodspec canvas" once — Claude keeps it in context for the session.

### Cursor (MCP)
Project-level MCP config so every teammate opening the repo inherits the same taste.
Config file: .cursor/mcp.json
```
{
  "mcpServers": {
    "moodspec": {
      "url": "https://mcp.moodspec.app/c/brand-soul",
      "headers": { "Authorization": "Bearer msk_live_••••" }
    }
  }
}
```
1. Copy your endpoint — Connect agent on the canvas, then copy the MCP URL.
2. Create .cursor/mcp.json — Add the block below at the repo root, or use Settings → MCP → Add new server.
3. Enable the server — Cursor lists moodspec under available tools; toggle it on for Composer and Chat.
4. Prompt normally — Cursor pulls the canvas when a request touches UI, copy or brand.

### Codex (MCP)
Register moodspec in your Codex config so CLI and cloud runs share one source of taste.
Config file: ~/.codex/config.toml
```
[mcp_servers.moodspec]
command = "npx"
args = ["-y", "mcp-remote", "https://mcp.moodspec.app/c/brand-soul"]
env = { MOODSPEC_TOKEN = "msk_live_••••" }
```
1. Copy your endpoint — Connect agent on the canvas and copy the URL and token.
2. Edit config.toml — Add the mcp_servers block below.
3. Verify — Run codex mcp list — moodspec should report connected.
4. Use it — Mention the canvas in your task description; Codex queries it for design decisions.

### Lovable (MCP)
Point Lovable at your canvas so generated apps arrive already on-brand.
Config file: Lovable → Settings → Integrations → MCP
```
Server name   moodspec
URL           https://mcp.moodspec.app/c/brand-soul
Auth header   Authorization: Bearer msk_live_••••
```
1. Open project settings — In your Lovable project, go to Settings → Integrations → MCP.
2. Add a custom server — Paste your moodspec URL and bearer token.
3. Enable for the project — Toggle moodspec on. It applies to every chat in that project.
4. Prompt with intent — Reference "our canvas" and Lovable will pull fonts, palette and ICP notes.

### Replit (MCP)
Give Replit Agent the same design context your local tools have: fonts, palette, marks and voice, read from one canvas.
Config file: .replit
```
[agent]
mcp_servers = ["moodspec"]

[agent.mcp.moodspec]
url = "https://mcp.moodspec.app/c/brand-soul"
token = "$MOODSPEC_TOKEN"
```
1. Add the secret — In Secrets, add MOODSPEC_TOKEN with the bearer token from Connect agent.
2. Edit .replit — Add the agent MCP block below.
3. Restart the Agent — Replit Agent reloads MCP servers on restart.
4. Build — Ask for a screen and it arrives using your canvas, not the default theme.

### Claude design (IMPORT)
Bring designs you made with Claude straight onto a canvas — fonts, palette and components extracted.
Config file: 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
```
1. Copy the design link — From Claude, share the design and copy its link — or export the HTML file.
2. Paste it on a canvas — Drop it into the paste bar. We fetch and parse it in a couple of seconds.
3. Review what came in — Fonts, colours and marks land in their zones, each tagged "from Claude design".
4. Keep what you like — Remove the rest with one click. Nothing is imported silently.

## Frequently asked questions

**Is this a design system tool?**
No. A design system is code — components, tokens, tested and versioned. moodspec is the layer before that: the decisions a design system would encode, written down early enough that an agent can build with them. If you already have a real design system, point your agent at that; use moodspec for the parts it does not cover, like tone of voice, who you build for, and how motion should feel.

**So it is a prompt library?**
No. A prompt library stores instructions you send. A canvas stores facts your agent reads on its own, every time, without you remembering to attach anything.

**What stops me from just keeping a markdown file in the repo?**
Nothing — and that is the honest alternative. A file works until you have four repos, two clients and a font you swapped last week. moodspec is the same idea with one copy, live everywhere, and with the tedious parts (pulling fonts and palettes off a URL) done for you.

**Does it write code?**
No. It answers questions your agent asks while it writes code.

**Which agents can read a canvas?**
Anything that speaks MCP — Claude Code, Codex, Cursor, Lovable, Replit today, and whatever ships next month without us doing anything.

**Do I have to say "use the canvas" in every prompt?**
Once per session in most clients; some pull it automatically when a request touches UI or copy. If the agent ignores it, that is a client behaviour, not a moodspec one — the setup guides note which is which.

**Will the agent obey it?**
It follows the canvas the way it follows any instruction: usually, not religiously. What changes is the baseline — you stop starting from a purple gradient and start from your own type.

**Does reading the canvas cost tokens?**
A little. A typical canvas serialises to under two thousand tokens, and only the parts relevant to the request are pulled.

**Can it write back to my canvas?**
Not directly, on any plan. On Business an agent can file a proposal — a suggested change with a before, an after and a reason — which sits in an approval queue until an owner accepts it. Nothing an agent does changes a canvas on its own.

**Can I self-host the MCP server?**
Not on Free, Pro or Business — every plan connects to our hosted endpoint over Streamable HTTP. Enterprise can run it in a private cloud or on-prem; ask on the enterprise page.

**What happens if a token leaks?**
Whoever holds it can read that one canvas, nothing more — no other canvases, and no ability to change anything. Reads are rate-limited per token, and you can revoke it instantly from the canvas settings.

**Where does my canvas live if I never sign in?**
In this browser, in local storage. Clear the browser and it is gone — no copy exists anywhere else. That also means it cannot be connected over MCP.

**Do you train on my content?**
No. Never, on any plan. Your canvas is stored to serve it back to you and your agents.

**Who can read my MCP endpoint?**
Whoever holds the token. Endpoints are private per canvas, revocable, and on Business scoped per repo so a leak costs you one project, not the whole workspace.

**I pasted a competitor URL. Did they get notified?**
No. We fetch the page the way any browser does, once, from our servers.

**Can I export everything and leave?**
Yes — JSON and Markdown, on every plan including free. The Markdown is what your agent sees, so it is readable to you too.

**Why is there a free plan at all?**
Because the argument only lands once you have used it. One canvas, no account, no card — if it does not change your next build, nothing was lost.

**What counts as an editor on Business?**
Anyone who can change a canvas. Viewers are free, and agents reading over MCP never count as seats.

**What happens to my canvases if I stop paying?**
They stay readable and exportable. You drop back to one live canvas; the rest go read-only rather than being deleted.

**Can we buy this through procurement?**
Business takes invoices; Enterprise takes purchase orders, security reviews, a DPA and whatever else your legal team needs.

**Is this not just a moodboard with extra steps?**
A moodboard is for humans to feel something. A canvas is for a machine to act on. Same inputs, different output — one ends in a conversation, the other ends in a pricing page that already looks like you.

**What if my taste is bad?**
Then at least it will be consistently bad, which is the first thing you need in order to notice and change it.

**Who is this not for?**
Anyone with a mature design system and a codebase full of components. Your agent should read your code. Come back when you start something new.

## Guides

### Adobe XD to a coding agent: getting out of a frozen tool
Design handoff · updated 2026-08-17 · https://moodspec.app/guides/adobe-xd-to-coding-agent
XD has not been sold since 2023 and has had no new features since. This is not a handoff guide. It is about extracting what matters while the file still opens.

### Canva to a coding agent: the export path, not the MCP server
Design handoff · updated 2026-08-17 · https://moodspec.app/guides/canva-to-coding-agent
Canva has an MCP server and it is not the one you want. The route that works runs through the Connect API's HTML export — and produces something an agent has to be told how to read.

### Claude Design to Claude Code: the handoff bundle explained
Design handoff · updated 2026-08-17 · https://moodspec.app/guides/claude-design-to-claude-code
The tightest design-to-code path shipping today, because both ends are the same model. That closeness solves the translation problem and leaves a different one untouched.

### Which coding agent handles design context best
Design handoff · updated 2026-08-17 · https://moodspec.app/guides/design-context-coding-agents-compared
Claude Code, Cursor, Codex, Replit and Lovable take design context through different mechanisms, in different files, with different lifetimes. A comparison of what each one can actually reach.

### Figma to a coding agent: what the MCP server actually sends
Design handoff · updated 2026-08-17 · https://moodspec.app/guides/figma-to-coding-agent
The Dev Mode MCP server hands your agent a component tree, variables and Code Connect mappings. Here is how to wire it up per agent, and why the output still comes back off-system.

### Photoshop to a coding agent: reading a PSD without Adobe
Design handoff · updated 2026-08-17 · https://moodspec.app/guides/photoshop-psd-to-coding-agent
A PSD is a document of pixels with a layer tree bolted on. Parsers can read that tree without Adobe running — and knowing exactly what survives the parse is what keeps the route useful.

### Sketch to a coding agent: an MCP server inside the app
Design handoff · updated 2026-08-17 · https://moodspec.app/guides/sketch-to-coding-agent
Sketch ships an MCP server in the Mac app that lets an agent read the layer tree, pull assets and run code against the open document. That last capability is unusual, and it changes what you can ask for.

## Articles

### Where design rules belong: AGENTS.md, .cursorrules, or MCP
Working with agents · 2026-08-17 · https://moodspec.app/blog/agents-md-design-rules
Rules files load into every session, in full, and are versioned with one repo. Design decisions are the opposite shape. Here is the division of labour that keeps both small.

### How to teach a coding agent your design taste
Working with agents · 2026-07-28 · https://moodspec.app/blog/teach-taste
Agents do not lack skill — they lack a source of truth about what you find beautiful. Here is how to write one down.

### Why every vibe-coded app looks the same
Opinion · 2026-07-21 · https://moodspec.app/blog/same-app
The sameness is not a model limitation. It is what happens when nobody supplies a point of view.

### Choosing type pairings for product UI
Craft · 2026-07-14 · https://moodspec.app/blog/type-pairing
A practical way to pick two typefaces that hold up across a landing page, an app and an email.

### Building a colour palette you can defend
Craft · 2026-07-07 · https://moodspec.app/blog/palette
Neutrals do the work, one accent does the pointing, and every colour needs a job description.

### Write your UI copy for one named customer
Craft · 2026-06-30 · https://moodspec.app/blog/copy-for-one
The fastest way to stop sounding like every other SaaS is to stop writing for "users".

### MCP for designers: what it actually is
Working with agents · 2026-06-23 · https://moodspec.app/blog/mcp-for-designers
A plain explanation of the protocol that lets your agent read your tools — and why design context belongs in it.