Skip to main content
Glama
lnksoul1

UI Design MCP Server

by lnksoul1

Prism

License: MIT Node.js >= 20 TypeScript Tests MCP Protocol

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_canvas queues rect/text/arrow/image/prism commands that appear on the canvas immediately

  • Auto-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_canvas let 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 app

Import → adjust → one-click apply (your product, not a generator)

Prism is an adjustment surface for your own product, not a first-time prototype generator:

  1. 导入 (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.

  2. 调整 (Adjust): precisely and freely — freeform move/resize, multi-select + align/distribute, z-order, layers, behaviors, tokens.

  3. 一键应用 (Apply): POST /api/apply writes prism-adjusted-<page>.html (exactly what you see) and prism-adjustments.css (design-token overrides you can link into your own product) into PRISM_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/rollback restores 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-backups backup 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, and GET /api/template-catalog lists 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 use design_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.behavior and 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.behavior into 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:

  1. 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.

  2. 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 已生成…".

  3. The key is stored only in ~/.prism/projects/llm-config.json (or your PRISM_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

ui_generate_color_palette

Generate harmonious color palettes from a base color using color theory

ui_suggest_typography

Get curated font pairings (display + body) with Google Fonts links

ui_generate_type_scale

Generate modular typography scales (golden ratio, perfect fourth, etc.)

ui_generate_spacing_scale

Generate spacing systems (linear, geometric, fibonacci strategies)

ui_generate_shadow_system

Generate elevation shadow systems (subtle, medium, sharp)

ui_generate_border_radius_scale

Generate border-radius scales (sharp, subtle, rounded, pill)

ui_check_color_contrast

Check WCAG 2.1 contrast ratios with AA/AAA grading

ui_generate_gradient

Generate CSS gradients with harmonious color stops

ui_suggest_breakpoints

Generate responsive breakpoint systems (Tailwind, Bootstrap, Material, custom)

ui_generate_design_tokens

Generate a complete design token system (colors, type, spacing, shadows, radii, transitions)

Real-time design tools (18)

Tool

Description

design_init

Initialize a design project with neutral default tokens (+ optional base color)

design_add_component

Add a UI component (hero, navbar, card, etc.) to the canvas

design_update_component

Update properties of an existing component

design_rename_component

Rename a component's layer (shown in the layers panel, empty reverts to the default)

design_remove_component

Remove a component from the canvas

design_set_animation

Set entry/hover animations for a component

design_set_token

Set or update a single design token

design_get_state

Get the full design state (tokens, components, activity log, undo/redo capability)

design_undo

Undo the last operation

design_redo

Redo an undone operation

design_add_page

Add a new page

design_switch_page

Switch the current page

design_remove_page

Remove a page

design_apply_template

Apply a page template (ecommerce, SaaS, blog, portfolio, dashboard)

design_export

Export the design as HTML, React, Vue, or Figma Tokens

design_reorder_component

Reorder components on the canvas

design_set_theme

Switch between light and dark theme

design_get_conflicts

Get token contrast conflicts

design_check_prompts

Read and clear pending user prompts

design_save_project

Persist the current design to a .prism.json file

design_load_project

Restore a design from a .prism.json file

design_list_projects

List saved project files

design_export_tokens

Export tokens as W3C DTCG, CSS, Style Dictionary, or Figma Tokens

design_import_tokens

Import design tokens from DTCG JSON (replace / merge strategies)

design_audit_accessibility

Score the design against WCAG-oriented accessibility rules

design_render_preview

Render the design as HTML (and PNG screenshot when Playwright is installed)

design_save_template

Save the current design as a reusable template

design_load_template

Load a saved template

design_list_templates

List saved templates

design_create_version

Snapshot the design as a named version

design_list_versions

List version snapshots

design_restore_version

Restore a previous version

design_diff_versions

Diff two versions (components + tokens)

design_import_design_md

Import tokens from a Google DESIGN.md document

design_import_webpage

Import a webpage URL / HTML as components

design_get_style_guide

Look up a named style guide (glassmorphism, brutalist, …)

design_apply_style_guide

Apply a brand design system over the neutral default tokens

design_semantic_style

Map natural-language adjectives to tokens with traceable reasons

design_list_capabilities

Self-describing capability manifest for agents

design_list_components

List components on the current page

design_list_pages

List all pages

design_set_project_name

Rename the project

design_get_tokens

Get current tokens as DTCG JSON

design_set_token_batch

Batch-set tokens in a category

design_delete_token

Delete a single token

design_suggest_improvements

Heuristic design review with actionable suggestions

design_create_brand_style

Learn a brand style from its colors (dominant hue + brand palette)

design_reflow

Reorder the page into canonical section order

design_auto_improve

Apply common structural fixes (tokens / navbar / hero / footer)

design_set_platform

Set the preview platform (web / desktop / mobile)

design_save_platform

Save current pages as a platform-specific design

design_load_platform

Restore a saved platform design

design_list_platforms

List saved platform designs

design_add_comment

Attach a review comment to a component

design_list_comments

List review comments

design_remove_comment

Remove a review comment

design_generate_page

Generate a page from a brief (template + semantic style)

design_review_and_improve

One-call review loop: score, fix, re-score + a11y audit

design_explain_design

Explain the current design in plain language + suggest follow-up instructions (read-only)

design_set_behavior

Bind an interaction to a component — navigate / link / toggle / toast / submit / prompt (play mode)

design_apply_component_template

Apply a ready-made component block — add, or replace the selected component in place

design_apply_behavior_template

Bind a preset interaction template to a component in one click

design_align_components

Align/distribute multiple components in freeform space (single undo step)

design_z_order_component

Reorder component stacking — front / back / forward / backward

Testing

npm test

The 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 .githooks

Bypass 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.json file 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_md parses Google DESIGN.md front matter; design_export_tokens(format="design_md") generates it.

  • Webpage import: design_import_webpage fetches 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 and design_export(format="css") emits tokens + base component CSS. flutter / swiftui formats 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 @theme block; 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 a conflict message 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 into client/style.css (with a timestamped backup) and exports the full design to client/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_queued for 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 through design_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 chromium

Project 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

Ctrl+K

Open the command palette (type to filter, ↑↓ to select, Enter to run)

/

Focus the AI instruction input

P

Toggle canvas editor / preview mode

Ctrl+Z / Ctrl+Shift+Z

Undo / redo

Del

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

DASHBOARD_PORT

3100

HTTP/WebSocket port

PRISM_PROJECT_DIR

~/.prism/projects

Project/template storage directory

PRISM_AUTOLOAD

on

Restore the autosave checkpoint on startup (off disables)

PRISM_AUTOIMPORT

on

Auto-import workspace pages on startup (off starts with a fresh Home page)

PRISM_PREVIEWS_DIR

.prism-previews

Screenshot output directory (tool only)

PRISM_PRODUCT_DIR

~/.prism/products

One-click apply output directory (adjusted HTML + adjustment CSS, with backups)

PRISM_SKIP_E2E

off

Skip Playwright browser smoke tests (1 skips)

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 start

Endpoint: http://localhost:3100/mcp

Style Presets

Style

Description

Shadow

Radius

Spacing Base

minimal

Clean, airy, neutral palette

subtle

subtle

8px

bold

High contrast, vibrant accents

medium

rounded

8px

playful

Warm, friendly, rounded shapes

medium

pill

8px

dark

Dark-first, luminous accents

sharp

subtle

8px

editorial

Magazine-like, elegant serif

subtle

sharp

8px

tech

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 JavaScript

Development

# Development with auto-reload
npm run dev

# Build
npm run build

# Clean build artifacts
npm run clean

Requirements

  • Node.js >= 18

  • npm

Available Tools

28 tools
design_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": [{...}, {...}, {...}]})

ParametersJSON Schema
NameRequiredDescriptionDefault
typeYesComponent 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)
propsNoComponent properties
variantNoComponent variant
parent_idNoParent component ID for nesting

TDQS

A4.3/5.0
Behavior4/5

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.

Conciseness4/5

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.

Completeness4/5

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.

Parameters4/5

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.

Purpose5/5

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.

Usage Guidelines4/5

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="产品详情页")

