What can you do with this server?

It's a zero-install MCP server that gives an AI client read access to the entire css-is-awesome (“cia”) design system — themes, mixins, functions, tokens, animations, components, recipes, and docs — plus a few generation/validation helpers. * Themes — list all 24 shipped themes, fetch one in full (get_theme), substring-search them, validate any theme CSS against cia's token contract + WCAG contrast audit (validate_theme), or build a complete validated theme.css from DTCG / Tokens Studio / flat design-token JSON via theme_from_tokens. * Token mapping — inspect the design-token → cia-token mapping used by theme_from_tokens, either wholesale or for a single dot-separated path (get_token_map). * Mixins — list all 157 public @mixins (filter by category or component), get one's signature/params/docs/body/source, or search across names, signatures, docs, and bodies. * Functions — same trio for the 26 public SCSS @functions (color, space, radius, shadow, font-size, z, etc.). * Tokens — list the 168 contract custom properties (127 required + 41 optional) filtered by category/required flag, get sample values and referencing mixins/functions for one token, or search by name/category. * Animations — list the animation vocabulary (fade-in, slide-up, pop, shimmer…), speed keys, animate-on effects, and mixin signatures; fetch one slug's keyframes/examples or the animate/animate-on mixin record. * Components — list, fetch (description + public mixins + path), or search every component file under scss/components/. * Recipes — list and fetch markdown pattern recipes (dialog, combobox, print-to-pdf) and opt-in SCSS recipes (bare-tags). * Docs readers — pull llm.txt, CHANGELOG, MIGRATION, THEMING, AGENTS, CONTRACT, README, THREE-TIERS, and VERSIONING as canonical text. * Prompt assembly — build a ready-to-paste LLM context block for an intent slice: overview, mixin: , component: , theme: , tokens, animations, recipe: . * Size resolution — snap a design px value to cia's 4px grid and get the SCSS call to emit (cia.grid(n) on-grid, cia.px(value) off-grid) plus rem equivalent.

Which integrations are available for this server?

Provides tools for working with the css-is-awesome token-driven SCSS design system, exposing its themes, mixins, functions, design tokens, animations, components, and recipes so an agent can look up signatures, resolve sizes, read docs, and assemble prompts for styling work.

How do I use css-is-awesome-mcp?

1. Click on "Deploy Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@css-is-awesome-mcp show me the button mixin signature and its tokens in the default theme" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

css-is-awesome-mcp

by Jerry2d3d

Overview Schema Source Related Servers Discussions Admin

JavaScript

Local

It's a zero-install MCP server that gives an AI client read access to the entire css-is-awesome (“cia”) design system — themes, mixins, functions, tokens, animations, components, recipes, and docs — plus a few generation/validation helpers.

Themes — list all 24 shipped themes, fetch one in full (get_theme), substring-search them, validate any theme CSS against cia's token contract + WCAG contrast audit (validate_theme), or build a complete validated theme.css from DTCG / Tokens Studio / flat design-token JSON via theme_from_tokens.
Token mapping — inspect the design-token → cia-token mapping used by theme_from_tokens, either wholesale or for a single dot-separated path (get_token_map).
Mixins — list all 157 public @mixins (filter by category or component), get one's signature/params/docs/body/source, or search across names, signatures, docs, and bodies.
Functions — same trio for the 26 public SCSS @functions (color, space, radius, shadow, font-size, z, etc.).
Tokens — list the 168 contract custom properties (127 required + 41 optional) filtered by category/required flag, get sample values and referencing mixins/functions for one token, or search by name/category.
Animations — list the animation vocabulary (fade-in, slide-up, pop, shimmer…), speed keys, animate-on effects, and mixin signatures; fetch one slug's keyframes/examples or the animate/animate-on mixin record.
Components — list, fetch (description + public mixins + path), or search every component file under scss/components/.
Recipes — list and fetch markdown pattern recipes (dialog, combobox, print-to-pdf) and opt-in SCSS recipes (bare-tags).
Docs readers — pull llm.txt, CHANGELOG, MIGRATION, THEMING, AGENTS, CONTRACT, README, THREE-TIERS, and VERSIONING as canonical text.
Prompt assembly — build a ready-to-paste LLM context block for an intent slice: overview, mixin:<name>, component:<name>, theme:<name>, tokens, animations, recipe:<name>.
Size resolution — snap a design px value to cia's 4px grid and get the SCSS call to emit (cia.grid(n) on-grid, cia.px(value) off-grid) plus rem equivalent.

