UI Design MCP Server
Prism is a stdio MCP server that lets an agent generate design tokens and build, animate, review, and export stateful multi-page UI designs — though the shipped schema exposes only 28 tools, not the 42 the README advertises.
Generate design tokens/assets (stateless, read-only, markdown or JSON): color palettes (monochromatic, analogous, complementary, split_complementary, triadic, tetradic), font pairings, modular type scales, spacing scales (linear/geometric/fibonacci), shadow systems, border-radius scales, CSS gradients, responsive breakpoints, complete token sets, and WCAG 2.1 contrast checks.
Build a design in session state:
design_init(style preset + optional base color, clears prior state), then add/update/remove/reorder components and set individual tokens.Component types (27 in schema): hero, navbar, card, card_grid, button, form, text_section, image, cta, footer, stats, timeline, pricing, testimonial, faq, feature_list, banner, tabs, accordion, carousel, modal, sidebar, breadcrumb, pagination, progress, badge, avatar — with variants (e.g. hero centered/split/fullbleed, card_grid 2col/3col/4col).
Add motion:
design_set_animationfor entry animations (fadeUp, scaleIn, slideRight, spring, …), hover effects (scaleUp, lift, glow), duration, delay, and easing curve.Apply templates: ecommerce_home, saas_landing, blog_post, portfolio, dashboard.
Work multi-page: add, switch, and remove pages.
Inspect and correct:
design_get_state,design_get_conflicts, plusdesign_undo/design_redo.Switch light/dark theme via
design_set_theme.Export code: html, react, vue, or figma_tokens.
Poll for dashboard prompts sent by a browser client via
design_check_prompts.Schema vs README drift: the schema omits the README's claimed persistence, accessibility/improvement audits, preview rendering and sync, DTCG/token import-export, HTML/webpage import, semantic styling, capabilities manifest, 4 resources, 3 prompts, and extra export formats (Svelte, Flutter, SwiftUI, presentation, CSS); conversely
design_set_animationanddesign_check_promptsappear in the schema but not the README.
Generates responsive breakpoint systems that align with Bootstrap's breakpoint conventions, for use in Bootstrap-based projects.
Provides curated font pairings and typography scales with direct links to Google Fonts, enabling the use of web fonts in design projects.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@UI Design MCP ServerGenerate a complementary color palette for #3B82F6"
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.
Prism
中文文档:README.zh-CN.md
An MCP server for design work. Give an AI agent the ability to generate design tokens, assemble a page from 38 component types, review it for accessibility and design quality, and export it as code or tokens.
42 tools, 4 resources, 3 prompts over stdio
38 component types with validated Zod prop schemas
Export to HTML, React, Vue, React-TS, Svelte, CSS, presentation, Flutter, SwiftUI
Tokens in DTCG, CSS custom properties, Style Dictionary, Figma Tokens, Tailwind v4
@theme, DESIGN.mdSessions are stateful and persisted: save/load a project as
.prism.jsonLive preview: one stable artifact any viewer can follow (
design_preview_sync), plus a self-contained DeepSeek Harness plugin (dsh-plugin-prism-design) whose panel opens from the sidebar rail or the right SidebarNo dashboard, no HTTP server, no external APIs. Exported pages are self-contained (pure CSS animation, no CDN runtime)
Quick start
npm install
npm run build
npm start # speak MCP over stdioWire it into an MCP client
{
"mcpServers": {
"prism": {
"command": "node",
"args": ["/absolute/path/to/prism/dist/index.js"]
}
}
}Any MCP-capable client works (Claude Desktop, Cursor, Claude Code, or your own). Once connected, ask the agent for something like:
Build a landing page for a coffee roastery, warm and editorial. Then audit it for accessibility and export the React version.
The agent will call design_init → design_add_component → design_audit_accessibility
→ design_export and can inspect its own work through design_get_state.
Verify the server
npm run smoke # spawns dist/index.js, handshakes, lists tools/resources/promptsRelated MCP server: design-architect-mcp
Tools
Call design_list_capabilities for the machine-readable manifest. It lists
exactly the registered tools — this is enforced by tests/tools.test.ts,
so the manifest cannot drift from the registry.
Generation — stateless token and asset generators (10)
Tool | What it does |
| Harmonious palettes from a base colour (6 harmony schemes) |
| Curated font pairings with Google Fonts links |
| Modular type scales (golden ratio, perfect fourth, …) |
| Spacing systems (linear, geometric, fibonacci) |
| Elevation shadow sets (subtle, medium, sharp) |
| Radius scales (sharp, subtle, rounded, pill) |
| WCAG 2.1 contrast ratios with AA/AAA grading |
| CSS gradients with harmonious stops |
| Responsive breakpoint systems (Tailwind, Bootstrap, Material) |
| A complete token system in one call |
Session — build a design in the server's state (18 + 3 persistence)
Tool | What it does |
| Start a session (neutral default tokens + optional base colour) |
| Add a component by type, with validated props |
| Update props, layout, visibility, lock |
| Rename a layer |
| Remove a component |
| Reorder siblings |
| Align/distribute (single undo step) |
| Stacking: front/back/forward/backward |
| Set one token |
| Light/dark |
| One of 5 page templates |
| Multi-page sessions |
| Read the whole session (tokens, pages, components, activity) |
| Token contrast conflicts |
| History (50 snapshots) |
| Persist and restore a session as |
Review, delivery and meta (11)
Tool | What it does |
| WCAG-oriented audit with a 0–100 score |
| Heuristic review: structure, density, motion, a11y, tokens |
| Standalone HTML preview (PNG when Playwright is installed) |
| Write the live-preview file so a watching viewer shows the latest design |
| html / react / vue / react-ts / svelte / css / presentation / flutter / swiftui |
| DTCG / CSS / Style Dictionary / Figma Tokens / DESIGN.md / Tailwind v4 |
| Import DTCG tokens (replace / merge-overwrite / merge-keep) |
| Import a URL or pasted HTML as components |
| Import tokens from a Google DESIGN.md document |
| Map adjectives ("warm", "温暖") onto measurable token deltas |
| The manifest |
Resources and prompts
Resources:
prism://tokens/active,prism://components/registry,prism://patterns,prism://audit/checklistPrompts:
build_page,design_review,import_project
Live preview
design_preview_sync renders the current page to one stable file
(PRISM_PREVIEW_FILE, default <cwd>/.prism-preview/design.html), stamped with
a revision. Because it is a single path that is overwritten in place, any watcher
can follow it — see DeepSeek Harness integration, whose
bundle also adds a Prism Preview panel (left sidebar rail, or a right-Sidebar tab)
that re-renders whenever the revision changes. That bundle is self-contained — it
packages the MCP server it launches, derives every path from where it is
installed, and declares no machine-specific configuration.
Component types
38 types the exporter can render. Values are validated by
src/component-schemas.ts (unknown keys pass through, missing keys are tolerant);
a test asserts the schema map and the catalog list the same types.
accordion · alert · avatar · badge · bento_grid · breadcrumb · button ·
card · card_grid · carousel · container · cta · faq · feature_grid ·
feature_list · footer · form · glass_card · grid · hero ·
html_fragment · image · input · marquee · navbar · pagination ·
pricing · progress · sidebar · skeleton · stats · table · tabs ·
testimonial · text · text_section · timeline · tooltip
Two of them are produced by the store rather than typed by hand: text comes from
promoteElementToComponent, and container from groupComponents. items is the
canonical list prop for every list-bearing type (links / plans / tabs /
slides are accepted aliases), and design_add_component warns instead of silently
rendering an empty component when the list is missing or is not an array.
html_fragment is how imported HTML is represented: an imported page becomes
faithful regions (header / nav / main / footer / section-N / content) that keep
the original CSS, and edits are written back through
applyHtmlFragmentsToDocument with head and scripts preserved.
Configuration
Variable | Default | Effect |
|
| Where |
| on (set | Rolling autosave of the session |
| on (set | Restore the autosave checkpoint on start |
|
| The live-preview artifact |
|
| Where |
The LLM API key is never involved: Prism has no built-in AI channel — the agent driving the MCP server is the intelligence. Nothing leaves your machine except the exported files you ask for.
Architecture
┌──────────────┐ stdio (MCP) ┌────────────────────────────────────────┐
│ MCP client │ ◄─────────────► │ src/index.ts │
│ (agent) │ │ ├─ McpServer: 42 tools │
└──────────────┘ │ ├─ 4 resources · 3 prompts │
│ └─ DesignStateStore (in-memory + disk)│
└────────────────────────────────────────┘One mutation path: every tool calls design-service, which calls
DesignStateStore. Undo/redo, activity logging, conflict detection and the
export pipeline all hang off that single store, so no two tools can disagree
about state. This is enforced: tests/mutation-path.test.ts fails if a tool
reaches past the service to a store mutator, which is what keeps the component
type allowlist, the prop schemas and the token-category check from being bypassed.
src/
├── index.ts # MCP registration + stdio bootstrap
├── state.ts # DesignStateStore: state, undo/redo, mutators
├── service/design-service.ts # the only mutation path + input validation
├── component-schemas.ts # per-type Zod prop schemas + the list-prop contract
├── tools/ # one module per area (design-tools, design-preview, …)
├── tokens.ts + tokens/dtcgi.ts # token generation and interop
├── layout/snap.ts # grid snapping used by snapComponentsToGrid
├── import-project.ts # HTML → html_fragment regions → back again
├── semantics.ts # adjective → token deltas
├── project-store.ts # .prism.json persistence + autosave
└── resources/, prompts/ # MCP context surfaces
dsh-plugin/ # DeepSeek Harness bundle (MCP connection + preview panel)The geometry layer (a layout engine, a tidy-up pass, and an auto-layout pass) was
removed: exports are CSS flow layout and never read layout coordinates, so
nothing consumed it.
Development
npm run dev # tsx watch src/index.ts
npm run build # tsc
npm test # build + compile tests + node --test (glob over .test-build/tests)
npm run lint # eslint
npm run check # lint + testThe test suite is 166 tests over 18 suites, covering the state store, the service layer, all 42 tool contracts, component schemas, the export formats, token interop, and HTML import fidelity. Three contract tests are worth knowing about:
tests/tools.test.ts— the registered tool set must equal thedesign_list_capabilitiesmanifest, every tool must accept its documented parameters and respond.tests/mutation-path.test.ts— no tool may call aDesignStateStoremutator directly; the service's validation must not be bypassable.tests/component-schemas.test.ts— the prop-schema map and the component catalog must list exactly the same types.
.githooks/pre-push runs npm run lint && npm test && npm run smoke; install it
with npm run hooks:install. CI runs the same plus a dependency audit.
Reproducible audits
These scripts check properties that unit tests cannot, and each regenerates what it needs:
Script | What it proves |
| The server starts over real stdio, handshakes, and registers the expected surface |
| The Harness bundle is well formed: manifest and exported paths, patch rows, JS syntax, and the client-half contracts (guide thunks, the Remote result envelope, the iframe sandbox, the service inject list) |
| The live-preview artifact is written, self-contained (no remote references) and revision-stamped |
| Every variant class an export emits actually has a CSS rule that takes effect in a browser |
| The reworked components behave (tabs switch, tooltip hides until hover, marquee animates, carousel scrolls) |
verify-dsh-bundle.mjs and npm run smoke run anywhere; the CSS and component
audits need playwright (a devDependency) and a cached Chromium.
Examples
examples/ holds exported pages next to their screenshots: saas-landing,
ecommerce-home and dark-dashboard, plus the DSH-era apple-style and
coffee-demo. node showcase.mjs builds the first three through the real MCP
server over stdio and re-shoots them.
History
This repository previously contained a much larger product: an Electron desktop app, a vanilla-JS dashboard, a React 19 client, Yjs real-time collaboration, JSX bidirectional sync, a scraped design-library catalog, and a built-in LLM channel — 82 tools in total. That surface was removed in the route B refactor because it was not reachable from the MCP server, not verifiable, or actively drifted from the code (much of the documentation described features that had been deleted, and the capability manifest advertised tools that were never registered).
Everything that described that removed product was deleted rather than left to
mislead: DESIGN.md, PRD.md, prism-product-definition-v2.md,
docs/archive/*, the dated V2.0 plans, and — for the same reason — the refactor
plan itself, which tracked a target surface (22 tools) the implementation never
had and quoted numbers that every later change invalidated.
Two later cleanups followed the refactor: the component catalog was trimmed from 45 to 38 types (removing entries that could not do anything meaningful in a static export, or duplicated another type), and the dead layout geometry layer was deleted. Then came the DeepSeek Harness integration — an MCP connection plus its preview panel, and the only part of this repository that talks to another application.
What remains is this README, its Chinese translation, and the
integration guide with its
Chinese translation. src/ is the source of
truth.
License
MIT.
Available Tools
28 toolsdesign_add_componentAdd UI ComponentA
Add a UI component to the design canvas. The component will appear in the client dashboard in real-time.
Component types: hero, navbar, card, card_grid, button, form, text_section, image, cta, footer, stats, timeline, pricing, testimonial, faq, feature_list, banner, tabs, accordion, carousel, modal, sidebar, breadcrumb, pagination, progress, badge, avatar
Each type has variants:
hero: 'centered', 'split', 'fullbleed'
navbar: 'simple', 'with_cta', 'mega'
card: 'product', 'feature', 'article', 'profile'
card_grid: '2col', '3col', '4col'
button: 'primary', 'secondary', 'ghost'
cta: 'centered', 'split', 'banner'
Args:
type (string): Component type
variant (string, optional): Component variant
props (object, optional): Component properties (title, subtitle, text, image_url, items, etc.)
parent_id (string, optional): Parent component ID for nesting
Examples:
design_add_component(type="hero", variant="centered", props={"title": "夏季大促", "subtitle": "精选商品5折起", "button_text": "立即抢购"})
design_add_component(type="card_grid", variant="3col", props={"items": [{...}, {...}, {...}]})
| Name | Required | Description | Default |
|---|---|---|---|
| type | Yes | Component type (hero, navbar, card, card_grid, button, form, text_section, image, cta, footer, stats, timeline, pricing, testimonial, faq, feature_list, banner, tabs, accordion, carousel, modal, sidebar, breadcrumb, pagination, progress, badge, avatar) | |
| props | No | Component properties | |
| variant | No | Component variant | |
| parent_id | No | Parent component ID for nesting |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Beyond the annotations (all false), the description discloses that the component will appear in the client dashboard in real-time, a key behavioral detail. It also lists all component types and their variants, providing context on what will be created. It does not cover error conditions or prerequisites, but adds meaningful transparency.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is longer than minimal, but it is well-structured with clear sections for component types, variants, and arguments. The first sentence states the core purpose, and the examples are useful, so every part earns its place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The tool has no output schema, and the description does not explain return values, which is a gap. However, it provides extensive guidance on all inputs, available types, variants, and examples. It lacks some context such as whether parent_id must reference an existing component, but overall it is sufficiently complete for an add operation.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Although the schema covers all parameters, the description adds significant value by enumerating each component type and mapping specific variants to major types. The two concrete examples show how to structure props and variant arguments, making parameter usage much clearer.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states 'Add a UI component to the design canvas' with a specific verb and object, plus the real-time dashboard effect. It distinguishes from siblings like design_update_component and design_remove_component by focusing on the addition of new components.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description clearly implies this is for adding new components, and the comprehensive type list helps the agent understand when to use it. However, it does not explicitly mention alternatives such as design_update_component for modifications or design_remove_component for deletions, so it falls short of a 5.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
design_add_pageAdd PageA
Add a new page to the design project. The new page becomes the current active page.
Args:
name (string): Name for the new page
Example:
design_add_page(name="产品详情页")
| Name | Required | Description | Default |
|---|---|---|---|
| name | Yes | Page name |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The description adds a behavioral trait beyond annotations: 'The new page becomes the current active page.' Annotations only indicate readOnlyHint=false, so this extra detail helps the agent predict state changes. It does not mention other side effects, but with annotations present the added value is meaningful.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is concise and well-structured: a clear purpose statement, a bulleted args section, and a short example. Every sentence adds value, and the format is easy to scan for an agent.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple tool with one parameter and no output schema, the description covers the essential behavior, parameter, and active-page effect. It could mention prerequisites like needing an initialized design project, but such context is likely implicit and the description is sufficiently complete for the tool's complexity.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema already provides 100% coverage for the 'name' parameter, and the description repeats the same information ('Name for the new page'). The example shows a concrete invocation, which adds slight value, but no additional constraints or format details are given, so baseline 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Description explicitly says 'Add a new page to the design project' with the specific resource (page) and verb (add). It also distinguishes this from sibling tools like design_add_component by focusing on pages, and notes the active page effect.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The usage is implied by the verb and resource, but the description does not explicitly state when to use this tool versus alternatives such as design_switch_page or design_remove_page. No exclusions or prerequisites are mentioned, so guidance is adequate but not explicit.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
design_apply_templateApply Page TemplateA
Apply a pre-built page template. Automatically adds multiple components to the current page.
Available templates:
ecommerce_home: Navbar + Hero (centered) + Card Grid (3col) + CTA (centered) + Footer
saas_landing: Navbar (with_cta) + Hero (split) + Feature List + Stats + Pricing + CTA (banner) + Footer
blog_post: Navbar + Text Section + Image + Text Section + Footer
portfolio: Navbar + Hero (centered) + Card Grid (4col) + Text Section + Footer
dashboard: Navbar + Stats + Card Grid (2col) + Feature List
Args:
template (string): Template name — 'ecommerce_home', 'saas_landing', 'blog_post', 'portfolio', 'dashboard'
Example:
design_apply_template(template="ecommerce_home")
| Name | Required | Description | Default |
|---|---|---|---|
| template | Yes | Template name |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The description discloses the main behavioral trait: it adds multiple components and enumerates exactly which components each template includes. However, it does not mention whether existing page content is overwritten or if the operation is reversible, which is a gap given that annotations provide no safety hints (all flags false).
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is well-structured and front-loaded: a one-sentence action, a concise list of templates with component details, an args section, and an example. No filler is present; the template list is necessary and clearly formatted.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool with a single parameter and no output schema, the description is nearly complete. It specifies all allowed values and their effects and includes an example. The only notable omission is whether applying a template replaces existing page components or appends to them, which could be important for usage.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema already provides 100% coverage with an enum, but the description adds significant meaning by detailing the component composition for each template value (e.g., 'ecommerce_home' yields 'Navbar + Hero (centered) + Card Grid (3col) + CTA (centered) + Footer'). This goes well beyond the schema's simple 'Template name' description.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool applies a pre-built page template with a specific verb and resource. It distinguishes itself from siblings like design_add_component by focusing on bulk template application rather than individual component operations, and lists exact available template names.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description gives clear context by explaining that the tool automatically adds multiple components to the current page, which implies its use for wholesale page construction. It does not explicitly state alternatives or exclusions, but the template list and component breakdown make the appropriate usage evident.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
design_check_promptsCheck User PromptsARead-onlyIdempotent
Check if the user has sent any natural language prompts via the client dashboard.
If a pending prompt exists, it is returned and then cleared. Use this to periodically poll for user instructions sent from the browser client.
No arguments required.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The description discloses that a pending prompt is 'returned and then cleared', which is a state-changing operation. This contradicts the annotations readOnlyHint=true and idempotentHint=true, as consuming the prompt makes the operation non-repeatable in response and not read-only. This is an annotation contradiction.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is three concise sentences: purpose, behavior, and usage. It is front-loaded with the key verb and resource, and every sentence adds value without fluff.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Covers the tool's purpose, the critical side effect (clearing), and the polling use case. It does not spell out the response format when no prompt exists, but for a simple zero-parameter poller this is a minor gap.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
There are zero parameters and schema coverage is 100%. The description adds 'No arguments required', which is mildly redundant but not harmful. Baseline 4 is appropriate for a no-parameter tool.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses a specific verb ('Check') and resource ('user prompts via the client dashboard'), clearly distinguishing this polling tool from the design-focused sibling tools. It states exactly what the tool does in the first sentence.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Explicitly provides usage guidance: 'Use this to periodically poll for user instructions sent from the browser client.' This gives a clear context for when to invoke the tool. Since no sibling tool serves this function, mentioning alternatives is unnecessary.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
design_exportExport Design as CodeARead-onlyIdempotent
Export the current design as code in the specified format.
Supported formats:
html: Complete standalone HTML file with CSS variables and all component markup
react: React JSX component code
vue: Vue Single File Component (SFC) code
figma_tokens: Design tokens in Figma token JSON format
Args:
format (string): Export format — 'html', 'react', 'vue', 'figma_tokens'
Example:
design_export(format="html")
| Name | Required | Description | Default |
|---|---|---|---|
| format | Yes | Export format |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare the tool as read-only, idempotent, and non-destructive, so the safety profile is clear. The description adds behavioral detail about what each export format contains (e.g., CSS variables, component markup, SFC code), going beyond the annotations and schema.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is well-organized with a clear lead sentence, a bulleted list of formats, an Args section, and a concrete example. Every sentence contributes useful information, and the structure makes it easy to scan.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a single-parameter, read-only export tool, the description is remarkably complete. It covers the action, the supported formats with their outputs, the parameter format, and provides an example. No output schema exists, but the description adequately describes the expected outputs.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Although the schema already specifies the 'format' parameter with an enum, the description provides meaningful semantic context for each enum value (e.g., 'html: Complete standalone HTML file with CSS variables and all component markup'). This adds significant value beyond the bare schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's function with a specific verb ('Export') and resource ('current design as code'). It enumerates supported formats (html, react, vue, figma_tokens) and explains what each produces, which distinguishes it from all sibling tools.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage (e.g., export design as HTML or React) but does not explicitly state when to use this tool versus alternatives or when not to use it. No exclusionary or alternative guidance is given, though the format list provides some contextual clarity.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
design_get_conflictsCheck Token ConflictsARead-onlyIdempotent
Check for token conflicts such as low contrast color combinations or inconsistent spacing.
No arguments required. Returns a list of conflicts found, or an empty list if none.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint, idempotentHint, and non-destructive behavior. The description adds valuable context by specifying the return type ('list of conflicts found, or an empty list') and giving concrete examples. This goes beyond annotation coverage, though it does not discuss potential performance or error behavior.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is two sentences, front-loaded with the purpose, and includes only essential information. Every sentence earns its place: one for functionality, one for invocation and return value.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given zero parameters, rich annotations, and no output schema, the description fully covers what the tool does and what it returns. The examples of conflict types provide enough context for an agent to decide when to use it, and the return contract is explicitly stated.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema has zero parameters, so the baseline is 4. The description reinforces this with 'No arguments required,' which is helpful and eliminates any ambiguity about invocation.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states a specific verb and resource: 'Check for token conflicts' with concrete examples ('low contrast color combinations or inconsistent spacing'). This distinguishes it from sibling tools like ui_check_color_contrast by focusing on token-level conflicts rather than a single contrast check.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives. It mentions 'No arguments required' but does not state when to run this check, what prerequisites exist, or how it differs from related tools like ui_check_color_contrast or design_get_state.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
design_get_stateGet Current Design StateARead-onlyIdempotent
Get the complete current design state including all tokens, components, and animations.
Use this to check what's on the canvas before making changes, or to see if the user has made manual adjustments via the client dashboard.
Returns: Full design state (project name, style, all tokens, component tree, activity log)
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already indicate read-only, idempotent, non-destructive behavior. The description adds context about return contents and reflects live client dashboard adjustments, which is useful. It does not contradict annotations and adds some behavioral detail beyond the structured metadata.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is concise and front-loaded. The first sentence states the core function, the second gives usage direction, and the third lists returns. Every sentence earns its place with no unnecessary words.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple read-only getter with no parameters and no output schema, the description is complete: it explains what it does, when to use it, and what it returns. The provided information is sufficient for an agent to decide when to invoke this tool versus a sibling.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool has zero parameters, so the baseline score is 4. The description does not need to explain parameter semantics since there are none. It does clarify the return format (project name, style, tokens, component tree, activity log), which adds value.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: 'Get the complete current design state including all tokens, components, and animations.' The verb 'get' and specific resource 'design state' make it distinct from sibling tools that generate or modify design elements.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides explicit use cases: 'Use this to check what's on the canvas before making changes, or to see if the user has made manual adjustments via the client dashboard.' This gives clear context, though it does not explicitly name alternatives or exclusions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
design_initInitialize Design ProjectADestructive
Initialize a new design project. Sets the overall style, generates a complete token set, and clears any previous state.
The client dashboard will update in real-time when this is called.
Args:
project_name (string): Name for this design project
style (string): Design style — 'minimal', 'bold', 'playful', 'dark', 'editorial', 'tech'
base_color (string, optional): Override the preset base color (hex like "#6366F1")
Examples:
design_init(project_name="电商促销页", style="bold", base_color="#F97316")
design_init(project_name="极简博客", style="minimal")
| Name | Required | Description | Default |
|---|---|---|---|
| style | Yes | Design style preset | |
| base_color | No | Override base color (hex, e.g. '#6366F1') | |
| project_name | Yes | Project name |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations indicate destructiveHint=true and readOnly=false. The description adds context by specifying that previous state is cleared and a complete token set is generated, plus the real-time dashboard update. This is useful behavioral information beyond the annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is well-structured with a main statement, a side-effect note, an Args list, and examples. It is reasonably concise for a tool with 3 parameters, though it does repeat schema details. The primary purpose is front-loaded.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The description covers core purpose, side effects, parameters, and examples. It does not describe the return value, but given the absence of an output schema and the presence of design_get_state among siblings, this is acceptable and fairly complete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema covers all parameters with descriptions. The description repeats parameter names/types and includes examples with concrete values, but adds little new semantic meaning since the style enum and base_color hex format are already in the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool initializes a new design project, sets style, generates a token set, and clears previous state. This distinct purpose separates it from sibling tools that update or add specific components.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies use for new projects ('Initialize a new design project') but provides no explicit alternatives or exclusions. It hints at starting fresh ('clears any previous state'), yet does not compare to design_set_theme or design_generate_design_tokens.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
design_redoRedo Last Undone OperationA
Redo the last undone operation. Re-applies the most recently undone change.
No arguments required. Returns whether the redo was successful and the current state summary.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With all annotations false, the description carries the burden of disclosing behavior. It states that it re-applies a change (a mutation) and returns success status and a state summary, but it does not elaborate on failure conditions or side effects beyond the basic redo action.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is exceptionally concise: three short sentences, front-loaded with the primary purpose, and every sentence adds essential information (what it does, no args, return value). No wasted words.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's simplicity (no params, no output schema), the description covers the core aspects: purpose, argument requirement, and return value. It could mention that a redo is only possible after an undo, but this is strongly implied by the tool name and title, making the description sufficiently complete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool has zero parameters, and the description reinforces this with 'No arguments required.' The schema already fully documents the parameter set, so the description adds little beyond redundancy, but the baseline for 0 params is 4.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the verb 'Redo' and the resource 'last undone operation,' and adds the clarifying phrase 'Re-applies the most recently undone change.' This distinguishes it from the sibling tool design_undo by being its inverse, making the purpose unambiguous.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The context of use is implied: it must follow an undo operation to be meaningful. However, it does not explicitly state when to use versus when not to use, nor does it reference the prerequisite design_undo tool. No alternatives or exclusions are mentioned.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
design_remove_componentRemove ComponentADestructiveIdempotent
Remove a component from the canvas by its ID.
Args:
id (string): Component ID to remove
Example:
design_remove_component(id="comp_12345")
| Name | Required | Description | Default |
|---|---|---|---|
| id | Yes | Component ID to remove |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The annotations already provide key behavioral signals: destructiveHint=true and readOnlyHint=false. The description adds scope ('from the canvas') but does not disclose additional behavioral details such as irreversibility or behavior when the ID does not exist, though idempotentHint=true partially covers the latter. This is adequate but not rich.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is compact and front-loaded: one clear sentence, then a simple parameter list and a concrete example. There is no fluff, and every element contributes to understanding how to invoke the tool.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple tool with one parameter, no output schema, and strong annotations, the description covers the essential action, target, and example. It could mention what happens if the component doesn't exist, but the idempotentHint annotation mitigates that need. Overall, sufficient for its complexity.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% and the single parameter 'id' is described identically in the schema and the description. The description adds no semantic meaning beyond the schema, though it does provide a concrete example invocation, which is mildly helpful. Baseline 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses a specific verb ('Remove') and resource ('component from the canvas by its ID'), which clearly distinguishes it from siblings like design_add_component, design_update_component, or design_remove_page. The action and target are immediately clear.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description clearly indicates when to use this tool: to remove a component by its ID from the canvas. It does not explicitly mention alternatives or exclusions (e.g., use design_remove_page for pages), but the context is unambiguous enough for an agent to select it appropriately.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
design_remove_pageRemove PageBDestructiveIdempotent
Remove a page from the design project by its ID.
Args:
page_id (string): ID of the page to remove
Example:
design_remove_page(page_id="page_12345")
| Name | Required | Description | Default |
|---|---|---|---|
| page_id | Yes | Page ID to remove |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The description adds no behavioral context beyond the annotations. While annotations already indicate destructiveHint and idempotentHint, the description does not disclose side effects (e.g., permanent deletion, impact on associated content) or any prerequisites. It merely restates the operation without adding transparency value.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is very concise and well-structured: a clear one-sentence purpose, a simple Args listing, and a practical example. Every element is useful and there is no redundancy or fluff.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple one-parameter destructive tool, the description is minimally adequate: it states the action, parameter, and example. However, it lacks usage guidance and behavioral detail (e.g., what happens to dependent components), leaving some gaps. The absence of an output schema and the simplicity of the tool make this acceptable but not fully complete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% for the single parameter page_id, and the schema description ('Page ID to remove') already explains its meaning. The description's Args section repeats this exactly, adding no new semantics. This matches the baseline of 3 for high schema coverage.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the action ('Remove a page'), the resource ('from the design project'), and the method ('by its ID'). It is specific and distinguishes from the sibling tool design_remove_component by explicitly targeting pages.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance is given on when to use this tool vs alternatives. It does not mention when not to use it, nor does it reference related tools like design_add_page or design_remove_component. The usage is only implied by the tool's name and basic description.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
design_reorder_componentReorder ComponentAIdempotent
Reorder a component relative to another component in the canvas.
Args:
from_id (string): ID of the component to move
to_id (string): ID of the reference component
position (string): Where to place the moved component relative to the reference — 'before' or 'after'
Example:
design_reorder_component(from_id="comp_123", to_id="comp_456", position="before")
| Name | Required | Description | Default |
|---|---|---|---|
| to_id | Yes | ID of the reference component | |
| from_id | Yes | ID of the component to move | |
| position | Yes | Position relative to reference component |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already indicate a non-destructive, idempotent mutation (readOnly=false, destructive=false). The description adds the relative before/after positioning context but does not disclose edge cases (e.g., components in different containers) or additional side effects.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is tightly structured with a one-sentence purpose, an Args list, and a concise example. Every sentence earns its place, and the front-loaded purpose makes the operation immediately clear.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple mutation tool with fully described parameters, the description is nearly complete. It includes the core operation, all required parameters, and an example. It does not describe return values or failure modes, but those are not critical for this straightforward reorder action.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema provides 100% coverage with clear descriptions for all three parameters. The description largely repeats this information, adding only an example that clarifies parameter usage without introducing new semantic detail.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool reorders a component relative to another component on the canvas, using a specific verb and resource. It distinguishes itself from siblings like design_add_component or design_update_component by focusing on relative ordering.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The intended use is implied by the verb 'reorder', and an example demonstrates a typical call, but there is no explicit guidance on when to use this tool versus alternatives, nor any exclusions or when-not-to-use scenarios.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
design_set_animationSet Component AnimationAIdempotent
Set animation for a component. The client dashboard will play the animation in real-time.
Animation entries: fadeUp, fadeIn, scaleIn, slideRight, slideLeft, slideUp, spring Curves: ease, easeOut, easeInOut, spring, linear, bounce
Args:
component_id (string): Component to animate
entry (string, optional): Entry animation type
hover (string, optional): Hover animation type (scaleUp, lift, glow)
duration (number, optional): Duration in seconds (0.1 - 3.0). Default: 0.3
delay (number, optional): Delay in seconds (0 - 3.0). Default: 0
curve (string, optional): Easing curve. Default: 'easeOut'
Example:
design_set_animation(component_id="comp_123", entry="fadeUp", duration=0.5, delay=0.2, curve="spring")
| Name | Required | Description | Default |
|---|---|---|---|
| curve | No | Easing curve (ease, easeOut, spring, etc.) | |
| delay | No | Delay in seconds | |
| entry | No | Entry animation (fadeUp, fadeIn, scaleIn, slideRight, etc.) | |
| hover | No | Hover animation (scaleUp, lift, glow) | |
| duration | No | Duration in seconds | |
| component_id | Yes | Component ID |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The description adds behavioral context beyond the annotations, noting that 'The client dashboard will play the animation in real-time' and listing allowed values for entry, hover, and curve. It also provides defaults and ranges, which the annotations (readOnlyHint=false, idempotentHint=true, destructiveHint=false) do not cover. No contradiction with annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is well-structured with a clear purpose opening, a behavioral note, lists of allowed values, a parameter breakdown, and an example. It is a bit lengthy due to the enumeration of values, but every sentence adds information (defaults, ranges, example) and there is no fluff.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool with six parameters and no output schema, the description is complete enough for an agent to invoke it correctly. It explains the effect (real-time playback), includes all parameters with types/optionality/defaults, and provides a concrete example. It lacks explicit discussion of side effects like overwriting existing animations, but that is a minor gap given the idempotent hint.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema covers all six parameters with descriptions (100% coverage), so baseline is 3. The description adds valuable semantics by specifying defaults (duration=0.3, delay=0, curve='easeOut'), explicit ranges (0.1-3.0), and allowed values for entry/hover/curve, which go beyond the schema's property descriptions.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states 'Set animation for a component' with a specific verb and resource, and distinguishes itself from sibling tools like design_update_component by focusing solely on animation. The explicit list of animation entries (fadeUp, fadeIn, etc.) further reinforces the specific purpose.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage (set animation for a component) but does not explicitly mention when to use this tool versus alternatives, nor does it provide exclusions or conditions. The real-time playback note gives context, but no explicit 'when-not-to-use' guidance is present.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
design_set_themeSet Theme ModeAIdempotent
Set the theme mode for the design project (light or dark). The client dashboard will update accordingly.
Args:
mode (string): Theme mode — 'light' or 'dark'
Example:
design_set_theme(mode="dark")
| Name | Required | Description | Default |
|---|---|---|---|
| mode | Yes | Theme mode |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already convey mutability and idempotency. The description adds the behavioral consequence that the client dashboard updates accordingly, providing useful context about the effect of the mutation.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is concise and includes a helpful example. The Args section partially duplicates schema information, but the overall structure is clear and front-loaded.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a single-parameter tool with no output schema and clear annotations, the description is complete. It states the action, effect, and provides an example, sufficient for an agent to invoke it correctly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema already documents the 'mode' parameter with enum values and description. The description repeats these values and adds an example, but does not provide additional semantics beyond the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the action (set), the resource (theme mode for the design project), and the allowed values (light/dark). It distinguishes from sibling tools by focusing specifically on the project-wide theme mode.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage by stating the tool's purpose, but it does not explicitly mention when to prefer this over related tools like design_set_token or design_set_animation. No exclusions or alternatives are provided.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
design_set_tokenSet Design TokenAIdempotent
Set or update a single design token. The client dashboard updates in real-time.
Categories: colors, typography, spacing, shadows, radii, transitions
Args:
category (string): Token category (colors, typography, spacing, shadows, radii, transitions)
key (string): Token key (e.g. "color-primary", "font-display", "space-md")
value (string): Token value (e.g. "#FF5733", "1.5rem", "12px")
Example:
design_set_token(category="colors", key="color-primary", value="#FF5733")
| Name | Required | Description | Default |
|---|---|---|---|
| key | Yes | Token key (e.g. 'color-primary') | |
| value | Yes | Token value | |
| category | Yes | Token category |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already convey readOnly=false, destructive=false, and idempotent=true. The description adds that the client dashboard updates in real-time, which is useful behavioral context beyond the structured fields. There is no contradiction with the annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is compact and well-structured: a purpose sentence, categories, arguments, and an example. The Args section somewhat repeats schema metadata, but it earns its place with value examples and a concrete invocation pattern, so there is no meaningful waste.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple 3-parameter setter with strong annotations and no output schema, this description is sufficient. It covers purpose, allowed categories, parameter formats, and the real-time effect. No significant behavioral or usage context is missing.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema has 100% description coverage, so the baseline is 3. The description adds concrete value examples (e.g., '#FF5733', '1.5rem') and clarifies token key patterns, which enriches parameter meaning beyond the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the verb ('Set or update') and the resource ('a single design token'). The word 'single' effectively distinguishes it from bulk-generation siblings like ui_generate_design_tokens, and the example and categories further specify its precise scope.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Usage is implied: this is for updating one token, not generating a token system. However, it never explicitly states when to prefer this over alternatives such as ui_generate_design_tokens or design_update_component, and there are no exclusion criteria or when-not-to-use instructions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
design_switch_pageSwitch PageBIdempotent
Switch to a different page in the design project.
Args:
page_id (string): ID of the page to switch to
Example:
design_switch_page(page_id="page_12345")
| Name | Required | Description | Default |
|---|---|---|---|
| page_id | Yes | Page ID to switch to |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The annotations already declare idempotentHint=true and destructiveHint=false, but the description adds no further behavioral details. It fails to mention the effect on the current design state or undo history, which could be important for a mutating operation.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is concise with a simple statement and an example, but the 'Args' list and the parameter explanation duplicate the schema. It earns a 4 for efficiency despite some redundancy.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool with one parameter and no output schema, the description covers the basic operation but omits any context about side effects or error handling. The annotations fill some gaps, but the description itself lacks sufficient contextual completeness.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema already documents page_id with 100% coverage, and the description's 'Args' section merely restates that definition. No additional semantics, formatting details, or edge cases are provided, so the description adds no value beyond the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses the specific verb 'switch' with a clear resource: 'a different page in the design project.' This effectively differentiates it from sibling tools like design_add_page and design_remove_page, which handle page creation and deletion.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no context on when to use this tool versus alternatives, nor does it mention prerequisites or exclusions. It only states the action and parameter, leaving the agent without guidance on usage.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
design_undoUndo Last OperationA
Undo the last design operation. Reverts the most recent change to the design state.
No arguments required. Returns whether the undo was successful and the current state summary.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The description goes beyond annotations by stating that no arguments are required and that it returns success status and a state summary. It also reveals the mutation ('Reverts') despite the destructiveHint being false. It does not mention potential clearing of redo history, but given the simplicity, the transparency is adequate.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is two sentences long, entirely front-loaded with the core purpose, and contains no filler. Every sentence adds value.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool with no parameters and no output schema, the description sufficiently covers input (none), behavior (revert last operation), and output (success + state summary). It could mention edge cases like multiple undos or interaction with design_redo, but it is not necessary for basic use.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool has zero parameters, which earns a baseline of 4. The description adds 'No arguments required', but that is already obvious from the empty schema. Still, it confirms the expected usage.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states 'Undo the last design operation' – a specific verb ('undo') with resource ('design operation') and scope ('last'). It clearly differentiates from the sibling design_redo, which performs the opposite operation.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies when to use it (after a mistake or unwanted change) and notes 'Reverts the most recent change'. It does not explicitly mention alternatives or exclusion criteria, but the context is clear enough for a simple undo tool.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
design_update_componentUpdate Component PropertiesAIdempotent
Update properties of an existing component on the canvas. Changes appear in real-time on the client dashboard.
Args:
id (string): Component ID (from design_add_component response)
props (object): Properties to update (merges with existing)
Example:
design_update_component(id="comp_12345", props={"title": "新标题", "button_text": "点击这里"})
| Name | Required | Description | Default |
|---|---|---|---|
| id | Yes | Component ID | |
| props | Yes | Properties to update |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The description reveals merge semantics and real-time updates, which go beyond the annotations. It does not contradict annotations and adds meaningful context about the update behavior.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is concise and well-structured, with a clear first sentence, argument list, and an example. It wastes no words.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple update tool with two parameters, the description covers usage, merge behavior, and real-time effects. Without an output schema, it might be further improved by stating return values, but the essentials are present.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema descriptions already cover both parameters, but the description adds value by specifying the source of the ID and clarifying that props merge with existing properties. The example illustrates concrete property names.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool updates properties of an existing component on the canvas, with a specific verb and resource. It distinguishes from siblings like design_add_component by focusing on existing components.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage on existing components by requiring an ID from design_add_component response. It provides context for when to use it but does not explicitly call out alternatives or exclusions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
ui_check_color_contrastCheck Color Contrast (WCAG)ARead-onlyIdempotent
Check the WCAG 2.1 color contrast ratio between a foreground and background color.
Evaluates against WCAG AA (4.5:1 for normal text, 3:1 for large text) and AAA (7:1 for normal text, 4.5:1 for large text) standards.
Args:
foreground (string): Foreground/text hex color (e.g. "#333333")
background (string): Background hex color (e.g. "#FFFFFF")
response_format (string, optional): 'markdown' or 'json'. Default: 'markdown'
Returns: Contrast ratio, pass/fail for each WCAG level, overall grade, and actionable recommendations.
Examples:
Check dark text on white: foreground="#1A1A2E", background="#FFFFFF"
Check white text on blue: foreground="#FFFFFF", background="#3B82F6"
Check if a muted gray passes: foreground="#888888", background="#FFFFFF"
| Name | Required | Description | Default |
|---|---|---|---|
| background | Yes | Background hex color (e.g. '#FFFFFF' or 'FFFFFF') | |
| foreground | Yes | Foreground/text hex color (e.g. '#333333' or '333333') | |
| response_format | No | Output format | markdown |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnly, idempotent, and non-destructive. The description adds valuable behavioral context: which WCAG levels are checked, the exact ratio thresholds, and what the return includes (ratio, pass/fail, grade, recommendations). No contradiction with annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Well-structured with clear sections for purpose, args, returns, and examples. The Args section duplicates schema descriptions somewhat, but the examples earn their place. Overall it's compact and front-loaded, not wasting words.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a read-only check tool with no output schema, the description fully covers purpose, WCAG standards, parameters, return values, and examples. There are no obvious gaps in what an agent needs to use it correctly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the baseline is 3. The description adds value with concrete examples (e.g., foreground='#1A1A2E') and clarifies the default response_format. This helps an agent choose valid inputs and understand expected output format.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Description clearly states 'Check the WCAG 2.1 color contrast ratio' – a specific verb and resource. It distinguishes itself from sibling generation tools (ui_generate_*) by being a validation/checking tool. The WCAG level details further clarify scope.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides clear context: it evaluates against AA/AAA standards and includes examples of use cases (e.g., checking dark text on white). It doesn't explicitly name alternatives or exclusions, but the purpose is distinct enough from siblings that an agent won't confuse it with palette generation or typography tools.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
ui_generate_border_radius_scaleGenerate Border Radius ScaleARead-onlyIdempotent
Generate a border-radius scale with named levels from sharp to fully rounded.
Supports four visual styles: sharp (minimal radius), subtle (small radius), rounded (medium radius), and pill (large/pill radius).
Args:
style (string, optional): Radius visual style — 'sharp', 'subtle', 'rounded', 'pill'. Default: 'subtle'
response_format (string, optional): 'markdown' or 'json'. Default: 'markdown'
Returns: Border radius scale with 6 levels (none to full), px/rem values, usage guidance, and CSS custom properties.
Examples:
Subtle radius for minimal design: style="subtle"
Pill radius for playful design: style="pill"
| Name | Required | Description | Default |
|---|---|---|---|
| style | No | Radius visual style | subtle |
| response_format | No | Output format | markdown |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already mark the operation as read-only and idempotent. The description adds valuable behavioral details beyond annotations: it specifies that output includes 6 levels, px/rem values, usage guidance, and CSS custom properties. This gives the agent a clear picture of what to expect without contradicting the annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is well-structured with short paragraphs for arguments, return value, and examples. Every sentence contributes: the purpose, style definitions, parameter details, output summary, and two usage examples. It is comprehensive yet succinct with no filler.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Despite having no output schema, the description clearly explains the return contents (scale levels, units, guidance, CSS variables). With only two optional parameters and clear parameter documentation, plus annotations covering safety, the description is sufficient for an agent to invoke and interpret results correctly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema provides minimal descriptions for both parameters ('Radius visual style' and 'Output format'), but the description enriches them by explaining the meaning of each style enum ('sharp (minimal radius)', 'subtle (small radius)', etc.) and covering defaults. This goes beyond the schema, adding genuine semantic value despite high schema coverage.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's function: 'Generate a border-radius scale with named levels'. It identifies the specific resource (border radius) and action (generate), and the mention of styles like sharp, subtle, rounded, pill distinguishes it from sibling UI generation tools such as color palettes or typography.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides clear context for when to use this tool (when needing a border-radius scale), and it gives examples for style choices. However, it does not explicitly state when not to use it or name alternative tools for other design needs, so it falls short of a perfect score.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
ui_generate_color_paletteGenerate Color PaletteARead-onlyIdempotent
Generate a cohesive, harmonious color palette from a base color using color theory principles.
Supports multiple harmony schemes: monochromatic, analogous, complementary, split_complementary, triadic, and tetradic. Also generates neutral grays and semantic color roles (primary, secondary, accent, background, etc.).
Args:
base_color (string, optional): Hex color code (e.g. "#3B82F6" or "3B82F6"). If omitted, a color is derived from the style preset.
scheme (string, optional): Harmony scheme — 'monochromatic', 'analogous', 'complementary', 'split_complementary', 'triadic', 'tetradic'. Default: 'monochromatic'
style (string, optional): Style preset — 'minimal', 'bold', 'playful', 'dark', 'editorial', 'tech'. Used when base_color is omitted. Default: 'minimal'
include_neutrals (boolean, optional): Include a 11-step neutral gray scale. Default: true
response_format (string, optional): 'markdown' or 'json'. Default: 'markdown'
Returns: A color palette with hex/rgb/hsl values, semantic role assignments, usage guidance, and CSS custom properties.
Examples:
Generate a triadic palette from blue: base_color="#3B82F6", scheme="triadic"
Generate a minimal palette without neutrals: style="minimal", include_neutrals=false
Generate a complementary palette for a dark theme: base_color="#10B981", scheme="complementary"
| Name | Required | Description | Default |
|---|---|---|---|
| style | No | Style preset (used when base_color is omitted) | minimal |
| scheme | No | Color harmony scheme | monochromatic |
| base_color | No | Hex color code (e.g. '#3B82F6' or '3B82F6'). Omit to use style preset. | |
| response_format | No | Output format | markdown |
| include_neutrals | No | Include 11-step neutral gray scale |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already report readOnlyHint=true and idempotentHint=true. The description adds valuable behavioral detail: it derives a color from the style preset when base_color is omitted, returns hex/rgb/hsl values with semantic role assignments and CSS custom properties, and defaults include_neutrals to true. No contradiction with annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is well-structured with a headline purpose, feature summary, Args, Returns, and Examples. It is somewhat redundant with the input schema, but each section serves a purpose and the examples are intentionally helpful, so it is not bloated.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool with no output schema, the Returns section fully specifies what the agent will receive: hex/rgb/hsl values, semantic role assignments, usage guidance, and CSS custom properties. All five parameters are explained with defaults, and examples cover key usage patterns, making the description complete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, so the baseline is 3. The description supplements the schema by explaining the fallback behavior for base_color, the 11-step neutral scale, and giving three concrete usage examples, which adds real semantic value beyond the schema metadata.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description opens with 'Generate a cohesive, harmonious color palette from a base color using color theory principles,' which clearly states the tool's verb and resource. It further specifies the supported harmony schemes and semantic color roles, distinguishing it from sibling tools like ui_generate_gradient and ui_check_color_contrast.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides context by listing supported schemes and showing examples of when to omit base_color and rely on the style preset. However, it does not explicitly name alternatives or exclusion cases, so usage guidance is clear but not fully contrasted with sibling tools.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
ui_generate_design_tokensGenerate Complete Design TokensARead-onlyIdempotent
Generate a complete, cohesive design token system in a single call.
Combines colors, typography, spacing, shadows, border-radius, and transitions into one unified token set with CSS custom properties. Tokens are harmonized based on the chosen style preset.
Args:
style (string, optional): Design style preset — 'minimal', 'bold', 'playful', 'dark', 'editorial', 'tech'. Default: 'minimal'
base_color (string, optional): Override the preset's base color with a hex code (e.g. "#6366F1")
dark_mode (boolean, optional): Generate dark mode color tokens alongside light mode. Default: true
response_format (string, optional): 'markdown' or 'json'. Default: 'markdown'
Returns: Complete design token set with all categories (colors, typography, spacing, shadows, radii, transitions) as CSS custom properties, ready to paste into a project.
Examples:
Minimal design system: style="minimal"
Dark-first system with custom brand color: style="dark", base_color="#6366F1"
Playful system without dark mode: style="playful", dark_mode=false
| Name | Required | Description | Default |
|---|---|---|---|
| style | No | Design style preset | minimal |
| dark_mode | No | Include dark mode color tokens | |
| base_color | No | Override base color (hex, e.g. '#6366F1') | |
| response_format | No | Output format | markdown |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true, destructiveHint=false, and idempotentHint=true, so the safety profile is covered. The description adds meaningful behavioral context: tokens are 'harmonized based on the chosen style preset,' dark_mode defaults to true, and output is 'CSS custom properties, ready to paste into a project.' It does not disclose any side effects or caveats beyond that, but with strong annotations, this is sufficient.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is well-structured with a clear summary, Args list, Returns section, and examples. Every line earns its place: it wastes no words, and the examples greatly help an agent understand real invocation patterns. It is appropriately sized for the tool's complexity.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With no output schema, the description properly explains the return value (complete token set with categories as CSS custom properties). It also covers all 4 parameters, including defaults and enums. However, there is a slight ambiguity: the Returns section says 'as CSS custom properties' without acknowledging that response_format='json' would change the output structure. Otherwise, the description is complete for the tool's moderate complexity.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the baseline is 3. The description goes beyond the schema by explaining the meaning of each parameter in the Args section (e.g., 'Override the preset's base color with a hex code') and includes practical examples for combination usage. This adds value without being redundant.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states a specific verb and resource: 'Generate a complete, cohesive design token system in a single call.' It explicitly lists the token categories it combines (colors, typography, spacing, shadows, etc.), distinguishing it from sibling tools that handle each category individually (e.g., ui_generate_color_palette, ui_suggest_typography).
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides clear context that this tool generates the full token set at once, implying it is the comprehensive option versus the individual generators. However, it does not explicitly name alternatives or provide when-not-to-use guidance, such as 'for just a color palette, use ui_generate_color_palette.' This is clear context but lacks explicit exclusions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
ui_generate_gradientGenerate GradientARead-onlyIdempotent
Generate a CSS gradient from a base color with automatic color stop generation.
Supports linear and radial gradients with configurable angle and number of stops. Color stops are generated using color theory for harmonious transitions.
Args:
base_color (string): Hex color code for the gradient base (e.g. "#6366F1")
type (string, optional): Gradient type — 'linear' or 'radial'. Default: 'linear'
angle (number, optional): Gradient angle in degrees for linear gradients (0-360). Default: 135
stops (number, optional): Number of color stops (2-5). Default: 3
direction (string, optional): Color shift direction — 'analogous' (nearby hues), 'complementary' (opposite hue), 'triadic' (spread hues). Default: 'analogous'
response_format (string, optional): 'markdown' or 'json'. Default: 'markdown'
Returns: CSS gradient string, color stops, and raw values.
Examples:
Purple linear gradient: base_color="#6366F1", angle=135
Blue to orange complementary gradient: base_color="#3B82F6", direction="complementary"
Radial triadic gradient: base_color="#10B981", type="radial", direction="triadic"
| Name | Required | Description | Default |
|---|---|---|---|
| type | No | Gradient type | linear |
| angle | No | Angle in degrees (linear only) | |
| stops | No | Number of color stops (2-5) | |
| direction | No | Color shift direction | analogous |
| base_color | Yes | Base hex color (e.g. '#6366F1' or '6366F1') | |
| response_format | No | Output format | markdown |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already mark the tool as read-only, idempotent, and non-destructive. The description adds context that color stops are generated automatically using color theory, and it describes the return values, which is useful given the lack of an output schema.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is well-structured with clear sections for arguments, returns, and examples. It is somewhat lengthy but appropriate for the six parameters it documents, avoiding redundancy beyond the helpful examples.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool with six parameters and no output schema, the description covers all necessary information: parameter semantics, return value composition, and usage examples. It is sufficient for an agent to invoke the tool correctly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema covers 100% of parameters, and the description enriches them with examples, default values, and explanations of direction values (analogous, complementary, triadic). This goes beyond the schema's brief descriptions.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly identifies the tool as generating CSS gradients from a base color, with specific mention of linear/radial types and automatic color stop generation. It distinguishes itself from sibling tools like ui_generate_color_palette by focusing on gradients.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description does not explicitly state when to use this tool over alternatives, but provides examples of different gradient configurations, implying its use case. No exclusions or alternative recommendations are given.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
ui_generate_shadow_systemGenerate Shadow SystemARead-onlyIdempotent
Generate a cohesive elevation shadow system with multiple depth levels.
Supports three visual styles: subtle (soft, minimal), medium (balanced depth), and sharp (crisp, defined edges).
Args:
style (string, optional): Shadow visual style — 'subtle', 'medium', 'sharp'. Default: 'subtle'
response_format (string, optional): 'markdown' or 'json'. Default: 'markdown'
Returns: Shadow system with 5 elevation levels (sm, md, lg, xl, 2xl), CSS box-shadow values, usage guidance, and CSS custom properties.
Examples:
Subtle shadows for minimal design: style="subtle"
Sharp shadows for material/tech design: style="sharp"
| Name | Required | Description | Default |
|---|---|---|---|
| style | No | Shadow visual style | subtle |
| response_format | No | Output format | markdown |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true and idempotentHint=true, and the description adds valuable output details: 5 elevation levels, CSS box-shadow values, usage guidance, and CSS custom properties. It also lists supported visual styles and defaults, giving the agent a clear picture of what the tool produces without contradicting annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is organized with an opening statement, Args/Returns/Examples sections, and examples. While it is longer than necessary and duplicates some schema information, it remains readable and front-loaded with the core purpose in the first sentence.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With no output schema, the description fills the gap by specifying the return contents (elevation levels, CSS values, usage guidance, custom properties). It also provides examples of style usage. Given the tool's simple, read-only nature, this is sufficient context for an agent.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% with descriptions for both parameters, including enums and defaults. The description repeats these details and adds examples, but does not introduce new parameter semantics beyond what the schema already conveys, so the baseline of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses the specific verb 'Generate' with the resource 'cohesive elevation shadow system with multiple depth levels,' clearly distinguishing it from sibling tools like ui_generate_color_palette or ui_suggest_typography. The focus on shadow elevation and depth makes the tool's purpose unambiguous.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides clear context for use—when a design needs a shadow system with selectable styles—and includes examples for 'subtle' and 'sharp' styles. However, it does not explicitly mention alternative tools or when not to use it, so it stops short of full exclusionary guidance.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
ui_generate_spacing_scaleGenerate Spacing ScaleARead-onlyIdempotent
Generate a consistent spacing scale for layout and component spacing.
Supports multiple generation strategies: linear (equal steps), geometric (exponential growth), and fibonacci (golden ratio progression).
Args:
base_unit (number, optional): Base unit in px — 4 or 8. Default: 8
strategy (string, optional): Generation strategy — 'linear', 'geometric', 'fibonacci'. Default: 'geometric'
response_format (string, optional): 'markdown' or 'json'. Default: 'markdown'
Returns: Spacing scale with named steps (0 to 3xl), px/rem values, usage guidance, and CSS custom properties.
Examples:
8px geometric scale (most common): base_unit=8, strategy="geometric"
4px fibonacci scale for fine control: base_unit=4, strategy="fibonacci"
8px linear scale: base_unit=8, strategy="linear"
| Name | Required | Description | Default |
|---|---|---|---|
| strategy | No | Scale generation strategy | geometric |
| base_unit | No | Base unit in px (4 or 8) | |
| response_format | No | Output format | markdown |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true and idempotentHint=true, so the safety profile is known. The description adds useful behavioral context beyond annotations, such as the return structure ('named steps (0 to 3xl), px/rem values, usage guidance, and CSS custom properties') and the meaning of the generation strategies. No contradictions with annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is compact and well-organized: a single-purpose sentence, a strategies sentence, an Args list, a Returns clause, and examples. Every sentence adds value, and the most important information is front-loaded.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a stateless generation tool with no output schema, this description covers all necessary aspects: purpose, parameters with defaults, return value description, and usage examples. It is complete for an agent to invoke the tool correctly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% but property descriptions are minimal (e.g., 'Scale generation strategy'). The tool description expands on this by explaining each strategy ('linear (equal steps), geometric (exponential growth), and fibonacci (golden ratio progression)') and providing example parameter combinations, adding meaning beyond the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description opens with a specific verb+resource: 'Generate a consistent spacing scale for layout and component spacing.' This clearly distinguishes it from sibling generators like type scale or color palette, and the mention of multiple strategies further solidifies its scope.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides clear context on when to use the tool (for layout and component spacing) and gives examples for different strategies ('8px geometric scale (most common)', '4px fibonacci scale for fine control'). However, it does not explicitly mention alternatives or when not to use this tool, so it stops short of full when/why-not guidance.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
ui_generate_type_scaleGenerate Type ScaleARead-onlyIdempotent
Generate a modular typography scale using a chosen ratio.
Produces a full set of type sizes from 'xs' to '4xl' with px, rem, line-height, weight, and usage recommendations.
Args:
base_size (number, optional): Base font size in px. Default: 16
ratio (string, optional): Scale ratio — 'minor_second' (1.067), 'major_second' (1.125), 'minor_third' (1.2), 'major_third' (1.25), 'perfect_fourth' (1.333), 'augmented_fourth' (1.414), 'perfect_fifth' (1.5), 'golden_ratio' (1.618). Default: 'perfect_fourth'
response_format (string, optional): 'markdown' or 'json'. Default: 'markdown'
Returns: Typography scale with named sizes, px/rem values, line heights, and CSS variables.
Examples:
Golden ratio scale: ratio="golden_ratio"
Large base with perfect fifth: base_size=18, ratio="perfect_fifth"
| Name | Required | Description | Default |
|---|---|---|---|
| ratio | No | Modular scale ratio | perfect_fourth |
| base_size | No | Base font size in px (12-24) | |
| response_format | No | Output format | markdown |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnly, idempotent, and non-destructive hints. The description adds valuable behavioral details: it lists all ratio multiplier values, default parameters, and the exact output contents (px/rem, line-heights, CSS variables). This exceeds the transparency provided by annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is well-structured with Args, Returns, and Examples sections. It is front-loaded with the core purpose and each sentence delivers useful information, including the ratio enums which are essential for parameter usage. No filler.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
All 3 optional parameters are explained with defaults and allowed values, output format is described, and examples are provided. The annotations cover safety, and no output schema exists, so the description carries full responsibility for return values. It is fully complete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, but the description enriches parameters with concrete ratio multipliers (1.067, 1.125, etc.), defaults for all params, and examples of extreme values. This adds meaning beyond the schema's simple property descriptions.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states it 'Generate a modular typography scale using a chosen ratio' and specifies the output (sizes from 'xs' to '4xl' with px, rem, line-height, weight, usage). This specific verb+resource distinguishes it from sibling tools like color palette or spacing generation.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage context: generating a typography scale for design systems. It provides examples and parameter guidance, but does not explicitly compare with alternatives like ui_suggest_typography. Clear context without exclusions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
ui_suggest_breakpointsSuggest Responsive BreakpointsARead-onlyIdempotent
Generate a responsive breakpoint system with named breakpoints, container max-widths, and CSS media queries.
Supports popular frameworks (Tailwind, Bootstrap, Material) and custom breakpoints, with mobile-first or desktop-first strategies.
Args:
framework (string, optional): Breakpoint preset — 'tailwind', 'bootstrap', 'material', 'custom'. Default: 'tailwind'
strategy (string, optional): Media query strategy — 'mobile_first' (min-width) or 'desktop_first' (max-width). Default: 'mobile_first'
response_format (string, optional): 'markdown' or 'json'. Default: 'markdown'
Returns: Breakpoint definitions with px values, container max-widths, usage guidance, and ready-to-use CSS media queries.
Examples:
Tailwind mobile-first: framework="tailwind", strategy="mobile_first"
Bootstrap desktop-first: framework="bootstrap", strategy="desktop_first"
Custom simple breakpoints: framework="custom"
| Name | Required | Description | Default |
|---|---|---|---|
| strategy | No | Media query strategy | mobile_first |
| framework | No | Breakpoint preset framework | tailwind |
| response_format | No | Output format | markdown |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations declare readOnlyHint=true, idempotentHint=true, and destructiveHint=false, so the safety profile is clear. The description adds behavioral context such as parameter defaults, supported strategies (mobile-first vs desktop-first), and the return format, which goes beyond the structured annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is well-structured with Args, Returns, and Examples sections, making it easy to scan. It does repeat default values already present in the schema, but the examples and explanatory detail justify the length. It is efficient without being overly verbose.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With three optional parameters, no required fields, and no output schema, the description adequately covers what the tool returns (breakpoint definitions, container max-widths, usage guidance, CSS media queries) and provides usage examples. It is complete for a read-only generation tool, though it could mention error or edge cases.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% with descriptions for all three parameters. The description adds semantic value by explaining what 'mobile_first' means (min-width) and 'desktop_first' (max-width), plus providing concrete example combinations, which enhances the schema's brief descriptions.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's function: 'Generate a responsive breakpoint system with named breakpoints, container max-widths, and CSS media queries.' This is a specific verb+resource pairing that distinguishes it from sibling tools like color palette or typography generation.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides clear context by listing supported frameworks, strategies, and examples, but it does not explicitly name alternative tools or state when not to use it. Given the sibling tool list, it is obvious this is for breakpoints, so it meets the 'clear context, no exclusions' level.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
ui_suggest_typographySuggest Typography PairingARead-onlyIdempotent
Suggest a curated font pairing (display + body font) based on a design style.
Provides Google Fonts import links, CSS font-family declarations, recommended weights, and usage notes.
Args:
style (string, optional): Design style — 'minimal', 'bold', 'editorial', 'playful', 'tech'. Default: 'minimal'
category (string, optional): Font category preference — 'any', 'sans-serif', 'serif', 'mixed'. Default: 'any'
response_format (string, optional): 'markdown' or 'json'. Default: 'markdown'
Returns: Font pairing with display font, body font, Google Fonts link, CSS snippet, and usage notes.
Examples:
Get a minimal font pairing: style="minimal"
Get a tech-focused serif+sans mix: style="tech", category="mixed"
Get editorial pairings: style="editorial"
| Name | Required | Description | Default |
|---|---|---|---|
| style | No | Design style for font pairing | minimal |
| category | No | Font category preference | any |
| response_format | No | Output format | markdown |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already indicate readOnly, idempotent, and non-destructive behavior. The description adds valuable behavioral detail: it returns Google Fonts import links, CSS font-family declarations, recommended weights, and usage notes, and offers markdown/json response formats. No contradiction.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is well-structured with a summary, Args, Returns, and Examples sections, and the key purpose is front-loaded. However, the Args section largely duplicates the schema's parameter descriptions, adding minor redundancy. Still, it remains compact and scannable.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
No output schema exists, but the Returns section explicitly describes the output fields (display font, body font, Google Fonts link, CSS snippet, usage notes). All parameters, defaults, and format options are documented, and examples reinforce usage. For a simple recommendation tool, this is complete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema has 100% coverage with enums and defaults for all 3 parameters, so the baseline is 3. The description's Args section repeats schema values, but the examples ('Get a tech-focused serif+sans mix: style="tech", category="mixed"') clarify how style and category combine, adding meaning beyond the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description opens with 'Suggest a curated font pairing (display + body font) based on a design style' — a specific verb and resource. This clearly distinguishes it from the sibling ui_generate_type_scale, which handles type scale rather than pairing.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description frames the tool as a suggestion service for font pairings and lists input options (style, category, response_format) with defaults. It does not explicitly name alternatives or when-not-to-use, but the sibling set (color palette, type scale, spacing) makes the use case evident. Thus context is clear but exclusions are absent.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
28 tool updates
v1.0.0- First observed
design_add_component - First observed
design_add_page - First observed
design_apply_template - First observed
design_check_prompts - First observed
design_export - First observed
design_get_conflicts - First observed
design_get_state - First observed
design_init - First observed
design_redo - First observed
design_remove_component - First observed
design_remove_page - First observed
design_reorder_component - First observed
design_set_animation - First observed
design_set_theme - First observed
design_set_token - First observed
design_switch_page - First observed
design_undo - First observed
design_update_component - First observed
ui_check_color_contrast - First observed
ui_generate_border_radius_scale - First observed
ui_generate_color_palette - First observed
ui_generate_design_tokens - First observed
ui_generate_gradient - First observed
ui_generate_shadow_system - First observed
ui_generate_spacing_scale - First observed
ui_generate_type_scale - First observed
ui_suggest_breakpoints - First observed
ui_suggest_typography
TDQS
Scored across 28 tools
Each tool has a clearly distinct purpose, with 'ui_' tools handling design token generation (colors, typography, spacing, etc.) and 'design_' tools managing project state, components, pages, and exports. The only potential overlap is between ui_generate_design_tokens and individual generators, but the combined nature of the former is explicitly documented, eliminating ambiguity.
Tool names follow a predictable prefix_verb_noun pattern, using 'ui_' for utility generation and 'design_' for project operations. All names are in snake_case, and verbs such as generate, suggest, check, add, remove, set, and get consistently communicate the action.
At 28 tools, the server is on the high side, but the broad scope—spanning token generation, component management, page management, animations, and exports—justifies the count. Some consolidation could be possible, but the tool set does not feel excessively padded for a comprehensive design tool.
The server covers the full design lifecycle: generating all design tokens, checking contrast, creating and managing pages and components, applying templates, setting animations and themes, exporting code, and detecting conflicts. There are no obvious gaps that would hinder an agent from completing a typical design workflow.
Maintenance
Related MCP Connectors
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
Give your agent a real design system: tokens, measured WCAG contrast, and rules to follow.
Build and manage your design system with AI: tokens, themes, components, icons, Figma and code.
UX Pilot's design agent for your AI tools: on-brand UI, design systems and React prototypes
Related MCP Servers
- AlicenseAqualityCmaintenanceMCP server that gives LLMs deep knowledge of design systems and tokens, enabling intelligent design evolution, token analysis, and designer-to-developer handoffs.375 npm2MIT
- AlicenseNot gradedqualityCmaintenanceMCP server that exposes a design system and UX rulebook as tools, enabling AI to generate UI consistent with your design tokens, components, layout rules, accessibility guidelines, and templates. It also provides a review tool to score UI proposals against the design system.MIT

Figma MCP Serverofficial
FlicenseNot gradedqualityBmaintenanceProvides Figma design context to AI agents, enabling code generation, design system integration, and canvas manipulation through MCP.2,129-- AlicenseNot gradedqualityAmaintenanceEnables AI agents to create and manage consistent multi-screen UI designs through a token-efficient MCP interface, with design system tokens, components, flows, and visual review.450 npm2AGPL 3.0