ParametersJSON Schema
NameRequiredDescriptionDefault
nameYesPage name

TDQS

A4/5.0
Behavior4/5

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.

Conciseness5/5

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.

Completeness4/5

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.

Parameters3/5

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.

Purpose5/5

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.

Usage Guidelines3/5

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")

ParametersJSON Schema
NameRequiredDescriptionDefault
templateYesTemplate name

TDQS

A4.1/5.0
Behavior3/5

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.

Conciseness4/5

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.

Completeness4/5

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.

Parameters4/5

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.

Purpose5/5

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.

Usage Guidelines4/5

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 PromptsA
Read-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.

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

A4/5.0
Behavior1/5

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.

Conciseness5/5

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.

Completeness4/5

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.

Parameters4/5

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.

Purpose5/5

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.

Usage Guidelines5/5

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 CodeA
Read-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")

ParametersJSON Schema
NameRequiredDescriptionDefault
formatYesExport format

TDQS

A4.4/5.0
Behavior4/5

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.

Conciseness5/5

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.

Completeness5/5

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.

Parameters5/5

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.

Purpose5/5

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.

Usage Guidelines3/5

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 ConflictsA
Read-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.

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

A4.1/5.0
Behavior4/5

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.

Conciseness5/5

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.

Completeness5/5

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.