css-is-awesome-mcp

The zero-install MCP server for css-is-awesome ("cia") — a token-driven SCSS design system.

npx css-is-awesome-mcp

No manual npm install @modelcontextprotocol/sdk zod step first. This package exists so that command alone gets an MCP client talking to cia's real design system — mixin signatures, tokens, themes, recipes — in one shot.

Why a separate package

css-is-awesome ships zero JavaScript runtime dependencies in its own npm package, by hard rule — most people who install it only want the CSS, and they should never end up with @modelcontextprotocol/sdk and zod in their dependency tree for a feature they didn't ask for. sdk/zod are declared there as optional peer dependencies, so npm correctly never auto-installs them — but that also means anyone who does want the MCP server has to run a second, manual install first.

This package is that second install, pre-wired: @modelcontextprotocol/sdk and zod are real dependencies here, and npx pulls them in automatically the same way it pulls in any other CLI tool's dependencies. css-is-awesome's own manifest is completely untouched by this — installing plain css-is-awesome still pulls zero JS, exactly as before.

Related MCP server: ai-ready-ds-auditor

What it is

The same MCP surface as the server bundled inside css-is-awesome itself (mcp/server.cjs there) — same handlers, same tools, same responses. The only difference is where it reads cia's source data from: this package depends on css-is-awesome as a real npm dependency and resolves everything (scss/, scripts/theme-contract.json, themes, recipes) from wherever npm installed it — never a vendored snapshot, so it always matches whatever version of cia you actually have installed.

Tool families: themes, mixins, functions, tokens, animations, components, recipes, doc readers (read_llm_txt, read_changelog, etc.), size resolution (resolve_size), and prompt assembly (assemble_prompt). Full tool-by-tool reference: /docs/mcp on the cia docs site (documents this same surface).

Usage

In your MCP client's config (.mcp.json or equivalent):

{
  "mcpServers": {
    "css-is-awesome": {
      "command": "npx",
      "args": ["-y", "css-is-awesome-mcp"]
    }
  }
}

That's the whole setup. The first run downloads this package and its dependencies (including css-is-awesome itself, for its source data); subsequent runs are cached by npm.

Prefer a pinned version in your own package.json/lockfile instead of whatever npx resolves at run time? Install it like any other dependency — npx then runs the locally installed copy:

npm install css-is-awesome-mcp

Local development

npm install
node server.cjs

Talks JSON-RPC 2.0 over stdio — pipe requests in, read responses out, same as any MCP server. npm run verify runs scripts/verify-consumer-install.mjs, which packs the current css-is-awesome checkout (if present as a sibling directory) into a real tarball, installs it fresh, and calls a handful of real tools end-to-end — the same shape a genuine npx install goes through, not just the dev-tree require() path.

Relationship to css-is-awesome

One-way dependency: this package depends on css-is-awesome, never the reverse. It has no independent design-system logic of its own — it's a thin packaging layer that exists purely to solve one DX problem (the manual SDK install step). New tools, bug fixes to what the tools return, and everything about the design system itself lives and ships from the css-is-awesome repo; this repo only needs updates when the packaging — not the surface — needs to change.

License

MIT

Available Tools

34 tools

assemble_promptA

Inputs: intent (required), args.

get_animationA

Return one animation slug → keyframe mapping with usage examples, or the animate/animate-on mixin record by name.

Inputs: name (required).

get_componentA

Return one component: description, all its public mixins (signature + summary + body), and the source path.

Inputs: name (required).

get_functionA

Return one function: signature, parameters, doc, body, source location.

Inputs: name (required).

get_mixinA

