Integrates with OpenAI's vision models to analyze design videos and images, extracting layout, typography, animations, and generating implementation specs.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Design Analysis MCP Server analyze design from demo.mp4"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
An MCP server that reverse-engineers design videos and images into structured frontend implementation specifications. Uses vision LLMs (OpenAI, Anthropic, Gemini) and FFMPEG for frame-level analysis.
11 MCP tools organized into three tiers:
Tool | Purpose |
| Full orchestration — runs all layers + writes files |
| Grid, spacing, composition, hierarchy (no colors/animations) |
| Fonts, type scale, text animations (per-character, stagger) |
| Scroll segments, parallax, sticky detection (video only) |
| Multi-pass: burst-frame capture → find animations → crop + deep-dive |
| Single component with layout hypotheses + alternatives |
| "30-second test" — what makes this distinctive? |
| Side-by-side across layout, typography, animation, accessibility |
| Engineering-focused critique with actionable improvements |
| Complete spec: component tree, tokens, states, a11y |
| Catalog all visual assets (icons, gradients, palette) |
Related MCP server: Figma Context MCP
┌─────────────┐
│ MCP Client │ (Claude Code, etc.)
└──────┬──────┘
│ stdio JSON-RPC
┌──────┴──────┐
│ index.ts │ Entry point, registers 11 tools
└──────┬──────┘
│
┌────────────┼────────────┐
│ │ │
┌─────┴─────┐ ┌───┴───┐ ┌─────┴─────┐
│ Tools │ │Vision │ │Analyzers │
│ │ │Client │ │ │
│ analyze_* │ │ │ │ │ video_to_ │
│ reverse_* │ │ ├──Anthropic │ frames │
│ compare_* │ │ ├──OpenAI │ detect_ │
│ critique_ │ │ └──Gemini │ scroll_ │
│ generate_ │ │ │ segments │
│ extract_ │ │ │ images_ │
│ design_ │ │ │ to_pdf │
│ uniqueness│ │ │ analyze_* │
└───────────┘ └────────┘ └───────────┘The orchestrator (analyze_design) runs layers independently to avoid mode confusion:
Layout — grid system, spacing principles, visual hierarchy
Typography — font categories, type scale, text animation details
Scroll — PSNR-based pixel-shift detection between frames
Motion — multi-pass: find animations → crop region → deep-dive
Uniqueness — "30-second test": what would a designer remember?
Every estimate includes confidence: number (0–1) and alternatives: string[] so downstream LLMs can distinguish reliable findings from speculation. Estimates describing what the model can see (movement direction, opacity change) get higher confidence than inferred values (exact CSS properties, easing curves, font names).
Burst capture — 15 FPS for first 3 seconds (captures fast discrete animations like slot-machine effects at 400–800ms)
Pass 1 — find all animations + estimate screen regions
Pass 2 — crop each region and deep-dive with a focused prompt
analyze_design writes results to analysis/{name}/:
File | Contents |
| Most memorable elements, confidence report |
| Grid, spacing, composition |
| Fonts, type scale, text animations |
| Animation details |
| Design uniqueness output |
| Design tokens, component specs |
Node.js 22+
FFMPEG (for video frame extraction, scroll detection)
At least one API key: OpenAI, Anthropic, or Gemini
git clone <repo>
cd design-analysis-mcp-server
npm installCopy .env.example to .env and set at least one API key:
cp .env.example .env
# Edit .env with your API keysOptionally edit config.yaml to change model priority, frame extraction settings, or output directories.
npm run buildIn your ~/.opencode.jsonc:
{
"mcpServers": {
"design-analysis": {
"command": "node",
"args": ["/path/to/design-analysis-mcp-server/build/index.js"],
"env": {
"OPENAI_API_KEY": "sk-...",
"ANTHROPIC_API_KEY": "sk-ant-...",
"GEMINI_API_KEY": "AIza..."
}
}
}
}# Full analysis of a design video
analyze_design path=/path/to/demo.mp4 name=demo-v1
# Analyze only layout
analyze_layout path=/path/to/screenshot.png
# Reverse-engineer a specific component
reverse_engineer_component path=/path/to/screen.mp4 element_description="hero section with CTA button"
# Multi-pass animation deep-dive
reverse_engineer_animation path=/path/to/demo.mp4 region={x:100,y:200,width:300,height:400}
# Compare two designs
compare_designs referenceA={path:/path/to/v1.mp4,type:video} referenceB={path:/path/to/v2.mp4,type:video}
# Generate implementation spec
generate_implementation_spec path=/path/to/demo.mp4
# 30-second test for design uniqueness
design_uniqueness path=/path/to/demo.mp4Config key | Default | Description |
|
| Model priority list; fallback on error |
|
| Standard mode frame interval |
|
| PNG quality (2–31, lower = better) |
|
| PSNR threshold for scene detection |
|
| Max frames in any extraction mode |
|
| Max pages in generated PDFs |
|
| Frames to merge when detecting scroll |
All analyzer prompts follow a principle-first structure:
What principle does this follow? (high confidence — directly observable)
What mechanism could produce this? (medium confidence — alternatives listed)
What are the estimated values? (low confidence — clearly labeled)
Prompts instruct models to say "uncertain" rather than guess wrong, and to list alternative mechanisms when confidence < 0.8.
Full design analysis orchestrator. Runs ALL layers (layout, typography, scroll, motion) and aggregates results. For focused analysis, use layer-specific tools.
| Name | Required | Description | Default |
|---|---|---|---|
| reference | Yes | Design file (video or image path) |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations provided; description adds that it runs all layers and aggregates results but does not disclose potential performance implications or error handling.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences, front-loaded with main purpose, no wasted words, efficient structure.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
No output schema and description does not explain return format or values, but given the single parameter and orchestrator role, it is minimally adequate.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, so description does not need to add parameter details; baseline 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Description clearly states it is a full design analysis orchestrator that runs all layers (layout, typography, scroll, motion) and aggregates results, differentiating it from sibling tools that are layer-specific.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Explicitly states to use layer-specific tools for focused analysis, providing clear when-to-use and when-not-to-use guidance.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Layer 1: Analyze ONLY layout, spacing, composition, and hierarchy. Ignores animation, typography, and colors. Returns grid system, regions, spacing patterns, alignment, and visual hierarchy.
| Name | Required | Description | Default |
|---|---|---|---|
| reference | Yes | Design file (video or image path) |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description fully discloses the tool's scope (layout, spacing, etc.) and limitations (ignores animation, typography, colors). It also specifies what it returns, providing complete behavioral transparency.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, well-structured sentence followed by a clear list of return items. Every sentence adds value with no unnecessary words.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's simplicity (one parameter, no output schema), the description completely covers its purpose, input, and output, and differentiates it from siblings.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% and all parameter properties have descriptions. The description does not add extra meaning beyond the schema, so baseline score of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states it analyzes only layout, spacing, composition, and hierarchy, and explicitly lists what it ignores (animation, typography, colors). This distinguishes it from siblings like analyze_typography or analyze_design.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies when to use this tool for layout-focused analysis and what it ignores, guiding the agent away from using it for typography or animation. However, it does not explicitly state when not to use it or name alternative tools.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Layer 3: Analyze scroll behavior from a video recording. Detects scroll segments, pixel shifts, parallax, and sticky elements. Requires a video of scrolling interaction.
| Name | Required | Description | Default |
|---|---|---|---|
| reference | Yes | Video recording of scrolling |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The tool has no annotations, so the description must carry behavioral transparency. It discloses detection capabilities but does not state whether the tool is read-only, whether it modifies any data, or what the output format is. This is adequate but not rich.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is two sentences with front-loaded purpose and efficient detail. The phrase 'Layer 3' is slightly cryptic but does not significantly hinder understanding. No redundancy.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool with a single parameter and no output schema, the description adequately covers purpose and requirements. However, it omits information about the return value or how results are delivered, which is a gap given the lack of an output schema.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%: the schema documents the 'reference' object and its properties. The description adds context that the video must be of scrolling interaction, but does not explain the purpose of the 'name' or 'type' fields beyond what the schema provides. Baseline 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: analyzing scroll behavior from a video recording. It specifies the verb 'Analyze' and resource 'scroll behavior', and distinguishes from sibling design analysis tools by focusing on scroll-specific metrics like scroll segments, pixel shifts, parallax, and sticky elements.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides a prerequisite ('Requires a video of scrolling interaction') but lacks explicit guidance on when to use vs alternatives. It mentions 'Layer 3' which may imply a workflow order, but this is ambiguous and not explained.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| reference | Yes | Design file (video or image path) |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations provided, so description carries full burden. It discloses that the tool is analytical (not modifying), describes what it analyzes, and mentions 'Layer 2' hinting at a workflow. Could be clearer about dependencies, but for a read-only analysis tool, this is sufficient.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Single sentence that is front-loaded with key information ('Layer 2', 'ONLY typography'). Every part adds value, no wasted words.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a specialized analysis tool with one parameter and no output schema, the description covers the core functionality and scope. It explains what the tool analyzes in detail. Minor gap: no mention of return format or any prerequisites, but not critical given the tool's simplicity.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% with descriptions for all properties. Description does not add significant new information beyond what the schema provides; it only explains the tool's overall purpose with the reference.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Description uses specific verb 'analyze' with resource 'typography', explicitly states 'ONLY' to distinguish from siblings like analyze_design and analyze_layout. Clearly defines scope including text animations, fonts, type scale, etc.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Provides context with 'Layer 2' suggesting sequential use, and 'ONLY' indicates specialization. However, does not explicitly state when not to use or name alternatives, though sibling tools are available for broader analysis.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Compare two designs (videos or images) side by side. Returns layout, typography, color, component, animation, and accessibility differences with implementation complexity assessment.
| Name | Required | Description | Default |
|---|---|---|---|
| referenceA | Yes | First design reference | |
| referenceB | Yes | Second design reference |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description must convey behavioral traits. It mentions the return type (differences with complexity assessment) but does not disclose side effects, authorization needs, or whether the operation is read-only. Since it is a comparison tool, being read-only is likely, but not stated.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single sentence that front-loads the action ('Compare two designs...') and lists all key outputs. No wasted words; every part is meaningful.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the complexity of comparing two designs with multiple difference categories, the description lists all expected outputs (layout, typography, etc.) and notes the complexity assessment. It lacks an example of the output format, but the list is comprehensive. Sibling tools are not explicitly excluded, but the purpose is clear enough.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, and the schema already describes each parameter and its properties. The description adds 'First design reference' and 'Second design reference' but provides no additional semantic value beyond the schema definitions. Baseline 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool compares two designs (videos or images) side by side and lists specific categories of differences (layout, typography, etc.). This distinguishes it from siblings like analyze_design (single design) or critique_design (single critique).
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies use when comparing two designs but provides no explicit guidance on when to use this tool versus alternatives such as analyze_design or analyze_layout. No when-not-to-use or prerequisite conditions are mentioned.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Engineering-focused design critique. Evaluates layout, typography, color, animation, accessibility, and implementation complexity with specific actionable feedback.
| Name | Required | Description | Default |
|---|---|---|---|
| reference | Yes | Design file (video or image path) |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are present, so the description must fully convey behavioral traits. It implies a read-only operation (evaluates, provides feedback) but does not explicitly confirm non-destructiveness, authentication needs, rate limits, or output format.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, concise sentence that front-loads the key purpose ('Engineering-focused design critique') and lists evaluation criteria efficiently. No extraneous information.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
No output schema is provided, and the description does not explain the return value format (e.g., structured feedback or plain text). Given the tool produces actionable feedback, the absence of output details limits completeness for an agent.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100% for the single parameter, so the schema already documents the reference object. The tool description adds context on what the critique evaluates (layout, typography, etc.), which hints at expected input relevance but does not elaborate on parameter semantics like file format specifics.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states it is an engineering-focused design critique that evaluates layout, typography, color, animation, accessibility, and implementation complexity, providing actionable feedback. This distinguishes it from general analysis tools, though it does not explicitly differentiate from all siblings.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance is provided on when to use this tool versus sibling tools like analyze_design, compare_designs, or extract_assets. There is no mention of prerequisites or exclusions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| reference | Yes | Design file (video or image path) |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations provided, so description carries full burden. Describes scope (what it identifies and ignores) but lacks disclosure of side effects, permissions, or output format. Adequate for a read-only analysis tool.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences, no wasted words. Front-loaded with the core purpose, then elaborates with the 30-second test and specifics. Highly efficient.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a single-parameter tool with no output schema, the description covers the analysis scope, methodology, and exclusions completely. Agent has sufficient context to decide when and how to use it.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, so description adds no extra parameter meaning beyond schema. Baseline 3 is appropriate as the description's value is in explaining the analysis concept, not parameter details.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Clearly states the tool analyzes design uniqueness and memorability, with a specific focus on interaction uniqueness. Explicitly distinguishes from siblings by stating it ignores layout/colors/typography, making the purpose distinct and clear.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Provides a concrete '30-second test' methodology and lists what the tool identifies (animation, philosophy, ideas, avoid copying). Implicitly differentiates usage by stating what it ignores, but doesn't explicitly name alternative tools or when not to use.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| reference | Yes | Design file (video or image path) |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations provided, so description carries full burden. It describes output contents but does not disclose side effects, permissions needed, or limitations (e.g., file format support).
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences, front-loaded with verb and resource, no filler. Every word adds value.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Describes output catalog fields sufficiently given no output schema. Input schema is detailed. Missing edge cases (e.g., unsupported formats, empty results) but overall adequate.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Parameter 'reference' is fully documented in schema (100% coverage). Description adds minimal extra meaning beyond 'Design file (video or image path)' already in schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Description clearly states 'Extract every visual asset from a design' with specific examples (icons, photos, etc.) and distinguishes from sibling tools like analyze_design or critique_design.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance on when to use this tool versus alternatives; lacks explicit when-not-to-use or comparison to siblings like compare_designs or generate_implementation_spec.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| reference | Yes | Design file (video or image path) |
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 explains what the tool generates (component tree, design tokens, etc.) but does not disclose whether the operation is read-only, idempotent, or has any side effects. Since it's a generation tool, it likely does not modify data, but this is not explicitly stated.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is concise: two sentences front-loading the purpose and listing deliverables without any extraneous words. Every sentence earns its place, and the structure is clear and efficient.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's complexity (generating a full spec) and the absence of an output schema, the description adequately covers what the output contains. It lists all key aspects: component tree, design tokens, states, animation specs, and accessibility, making it complete for an engineer to implement.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema has 100% coverage, describing the 'reference' parameter and its nested properties (name, path, type). The description adds no additional meaning beyond the schema; it only states 'Design file (video or image path),' which is already in the schema. Baseline 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: 'Generate a complete frontend implementation specification.' It lists specific deliverables (component tree, design tokens, states, animation specs, accessibility), distinguishing it from sibling tools like analyze_design or reverse_engineer_component which have narrower scopes.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage by stating the output is sufficient for an engineer to implement without seeing the original design, but it does not explicitly state when to use this tool versus alternatives like reverse_engineer_component or analyze_design. No exclusions or when-not scenarios are provided.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| region | No | Optional: specific screen region (x, y, width, height) to analyze. Skips the find-animations pass. | |
| element | No | Optional: text description of the element to focus on (e.g. 'hero heading', 'sign-up button') | |
| reference | Yes | Video file with animations to reverse-engineer |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries full burden. It discloses the multi-pass process, frame extraction, region cropping, and detailed output (timing, easing, stagger). However, it does not explicitly state read-only or non-destructive nature, though implied by the actions described.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Three sentences: purpose, process overview, usage hint. Every sentence is essential and front-loaded. No wasted words.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's complexity (multi-pass, optional region) and lack of output schema, the description adequately covers inputs, process, and output hints. It could mention file size limits or expected video length, but is complete enough for an AI agent.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so baseline is 3. The description adds value by explaining that providing a 'region' skips Pass 1 and that 'element_description' describes the region content. This exceeds the schema's brief descriptions.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses specific verbs ('reverse-engineer', 'extract', 'find', 'crop', 'deep-dive') and clearly names the resource ('every animation in a video'). It distinguishes from sibling tools (e.g., analyze_layout, reverse_engineer_component) by focusing solely on animations with multi-pass analysis.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides clear context on when to use the optional region parameter (skip Pass 1 for a single element), but does not explicitly guide when to choose this tool over sibling tools. There is no direct comparison or exclusion criteria for alternative tools.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| region | No | Optional: specific screen region (x, y, width, height) to crop and analyze | |
| reference | Yes | Design file (video or image path) | |
| element_description | No | Optional: description of the element to analyze (e.g. 'pricing card', 'nav item') |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Despite lacking annotations, the description fully discloses the tool's non-destructive nature and specifies what the tool returns (HTML, CSS, styling, states, accessibility). This covers key behavioral aspects beyond a simple 'analyze' label. No contradictions or hidden traits.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences, front-loaded with the core purpose, followed by optional features and outputs. No redundant words or structure. Every sentence earns its place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the lack of output schema, the description comprehensively lists all return categories (HTML, CSS, states, accessibility) and explains the optional region. It covers all necessary information for an agent to decide whether to invoke this tool.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
With 100% schema description coverage, the baseline is 3. The description adds minor semantic value by explaining the effect of the region parameter ('crop + zoom for focused analysis') and linking element_description to the component. This is adequate but not exceptional.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: reverse-engineering a single component from a design. It distinguishes from sibling tools (e.g., analyze_design, analyze_layout) by specifying the output (HTML, CSS, states, accessibility) and the optional region cropping. The verb 'reverse-engineer' combined with 'component' is specific and unambiguous.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides context on when to use the tool (for component analysis and optional region focus) but does not explicitly state when not to use it or direct users to sibling alternatives. However, the purpose is clear enough that an agent can infer usage boundaries.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
v1.0.0analyze_designanalyze_layoutanalyze_scrollanalyze_typographycompare_designscritique_designdesign_uniquenessextract_assetsgenerate_implementation_specreverse_engineer_animationreverse_engineer_componentScored 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.
FFmpeg as a service for AI agents: typed video editing tools, async jobs, downloadable outputs.
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
Transform video, audio and images, and generate media from prompts. FFmpeg, captions, models.
Turn PRDs and product ideas into structured specs so coding agents build your intent, not theirs.