Parameters4/5

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.

Purpose5/5

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.

Usage Guidelines2/5

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 StateA
Read-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)

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

A4.5/5.0
Behavior4/5

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.

Conciseness5/5

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.

Completeness5/5

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.

Parameters4/5

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.

Purpose5/5

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.

Usage Guidelines4/5

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 ProjectA
Destructive

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")

ParametersJSON Schema
NameRequiredDescriptionDefault
styleYesDesign style preset
base_colorNoOverride base color (hex, e.g. '#6366F1')
project_nameYesProject name

TDQS

A3.9/5.0
Behavior4/5

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.

Conciseness4/5

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.

Completeness4/5

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.

Parameters3/5

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.

Purpose5/5

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.

Usage Guidelines3/5

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.

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

A4/5.0
Behavior3/5

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.

Conciseness5/5

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.

Completeness4/5

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.

Parameters4/5

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.

Purpose5/5

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.

Usage Guidelines3/5

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 ComponentA
DestructiveIdempotent

Remove a component from the canvas by its ID.

Args:

  • id (string): Component ID to remove

Example:

  • design_remove_component(id="comp_12345")

ParametersJSON Schema
NameRequiredDescriptionDefault
idYesComponent ID to remove

TDQS

A4/5.0
Behavior3/5

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.

Conciseness5/5

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.

Completeness4/5

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.

Parameters3/5

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.

Purpose5/5

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.

Usage Guidelines4/5

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 PageB
DestructiveIdempotent

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")

ParametersJSON Schema
NameRequiredDescriptionDefault
page_idYesPage ID to remove

TDQS

B3.3/5.0
Behavior2/5

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.

Conciseness5/5

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.

Completeness3/5

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.

Parameters3/5

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.

Purpose5/5

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.

Usage Guidelines2/5

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 ComponentA
Idempotent

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")

ParametersJSON Schema
NameRequiredDescriptionDefault
to_idYesID of the reference component
from_idYesID of the component to move
positionYesPosition relative to reference component

TDQS

A3.8/5.0
Behavior3/5

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.

Conciseness5/5

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.

Completeness4/5

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.

Parameters3/5

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.

Purpose5/5

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.

Usage Guidelines3/5

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 AnimationA
Idempotent

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")

ParametersJSON Schema
NameRequiredDescriptionDefault
curveNoEasing curve (ease, easeOut, spring, etc.)
delayNoDelay in seconds
entryNoEntry animation (fadeUp, fadeIn, scaleIn, slideRight, etc.)
hoverNoHover animation (scaleUp, lift, glow)
durationNoDuration in seconds
component_idYesComponent ID

TDQS

A4.1/5.0
Behavior4/5

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.

Conciseness4/5

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.

Completeness4/5

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.

Parameters4/5

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.

Purpose5/5

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.

Usage Guidelines3/5

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 ModeA
Idempotent

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")

ParametersJSON Schema
NameRequiredDescriptionDefault
modeYesTheme mode