Return one mixin: signature, parameter list, doc comment, full body, source path + line range.

Inputs: name (required).

get_recipeA

Return one recipe: name, kind ("md" pattern recipe or "scss" import), category/complexity, usage, and full body (markdown for md recipes, SCSS for scss recipes).

Inputs: name (required).

get_themeA

Return one theme: declared token assignments, raw SCSS body, light-dark() support flag, and source path. Themes are authored through @mixin theme($name, $scheme: light dark, $standalone: true); $standalone: false drops the bare :root for multi-theme bundles. Never hand-write the selector.

Inputs: name (required).

get_tokenA

Return one token: category, required flag, sample values across all themes, and the list of mixins/functions that reference it.

Inputs: name (required).

get_token_mapA

The design-token → cia-token mapping that theme_from_tokens applies, as data. Without path: { generatorVersion, contractVersion, explicit: { "": "--token" }, aliases: [{ pattern, replaceWith }], genericRule, targets: { required, optional } }. With path (e.g. "color.text.primary"): how that one path resolves — { token, mapped, via, status, required, feature, category }. Use it to map a Figma / DTCG / Tokens Studio token name to the cia custom property the same way the converter does, or to check a name before building a theme. Needs css-is-awesome >= 1.19.0 installed.

Inputs: path.

list_animationsA

List the animation vocabulary (fade-in, slide-up, scale-in, pop, pulse, shimmer, spin, wiggle, …), the speed keys (fast/normal/slow), the animate-on effects (lift/glow/press/fade), and the mixin signatures.

Inputs: no named parameters.

list_componentsA

List every component file under scss/components/ (accordion, buttons, copy-button, data, feedback, forms, navigation, overlay, stepper, tabs).

Inputs: no named parameters.

list_functionsB

List all 26 public @functions (color, space, radius, shadow, font-size, z, etc.). Same shape as list_mixins.

Inputs: limit, offset, category.

list_mixinsB

List all 160 public @mixins across core, layout, animation, icons, generator, per-component and recipe sources. Filter by category (core/layout/animation/icons/generator/component/recipe) or component name.

Inputs: limit, offset, category, component.

list_recipesA

List recipes from scss/recipes/. Two kinds: markdown pattern recipes (kind:"md" — dialog, combobox, print-to-pdf: a pattern to follow in any framework, with category + complexity) and opt-in SCSS recipes (kind:"scss" — e.g. bare-tags, consumed via @use).

Inputs: no named parameters.

list_themesA

List all 24 shipped themes (boilerplate-dark, boilerplate-light, boilerplate, cupertino-dark, cupertino-light, cupertino, glass-dark, glass-light, glass, graphite-dark, graphite-light, graphite, press-dark, press-light, press, prism-dark, prism-light, prism, sketchbook-dark, sketchbook-light, sketchbook, terminal-dark, terminal-light, terminal). Eight families; each ships an unsuffixed parent carrying both modes via light-dark() plus pinned -light and -dark siblings (terminal is the exception — its unsuffixed file is dark-only). Every theme emits :root, :root[data-theme="<name>"], so ONE theme file dropped in as theme.css restyles the page with no markup change; the data-theme attribute is only required when several themes share a document (public/theme.css, the bundle).

Inputs: no named parameters.

list_tokensB

List the CSS custom-property tokens in the theme contract (scripts/theme-contract.json): 127 required + 49 optional = 176 total. Categories: a11y, action, brand, code, fx, ink, interactive, lines, misc, motion, radius, semantic, shadow, space, surface, type, z-index. Spacing note: the NUMBERED scale --space-0…--space-9 is required and is what components read (cia.space(4) → var(--space-4)); the t-shirt names --space-2xs/xs/sm/md/lg/xl are optional aliases the library emits as var() references. Theme the numbered step, not the alias. Radius note: --radius-avatar/badge/button/card/input/modal were removed (nothing read them). The working per-component knobs are --btn-radius, --card-radius, --input-radius, --modal-radius, --badge-radius, --tag-radius, each cascading from a generic radius (e.g. --btn-radius: var(--radius-md, 0.25rem)).

