UI Prompt Refiner

Provides a local MCP server that refines basic interface prompts into comprehensive UI/UX design specifications.

javascript

0

GitHub Stars

javascript

Language

6 months ago

First Indexed

3 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
  "mcpServers": {
    "nwabukin-mcp-ui-prompt-refiner": {
      "command": "node",
      "args": [
        "path/to/mcp-ui-prompt-refiner/dist/server.js"
      ]
    }
  }
}

You have a dedicated MCP server that transforms basic interface prompts into detailed, world-class UI/UX design specifications. It helps you produce professional-grade design prompts quickly, improving consistency and quality across websites, mobile apps, desktops, and more.

How to use

To use this MCP server, connect it to your MCP client and point it to the local server that runs the prompt refinement service. You will send a basic interface idea and receive a complete design specification, including color palettes, typography, components, animation guidance, UX flow, and accessibility considerations. The server is designed to be run locally during development and can be integrated into your existing MCP workflow through a standard stdio integration.

How to install

Prerequisites: you need Node.js and npm installed on your machine.

Install dependencies and build the project.

npm install
npm run build

Configuration and usage notes

You can connect the MCP client to the local server using a stdio configuration. Use the following example to integrate with a Cursor/Claude-like MCP setup. This creates a local MCP server entry named ui_prompt_refiner that runs via Node and points to the built server file.

{
  "mcpServers": {
    "ui-prompt-refiner": {
      "command": "node",
      "args": ["path/to/mcp-ui-prompt-refiner/dist/server.js"]
    }
  }
}

Development mode

During development you can start the server in watch/development mode to iterate quickly.

npm run dev

Available tools

refine_ui_prompt

Transforms a basic interface concept into a complete design specification including color, typography, components, animation, UX flow, and accessibility notes.

analyze_interface

Analyzes an interface request to detect type, suggest styles, and identify core components.

compose_animations

Generates detailed animation specifications with CSS examples and timing.

generate_ux_flow

Creates user journey maps with interaction patterns and accessibility requirements.

suggest_tech_stack

Provides technology recommendations based on interface type and design requirements.