TDQS

A4/5.0
Behavior4/5

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.

Conciseness4/5

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.

Completeness5/5

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.

Parameters3/5

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.

Purpose5/5

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.

Usage Guidelines3/5

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 TokenA
Idempotent

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")

ParametersJSON Schema
NameRequiredDescriptionDefault
keyYesToken key (e.g. 'color-primary')
valueYesToken value
categoryYesToken category

TDQS

A4.1/5.0
Behavior4/5

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.

Conciseness4/5

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.

Completeness4/5

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.

Parameters4/5

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.

Purpose5/5

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.

Usage Guidelines3/5

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 PageB
Idempotent

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")

ParametersJSON Schema
NameRequiredDescriptionDefault
page_idYesPage ID to switch to

TDQS

B3.2/5.0
Behavior2/5

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.

Conciseness4/5

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.

Completeness3/5

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.

Parameters3/5

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.

Purpose5/5

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.

Usage Guidelines2/5

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.

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

A4.4/5.0
Behavior4/5

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.

Conciseness5/5

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.

Completeness4/5

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.

Parameters4/5

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.

Purpose5/5

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.

Usage Guidelines4/5

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 PropertiesA
Idempotent

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": "点击这里"})

ParametersJSON Schema
NameRequiredDescriptionDefault
idYesComponent ID
propsYesProperties to update

TDQS

A4.4/5.0
Behavior4/5

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.

Conciseness5/5

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.

Completeness4/5

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.

Parameters4/5

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.

Purpose5/5

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.

Usage Guidelines4/5

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)A
Read-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"

ParametersJSON Schema
NameRequiredDescriptionDefault
backgroundYesBackground hex color (e.g. '#FFFFFF' or 'FFFFFF')
foregroundYesForeground/text hex color (e.g. '#333333' or '333333')
response_formatNoOutput formatmarkdown

TDQS

A4.4/5.0
Behavior4/5

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.

Conciseness4/5

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.

Completeness5/5

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.

Parameters4/5

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.

Purpose5/5

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.

Usage Guidelines4/5

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 ScaleA
Read-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"

ParametersJSON Schema
NameRequiredDescriptionDefault
styleNoRadius visual stylesubtle
response_formatNoOutput formatmarkdown

TDQS

A4.5/5.0
Behavior4/5

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.

Conciseness5/5

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.

Completeness5/5

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.

Parameters4/5

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.

Purpose5/5

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.

Usage Guidelines4/5

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 PaletteA
Read-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"

ParametersJSON Schema
NameRequiredDescriptionDefault
styleNoStyle preset (used when base_color is omitted)minimal
schemeNoColor harmony schememonochromatic
base_colorNoHex color code (e.g. '#3B82F6' or '3B82F6'). Omit to use style preset.
response_formatNoOutput formatmarkdown
include_neutralsNoInclude 11-step neutral gray scale

TDQS

A4.4/5.0
Behavior4/5

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.

Conciseness4/5

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.

Completeness5/5

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.

Parameters4/5

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.

Purpose5/5

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.

Usage Guidelines4/5

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 TokensA
Read-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

ParametersJSON Schema
NameRequiredDescriptionDefault
styleNoDesign style presetminimal
dark_modeNoInclude dark mode color tokens
base_colorNoOverride base color (hex, e.g. '#6366F1')
response_formatNoOutput formatmarkdown

TDQS

A4.4/5.0
Behavior4/5

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.

Conciseness5/5

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.

Completeness4/5

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.

Parameters4/5

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.

Purpose5/5

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.

Usage Guidelines4/5

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 GradientA
Read-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"

ParametersJSON Schema
NameRequiredDescriptionDefault
typeNoGradient typelinear
angleNoAngle in degrees (linear only)
stopsNoNumber of color stops (2-5)
directionNoColor shift directionanalogous
base_colorYesBase hex color (e.g. '#6366F1' or '6366F1')
response_formatNoOutput formatmarkdown

TDQS

A4.2/5.0
Behavior4/5

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.

Conciseness4/5

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.

Completeness5/5

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.

Parameters4/5

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.

Purpose5/5

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.

