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.
Inputs: rawPrompt (required), interfaceType.
Generate detailed animation specifications including entry animations, scroll effects, hover states, loading animations, and transition choreography with CSS code examples.
Inputs: interfaceType (required), intensity (required), sections, customRequirements.
Create detailed user experience flows including user journeys, interaction patterns, state management, error handling, and accessibility requirements.
Inputs: interfaceType (required), primaryGoal (required), secondaryGoals, userPersonas, +1 more.
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.
Inputs: rawPrompt (required), interfaceType, style, colorMood, +3 more.
Get technology stack recommendations including frameworks, styling approaches, animation libraries, and deployment options based on your interface type and design requirements.
Inputs: interfaceType (required), designStyle, animationIntensity, requirements.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
Scored 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.
Plan every page of your UI so your coding agent builds exactly that.
A design agent in your coding agent's loop: briefs each screen, reviews UX and visual quality.
