UI Design MCP Server
UI Design MCP Server provides AI-powered tools for LLMs to generate, manage, audit, and export UI designs and design systems in real time, via both programmatic tools and a canvas-first interface.
Design Generation: Generate color palettes, typography pairings, modular type scales, spacing scales, shadow systems, border-radius scales, gradients, responsive breakpoints, and complete design token systems (including dark mode). Check WCAG 2.1 contrast ratios for AA/AAA compliance.
Project & Component Management: Initialize projects, manage pages, apply templates, add/update/reorder/remove UI components, set entry/hover animations, themes, and design tokens (individually or in batch). Supports undo/redo, reflow, and freeform canvas positioning.
Persistence & Versioning: Save/load projects, templates, versions, and platform-specific designs. Create, diff, and restore versions; manage reusable templates.
Quality & Audit: Detect token conflicts, run accessibility audits, suggest heuristic improvements, auto-improve structure, run one-call review-and-improve loops, and attach comments to components.
Import/Export: Export to HTML, React, Vue, Figma Tokens, W3C DTCG JSON, CSS, Style Dictionary, Tailwind, Svelte, Flutter, SwiftUI, presentation slides, and more. Import design tokens (W3C DTCG JSON, DESIGN.md), webpages, and apply style guides.
Advanced & AI Drawing: Apply semantic styling from natural language, learn brand styles, generate pages from briefs, and use an integrated tldraw canvas for live AI drawing or adopting user drawings. Supports real-time collaboration with live cursors, conflict detection, and a user prompt queue.
Agent Integration: Exposes MCP resources and prompts, a capability manifest, and dual stdio/HTTP transport for local and remote use.
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
Prism is a visual adjustment surface for non-designers: import a website or app
, adjust any component, button, or interaction — down
to the inner parts of a component — precisely and freely on the canvas, then
apply the changes back to your product with one click. Quick-change presets
(design systems, component blocks, interaction templates) get you there fast;
fine-tuning gets you there precisely. See
prism-product-definition-v2.md for the
full product definition.
Features
75 MCP tools covering the full spectrum of UI design needs- Built-in LLM channel (product definition v2): fill in your own API key (OpenAI-compatible / Anthropic / Gemini) in the AI settings dialog and the dashboard itself can generate pages from natural language — no external agent required. Unmatched prompts automatically fall through to it.
Desktop app (Electron shell):
npm run app— double-click experience; the main process starts the bundled server on a free port and opens the dashboard window (electron/main.cjs).Freeform canvas by default: drag/resize any component, snap to guides/edges, edit the inner parts of a component in place, reorder layers.
17 brand design systems (Linear, Stripe, Vercel, Notion, Arc, Spotify, Apple, GitHub, IBM Carbon, Shopify Polaris, Duolingo, Discord, Raycast, Airbnb, Figma, Anthropic …) — one-click restyling; no style presets, the design system is the only theming layer.
41 component types (Atomic Design: input, table, alert, tooltip, bento grid, skeleton, command palette, glass card, FAB, marquee, toggle, cookie banner …)
20 animations (13 entry + 7 hover, with duration/delay/easing/stagger)
Complete design token system generation in a single call
Dual transport support: stdio (local) and Streamable HTTP (remote)
Zero external API dependencies — all generation is algorithmic
Related MCP server: systembridge-mcp
Built for non-professionals (non-designers)
The dashboard is designed so people without design vocabulary or coding skills can drive it. See docs/archive/prism-nonprofessional-painpoints.md for the full pain-point analysis and benchmark against open-source tools (OpenUI, Lovable, draw-a-ui, v0, ui-toolkit-mcp …).
Everyday-language prompt engine (v2): beyond colors/themes/templates, plain instructions just work — "把标题改成「你好」" (edit copy), "字太小了, 大一点" (font scale), "间距更紧凑" (spacing), "整体调亮一点" (brightness), "改成直角" (radius), "换成衬线字体" (font pairing), "检查一下对比度" (contrast report), "重做" (redo). All executed locally, no agent required.
Never a dead end: when an instruction is not understood, it is still queued for the agent — but the dashboard immediately shows clickable example instructions (REST + WebSocket both acknowledge the outcome).
Templates are non-destructive: applying a template to a non-empty page opens a fresh page instead of erroring.
"解读" (Explain) button +
design_explain_design/GET /api/explain: reads the tokens and explains the design in plain language (style, dominant color, personality adjectives, fonts, contrast warnings) and lists concrete instructions you can say next — clicking one fills the prompt bar.Starter examples on the empty canvas: one-click example instructions (change primary color / generate a template / bigger text / brighter page) so nobody faces a blank page.
Open-in-new-tab preview: the export modal can open the generated HTML as a standalone single-file page — save it or share it without any tooling.
Canvas-first editing (tldraw)
The dashboard has a Preview / Draw toggle in the canvas toolbar. Draw mode embeds a full tldraw infinite canvas for non-coders:
Real drawing tools: select, pan/zoom, rectangles, ellipses, arrows, lines, text, sticky notes, images, box-select, align/distribute, z-order, undo/redo
Two-way mapping: entering Draw mode turns the current page components into token-colored UI blocks (primary-colored buttons, surface cards, tinted heroes); "Apply to preview" converts the drawing back into components
AI can draw live:
design_draw_canvasqueues rect/text/arrow/image/prism commands that appear on the canvas immediatelyAuto-arrange: select shapes and arrange them into a tidy column with one click
Library drag & drop: drag components from the left library straight onto the canvas — a token-colored block is created at the drop point and autosaved
Prompt delivery status: sending a prompt shows a "queued" chip, which flips to "accepted ✓" when the agent polls
design_check_prompts(REST fallback when WebSocket is down)Built-in prompt engine: change primary/background color (name or #hex), switch light/dark mode, apply a design system by name (e.g. "换成玻璃拟态风格"), generate one of 5 page templates, add common components, undo, or clear — executed instantly without an external agent; unmatched prompts stay queued for the agent
Scrollable side panels: layers / library / versions / comments / tokens / activity scroll with the column
Template-first start: a blank canvas offers one-click templates (SaaS, e-commerce, blog, portfolio, dashboard, blank)
Autosave with debounce to
POST /api/canvas; "Write back page file" exports the drawing as a real HTML page (client/canvas-page.html)Agent-visible:
design_get_canvas/design_apply_canvaslet the AI inspect and adopt what the user drew
Quick Start
# Install dependencies
npm install
# Build
npm run build
# Rebuild the tldraw canvas bundle (client/vendor/)
npm run build:canvas
# Run via stdio (default)
npm start
# Run via HTTP
TRANSPORT=http PORT=3100 npm start
# Desktop app (Electron shell, double-click experience)
npm run appImport → adjust → one-click apply (your product, not a generator)
Prism is an adjustment surface for your own product, not a first-time prototype generator:
导入 (Import):
⋯ → 导入and pick a source — 项目文件夹 / 网页 URL / HTML 代码 (or upload an HTML file) / 客户端界面 (Prism's own UI) / 实际界面截图 (a live screenshot as a reference image). Your page is fetched/parsed into editable components on a fresh page (POST /api/import/product,/api/import-client,/api/capture-client), and the source is recorded (GET /api/imports) for every kind — the apply banner covers all of them.调整 (Adjust): precisely and freely — freeform move/resize, multi-select + align/distribute, z-order, layers, behaviors, tokens.
一键应用 (Apply):
POST /api/applywritesprism-adjusted-<page>.html(exactly what you see) andprism-adjustments.css(design-token overrides you can link into your own product) intoPRISM_PRODUCT_DIR(default~/.prism/products), keeping timestamped backups. A result dialog shows the exact artifact paths plus the<link rel="stylesheet" href="prism-adjustments.css">hint;POST /api/apply/rollbackrestores the latest backup.
The dashboard shows an apply banner whenever the current page came from an imported product.
Fidelity + real writeback (v3.3)
原页面预览: for URL / HTML / project-folder imports the canvas toolbar shows a ◎ 原页面 / ✎ 编辑 toggle. 原页面 renders the complete original document in a sandboxed iframe — original
<head>, CSS, scripts, links and form interactions keep working. 编辑 switches to the editable semantic fragments.Full-document apply: URL/HTML imports rebuild the adjusted page from the original document (scripts and
<head>preserved) instead of exporting a reduced generated page. Plain-HTML project files are written back in place to the original file, with a.prism-backupsbackup and rollback.Fragment element editing: click any inner element of an imported fragment to edit its text, attributes (
href/src/class/id/…), 15 CSS properties, or bind a Prism interaction (elementMeta), which play mode triggers inside the fragment.
Template quick change (想快就套模板,想细就自己微调)
Product definition v3.2 pillar ⑦ — one-click changes applied to the current product (never a fresh page):
组件模板 (Component blocks): the library's components tab leads with 10 ready-made blocks (Hero 分屏+CTA, 定价三档, 注册表单, FAQ, CTA 横幅 …). With the 替换选中 toggle on, clicking a block replaces the selected component in place — same id, same layout position, undoable (
state.replaceComponent); dragging a block onto the canvas adds it.交互模板 (Behavior templates): a new 交互 library tab binds preset interactions to the selected component in one click (打开链接新标签页 / 点击 提示 / 跳转首页 / 显隐切换 / 表单提交反馈 / AI 联动指令), triggered in play mode.
设计系统 (Brand design systems): the library's default 设计系统 tab lists 17 named design systems (Linear, Stripe, Vercel, Notion, Arc, Spotify, Apple, GitHub, IBM Carbon, Shopify Polaris, Duolingo, Discord, Raycast, Airbnb, Figma, Anthropic …) — one click restyles the whole project's tokens (undoable,
POST /api/design-system/apply).Every path is undoable and broadcast; agents get the same power via
design_apply_component_template/design_apply_behavior_template/design_apply_style_guide, andGET /api/template-cataloglists both component and behavior templates.
Exact editing (精确编辑, freeform mode)
Freeform mode is the default canvas (流式/自由 toggle switches back to
auto-stacking) — a precise adjustment surface, not just drag-and-drop:
任意移动 + 缩放: drag any top-level component anywhere; drag its 8 corner/edge handles to resize. Missing layouts are assigned automatically on load, so every component is movable out of the box.
组件内部组成部分: nested item text (feature lists, pricing plans, stats, navbar links, card grids) is editable in place via double-click — including array paths like
items[0].title. Child components appear indented in the layers panel and are selectable/renamable/deletable.标尺 + 参考线: rulers along the canvas edges; drag out of a ruler to create a guide, drag a guide to move it, drag it back onto the ruler (or double-click) to remove it. Guides are session-local editing aids and never leak into exports.
吸附 (Snapping): while dragging or resizing a component, edges/centers snap to guides, the canvas center/edges, and other components' edges/centers (5 px threshold) with a violet snap indicator.
图层重命名: double-click a layer name in the layers panel to rename it (persisted on
ComponentNode.name, undoable); agents usedesign_rename_component.
Interactions on the drawing canvas (自由编辑补缺)
Shapes and images drawn on the tldraw canvas are interactive too:
Select any shape/image → click the ⚡ 交互 button in the canvas toolbar → bind one of the interaction templates (打开链接 / 点击提示 / 跳转首页 / 显隐切换 / 表单提交 / AI 联动) or clear it. The behavior lives on
shape.meta.behaviorand persists with the saved canvas.In play mode (▶ 播放), clicking a shape/image with a bound behavior triggers it — same mental model as the main canvas.
应用到预览 (Apply to preview) carries
meta.behaviorinto the component (shapesToComponents), so behaviors survive the round trip and the exported page keeps them.
Built-in AI (BYO API key)
The dashboard can generate pages itself — no external agent needed:
Open ⋯ → AI 设置 and pick a provider: OpenAI-compatible (OpenAI / DeepSeek / 通义 / 智谱 / local endpoints via a custom base URL), Anthropic Claude, or Google Gemini; paste your API key and save.
Type a request in the prompt bar (e.g. "帮我做一个咖啡店的首页"). If the local instruction engine cannot match it, the built-in AI takes over, the page appears on the canvas, and the status flips to "AI 已生成…".
The key is stored only in
~/.prism/projects/llm-config.json(or yourPRISM_PROJECT_DIR), never logged, never returned by the API (masked).
The LLM generates structured component JSON that goes through the same service/state layer as the MCP tools — fully undoable and broadcast to every connected client.
Tools
Tool | Description |
| Generate harmonious color palettes from a base color using color theory |
| Get curated font pairings (display + body) with Google Fonts links |
| Generate modular typography scales (golden ratio, perfect fourth, etc.) |
| Generate spacing systems (linear, geometric, fibonacci strategies) |
| Generate elevation shadow systems (subtle, medium, sharp) |
| Generate border-radius scales (sharp, subtle, rounded, pill) |
| Check WCAG 2.1 contrast ratios with AA/AAA grading |
| Generate CSS gradients with harmonious color stops |
| Generate responsive breakpoint systems (Tailwind, Bootstrap, Material, custom) |
| Generate a complete design token system (colors, type, spacing, shadows, radii, transitions) |
Real-time design tools (18)
Tool | Description |
| Initialize a design project with neutral default tokens (+ optional base color) |
| Add a UI component (hero, navbar, card, etc.) to the canvas |
| Update properties of an existing component |
| Rename a component's layer (shown in the layers panel, empty reverts to the default) |
| Remove a component from the canvas |
| Set entry/hover animations for a component |
| Set or update a single design token |
| Get the full design state (tokens, components, activity log, undo/redo capability) |
| Undo the last operation |
| Redo an undone operation |
| Add a new page |
| Switch the current page |
| Remove a page |
| Apply a page template (ecommerce, SaaS, blog, portfolio, dashboard) |
| Export the design as HTML, React, Vue, or Figma Tokens |
| Reorder components on the canvas |
| Switch between light and dark theme |
| Get token contrast conflicts |
| Read and clear pending user prompts |
| Persist the current design to a |
| Restore a design from a |
| List saved project files |
| Export tokens as W3C DTCG, CSS, Style Dictionary, or Figma Tokens |
| Import design tokens from DTCG JSON (replace / merge strategies) |
| Score the design against WCAG-oriented accessibility rules |
| Render the design as HTML (and PNG screenshot when Playwright is installed) |
| Save the current design as a reusable template |
| Load a saved template |
| List saved templates |
| Snapshot the design as a named version |
| List version snapshots |
| Restore a previous version |
| Diff two versions (components + tokens) |
| Import tokens from a Google DESIGN.md document |
| Import a webpage URL / HTML as components |
| Look up a named style guide (glassmorphism, brutalist, …) |
| Apply a brand design system over the neutral default tokens |
| Map natural-language adjectives to tokens with traceable reasons |
| Self-describing capability manifest for agents |
| List components on the current page |
| List all pages |
| Rename the project |
| Get current tokens as DTCG JSON |
| Batch-set tokens in a category |
| Delete a single token |
| Heuristic design review with actionable suggestions |
| Learn a brand style from its colors (dominant hue + brand palette) |
| Reorder the page into canonical section order |
| Apply common structural fixes (tokens / navbar / hero / footer) |
| Set the preview platform (web / desktop / mobile) |
| Save current pages as a platform-specific design |
| Restore a saved platform design |
| List saved platform designs |
| Attach a review comment to a component |
| List review comments |
| Remove a review comment |
| Generate a page from a brief (template + semantic style) |
| One-call review loop: score, fix, re-score + a11y audit |
| Explain the current design in plain language + suggest follow-up instructions (read-only) |
| Bind an interaction to a component — navigate / link / toggle / toast / submit / prompt (play mode) |
| Apply a ready-made component block — add, or replace the selected component in place |
| Bind a preset interaction template to a component in one click |
| Align/distribute multiple components in freeform space (single undo step) |
| Reorder component stacking — front / back / forward / backward |
Testing
npm testThe test suite covers the state store (undo/redo, pages, tokens, conflicts),
style-preset token generation, all MCP tool schemas, the shared service layer,
project persistence, DTCG token interop, accessibility audit, render preview,
the prompt executor v1/v2 intents, plain-language design explanation, component
and behavior templates, and an HTTP + WebSocket integration chain
(446 tests passing), plus an optional Playwright browser smoke
(npm run test:e2e).
Git hooks
A pre-push hook runs lint + unit tests before every push to keep main green.
Install it once per clone:
npm run hooks:install # git config core.hooksPath .githooksBypass temporarily with git push --no-verify.
Templates, versions, semantics & style guides
Templates (
design_save_template/design_load_template): persist any design as a.prism-template.jsonfile and re-apply it later.Versions (
design_create_version/design_restore_version/design_diff_versions): session-scoped snapshots with component + token diff.Design review (
design_suggest_improvements): heuristic score for structure completeness, density, motion, accessibility, and tokens.Brand style learning (
design_create_brand_style): derive a brand token set from 1–8 brand colors (dominant hue, primary/accent, radius strategy).Reflow (
design_reflow): canonical page section order in one call.Semantic styling (
design_semantic_style): adjectives such as "温暖 / warm" are translated into measurable deltas (hue, saturation, lightness, radius, shadow, font mood); every applied token records its reason.Style guides (
design_get_style_guide/design_apply_style_guide): glassmorphism, brutalist, retro, neumorphism, cyberpunk, and editorial token overrides.DESIGN.md interop:
design_import_design_mdparses Google DESIGN.md front matter;design_export_tokens(format="design_md")generates it.Webpage import:
design_import_webpagefetches a URL or accepts pasted HTML and extracts navbar/hero/sections/footer components.Presentation export:
design_export(format="presentation")turns every page into a navigable HTML slide deck (arrow keys + print);design_export(format="react-ts")emits typed React components anddesign_export(format="css")emits tokens + base component CSS.flutter/swiftuiformats emit mobile code with token-derived themes.Auto-improve (
design_auto_improve): deterministically adds missing tokens / navbar / hero / footer in one call.Presence: the dashboard shows how many clients are online, and the active preview platform syncs between server state and every client.
Platform designs (
design_save_platform/design_load_platform): keep a separate page layout per platform (web / desktop / mobile) while sharing style + tokens.Comments (
design_add_comment/design_list_comments): attach review feedback to any component without changing the design.One-shot generation (
design_generate_page): turn a brief into a complete page — template detection + semantic adjectives in one call.Review & improve (
design_review_and_improve): score the design, apply structural fixes, re-score, and run the accessibility audit in one call.Tailwind export:
design_export_tokens(format="tailwind")emits a Tailwind v4 CSS-first@themeblock;design_export(format="svelte")emits a Svelte SFC with token CSS.i18n: the dashboard shell supports 中文 / English with a topbar toggle (persisted in localStorage).
Live cursors (C5): every connected dashboard broadcasts its pointer position (throttled); other clients see remote cursors with a client tag.
Conflict detection (C5): every mutation carries the client's last-seen
revision; if the design changed underneath it, the mutation is rejected with aconflictmessage and the client auto-resyncs.Premium UI (spec §5.1–5.3): the dashboard follows a top-tier design system — violet brand (
#7C3AED), white base, 8/12/16 radius ladder, restrained shadows, Vercel-style dual focus rings, six micro-states, dot-grid canvas, and crafted empty states (canvas guide card with AI / library / template entry points, activity clock state, WCAG contrast-pass card with the live ratio).Real screenshots: the screenshot button downloads a PNG rendered by Playwright (
/api/render?format=png), falling back to HTML when browsers are unavailable.Client panels: project switcher, template library (built-in + saved), version snapshots, and component comments are now first-class dashboard panels; activity/token/library search and conflict reload UI included.
Open client UI: the canvas empty state includes "打开客户端界面", which imports the dashboard's own shell (
client/index.html) as a design page (POST /api/import-client) so the service can adjust this project's UI.Capture actual UI: "截取实际界面" screenshots the live dashboard with Playwright (
POST /api/capture-client) and drops the image into the canvas as a faithful reference next to the structural components.One-click write-back: "✍ 写回" (
POST /api/writeback) writes the design tokens back intoclient/style.css(with a timestamped backup) and exports the full design toclient/design-writeback.html, so canvas changes directly restyle the project's own UI.Prompt queue visibility: queued user prompts appear in the activity log and are broadcast as
prompt_queuedfor connected agents/gateways.Canvas fixes: the preview canvas now scrolls when content overflows, and freeform mode lets you drag components anywhere (whole wrapper, not just the handle) and resize with corner handles.
Freeform canvas: toggle between flow layout and free positioning — drag components anywhere, resize with 8 handles, edit X/Y/W/H in the inspector, and auto-arrange into a clean vertical stack. Layouts are stored on the component (
layout,visible,locked) and updated throughdesign_update_component/ WebSocket.
Agent context (MCP Resources & Prompts)
The server exposes four resources (prism://tokens/active,
prism://components/registry, prism://patterns, prism://audit/checklist)
and three prompts (build_page, design_review, import_project) so agents
can discover design context without guessing.
Optional: screenshot rendering
design_render_preview always returns standalone HTML. To enable PNG
screenshots (the AI visual-verification loop), install the optional runtime:
npm i -D playwright && npx playwright install chromiumProject persistence
Designs are saved automatically (debounced) to
~/.prism/projects/autosave.prism.json and restored on the next startup.
Explicit save/load is available through the MCP tools
(design_save_project, design_load_project, design_list_projects),
the REST endpoints (/api/project/save, /api/project/load, /api/projects),
and the dashboard toolbar (💾 保存 / 📂 加载).
Override the storage directory with PRISM_PROJECT_DIR.
Agent workflow
The browser prompt bar queues instructions for the AI agent. Agents poll the queue and act on it:
loop:
result = design_check_prompts() # returns + clears the pending prompt
if result.has_prompt:
act_on(result.prompt) # e.g. design_update_component(...)
sleep(2s)Every queued prompt is also written to the activity log and broadcast over
WebSocket as { type: "prompt_queued", prompt }.
Dashboard shortcuts & quick actions
The dashboard follows common design-tool interaction patterns (inspired by Figma / Linear / Penpot):
Shortcut | Action |
| Toggle the keyboard-shortcut help overlay |
| Open the command palette (type to filter, ↑↓ to select, Enter to run) |
| Focus the AI instruction input |
| Toggle canvas editor / preview mode |
| Undo / redo |
| Delete the selected component |
The prompt bar also shows one-click instruction chips (dark mode, light mode, SaaS/e-commerce templates, clear). Instructions run locally through the built-in prompt executor when they match, and are queued for the agent otherwise. The drawing-canvas template picker renders each built-in template with a semantic miniature thumbnail (hero + feature grid, product grid, dashboard stats + chart, etc.) so non-designers can pick a starting point visually.
Configuration (environment)
Variable | Default | Effect |
|
| HTTP/WebSocket port |
|
| Project/template storage directory |
| on | Restore the autosave checkpoint on startup ( |
| on | Auto-import workspace pages on startup ( |
|
| Screenshot output directory (tool only) |
|
| One-click apply output directory (adjusted HTML + adjustment CSS, with backups) |
| off | Skip Playwright browser smoke tests ( |
Quality gates
npm run lint # ESLint (warnings don't block)
npm run format # Prettier --write
npm run check # lint + build + test (CI gate)
npm run test:e2e # optional Playwright browser smoke (needs Chromium)CI (GitHub Actions, .github/workflows/ci.yml) runs lint + build + test on
every push/PR with Node 20.
Configuration
stdio (local)
{
"mcpServers": {
"ui-design": {
"command": "node",
"args": ["/path/to/ui-design-mcp-server/dist/index.js"]
}
}
}Streamable HTTP (remote)
TRANSPORT=http PORT=3100 npm startEndpoint: http://localhost:3100/mcp
Style Presets
Style | Description | Shadow | Radius | Spacing Base |
| Clean, airy, neutral palette | subtle | subtle | 8px |
| High contrast, vibrant accents | medium | rounded | 8px |
| Warm, friendly, rounded shapes | medium | pill | 8px |
| Dark-first, luminous accents | sharp | subtle | 8px |
| Magazine-like, elegant serif | subtle | sharp | 8px |
| Futuristic, precise, cyan/blue | sharp | sharp | 4px |
Example Usage
Generate a complementary color palette
Tool: ui_generate_color_palette
Arguments: { "base_color": "#3B82F6", "scheme": "complementary" }Check WCAG contrast
Tool: ui_check_color_contrast
Arguments: { "foreground": "#333333", "background": "#FFFFFF" }Generate complete design tokens for a dark theme
Tool: ui_generate_design_tokens
Arguments: { "style": "dark", "base_color": "#6366F1", "dark_mode": true }Project Structure
ui-design-mcp-server/
├── package.json
├── tsconfig.json
├── src/
│ ├── index.ts # Main entry point
│ ├── types.ts # TypeScript interfaces
│ ├── constants.ts # Font pairings, motion profiles, breakpoints
│ ├── utils/
│ │ ├── color.ts # Color theory engine (HSL, contrast, harmony)
│ │ └── formatter.ts # Output formatting helpers
│ └── tools/
│ ├── color-palette.ts # Color palette generation
│ ├── typography.ts # Font pairing + type scale
│ ├── spacing.ts # Spacing scale generation
│ ├── shadows.ts # Shadow system generation
│ ├── border-radius.ts # Border radius scale
│ ├── contrast.ts # WCAG contrast checking
│ ├── gradient.ts # Gradient generation
│ ├── breakpoints.ts # Responsive breakpoints
│ └── design-tokens.ts # Complete design token system
└── dist/ # Built JavaScriptDevelopment
# Development with auto-reload
npm run dev
# Build
npm run build
# Clean build artifacts
npm run cleanRequirements
Node.js >= 18
npm
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.
The Figma MCP server brings Figma design context directly into your AI workflow.
Related MCP Servers
- AlicenseNot gradedqualityDmaintenanceEnables AI agents to create, modify, and manage Figma designs through natural language commands via a specialized MCP server and plugin bridge. It supports a wide range of operations including element creation, property modification, component management, and accessibility checks.4 npm105MIT
- 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
- FlicenseNot 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.-

Figma MCP Serverofficial
FlicenseNot gradedqualityBmaintenanceProvides Figma design context to AI agents, enabling code generation, design system integration, and canvas manipulation through MCP.2,002-