Usage Guidelines3/5

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 SystemA
Read-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"

ParametersJSON Schema
NameRequiredDescriptionDefault
styleNoShadow visual stylesubtle
response_formatNoOutput formatmarkdown

TDQS

A4.1/5.0
Behavior4/5

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.

Conciseness4/5

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.

Completeness4/5

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.

Parameters3/5

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.

Purpose5/5

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.

Usage Guidelines4/5

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 ScaleA
Read-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"

ParametersJSON Schema
NameRequiredDescriptionDefault
strategyNoScale generation strategygeometric
base_unitNoBase unit in px (4 or 8)
response_formatNoOutput formatmarkdown

TDQS

A4.5/5.0
Behavior4/5

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.

Conciseness5/5

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.

Completeness5/5

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.

Parameters4/5

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.

Purpose5/5

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.

Usage Guidelines4/5

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 ScaleA
Read-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"

ParametersJSON Schema
NameRequiredDescriptionDefault
ratioNoModular scale ratioperfect_fourth
base_sizeNoBase font size in px (12-24)
response_formatNoOutput formatmarkdown

TDQS

A4.8/5.0
Behavior5/5

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.

Conciseness5/5

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.

Completeness5/5

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.

Parameters5/5

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.

Purpose5/5

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.

Usage Guidelines4/5

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 BreakpointsA
Read-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"

ParametersJSON Schema
NameRequiredDescriptionDefault
strategyNoMedia query strategymobile_first
frameworkNoBreakpoint preset frameworktailwind
response_formatNoOutput formatmarkdown

TDQS

A4.3/5.0
Behavior4/5

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.

Conciseness4/5

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.

Completeness4/5

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.

Parameters4/5

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.

Purpose5/5

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.

Usage Guidelines4/5

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 PairingA
Read-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"

ParametersJSON Schema
NameRequiredDescriptionDefault
styleNoDesign style for font pairingminimal
categoryNoFont category preferenceany
response_formatNoOutput formatmarkdown

TDQS

A4.4/5.0
Behavior4/5

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.

Conciseness4/5

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.

Completeness5/5

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.

Parameters4/5

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.

Purpose5/5

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.

Usage Guidelines4/5

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.

  1. 28 tool updatesv1.0.0
    • First observeddesign_add_component
    • First observeddesign_add_page
    • First observeddesign_apply_template
    • First observeddesign_check_prompts
    • First observeddesign_export
    • First observeddesign_get_conflicts
    • First observeddesign_get_state
    • First observeddesign_init
    • First observeddesign_redo
    • First observeddesign_remove_component
    • First observeddesign_remove_page
    • First observeddesign_reorder_component
    • First observeddesign_set_animation
    • First observeddesign_set_theme
    • First observeddesign_set_token
    • First observeddesign_switch_page
    • First observeddesign_undo
    • First observeddesign_update_component
    • First observedui_check_color_contrast
    • First observedui_generate_border_radius_scale
    • First observedui_generate_color_palette
    • First observedui_generate_design_tokens
    • First observedui_generate_gradient
    • First observedui_generate_shadow_system
    • First observedui_generate_spacing_scale
    • First observedui_generate_type_scale
    • First observedui_suggest_breakpoints
    • First observedui_suggest_typography

TDQS

A4/5.0

Scored across 28 tools

Disambiguation5/5

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.

Naming Consistency5/5

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.

Tool Count3/5

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.

Completeness5/5

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

ActivityMaintained
ResponsivenessNo issues

Related MCP Connectors

Related MCP Servers

  • A
    license
    Not graded
    quality
    D
    maintenance
    Enables 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 npm
    105
    MIT
  • A
    license
    A
    quality
    C
    maintenance
    MCP server that gives LLMs deep knowledge of design systems and tokens, enabling intelligent design evolution, token analysis, and designer-to-developer handoffs.
    37
    5 npm
    2
    MIT
  • F
    license
    Not graded
    quality
    C
    maintenance
    MCP 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.
    -
  • F
    license
    Not graded
    quality
    B
    maintenance
    Provides Figma design context to AI agents, enabling code generation, design system integration, and canvas manipulation through MCP.
    2,002
    -