Skip to main content
DOCS

Documentation.

Reference for designers, developers, and anyone using the platform.

What the MCP server is

Zaklad exposes a Model Context Protocol (MCP) server, a standard interface that lets any MCP-compatible AI tool read and write your design system over a structured API. MCP clients include Claude, Cursor, Copilot, and any tool that supports the open protocol.

Crucially, this is a two-way interface. An AI can read the current state of your tokens, typography, components, and themes, and it can change them too: create and edit tokens, restructure components, build themes, regenerate palettes. It is not a static file an AI reads once; it is a connected endpoint that both reflects and updates the live system.

MCP is available on all plans. The protocol is open; any MCP-compatible tool works, not just Claude.
Tutorial: Talk to your design system, via MCP on the Zaklad blog walks through this in depth.

Managing your system with AI

With a Read + Write token, an AI does not just read your system, it maintains it. Describe a change in plain language and the AI calls the write tools to apply it directly to the live system: creating and editing tokens, restructuring components, building themes, regenerating palettes. No manual editing in the dashboard required.

Every write is governed the same way a human edit is. Changes run through the same validation the editor enforces, each lands as a single undoable change set, and locks are respected: an AI can never modify a token group, text style, or component you have locked. The recent AI activity panel in Settings logs every change with a full before and after, and you can revoke a token at any time. Issue a read-only token when you want querying with no risk of edits.

See the tool reference for everything an AI can read and change, and the practical examples below for end-to-end editing prompts.

Asking the server how to use Zaklad

The server is self-documenting in two ways. First, any connected client can call get_capabilities (or the standard tools/list) to discover every tool it can use, so an AI configures itself the moment it connects.

Second, the product documentation you are reading right now is available over the same connection. search_docs runs a free-text search across these docs and returns the most relevant sections; get_doc returns a full section as Markdown; and list_docs lists every topic. Each result carries a deep link back to the page here, so an AI can answer a 'how do I…' question and point you straight to the source.

This means you can treat the MCP connection as a way to ask how to use Zaklad, not only as a way to read and edit your tokens. Ask your assistant how themes inherit, how to switch themes in code, or how colours resolve, and it answers from the live documentation rather than guessing.

The documentation tools are read-only and available to every token, including read-only ones. They never touch your design system data, so there is no risk in letting an assistant explore them.

How colours resolve (the one thing to know)

Colours resolve through a chain: a component token points at a semantic token (a named slot like color.container.brand.weak), and each theme overrides that slot with a specific foundation colour. The theme override is what actually renders. The semantic token only names the slot; its own default value is just a fallback for themes that have no override.

The practical consequence: to change a colour, an AI must set the per-theme override, not the semantic token's default. Editing the semantic default alone looks like it worked but changes nothing on screen, because every theme already overrides that slot. The update_theme_override tool is the write that changes colours; update_token is for non-colour values (spacing, type, fonts), foundation colours, and metadata.

You do not need to teach the AI this. get_conventions returns the resolution model and the exact step-by-step, and update_token returns a warning (with the affected theme ids) if it is used on a semantic colour. A capable client self-corrects to the right tool.

Each theme is set independently, so Light and Dark usually take different foundation steps (a light step for Light, a darker one for Dark). Themes also inherit: Dark typically inherits from Light and only overrides what differs, so a token can read as “inherited” in one theme and explicitly overridden in another. get_theme shows both the current value and whether it is inherited or overridden for every token.

Using it as storage and interface

The MCP server is useful even without active AI generation. It means your design system data lives in one place with a clean API: version-controlled, audited, and accessible to any tool that supports MCP.

Teams use it to:

  • Query token values in build scripts without maintaining a separate config file.
  • Validate component usage in CI: check that the tokens a component references still exist in the system.
  • Feed design context into AI-assisted workflows without copying and pasting token tables.
  • Audit the design system at scale: ask an AI to find all components using a specific semantic token and report what would change if you rename it.

DESIGN.md: the single-file handoff

Every project generates a DESIGN.md file that describes the entire design system in a single document: resolved token values per theme, typography specifications, spacing scale, and component anatomy. It is always current because it is regenerated on every change.

Use it to:

  • Hand it to an AI at the start of a conversation so it immediately understands your system without any additional prompting.
  • Include it in a developer onboarding document so new team members understand the token vocabulary from day one.
  • Attach it to a design brief to give context about the existing system before proposing changes.

Unlike a manually written design brief, DESIGN.md is never out of date. It is not a quarterly snapshot; it reflects today's system.

