v0.14Design systems · 2026
Tokens, components and works on one calm canvas — with immutable slugs that never break, and an MCP server so any AI agent can read your system and ship updates without leaving your guardrails.
--component-tw4tay--color-qusuipSuccess--color-rvdr9iError--color-sjlf1mText Primary--font-79qqu736/44 · 700--spacing-mi5mow16 px--spacing-b93jct24 pxGenerate a personal access token, drop a one-block config into Claude Desktop, Cursor, Codex or Zed. The agent now sees your projects, tokens, pages and components — just like you do in the dashboard.
claude_desktop_config.json
ath_pat_…Plain English, your dialect. Ask for a design system, a single component, or a whole work page — agents pick the right tool from the registry on their own.
Прompт
“Make a phone field for Sign-up form, use --color-qusuip on focus, dark variant included.”The agent writes HTML/CSS back through MCP. Your iframe rehydrates, comments anchor to fresh selectors, your team reviews. Ship from the canvas you already use.
1 commit later
upsert_component_code → ✓Random immutable slugs like --color-xp0hw7 are the contract MCP-authored CSS depends on. Theme switching, RLS, and authoring all flow through the same vars.
Author HTML and CSS in-place, see the iframe remount on save. Light/dark themes are one postMessage away, comments anchor to live selectors.
Group works into categories with drag-and-drop. Pin comments to specific elements — they reposition automatically as the page is edited.
--font-axuwrwAthina exposes its tokens, pages, and components over the Model Context Protocol. External AI clients — Claude Desktop, Cursor, Codex — see the same data your team sees and write through the same RLS that gates your dashboard.
--component-tw4tay or a UUID — the server resolves either.{
"mcpServers": {
"athina": {
"type": "http",
"url": "https://your-deploy/api/mcp",
"headers": {
"Authorization": "Bearer ath_pat_…"
}
}
}
}15 tools available
list_design_tokenslist_componentsget_componentupsert_component_codecreate_componentrename_componentdelete_componentcreate_pagerename_pagedelete_pagelist_projectslist_project_memberslist_work_categoriesget_projectlist_pagesPin threads to specific elements on a live preview. Leave a TODO for yourself, a review for your designer, or a brief for your agent — they all live in the same canvas, all anchored to slugs.
Make spacing tighter on the CTA — try --spacing-fkz1vp.
Updated. New CSS pushed via upsert_component_code. ✓
Editor + viewer slots are billed against the project owner. Invite collaborators on any tier — they don't need to upgrade to join your workspace, and free accounts can still be members of any number of paid projects.
One billed plan · three editors
Source of truth is plain HTML/CSS with stable slugs. Hand the agent a target — React, Vue, SwiftUI, Tailwind, Compose — and it ships. No proprietary export pipelines.
Same slug · any platform · agent translates
Pick a plan, ship a token, plug in your agent. No locks, no billing surprises — switching tiers is one click in your account.