atelier-mcp

critique_ui

Audit UI code and screenshots against design system guidelines, checking spacing, typography, contrast, and anti-AI patterns to return structured findings.

Instructions

Audit UI code and rendered screenshots against design system guidelines (spacing scales, typography hierarchy, contrast/WCAG AA, and anti-AI-cliché patterns). Returns structured findings citing canonical SKILL.md rules.

Tool call template

Replace each placeholder with a value matching the input schema. Only required parameters are included; add optional parameters as needed.

{
  "id": 1,
  "jsonrpc": "2.0",
  "method": "tools/call",
  "params": {
    "arguments": {
      "code": "<code>"
    },
    "name": "critique_ui"
  }
}

Input Schema

Name	Required	Description
`code`	Yes	The frontend component or page source code (React, Vue, HTML, Svelte, Tailwind).
`filePath`	No	Optional path of the file being audited.
`framework`	No	The frontend framework used.
`designSystem`	No	Target design system convention.
`screenshotPath`	No	Optional absolute path to the screenshot image file.
`screenshotBase64`	No	Optional base64-encoded screenshot of the rendered component for visual craft inspection.

Schema Changelog

Changes observed during successful MCP inspections.

First observedv1.0.2Sep 12, 2026

TDQS

A3.6/5.0

Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden. It discloses the output shape (structured findings citing SKILL.md rules), which is genuinely useful behavioral context, but it says nothing about permissions, whether it mutates anything, failure modes, or what happens when screenshots are omitted – significant gaps for an audit tool with zero annotation coverage.

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?

Two tightly-packed sentences with zero filler, front-loaded with the audit action and the criteria. It could be slightly more informative about output format, but nothing is wasted.

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?

The description covers purpose, criteria, and output type for a tool with no annotations and no output schema. However, for a 6-parameter audit tool, it omits guidance on when screenshots are required versus code-only, how the required `code` parameter interacts with optional visual inputs, and any behavioral constraints, leaving meaningful gaps.

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%, so the schema already documents all six parameters and both enums, establishing a baseline of 3. The description adds only high-level framing (what the audit checks) rather than meaning about specific parameters, so it does not exceed 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?

States a specific verb (audit) and resources (UI code, rendered screenshots) and enumerates the exact criteria checked: spacing scales, typography hierarchy, contrast/WCAG AA, anti-AI-cliché patterns. This is clearly distinguished from sibling critique_backend, which would cover non-UI concerns.

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 makes clear this is a UI-design audit, which implies usage, but it never states when to choose this over critique_backend or generate_fix, nor any preconditions (e.g., that screenshotPath or screenshotBase64 is needed for visual inspection). No explicit when-to-use or exclusions.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Deploy Server