Tutorial: DESIGN.md: your whole design system in one file on the Zaklad blog walks through this in depth.

The get_design_doc tool

The MCP server exposes a get_design_doc tool that returns the full DESIGN.md content over MCP. Any MCP client can call it to fetch the current state of your design system.

It is the quickest way to hand an AI the whole picture, but it is one of many tools. Read tools let a client explore the system; read-write tools let it make changes, each recorded as an undoable change set. A read-only token only ever sees the read tools. See the full tool reference below.

A read_write token can also update the editable description section at the top of DESIGN.md. That section is hand-authored prose: what the design system is for, the brand voice, design principles, and anything else an AI should know before working with your tokens. The generated reference sections (resolved token values, typography specs, etc.) are always machine-produced and cannot be overwritten via MCP.

All writes via MCP are audited and undoable. The recent AI activity panel in Settings shows a full log of every MCP change.

Practical examples

Examples of what you can ask an AI to do. Read-only prompts work with any token; edit prompts require a Read + Write token.

Asking how the platform works

How do I switch themes in the generated package? Link me to the docs.

The AI calls search_docs with your question, reads the most relevant section via get_doc, and answers with the steps plus a deep link such as /docs?tab=developers#switching-themes. These tools work with any token, including read-only ones.

Reading — generate a component that matches the system

Generate a Card component using our design system tokens for background,
border, padding, and typography. Use the exact token names from the system.

The AI calls get_design_doc to get the full token vocabulary, then writes a component that uses the correct token names and resolves to the right values in every theme.

Editing — change the brand colour everywhere

Our primary brand color has changed from #2563EB to #7C3AED.
Update the foundation token and check if any semantic tokens need adjusting.

The AI calls get_token_tree to understand the structure, find_dependents to trace what references the brand token, then bulk_update_tokens to apply the change atomically. Editing the foundation primitive works directly because every semantic slot and theme references it down the chain. Every edit is recorded as an undoable changeset.

Editing — recolour one semantic slot

Make the brand container background a softer lilac in light mode
and a deeper purple in dark mode.

The AI calls search_tokens to find the semantic token, list_themes and get_theme to read each theme's current value, then update_theme_override once per theme with the right foundation step for each. This is the path for recolouring a slot without touching the underlying palette.

Editing — create a new dark theme

Create a dark theme. Base it on Light but invert the background and
surface colors. Keep text and status colors unchanged.

The AI calls get_theme to read the light theme mappings, then create_theme and update_theme_override to build the dark overrides, leaving unspecified tokens to inherit from the base.

Without MCP: handing DESIGN.md to Claude directly

You do not need the MCP server to get value from your design system with AI. Download your DESIGN.md from the project header and attach it to any Claude conversation. Claude reads the resolved token values, typography specs, and component anatomy from the file and generates components and suggestions that match your system, no connection required. This works in Claude.ai, the Claude desktop app, or any interface that accepts file attachments.

The difference from MCP: Claude can read and reason about your system, but cannot write changes back. Use MCP when you want edits applied directly; use the file when you just need context for a conversation.

Setting it up

Go to Project Settings and open the MCP / AI tab. Generate a token, choose a scope (Read only or Read + Write), and copy the server URL and token into your MCP client's config file.

Example client configuration:

json
{
  "mcpServers": {
    "zaklad": {
      "url": "https://platform.zaklad.app/api/mcp",
      "headers": {
        "Authorization": "Bearer your-token-here"
      }
    }
  }
}

Tokens are scoped to a single project. A read-only token is safe to share with tools that only need to query the system. A read-write token should be treated like an API key; keep it out of version control.

The plaintext token is shown only once when generated. Copy it immediately and store it in a password manager or secrets vault. If you lose it, revoke the token and generate a new one.

Ask the AI to review your design system

Beyond reading and editing, a connected AI can evaluate the quality of your design system against a curated rubric. Ask things like "is my colour palette any good?", "are my token names sensible?", "is my semantic layer bloated?", or "what icon set should I use?".

Four read-only tools supply the grounding. list_principles and search_principles find the relevant rubric; get_principle returns a principle in full (the principle, why it matters, how to check it, and anti-patterns) plus its authority tier and real sources, so the AI can tell an industry law from a house preference and cite a source when you ask it to prove a claim. get_reference_design_system returns the real, current shape of the reference design system as a worked example to compare against.

The advice reaches beyond this platform into general best practice and the wider tooling landscape, and it is steerable by design: the rubric is curated and version-controlled, contested positions carry both sides, and the factual half is computed live so it never goes stale. The AI does the reasoning; these tools give it something solid to reason over.