Inputs: limit, offset, category, required.

read_agentsA

Return AGENTS.md — entry point for AI coding agents (rules, tiers, quick decisions).

Inputs: no named parameters.

read_changelogA

Return CHANGELOG.md — full release history including breaking-change notes.

Inputs: no named parameters.

read_contractA

Return CONTRACT.md — human-readable token contract.

Inputs: no named parameters.

read_llm_txtA

Return llm.txt — the canonical single-fetch summary for AI agents.

Inputs: no named parameters.

read_migrationA

Return MIGRATION.md — v0.7 → v0.8 migration guide (renames, removed features, breaking changes).

Inputs: no named parameters.

read_readmeA

Return README.md — top-level install + usage.

Inputs: no named parameters.

read_themingA

Return THEMING.md — theme authoring + override patterns.

Inputs: no named parameters.

read_three_tiersA

Return THREE-TIERS.md — the three authoring tiers (mixin / utility class / bare tag).

Inputs: no named parameters.

read_versioningA

Return VERSIONING.md — semver policy, deprecation lifecycle, and the Conventional Commits to changelog mapping.

Inputs: no named parameters.

resolve_sizeA

Snap a design px value to cia's 4px geometric grid. Returns the step number, the SCSS call to emit (cia.grid(n) when exactly on grid; cia.px(value) when off-grid), the equivalent rem, and a human-readable note. AI agents: call this whenever you get a px value from a design tool (Figma, mockup, screenshot) and need to express it in cia code. NEVER write raw rem/px literals when a cia function applies. See /docs/composition for the full decision tree.

Inputs: px (required), base.

search_componentsC

Substring search across component names, descriptions, and their mixin names/signatures/docs/bodies.

Inputs: query (required), limit.

search_functionsB

Substring search across function names, signatures, docs, and bodies.

Inputs: query (required), limit.

search_mixinsB

Substring search across mixin names, signatures, docs, and bodies.

Inputs: query (required), limit, category.

search_themesC

Substring search across theme names, descriptions, and token values.

Inputs: query (required), limit.

search_tokensC

Substring search across token names and categories.

Inputs: query (required), limit, category.

statusA

Version, public-surface counts (mixins, functions, tokens, themes, components, recipes, animations), a hash over every public name, and where answers come from (store — always "disk": this server reads the filesystem only). About 40 tokens. Call it first; page list_* only when the hash changed since you last looked.

Inputs: no named parameters.

theme_from_tokensA

Build a complete, validated cia theme.css from a design-tokens JSON — DTCG v2025.10 ({ $value, $type }, {aliases} resolved), a Tokens Studio for Figma export ({ value, type }, single or multi-set), or a flat { "--token": value } map. Format is auto-detected. Every REQUIRED contract token the file does not supply is inherited from a shipped base theme (default boilerplate) and listed in report.inherited, so the output is always contract-complete; unmapped paths are emitted verbatim and listed in report.unmapped, never dropped. Pass dark (same format) or a single file with paired color-light/color-dark groups to get light-dark() values. Returns { css, report, validation } — validation is the same result validate_theme gives, run on the CSS before you write it anywhere. Needs css-is-awesome >= 1.17.0 installed.

Inputs: name (required), tokens (required), base, dark, +3 more.

validate_themeA

Validate ANY theme CSS against cia's real token contract and WCAG contrast audit — the same check npm run validate-themes runs, exposed as a tool call. Not scoped to cia's own themes: works on a fully custom theme you (or another agent) just built, e.g. via the derive-theme assemble_prompt intent. Pass compiled CSS (a :root or [data-theme="..."] block) — this does not compile Sass, so give it the output, not .scss source. Returns missing required tokens (if any, mode "per-file" or "consolidated" depending on shape) and a11y warnings per contrast pair.

Inputs: css (required), label.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

Loading tool schema changelog…

Deploy Server

Claude Code, inside the Godot 4 editorFlockbay puts an AI agent in the real Godot 4 editor: it writes GDScript, runs your game and fixes what breaks. Free, or bring your own Claude Code or Codex.flockbay.comAd

