KRDS UI/UX MCP Server

   **KRDS (Korea Responsive Design System)** AI      MCP (Model Context Protocol) .

1. ** **

• 65 KRDS HTML
• (Form, Navigation, Layout )
• HTML

2. ** **

• KRDS (, , )
• CSS/SCSS

3. ** **

• HTML/CSS KRDS
• HTML

4. ** **

• CSS, SCSS, ,

Smithery ()

Smithery :

npx @smithery/cli install krds-uiux-mcp-server

Smithery

#  
git clone https://github.com/your-repo/krds-uiux-mcp-server
cd krds-uiux-mcp-server

#  
npm install

# 
npm run build

MCP (Claude Desktop Cursor)

MCP :

Claude Desktop (claude_desktop_config.json)

{
  "mcpServers": {
    "krds-uiux": {
      "command": "node",
      "args": ["C:/Users//OneDrive/Desktop/UIUX MCP/build/index.js"]
    }
  }
}

Cursor (.cursor/mcp.json )

{
  "mcpServers": {
    "krds-uiux": {
      "command": "node",
      "args": ["C:/Users//OneDrive/Desktop/UIUX MCP/build/index.js"]
    }
  }
}

1. search_krds_components

KRDS .

:

• query (): (: "button", "input")
• category (): (: "Form", "Navigation")

:

"  "
"Form    "

2. get_component_code

HTML .

:

• componentName (): (: "button", "text_input")

:

"button   "
"modal   "

3. list_component_categories

.

:

"KRDS   ?"

4. list_all_components

.

:

"    "

5. search_design_tokens

.

:

• type (): (: "color", "spacing")
• query (): (: "primary", "blue")

:

"primary   "
"spacing  "

6. get_color_palette

.

:

"KRDS   "

7. get_token_stats

.

:

"  "

8. validate_krds_compliance

.

:

• code (): HTML/CSS

:

" HTML  KRDS   "

9. get_krds_resources

.

:

• resourceType (): "css", "scss", "fonts", "images", "js"

:

"KRDS CSS   "
"   "

AI :

1. ---

   • "KRDS "
   • " , KRDS ?"

2. ---

   • " HTML KRDS "
   • " "

3. ---

   • "primary "
   • "KRDS "

4. ---

   • "KRDS CSS ?"
   • " ?"

krds-uiux-mcp-server/
 src/
    index.ts                 # MCP  
    tools/
       component-search.ts  #   
       token-provider.ts    #    
       code-validator.ts    #   
    services/
       krds-loader.ts       # KRDS  
       analyzer.ts          #  
    types/
        krds.ts              #  
 build/                       #  
 node_modules/
    krds-uiux/              # KRDS 
 package.json
 tsconfig.json
 README.md

npm run build

npm run dev

# MCP Inspector 
npx @modelcontextprotocol/inspector node build/index.js

KRDS

KRDS (Korea Responsive Design System) .

• ** :** www.krds.go.kr
• GitHub: github.com/KRDS-uiux/krds-uiux
• npm : krds-uiux

!

ISC

Smithery

1. ---

   git add .
   git commit -m "Add smithery.yaml configuration"
   git push
   

2. **Smithery **

   • Smithery
   • GitHub

npm run build

build/index.js MCP .

• Model Context Protocol
• MCP SDK
• KRDS GitHub
• KRDS
• Smithery - MCP