Tool reference

The complete set of tools the server exposes, grouped by area. read tools are available to any token; write tools require a Read + Write token.

Documentation & discovery

get_capabilitiesread
Lists the tools available to the calling token, filtered by its scope. The fastest way for a client to learn what it can do.
list_docsread
Lists every documentation section (title, tab, and a deep link into the live docs) so a client can see what topics it can answer questions about.
search_docsread
Free-text search over the product documentation. Returns the most relevant sections with a snippet and a deep link. Use it to answer 'how do I…' questions about using Zaklad.
get_docread
Returns a full documentation section as Markdown, plus its deep link, given the slug returned by search_docs or list_docs.

Design-system advice (the steerable guru)

list_principlesread
Catalogue of the curated design-system knowledge corpus (the rubric for what a good design system looks like), with each entry's authority tier. Optional area filter.
search_principlesread
Full-text search over the knowledge corpus. Returns the most relevant principles with a snippet and authority tier — the rubric for evaluating a palette, naming, schema size, theming, typography, components, icons, or tech approach.
get_principleread
A full principle as Markdown (principle / why / how to check / anti-patterns) plus its structured authority tier, evidence strength, real sources, and any contested counter-view — so an AI can state confidence honestly and cite a source.
get_reference_design_systemread
The canonical reference design system's real shape (palette, semantic families, naming examples, theme coverage, type scale, spacing, components), computed live so it never goes stale. The worked exemplar to compare a project against. Optional aspect filter.

Project & validation

get_project_summaryread
Project overview: name, status, lock state, and counts of tokens, themes, text styles, components, and icons.
get_conventionsread
The project's naming and layering rules, the layers and groups actually present, and the colour-resolution model with the exact steps for changing a displayed colour. Worth reading before any edit.
validate_currentread
Dry-runs the design-system validator over the current state and returns all errors and warnings.

Tokens

list_tokensread
Lists tokens (paginated) with optional layer, group, and type filters.
get_tokenread
Fetches a single token by id.
search_tokensread
Substring search over token path and name.
get_token_treeread
Returns a layer → group → token-name tree (paginated, optional layer filter).
resolve_reference_chainread
Follows a token's reference chain down to its primitive value. For a semantic token it also returns the value it resolves to in each theme (semantic colours resolve through theme overrides, not their own ref).
find_dependentsread
Impact analysis before a rename or delete: which tokens, components, and theme overrides reference a given token path. The theme-override coverage is what makes it safe for foundation colours.
export_dtcgread
Exports the project's tokens as DTCG JSON.
create_tokenwrite
Creates a token (foundation dimension expressions are computed).
update_tokenwrite
Updates a token (value, metadata), with optional optimistic locking to catch concurrent human edits. For changing a displayed colour use update_theme_override instead; this tool warns when it detects that case.
delete_tokenwrite
Deletes a token. Warns if other tokens, components, or theme overrides still reference it (references are by path and are not cascaded).
bulk_update_tokenswrite
Applies many token edits atomically as a single undo unit (large batches require confirmation).

Themes

list_themesread
Lists the project's themes.
get_themeread
Fetches a theme plus its resolved token mappings (overrides and inherited).
get_theme_coverageread
Coverage stats for a theme: overridden vs inherited semantic color tokens.
compare_themesread
Diffs two themes' resolved mappings.
create_themewrite
Creates a theme.
update_themewrite
Updates a theme's name, default flag, or enabled state.
delete_themewrite
Deletes a theme.
update_theme_overridewrite
Sets per-theme semantic-colour token overrides. This is the write that actually changes displayed colours; call it once per enabled theme.

Typography

list_text_stylesread
Lists the project's text styles.
get_text_styleread
Fetches a single text style by id.
create_text_stylewrite
Creates a text style (typography role) with a name, optional font family/weight, and a per-tier sizing map keyed by breakpoint.
update_text_stylewrite
Updates a text style.
delete_text_stylewrite
Deletes a text style. Warns if components reference it (they fall back to a default style; references are not repointed).

Components

list_componentsread
Lists component definitions.
get_componentread
Fetches a single component definition, config included.
get_component_token_mapread
Every token path a component references (its slot → token mapping).
list_component_templatesread
Lists the component templates a component can be created from (id, name, category, version).
get_component_templateread
Full descriptor for one template: parts, colour + sizing slots, variant axes (by kind), frame variants, plus the canonical starter reference config (slot → token-path mapping including XS–XL sizing).
create_componentwrite
Creates a component from a template (button, card, input, …). Seeds the canonical starter reference config (colour slots + XS–XL sizing wired to your real tokens via stable token paths); pass config to override specific slots.
update_component_configwrite
Updates a component definition's config (its slot → token-path mapping, and optionally name or category). Warns if any referenced token path does not exist.
delete_componentwrite
Deletes a component definition. Reversible via undo_last_change.

