MCP UI/UX Prompt Refiner
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.
Features
- 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
Installation
npm install
npm run build
Usage
With Cursor/Claude
Add 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"]
}
}
}
Development Mode
npm run dev
Available Tools
1. refine_ui_prompt (Primary Tool)
Transform a basic interface idea into a comprehensive design specification.
Parameters:
rawPrompt(required): Your basic interface ideainterfaceType: 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 interfacebrandKeywords: Keywords describing the brand
2. analyze_interface
Analyze an interface request to detect type, suggest styles, and identify components.
3. compose_animations
Generate detailed animation specifications with CSS examples.
4. generate_ux_flow
Create user journey maps with interaction patterns and accessibility requirements.
5. suggest_tech_stack
Get technology recommendations based on interface type and design requirements.
Interface Types Supported
website-landing- Conversion-focused landing pageswebsite-saas- SaaS marketing websiteswebsite-portfolio- Portfolio/showcase websiteswebsite-ecommerce- Online storesdashboard- Analytics and data dashboardsmobile-app- iOS/Android applicationsdesktop-app- Desktop applicationscli-terminal- Command-line interfacespresentation- Slide decksadmin-panel- Backend management interfacessocial-platform- Social networking interfaces
Design Styles
minimalist- Clean, whitespace-focusedbold-experimental- Creative, unconventionalcorporate-professional- Business-appropriateplayful-creative- Fun, colorfulluxury-elegant- Premium, sophisticatedtech-futuristic- Modern, digitalorganic-natural- Earth-toned, flowingbrutalist- Raw, industrialretro-vintage- Nostalgicglassmorphic- Frosted glass effectsneumorphic- Soft shadow depth
Resources
Access design knowledge via MCP resources:
design://principles- Gestalt, hierarchy, color theorydesign://animation-patterns- Easing functions, entry/scroll animationsdesign://ux-patterns- Navigation, feedback, forms, accessibilitydesign://interface-templates- Templates for each interface type
Example
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 priorities
Output Format
All 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
License
MIT