KRDS UI/UX

Provides an MCP server to search KRDS components, manage design tokens, validate HTML/CSS, and access resources.

javascript

1

GitHub Stars

javascript

Language

6 months ago

First Indexed

2 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": {
    "re-rank-uiux-mcp": {
      "command": "node",
      "args": [
        "C:/Users/박호진/OneDrive/Desktop/UIUX MCP/build/index.js"
      ]
    }
  }
}

You have access to an MCP server that lets you search KRDS components, manage design tokens, validate HTML/CSS for KRDS compliance, and access design resources. This server helps you build consistent KRDS-based interfaces quickly by integrating KRDS data and checks into your workflow.

How to use

Use an MCP client to connect to the KRDS UI/UX MCP Server and perform practical tasks such as searching components, fetching component code, listing categories, exploring design tokens, validating code, and retrieving resources. You can combine multiple tools to assemble UI patterns, ensure KRDS guideline compliance, and streamline your design-to-code process.

How to install

Prerequisites you need before installation are Node.js and a working network connection. After you have Node.js installed, choose one of the installation flows.

# Install via Smithery (recommended)
npx @smithery/cli install krds-uiux-mcp-server

# Manual installation
# 1) Clone the project
git clone https://github.com/your-repo/krds-uiux-mcp-server
cd krds-uiux-mcp-server

# 2) Install dependencies
npm install

# 3) Build the project
npm run build

Configuration and runtime notes

You can run the server locally in development or production mode. The MCP client will connect using a standard Node runtime pointing at the built entry point.

Troubleshooting

If you run into connection issues, verify that your MCP client is configured with the correct runtime path to the built index and that the server build completed successfully. Check that any required dependencies are installed and that your environment allows network access if you are using remote resources.

Notes

The server exposes a set of tools for working with KRDS data, and you can use these tools from your MCP client to perform searches, fetch code, and validate compliance against KRDS guidelines.

Available tools

search_krds_components

Search KRDS components with optional keywords and category filters to quickly find suitable UI elements.

get_component_code

Retrieve the full HTML code for a specific KRDS component by name.

list_component_categories

List all available KRDS component categories to browse the component library.

list_all_components

Return the complete list of available KRDS component names.

search_design_tokens

Search design tokens such as color and spacing and retrieve them in CSS/SCSS variable formats.

get_color_palette

Fetch the entire KRDS color palette for reference and usage in styles.

get_token_stats

Provide statistics about design tokens, such as counts by type.

validate_krds_compliance

Validate HTML/CSS code against KRDS guidelines and suggest improvements.

get_krds_resources

Return resource information for KRDS assets like CSS, fonts, and images.