Icons

list_icon_librariesread
Lists the project's icon libraries.
list_bundled_icon_librariesread
Lists the bundled icon libraries available to import (Heroicons, Lucide) with id, name, and variants.
list_iconsread
Lists icons (metadata only) with optional library, category, search, and variant filters.
get_iconread
Fetches a single icon, including its variant SVG bodies.
update_iconwrite
Updates an icon's metadata (name, description, categories, tags).
bulk_update_iconswrite
Bulk metadata update for many icons in one transaction.
create_iconwrite
Adds one custom icon to a library from SVG bodies (validated; colours normalised to currentColor).
delete_iconwrite
Deletes one icon. Reversible via undo_last_change.
bulk_delete_iconswrite
Deletes many icons in one transaction (one undo unit).
create_icon_librarywrite
Creates a custom icon library. Reversible via undo_last_change.
delete_icon_librarywrite
Deletes a custom library and its icons (not the Custom Icons library; blocked if a contained icon is locked).
import_bundled_icon_librarywrite
Imports a bundled library (Heroicons / Lucide). Requires confirm:true; undo removes the whole imported library in one op.

Releases

list_releasesread
Lists the project's releases newest-first (version, status, createdAt).
get_releaseread
Fetches one release by version: status, timestamps, npm error, latest build job, and Code Connect state.
get_release_previewread
Previews the next release: change summary since the last published release plus the suggested next version. Read-only.
validate_releasewrite
Dry-run validation for a version (no DB writes). Returns a short-lived, single-use token required by create_release.
create_releasewrite
Cuts a release and enqueues build + npm publish. Irreversible — requires a fresh validate_release token AND confirm:true. NOT undoable.
retry_releasewrite
Re-enqueues a failed release's build (version not burned). Failed releases only. NOT undoable.

Generative palette & colour

generate_palettewrite
Generates a chromatic palette from a brand colour (lightness-curve preset, chroma, hue offset, hue correction via the shared colour engine) and writes it to a foundation colour group as one undoable change.
generate_neutral_palettewrite
Generates a tinted neutral (grey) palette from a base colour and writes it to a foundation colour group.
generate_status_palettewrite
Generates a hue-locked status palette (red / amber / green / blue) and writes it to a foundation colour group.
generate_translucent_palettewrite
Generates a translucent palette (fixed colour, per-step alpha; 8-digit hex) and writes it to a foundation colour group.
apply_design_adjustmentwrite
Applies natural-language design levers (roundness, spacing density, surface contrast, shadow depth) by remapping many tokens at once via the shared engine — one undoable change.
scaffold_system_from_briefwrite
Lays down a complete starter system (tokens, Light/Dark themes, components, text styles, bundled icons) on an empty project from a brand brief — what the wizard produces. Requires confirm:true; reversible to empty.
check_contrastread
Grounded WCAG contrast report over the critical semantic colour pairs, resolved per enabled theme against the project's real colours.
convert_brand_colorread
Converts a brand colour spec (Pantone name, CMYK, or hex) to a screen-accurate hex before writing a token; returns close Pantone matches when there is no exact hit.
list_curve_presetsread
Lists the lightness-curve preset ids + labels accepted by generate_palette (e.g. circ-in, ease-out).
list_style_archetypesread
Lists the pre-tuned style archetypes (slider state, type scale, curve) that feed apply_design_adjustment and scaffold_system_from_brief.
fix_contrastwrite
Auto-corrects failing contrast pairs by shifting the foreground colour to meet the ratio, written to the underlying foundation tokens as one undoable bulk change.

Design doc, locks & history

get_design_docread
Returns DESIGN.md as Markdown (the live draft, or the frozen copy from a given release version).
list_locksread
Lists every lock so a client can see what it may not modify.
update_design_doc_descriptionwrite
Updates the editable prose intro of DESIGN.md (the generated reference stays read-only).
undo_last_changewrite
Reverts the most recent MCP change (one undo unit).
The set of tools a token can call is scoped to exactly Tokens, Typography, Components, Iconography, and the DESIGN.md description. MCP never exposes project settings, billing, member management, or API keys.