Skip to main content
Glama
598,551 tools. Updated 2026-09-22 03:06

"Resources for UI Design" matching MCP tools:

  • Return a canonical Clipkit doc as text. topic "card" = the ~8KB compact authoring card — the recommended context for authoring; "pattern-data-viz" / "pattern-cinematic-ui" / "pattern-ui-screencast" = ~4-5KB archetype pattern cards (proven idioms: count-ups and bar rows; product hero shots with camera rigs; faked app UI with typing/cursor/clicks) — load ONE alongside the card when the brief matches its archetype; "agents" = the full authoring guide (fetch only when the card doesn't cover a need); "protocol" = the formal field spec; "brand" = brand reference. (Same docs offered as MCP resources, exposed as a tool so you can read them directly — resources are not always model-readable.)
    ConnectorNo auth
  • Evaluates UI elements for accessibility issues that automated scanners miss. COST: $0.01 USDC via x402 on Base-compatible EVM network per call. Checks beyond what axe/Lighthouse/WAVE catch at the design stage: - Touch targets below 24×24px (WCAG 2.5.8 AA hard fail) - Touch targets below 44×44px (WCAG 2.5.5 AAA recommended) - Information conveyed by color alone without a secondary indicator (WCAG 1.4.1) - Missing focus indicators on interactive elements (WCAG 2.4.7) - Focus rings thinner than 2px (WCAG 2.4.11) - Focus ring contrast below 3:1 against adjacent background (WCAG 2.4.11) - Interactive elements below the practical usability height floor Args: - elements: Array of 1–50 UI element objects - screen_name: Optional label for the evaluation report Each element requires: element_type. Provide width_px/height_px for touch target checks. Provide uses_color_only + secondary indicator flags for 1.4.1 checks. Provide is_interactive + focus_visible + focus indicator properties for focus checks. Returns: Structured report with: - Per-element scores (0–100) and specific issues - Severity levels (critical/major/minor) with WCAG references - What automated tools miss and why - Concrete fix recommendations - Overall score and verdict (pass/needs_work/fail) - Top issues sorted by severity
    ConnectorNo auth
  • Get the Designesy Design Review framework — an 8-dimension rubric (Purpose, Clarity, Context, Inclusion, System coherence, Durability, Delight, Responsibility) plus the agent prompt, output format, and verification checklist for a qualitative design critique. Use this when you want a structured rubric to critique a design holistically, rather than a numeric compliance score. When NOT to use: for a deterministic numeric score, use designesy_score; this tool gives you a rubric, not a number. Read-only — returns the rubric + prompt. The calling agent performs the actual critique (this tool does not evaluate the design for you). Returns JSON: { rubric, dimensions[8], agent_prompt, output_format, verification_checklist }. Pass artifact/purpose/context/rules to get a pre-filled critique prompt; omit all four to get the blank framework.
    ConnectorNo auth
  • Get the text content of a doc, presentation, whiteboard, social media post, and other designs in Canva (except sheets, as it does not return data in sheets). Use this when you only need to read text content without making changes. IMPORTANT: If the user wants to edit, update, change, translate, or fix content, use `start-editing-transaction` instead as it shows content AND enables editing. You must provide the design ID, which you can find with the `search-designs` tool. You may also pass a full Canva design share URL directly (do not pre-extract just the ID) — any collaboration token embedded in the URL is needed to access a design shared via link and will be parsed and forwarded automatically. Do not use web search to get the content of a design as the content is not accessible to the public. Example URL: https://www.canva.com/design/{design_id}.
    ConnectorOAuth
  • LEGACY-ONLY — DO NOT CALL WHEN create-design IS AVAILABLE. If create-design is in the tool list, you MUST NOT call this tool. Call create-design instead. All instructions below apply only when create-design is absent from the tool list. A failed create-design call does not make it unavailable. Generate professionally designed content in Canva including visual designs (posters, social media posts, presentations, flyers) and text-based documents (memos, articles, newsletters, proposals, reports, business plans, requirements documents). Each extra slide adds significant latency (e.g. 15 slides can take 3x longer than 5). Keep to 1-5 slides unless the user explicitly requests more. Use this tool when the user asks you to write, create, generate, or draft ANY document or visual design. Examples: - "Write a memo..." → use this tool to create a Canva Doc - "Generate a business proposal..." → use this tool to create a Canva Doc - "Draft a product overview..." → use this tool to create a Canva Doc DO NOT use this tool for fixed-format visual designs when prepare-design-generation is available. Do NOT use this tool when the user just wants advice, explanations, or information. DO NOT use this tool when the user's message contains a URL and their intent is to create a design FROM that URL — use import-design-from-url instead. Use the 'query' parameter to tell AI what you want to create. The tool doesn't have context of previous requests. ALWAYS include details from previous queries for each iteration. The tool provides best results with detailed context. ALWAYS look up the chat history and provide as much context as possible in the 'query' parameter. Ask for more details when the tool returns this error message 'Common queries will not be generated'. The generated designs are design candidates for users to select from. Ask for a preferred design and use 'create-design-from-candidate' tool to add the design to users' account. The IDs in the URLs are not design IDs. Do not use them to get design or design content. When using the 'asset_ids' parameter, assets are inserted in the order provided. For small designs with few image slots, only supply the images the user wants. For multi-page designs like presentations, supply images in the order of the slides. The tool will return a list of generated design candidates, including a candidate ID, preview thumbnail and url. Before editing, exporting, or resizing a generated design, follow these steps: 1. call 'create-design-from-candidate' tool with 'job_id' and 'candidate_id' of the selected design 2. call other tools with 'design_id' in the response For presentations, target 1-5 slides by default (length: "short"). Format the query string with these sections in order (use the headers exactly): 1. **Presentation Brief** Include: * **Title** (working title for the deck) * **Topic / Scope** (1–2 lines; include definitions if terms are uncommon) * **Key Messages** (3–5 crisp takeaways) * **Constraints & Assumptions** (timebox, brand, data limits, languages, etc.) * **Style Guide** (tone, color palette, typography hints, imagery style) 2. **Narrative Arc** A one-paragraph outline of the story flow (e.g., Hook → Problem → Insight → Solution → Proof → Plan → CTA). Keep transitions explicit. 3. **Slide Plan** Provide numbered slides with **EXACT titles** and detailed content. For each slide, include all of the following subsections in this order (use the labels exactly): * **Slide {N} — "{Exact Title}"** * **Goal:** one sentence describing the purpose of the slide. * **Bullets (3–6):** short, parallel phrasing; facts, examples, or specifics (avoid vague verbs). * **Visuals:** explicit recommendation (e.g., "Clustered bar chart of X by Y (2022–2025)", "Swimlane diagram", "2×2 matrix", "Full-bleed photo of <subject>"). * **Data/Inputs:** concrete values, sources, or placeholders to be filled (if unknown, propose realistic ranges or example figures). * **Speaker Notes (2–4 sentences):** narrative details, definitions, and transitions. * **Asset Hint (optional):** reference to an asset by descriptive name or index if assets exist (e.g., "Use Asset #3: 'logo_dark.svg' as corner mark"). * **Transition:** one sentence that logically leads into the next slide. > Ensure the Slide Plan forms a **cohesive story** (each slide's Goal and Transition should support the Narrative Arc). **Quality checklist (the model must self-check before finalizing)** * Titles are unique, concise (≤ 65 characters), and action-or insight-oriented. * Each slide has 3–6 bullets; no paragraph walls; numbers are specific where possible. * Visuals are concrete (chart/diagram names + variables/timeframes); tables are used only when necessary. * Terminology is defined once and used consistently; acronyms expanded on first use. * Transitions form an intelligible narrative; the story arc is obvious from titles alone. * No placeholders like "[TBD]" or "[insert]". If data is unknown, propose realistic figures and label as "example values". * All required headers and subsections are present, in the exact order above.
    ConnectorOAuth
  • Use this when the user wants Lemonvite's design engine to create the invitation artwork — because this assistant cannot produce images itself, or because the user asked for a Lemonvite design. Describe the look in design_brief (theme, colours, mood, motifs); the event date, time and venue are lettered onto the design automatically unless include_event_details is false. A reference_image from the conversation guides the engine's style. Each call spends one of the host's design generations (new accounts start with 5; every purchased account credit adds 5) and REPLACES the current artwork (the previous design stays in the event's design history on the website), so confirm with the user before calling it. If this assistant already made an image in the conversation, attach it with invitation_image on lemonvite_update_invitation instead. Never call it merely because designs or themes are being discussed.
    Connector
    Destructive
    OAuth

