Design Analysis MCP Server
Server Configuration
Describes the environment variables required to run the server.
| Name | Required | Description | Default |
|---|---|---|---|
| GEMINI_API_KEY | No | Gemini API key for vision LLM. | |
| OPENAI_API_KEY | No | OpenAI API key for vision LLM. | |
| ANTHROPIC_API_KEY | No | Anthropic API key for vision LLM. |
Instructions
Guidance the server publishes about itself, which clients place ahead of the tool catalog so the model reads it before choosing anything.
This server publishes no instructions, or was last inspected before Glama recorded them.
Capabilities
Features and capabilities supported by this server
Protocol revision2025-11-25
| Capability | Details |
|---|---|
| tools | {
"listChanged": true
} |
Tools
Functions exposed to the LLM to take actions
| Name | Description |
|---|---|
| analyze_designA | Full design analysis orchestrator. Runs ALL layers (layout, typography, scroll, motion) and aggregates results. For focused analysis, use layer-specific tools. |
| analyze_layoutA | Layer 1: Analyze ONLY layout, spacing, composition, and hierarchy. Ignores animation, typography, and colors. Returns grid system, regions, spacing patterns, alignment, and visual hierarchy. |
| analyze_typographyA | Layer 2: Analyze ONLY typography, including text animations (per-character, per-word, stagger, easing). Describes fonts, type scale, line breaks, weights, and how every text element animates. |
| analyze_scrollA | Layer 3: Analyze scroll behavior from a video recording. Detects scroll segments, pixel shifts, parallax, and sticky elements. Requires a video of scrolling interaction. |
| reverse_engineer_animationA | Reverse-engineer every animation in a video with multi-pass analysis. Pass 1: extract high-FPS frames and find all animations. Pass 2: crop each animation region and deep-dive into timing, easing, stagger, per-character details, and implementation suggestions. Optionally provide a specific region to skip Pass 1 and analyze a single element. |
| reverse_engineer_componentA | Reverse-engineer a single component from a design. Optionally specify a screen region to crop + zoom for focused analysis. Returns HTML structure, CSS layout, styling details, all states (hover/active/focus/disabled), and accessibility requirements. |
| design_uniquenessA | Analyze what makes a design DISTINCTIVE and MEMORABLE. The '30-second test': if a designer watched this for 30 seconds, what 5 ideas would they remember 3 days later? Identifies the single most recognizable animation, interaction philosophy, top ideas worth borrowing, and things to avoid copying. Ignores layout/colors/typography specifics — focuses purely on interaction uniqueness. |
| compare_designsA | Compare two designs (videos or images) side by side. Returns layout, typography, color, component, animation, and accessibility differences with implementation complexity assessment. |
| critique_designC | Engineering-focused design critique. Evaluates layout, typography, color, animation, accessibility, and implementation complexity with specific actionable feedback. |
| generate_implementation_specA | Generate a complete frontend implementation specification. Includes component tree, exact design tokens (colors, typography, spacing), component states, animation specs, and accessibility requirements — enough for an engineer to implement without ever seeing the original design. |
| extract_assetsA | Extract every visual asset from a design: icons, illustrations, photos, logos, gradients, patterns. Returns a catalog with type, name, description, suggested format (SVG/PNG/CSS), and the full color palette. |
Prompts
Interactive templates invoked by user choice
| Name | Description |
|---|---|
No prompts | |
Resources
Contextual data attached and managed by the client
| Name | Description |
|---|---|
No resources | |
TDQS
Scored across 11 tools
Each tool targets a specific aspect of design analysis (layout, typography, scroll, animation) or a distinct task (comparison, critique, uniqueness, asset extraction, spec generation, reverse engineering). The orchestrator tool explicitly directs users to layer-specific tools for focused analysis, eliminating ambiguity.
Most tools follow a verb_noun pattern (analyze_*, compare_designs, critique_design, extract_assets, generate_implementation_spec, reverse_engineer_*). However, 'design_uniqueness' deviates by omitting a verb (e.g., 'analyze_uniqueness'), making it slightly less consistent.
With 11 tools, the server covers all major aspects of design analysis (layout, typography, scroll, motion, comparison, critique, uniqueness, assets, specification, reverse engineering) without being bloated. Each tool serves a clear purpose within the domain.
The tool surface covers core analysis layers, comparison, critique, uniqueness, asset extraction, spec generation, and reverse engineering. A minor gap is lack of a dedicated color analysis tool, but colors are handled within extract_assets, critique, and compare tools, so it's not critical.