TDQS

A3.5/5.0

Scored 2026-10-18 23:30 across 34 tools

Disambiguation4/5

The set follows a clear list/get/search pattern per resource type (functions, mixins, tokens, themes, recipes, animations, components), making most tools trivially distinguishable. Minor fuzziness exists among the eight read_* doc tools (read_readme/read_agents/read_llm_txt are all 'entry points') and between get_token/get_token_map, but descriptions resolve these.

Naming Consistency4/5

Strong verb_noun convention throughout: list_/get_/search_/read_ prefixes with plural nouns for list/search and singular for get, applied consistently across seven resource families. Minor deviations like the bare 'status', 'assemble_prompt', and the noun_from_noun 'theme_from_tokens' keep it from perfect.

Tool Count3/5

34 tools is heavy; the breadth of the library (functions, mixins, tokens, themes, components, animations, recipes, docs) justifies many, but the eight separate read_* doc tools and several near-parallel get/list/search triads could be consolidated. Borderline-above the comfortable range for the surface.

Completeness5/5

Coverage is thorough: list/get/search for every resource type, plus validation, theme generation from design tokens, token mapping, size resolution, and full documentation access. Hidden gaps are hard to find for a read/inspection-focused library server.

Maintenance

ActivityMaintained

ResponsivenessNo recent community issues

Resources

Related MCP Connectors

Supernova
io.supernova
Access and maintain design system docs, tokens, components, skills, and contexts across any project.
Design Tools Documentation Access Developer Tools
1
https://mcp.supernova.io/mcp
LeadFoxConnect
io.github.LeadFox-Shay
Marketo MCP server for AI. 130 tools to operate Marketo from Claude, Cursor, or ChatGPT.
Marketing CRM
2
https://app.leadfoxconnect.com/mcp
Algenta MCP ServerA
io.github.thyn-ai
Governed data discovery, exact queries, decisions, simulations, and runtime utilities over MCP.
Data Platforms Search RAG Systems
14021
https://api.algenta.ai/mcp
gateway
works.jinn
Jinn gateway MCP — brand DNA, brand kits, design systems, and agency tools behind one bearer token.
Design Tools Marketing
2
https://app.jinn.works/api/mcp

Related MCP Servers

Design System MCP Server
Design Tools Developer Tools
Thaynah
A
license
Not graded
quality
D
maintenance
Provides resources, tools, and prompts for a Design System via MCP protocol, enabling component search, reading, and related component discovery.
Updated a year ago (2025-10-24 20:06 UTC)
556 npm
MIT
ai-ready-ds-auditor
Design Tools Developer Tools
TJaraC
A
license
Not graded
quality
D
maintenance
Enables AI IDEs to query Figma design tokens, component specs, and audit issues via MCP tools, without cloud subscriptions.
Updated 8 months ago (2026-03-24 13:03 UTC)
MIT
@lando-labs/lando-ds-mcpofficial
Design Tools Developer Tools
lando-labs
A
license
A
quality
C
maintenance
MCP server for the Lando Labs Design System, enabling AI agents to introspect and generate code for React components, hooks, icons, design tokens, and theme presets via 15 tools.
Updated 3 months ago (2026-08-17 12:55 UTC)
15
13 npm
1
Apache 2.0
ds-canon
Design Tools Developer Tools Documentation Access
jtrainer357
A
license
A
quality
C
maintenance
Read-only MCP server that exposes a design system's tokens, components, conventions, and deprecations as queryable tools, enabling agents to look up canonical values, assess change impact, and detect hardcoded value drift.
Updated 3 months ago (2026-08-11 18:46 UTC)
8
3 npm
MIT

css-is-awesome-mcp

Why a separate package

What it is

Usage

Local development

Relationship to css-is-awesome

License

Available Tools

Tool Schema Changelog

TDQS

Maintenance

Resources

Related MCP Connectors

Related MCP Servers

Design System MCP Server

ai-ready-ds-auditor

@lando-labs/lando-ds-mcpofficial

ds-canon