Matching MCP Servers

  • A
    license
    A
    quality
    D
    maintenance
    🎨 AI-powered UI/UX design intelligence - 1519+ curated design resources through MCP | React, Vue, Next.js, Flutter & more
    7
    63 npm
    32
    MIT
  • A
    license
    A
    quality
    B
    maintenance
    Enables AI agents to browse, search, and read a curated library of 198 UI/UX and animation design skills across 17 categories, distilled from 10 open-source projects, with a progressive 5-step workflow for guidance.
    5
    665 npm
    MIT

Matching MCP Connectors

  • Discover and install Aura UI Blade components for Laravel, Livewire and Tailwind CSS 4.

  • Design Feeds MCP.

  • Perform structural page operations on Canva designs: combine pages from multiple designs, insert pages, reorder pages, or delete entire pages. This tool can: 1. Create a new design by combining pages from one or more existing designs 2. Insert pages from one design into another existing design 3. Move or reorder pages within a design 4. Delete (remove) entire pages from a design Use this tool (NOT start-editing-transaction) when the user wants to: - Delete or remove one or more pages/slides from a design - Reorder or rearrange pages/slides within a design - Combine, merge, or stitch together multiple designs - Copy or insert pages from one design into another Do NOT use this tool for editing content within pages (text, images, etc.) — use start-editing-transaction for that. CRITICAL: You MUST ALWAYS ask the user for explicit confirmation before calling this tool, regardless of the operation type. Show them a summary of exactly what will change and ask "Would you like me to proceed?" Wait for their clear approval, then call this tool immediately. MANDATORY DELETE CONFIRMATION: If ANY operation in the list is a delete_pages operation, you MUST follow this protocol with NO exceptions — regardless of whether the pages are empty, have content, or any other condition: 1. Show a summary of ALL operations, marking each deletion as: "⚠️ Delete page(s) [X] — CANNOT BE UNDONE" 2. Tell the user: "To proceed, please type exactly: I approve the deletion" 3. ONLY call this tool if the user types the EXACT phrase "I approve the deletion" — do NOT accept any variation such as "yes", "ok", "approve", "I approve", "go ahead", "delete them", or any other paraphrase 4. If the user types anything other than the exact phrase, ask them again to type it exactly For insert_pages and move_pages only (no deletes), a simple "Would you like me to proceed?" confirmation is sufficient. Operations are applied sequentially. Page numbers are 1-based and evaluated at the time each operation runs. The tool automatically polls for job completion and returns the final result.
    Connector
    Destructive
    OAuth
  • Return ready-to-embed SVG markup for 1-20 Infyicon icons in one call (pass an array of ids from search_icons). Use when building a UI, icon set or design system so you fetch several icons at once instead of calling get_icon_svg repeatedly; use get_icon_svg for a single icon. Read-only, no auth; ids beyond the first 20 are silently dropped; each bad or unknown id gets a per-item error while the rest still succeed; oversized SVGs (>200 KB) return svg_url instead of markup. Free with attribution to infyicon.com.
    ConnectorNo auth
  • Return ready-to-embed SVG markup for 1-20 Infyicon icons in one call (pass an array of ids from search_icons). Use when building a UI, icon set or design system so you fetch several icons at once instead of calling get_icon_svg repeatedly; use get_icon_svg for a single icon. Read-only, no auth; ids beyond the first 20 are silently dropped; each bad or unknown id gets a per-item error while the rest still succeed; oversized SVGs (>200 KB) return svg_url instead of markup. Free with attribution to infyicon.com.
    ConnectorNo auth
  • Get the Designesy SKILL.md — the agent-skill-format export of the design-system contract, written as behavioral rules an AI coding agent can drop into .agents/skills/ or a system prompt. Use this when you want the contract in a form that steers how an agent *builds* UI (tokens, anti-patterns, behavioral rules, verification). When NOT to use: for the raw contract JSON, use designesy_contract; for scoring, use designesy_score. Read-only — no side effects. Returns markdown text (SKILL.md format) — drop into .agents/skills/ or paste into a system prompt. No parameters.
    ConnectorNo auth
  • Returns the MCP knowledge version: gitSha, indexedAt, componentCount, patternCount, uptimeSeconds. Call this ONCE per session before generating UI code so you know how fresh the design-system data is. Cheap to call. If gitSha is "unknown" or indexedAt is far in the past, surface that to the user before relying on the data.
    ConnectorNo auth
  • Returns the MCP knowledge version: gitSha, indexedAt, componentCount, patternCount, uptimeSeconds. Call this ONCE per session before generating UI code so you know how fresh the design-system data is. Cheap to call. If gitSha is "unknown" or indexedAt is far in the past, surface that to the user before relying on the data.
    ConnectorNo auth
  • Generate a complete WCAG-compliant UI state palette from a brand hex. Returns colours for: brand, hover, active, disabled, focus ring, success, warning, error, info, surface subtle, surface strong. All states computed for contrast against your background colour. Returns hex, contrast ratio, WCAG grade, and usage note for each state. Includes CSS custom properties ready to paste. Supports light and dark mode. Use before building any UI component system.
    ConnectorNo auth
  • Generate a complete WCAG-compliant UI state palette from a brand hex. Returns colours for: brand, hover, active, disabled, focus ring, success, warning, error, info, surface subtle, surface strong. All states computed for contrast against your background colour. Returns hex, contrast ratio, WCAG grade, and usage note for each state. Includes CSS custom properties ready to paste. Supports light and dark mode. Use before building any UI component system.
    ConnectorNo auth
  • Generate a complete WCAG-compliant UI state palette from a brand hex. Returns colours for: brand, hover, active, disabled, focus ring, success, warning, error, info, surface subtle, surface strong. All states computed for contrast against your background colour. Returns hex, contrast ratio, WCAG grade, and usage note for each state. Includes CSS custom properties ready to paste. Supports light and dark mode. Use before building any UI component system.
    ConnectorNo auth
  • Read a resource by its URI. For static resources, provide the exact URI. For templated resources, provide the URI with template parameters filled in. Returns the resource content as a string. Binary content is base64-encoded.
    ConnectorAPI key
  • UI/UX guidelines and a review of a page against them. mode="guidelines" returns the principles — Nielsen's 10 heuristics, Hick's and Fitts's laws, WCAG 2.2, neurodiversity-inclusive design, motion and microinteractions (including when Lottie or Rive are worth their bundle cost), SVG craft and animation, light-first theming, lightness and responsiveness — optionally filtered by topic. Read them BEFORE designing or building UI. mode="review" statically reviews supplied HTML and CSS, or a URL, and reports what violates which principle. The review reads source and does not render it, so it cannot measure computed contrast, real target sizes, or where focus lands — it catches what is visible in the markup, which is most of what actually goes wrong.
    ConnectorNo auth
  • Get the available services, prices, durations, and bookable staff or resources for a specific Korean beauty or wellness shop. Use this after finding a shop when service details, prices, durations, staff, or resources are needed before checking appointment availability. Pass lang to receive the content translated into the customer's language.
    ConnectorNo auth
  • Lists every UI component in the project's design system, each with its name, source package, import path, and a short note on its intended use. Read-only and unpaginated: it returns the whole catalog across all packages assigned to the project, so expect a large response on big design systems. Use it to see what exists before building UI, and to get the exact component name other tools need. Do not use it to find a component by need - search_components ranks by description - and do not use it for props, examples, or Figma data, which only get_component returns. project_id is not a display filter: it selects the assigned packages, so two projects in one organization legitimately return different catalogs.
    ConnectorNo auth
  • Use when the user asks whether a board passes KiCad's own checks, or before trusting a design: returns the stored DRC (design rules, unconnected copper, schematic-vs-board parity) and ERC (electrical rules) results for the board's current version, with exact error and warning counts per category and paged example violations. These are KiCad's checks as the board's author configured them, so rules they waived were never evaluated and are listed separately. This is not a design review. If the checks have not been run for this version the result says so, and that is NOT the same as passing.
    ConnectorOAuth
  • Subscribe an existing webhook endpoint to events from ONE specific extractor, classifier, splitter, or workflow (webhooks group) — deliveries for other resources are unaffected. Use this instead of global enabledEvents when only some resources matter. Configuration rules: call get_documentation with https://docs.extend.ai/webhooks/configuration.md first (event catalog: https://docs.extend.ai/webhooks/events.md).
    ConnectorOAuth