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., "@MCP UI/UX Prompt Refiner design a minimalist dashboard for tracking team productivity with calm colors"
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 (Model Context Protocol) server that transforms basic interface prompts into world-class UI/UX design specifications. This tool helps you break free from generic AI-generated designs by outputting comprehensive, professional-grade design prompts.
5 Specialized Tools for different aspects of UI/UX design
4 Knowledge Resources covering design principles, animations, UX patterns, and templates
11 Pre-configured Prompts for common interface types
Supports websites, mobile apps, desktop apps, CLI tools, presentations, and more
Related MCP server: UI/UX MCP Server
npm install
npm run buildAdd to your MCP settings (.cursor/mcp.json or Claude Desktop config):
{
"mcpServers": {
"ui-prompt-refiner": {
"command": "node",
"args": ["path/to/mcp-ui-prompt-refiner/dist/server.js"]
}
}
}npm run devrefine_ui_prompt (Primary Tool)Transform a basic interface idea into a comprehensive design specification.
Parameters:
rawPrompt (required): Your basic interface idea
interfaceType: Type of interface (auto-detected if not provided)
style: Design style (minimalist, bold-experimental, etc.)
colorMood: Color palette mood (energetic, calm, professional, etc.)
animationIntensity: Level of animation (subtle, moderate, dramatic, cinematic)
targetAudience: Who will use this interface
brandKeywords: Keywords describing the brand
analyze_interfaceAnalyze an interface request to detect type, suggest styles, and identify components.
compose_animationsGenerate detailed animation specifications with CSS examples.
generate_ux_flowCreate user journey maps with interaction patterns and accessibility requirements.
suggest_tech_stackGet technology recommendations based on interface type and design requirements.
website-landing - Conversion-focused landing pages
website-saas - SaaS marketing websites
website-portfolio - Portfolio/showcase websites
website-ecommerce - Online stores
dashboard - Analytics and data dashboards
mobile-app - iOS/Android applications
desktop-app - Desktop applications
cli-terminal - Command-line interfaces
presentation - Slide decks
admin-panel - Backend management interfaces
social-platform - Social networking interfaces
minimalist - Clean, whitespace-focused
bold-experimental - Creative, unconventional
corporate-professional - Business-appropriate
playful-creative - Fun, colorful
luxury-elegant - Premium, sophisticated
tech-futuristic - Modern, digital
organic-natural - Earth-toned, flowing
brutalist - Raw, industrial
retro-vintage - Nostalgic
glassmorphic - Frosted glass effects
neumorphic - Soft shadow depth
Access design knowledge via MCP resources:
design://principles - Gestalt, hierarchy, color theory
design://animation-patterns - Easing functions, entry/scroll animations
design://ux-patterns - Navigation, feedback, forms, accessibility
design://interface-templates - Templates for each interface type
User: "I need a landing page for my AI writing tool"
→ refine_ui_prompt generates:
- Complete design specification
- Color palette with psychology
- Typography system
- Component specifications
- Animation choreography
- UX flow guidelines
- Accessibility requirements
- Implementation prioritiesAll tools output structured markdown that can be:
Saved directly to a file
Used as a prompt for implementation
Shared with design tools or team members
MIT
Analyze an interface request to detect the type, suggest styles, identify components, and understand the scope. Use this before refining to understand what you're working with.
| Name | Required | Description | Default |
|---|---|---|---|
| rawPrompt | Yes | Interface description to analyze | |
| interfaceType | No | Override detected interface type |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of behavioral disclosure. It mentions the tool's function but lacks details on behavioral traits such as whether it's read-only, if it requires specific permissions, rate limits, or what the output format looks like. For a tool with no annotations, this is a significant gap, as it doesn't provide enough context for safe and effective use.
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 appropriately sized and front-loaded, consisting of two concise sentences. The first sentence clearly states the purpose, and the second provides usage guidance. There is no wasted text, and every sentence earns its place by adding value, making it efficient and well-structured.
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 analyzing an interface with 2 parameters and no output schema, the description is incomplete. It lacks details on behavioral aspects (e.g., read-only status, permissions) and doesn't explain the return values or output format, which is critical since there's no output schema. For a tool with no annotations and no output schema, the description should provide more context to be fully helpful.
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% description coverage, with clear documentation for both parameters: 'rawPrompt' and 'interfaceType' (including an enum). The description doesn't add any additional meaning beyond what the schema provides, such as explaining the 'rawPrompt' format or when to use the 'interfaceType' override. Given the high schema coverage, a baseline score of 3 is appropriate, as the description doesn't compensate but also doesn't detract.
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: 'Analyze an interface request to detect the type, suggest styles, identify components, and understand the scope.' It specifies the verb ('analyze') and resource ('interface request') with concrete outcomes. However, it doesn't explicitly differentiate from sibling tools like 'refine_ui_prompt' or 'generate_ux_flow' beyond the temporal suggestion 'Use this before refining,' which is somewhat implied but not fully distinct.
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 for when to use the tool: 'Use this before refining to understand what you're working with.' This implies it's a preparatory step, likely preceding tools like 'refine_ui_prompt.' However, it doesn't explicitly state when not to use it or name specific alternatives among the siblings, such as 'suggest_tech_stack' or 'compose_animations,' leaving some ambiguity.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Generate detailed animation specifications including entry animations, scroll effects, hover states, loading animations, and transition choreography with CSS code examples.
| Name | Required | Description | Default |
|---|---|---|---|
| interfaceType | Yes | Type of interface | |
| intensity | Yes | Animation intensity level | |
| sections | No | Specific sections to animate | |
| customRequirements | No | Additional animation requirements |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of behavioral disclosure. It mentions generating 'CSS code examples' but doesn't cover critical aspects like output format, whether this is a read-only generation tool or if it modifies data, potential rate limits, authentication needs, or error handling. For a tool with no annotation coverage, this leaves significant gaps in understanding its behavior.
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, efficient sentence that front-loads the core purpose ('Generate detailed animation specifications') and lists key components. It avoids redundancy and wastes no words, though it could be slightly more structured by separating usage context from output details.
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 animation specs with CSS examples), lack of annotations, and no output schema, the description is incomplete. It doesn't explain what the output looks like (e.g., structured specs, code snippets), how comprehensive the generation is, or any limitations. This leaves the agent guessing about critical behavioral aspects.
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 the schema already documents all 4 parameters with descriptions and enums. The description adds no additional meaning beyond what's in the schema—it doesn't explain how parameters like 'interfaceType' or 'intensity' affect the output, nor does it provide examples or constraints. Baseline 3 is appropriate when the schema does the heavy lifting.
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 detailed animation specifications' with specific components listed (entry animations, scroll effects, hover states, etc.). It uses a specific verb ('Generate') and identifies the resource ('animation specifications'), but doesn't explicitly differentiate from sibling tools like 'analyze_interface' or 'generate_ux_flow' which might overlap in UI/UX domains.
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 no guidance on when to use this tool versus alternatives. It doesn't mention sibling tools like 'analyze_interface' or 'generate_ux_flow', nor does it specify prerequisites, exclusions, or appropriate contexts for animation generation versus other UI/UX tasks.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Create detailed user experience flows including user journeys, interaction patterns, state management, error handling, and accessibility requirements.
| Name | Required | Description | Default |
|---|---|---|---|
| interfaceType | Yes | Type of interface | |
| primaryGoal | Yes | Main user goal | |
| secondaryGoals | No | Additional user goals | |
| userPersonas | No | Target user types | |
| customFlows | No | Custom user flows to include |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of behavioral disclosure. It states the tool 'creates' flows, implying a generative or constructive operation, but doesn't disclose behavioral traits such as output format (e.g., text, diagrams), potential side effects, rate limits, or authentication needs. For a tool with no annotations and complex output (UX flows), this is a significant gap in 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, efficient sentence that front-loads the core action ('create detailed user experience flows') and lists key components. There's no wasted language, and it's appropriately sized for the tool's complexity. However, it could be slightly more structured by separating the action from the components for better readability.
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 (creating detailed UX flows with 5 parameters) and lack of annotations and output schema, the description is incomplete. It doesn't explain what the output looks like (e.g., text descriptions, flowcharts), how comprehensive the flows are, or any limitations. For a generative tool with no structured output information, more context is needed to guide effective use.
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%, meaning all parameters are documented in the schema. The description doesn't add any parameter-specific information beyond what's in the schema (e.g., it doesn't explain how 'interfaceType' relates to the flows or provide examples for 'primaryGoal'). Since the schema handles the heavy lifting, the baseline score of 3 is appropriate, as the description doesn't compensate with extra semantic context.
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 with specific verbs ('create detailed user experience flows') and enumerates the components included (user journeys, interaction patterns, etc.). It distinguishes itself from siblings like 'analyze_interface' or 'compose_animations' by focusing on flow creation rather than analysis or animation. However, it doesn't explicitly differentiate from 'refine_ui_prompt' or 'suggest_tech_stack', which could involve overlapping UX aspects.
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 no guidance on when to use this tool versus alternatives. It doesn't mention prerequisites, context for usage, or how it differs from sibling tools like 'analyze_interface' (which might analyze existing flows) or 'refine_ui_prompt' (which could refine UX prompts). Without such guidance, users must infer usage from the tool name and description alone.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Transform a basic interface idea into a comprehensive, world-class UI/UX design specification. This is the main tool that generates detailed design prompts covering visual design, typography, colors, animations, and user experience.
| Name | Required | Description | Default |
|---|---|---|---|
| rawPrompt | Yes | Your basic interface idea or requirements | |
| interfaceType | No | Type of interface (auto-detected if not provided) | |
| style | No | Desired design style | |
| colorMood | No | Color palette mood | |
| animationIntensity | No | Level of animation effects | |
| targetAudience | No | Who will use this interface | |
| brandKeywords | No | Keywords describing the brand |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It mentions generating 'comprehensive, world-class UI/UX design specifications' but doesn't detail output format, length, structure, or any limitations like token constraints, processing time, or error conditions. This leaves significant gaps for an agent to understand what to expect.
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 front-loaded with the core purpose in the first sentence and adds detail in the second. It avoids redundancy and is appropriately sized for the tool's complexity, though it could be slightly more concise by integrating the two sentences more tightly.
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 (7 parameters, no output schema, no annotations), the description is insufficient. It lacks details on the output format, behavioral traits like rate limits or permissions, and how it integrates with sibling tools. This makes it incomplete for an agent to use effectively without trial and error.
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 schema description coverage is 100%, so the schema already documents all 7 parameters thoroughly with descriptions and enums. The description adds no additional parameter semantics beyond what's in the schema, such as examples or interdependencies, resulting in a baseline score of 3.
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 with specific verbs ('Transform', 'generates') and resources ('basic interface idea', 'detailed design prompts'), covering multiple design aspects like visual design, typography, colors, animations, and UX. It distinguishes itself from siblings by being the 'main tool' for comprehensive specification generation.
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 calling it the 'main tool' for generating design specifications, suggesting it's a primary choice. However, it doesn't explicitly state when to use this versus alternatives like 'analyze_interface' or 'generate_ux_flow', nor does it provide exclusions or prerequisites for use.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Get technology stack recommendations including frameworks, styling approaches, animation libraries, and deployment options based on your interface type and design requirements.
| Name | Required | Description | Default |
|---|---|---|---|
| interfaceType | Yes | Type of interface | |
| designStyle | No | Design style being used | |
| animationIntensity | No | Animation level | |
| requirements | No | Special requirements |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries full burden for behavioral disclosure. It states the tool provides 'recommendations', implying a read-only, advisory function, but doesn't clarify if it's deterministic or AI-generated, whether it requires external data, or what the output format looks like. For a tool with no annotation coverage, this leaves significant behavioral gaps regarding reliability, scope, and response structure.
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, efficient sentence that front-loads the core action ('Get technology stack recommendations') and specifies key components without redundancy. Every word earns its place, and there's no wasted verbiage or structural fluff, making it highly scannable and actionable.
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 moderate complexity (4 parameters, no output schema, no annotations), the description is adequate but incomplete. It covers the purpose and input scope but lacks output details, error handling, or behavioral nuances. Without annotations or an output schema, the agent is left guessing about the result format and operational boundaries, though the concise purpose statement provides a minimal viable foundation.
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%, with all parameters well-documented in the schema itself (e.g., 'interfaceType' with enum values, 'designStyle', etc.). The description adds minimal value beyond the schema by mentioning 'interface type and design requirements', which loosely maps to parameters but doesn't provide additional syntax, constraints, or examples. Baseline 3 is appropriate when the schema does the heavy lifting.
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: 'Get technology stack recommendations' with specific components listed (frameworks, styling approaches, animation libraries, deployment options). It specifies the input criteria (interface type and design requirements), making the verb+resource relationship explicit. However, it doesn't distinguish this from sibling tools like 'analyze_interface' or 'generate_ux_flow' which might overlap in domain.
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 no guidance on when to use this tool versus alternatives. It doesn't mention sibling tools like 'analyze_interface' or 'compose_animations', nor does it specify prerequisites, exclusions, or contextual boundaries. The agent must infer usage solely from the purpose statement, which is insufficient for optimal tool selection.
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.
analyze_interfacecompose_animationsgenerate_ux_flowrefine_ui_promptsuggest_tech_stackScored across 5 tools
Each tool has a clearly distinct purpose with no overlap: analyze_interface for initial assessment, refine_ui_prompt for core design specification, generate_ux_flow for user experience mapping, compose_animations for animation details, and suggest_tech_stack for technology recommendations. The descriptions reinforce these distinct roles, making tool selection unambiguous.
All tools follow a consistent verb_noun pattern with clear, descriptive names (e.g., analyze_interface, refine_ui_prompt, generate_ux_flow). The naming convention is uniform throughout, using snake_case and action-oriented verbs that accurately reflect each tool's function without any deviations or mixed styles.
With 5 tools, the server is well-scoped for its UI/UX prompt refinement purpose. Each tool earns its place by covering distinct aspects of the design process—from analysis and refinement to UX flows, animations, and tech stack—without being overly sparse or bloated, fitting the typical 3-15 tool range for a focused domain.
The tool set provides complete coverage of the UI/UX design lifecycle: analyze_interface for initial scoping, refine_ui_prompt for core design specification, generate_ux_flow for user experience, compose_animations for interactive elements, and suggest_tech_stack for implementation. There are no obvious gaps, and the tools support a full workflow from concept to deployment-ready design.
Turn your app idea into IA, wireframes, PRD, style guides, and dev specs for coding agents.
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
Turn PRDs and product ideas into structured specs so coding agents build your intent, not theirs.
Guide user-led frontend design decisions from project brief through implementation review.
