KRDS UI/UX MCP Server
Provides access to KRDS (Korea Responsive Design System) CSS components, design tokens, and validation tools for building government digital services with Korean design standards
References the KRDS design system hosted on GitHub and supports deployment workflows for the MCP server
Integrates with the krds-uiux npm package to access Korean government design system components and resources
Built with TypeScript to provide type-safe access to KRDS design system components, tokens, and validation tools
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., "@KRDS UI/UX MCP Server버튼 컴포넌트를 찾아서 코드를 보여줘"
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.
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, 폰트, 이미지 등 리소스 파일 경로 제공
각 리소스 사용법 안내
Related MCP server: GDS MCP
📦 설치
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 어시스턴트에게 다음과 같이 요청할 수 있습니다:
컴포넌트 찾기
"KRDS 버튼 컴포넌트를 찾아서 코드를 보여줘"
"모달 창을 만들고 싶어, KRDS 컴포넌트가 있나?"
코드 검증
"이 HTML이 KRDS 표준을 따르는지 확인해줘"
"접근성 문제가 있는지 검토해줘"
디자인 토큰
"primary 색상 값을 알려줘"
"KRDS에서 사용하는 모든 색상을 보여줘"
리소스 정보
"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에 배포하기
저장소 준비
git add . git commit -m "Add smithery.yaml configuration" git pushSmithery에 등록
Smithery에 방문
GitHub 저장소 연결
자동으로 빌드 및 배포됨
로컬 배포
npm run build빌드된 build/index.js 파일을 MCP 클라이언트 설정에서 직접 참조할 수 있습니다.
🔗 관련 링크
Smithery - MCP 서버 배포 플랫폼
Available Tools
9 toolsget_color_paletteC
KRDS 전체 색상 팔레트를 가져옵니다.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It only states what the tool does (fetches the color palette) without mentioning critical details like whether it's a read-only operation, if it requires authentication, rate limits, or what the return format looks like. This leaves significant gaps in understanding how the tool behaves.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence that directly states the tool's purpose without unnecessary words. It's appropriately sized for a simple tool with no parameters. However, it could be slightly more informative by adding context, but it's not wasteful.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's simplicity (0 parameters, no output schema, no annotations), the description is minimal but insufficient. It lacks details on what 'KRDS' refers to, the format of the returned color palette, or any behavioral traits. For a tool that might return complex data (like a color palette), more context is needed to be complete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool has 0 parameters, and the schema description coverage is 100%, so there are no parameters to document. The description appropriately doesn't add parameter details, as none are needed. A baseline score of 4 is applied since no parameters exist, and the description doesn't attempt to compensate for non-existent gaps.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states the tool 'gets the entire KRDS color palette' (가져옵니다 = gets/fetches), which provides a basic verb+resource combination. However, it doesn't differentiate from sibling tools like 'search_design_tokens' or 'get_krds_resources' that might also retrieve color-related data, leaving the scope ambiguous. The purpose is clear but lacks specificity about what makes this tool unique.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance is provided on when to use this tool versus alternatives. The description doesn't mention prerequisites, context, or exclusions, and it fails to reference sibling tools that might offer overlapping or complementary functionality. Users must infer usage based on the tool name alone.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_component_codeC
특정 KRDS 컴포넌트의 전체 HTML 코드와 정보를 가져옵니다.
| Name | Required | Description | Default |
|---|---|---|---|
| componentName | Yes | 컴포넌트 이름 (예: button, text_input, modal) |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of behavioral disclosure. It states the tool fetches HTML code and information, implying a read-only operation, but doesn't disclose any behavioral traits such as authentication needs, rate limits, error handling, or what '정보' (information) entails beyond HTML. For a tool with zero annotation coverage, this is a significant gap in transparency.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence that directly states the tool's purpose without any wasted words. It is appropriately sized and front-loaded, making it easy for an agent to quickly understand the core function. Every part of the sentence contributes to clarifying the tool's intent.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the complexity of fetching component code and information, with no annotations and no output schema, the description is incomplete. It doesn't explain what '정보' (information) includes, the format of the HTML code, potential errors, or any behavioral aspects. For a tool that retrieves detailed data, more context is needed to guide the agent effectively, especially without structured output information.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema has 100% description coverage, with 'componentName' documented as '컴포넌트 이름 (예: button, text_input, modal)' (component name, e.g., button, text_input, modal). The description adds no additional parameter semantics beyond what the schema provides, such as format constraints or examples. With high schema coverage, the baseline score of 3 is appropriate as the schema handles the parameter documentation adequately.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: '가져옵니다' (fetches/retrieves) specific KRDS component's '전체 HTML 코드와 정보' (full HTML code and information). It specifies the resource (KRDS component) and what is retrieved (HTML code + information). However, it doesn't explicitly differentiate from siblings like 'list_all_components' or 'search_krds_components', which might list or search components rather than fetch detailed code.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives. It doesn't mention prerequisites, context for usage, or compare to sibling tools such as 'list_all_components' (for listing) or 'search_krds_components' (for searching). This lack of explicit when/when-not or alternative references leaves the agent without clear usage direction.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_krds_resourcesB
KRDS 리소스 파일 경로와 사용법을 가져옵니다.
| Name | Required | Description | Default |
|---|---|---|---|
| resourceType | Yes | 리소스 타입 (css, scss, fonts, images, js) |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of behavioral disclosure. It states the tool fetches file paths and usage, implying a read-only operation, but doesn't specify whether this requires authentication, has rate limits, returns structured data, or involves any side effects. For a tool with no annotation coverage, this leaves significant behavioral gaps, though it doesn't contradict any annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence in Korean that directly states the tool's function without unnecessary words. It's front-loaded with the core action and target, making it easy to parse. Every part of the sentence contributes to understanding the purpose, with zero waste or redundancy.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool has one parameter with full schema coverage and no output schema, the description adequately covers the basic purpose. However, with no annotations and siblings that might overlap, it lacks context on behavioral traits, usage distinctions, and output format. For a simple read tool, this is minimally viable but leaves room for improvement in guiding the agent effectively.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema has 100% description coverage, with the parameter 'resourceType' fully documented in the schema (including enum values and description). The description doesn't add any semantic details beyond what the schema provides, such as explaining how the resource type affects the output or providing examples. With high schema coverage, the baseline is 3, as the description doesn't compensate but doesn't detract either.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: '가져옵니다' (get/fetch) 'KRDS 리소스 파일 경로와 사용법' (KRDS resource file paths and usage). It specifies both what is retrieved (paths and usage) and the target (KRDS resources), making the verb+resource combination explicit. However, it doesn't distinguish this tool from siblings like 'get_component_code' or 'search_krds_components', which might also retrieve KRDS-related information, so it lacks sibling differentiation.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives. It doesn't mention prerequisites, context, or exclusions, and with siblings like 'get_component_code' and 'search_krds_components' that might overlap, there's no indication of how this tool differs in scope or application. The description is purely functional without usage context.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_token_statsC
디자인 토큰 통계 정보를 가져옵니다.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of behavioral disclosure. It only states that the tool 'gets' information, implying a read operation, but doesn't describe what kind of statistics are returned, whether there are rate limits, authentication requirements, or any side effects. For a tool with zero annotation coverage, this is a significant gap in behavioral context.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence in Korean that directly states the tool's purpose. It's appropriately sized for a no-parameter tool and front-loaded with the core action. However, it could be slightly more structured by specifying what 'statistical information' entails, but it earns its place without waste.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool has no parameters and no output schema, the description is incomplete. It doesn't explain what 'design token statistical information' includes, such as counts, usage metrics, or summary data, leaving the agent uncertain about the return values. With no annotations to provide behavioral context, the description should do more to compensate, but it falls short.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool has 0 parameters, and schema description coverage is 100% (since there are no parameters to describe). In such cases, the baseline score is 4, as there's no need for the description to compensate for parameter documentation. The description doesn't add parameter semantics, but that's not required here.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states the tool 'gets design token statistical information' (디자인 토큰 통계 정보를 가져옵니다), which provides a basic purpose with verb+resource. However, it's vague about what specific statistics are retrieved and doesn't distinguish this from sibling tools like 'search_design_tokens' or 'get_color_palette'. The description is adequate but lacks specificity about scope or differentiation.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives. With sibling tools like 'search_design_tokens' and 'get_color_palette' available, there's no indication of whether this tool is for aggregated statistics, summary data, or how it differs from other token-related tools. Usage context is implied at best, but not explicit.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list_all_componentsB
모든 KRDS 컴포넌트 이름 목록을 가져옵니다.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries full burden but offers minimal behavioral context. It doesn't mention whether this is a read-only operation, if it requires authentication, rate limits, pagination behavior, or what format the returned list takes. '가져옵니다' (fetches) implies reading data, but no further details are given.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence that directly states the tool's function without unnecessary words. It's appropriately sized for a simple list operation, though it could potentially be more structured if it included usage context.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a list operation with no annotations and no output schema, the description is insufficient. It doesn't explain what the returned data looks like (e.g., array format, whether it includes metadata), nor does it address behavioral aspects like performance considerations or error conditions. The context signals indicate this is a simple tool, but more completeness is needed.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool has zero parameters, and schema description coverage is 100% (empty schema is fully documented). The description appropriately doesn't discuss parameters since none exist. A baseline of 4 is appropriate for zero-parameter tools when the schema coverage is complete.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the action ('가져옵니다' - 'fetches') and resource ('모든 KRDS 컴포넌트 이름 목록' - 'list of all KRDS component names'), making the purpose immediately understandable. It doesn't explicitly differentiate from siblings like 'search_krds_components' or 'list_component_categories', but the 'all' scope provides some implicit distinction.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance is provided about when to use this tool versus alternatives like 'search_krds_components' (which might allow filtering) or 'list_component_categories' (which might organize components differently). The description only states what it does, not when it's appropriate.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list_component_categoriesB
모든 KRDS 컴포넌트 카테고리 목록을 가져옵니다.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of behavioral disclosure. While it states this is a retrieval operation ('가져옵니다'), it doesn't describe important behavioral aspects like whether this returns all categories at once or uses pagination, what format the categories are returned in, whether authentication is required, or any rate limits. For a tool with zero annotation coverage, this leaves significant behavioral questions unanswered.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence that directly states the tool's purpose without any unnecessary words. It's appropriately sized for a simple retrieval tool with no parameters. Every word earns its place in conveying the core functionality.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple list retrieval tool with no parameters and no output schema, the description provides the basic purpose but lacks important context. Without annotations or output schema, the description should ideally mention what the return format looks like (e.g., array of category objects) or any behavioral constraints. It's minimally adequate but leaves gaps about what the agent can expect from using this tool.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool has zero parameters, and schema description coverage is 100% (though there are no parameters to cover). With no parameters, the description doesn't need to explain any inputs. The baseline for zero parameters is 4, as there's nothing for the description to compensate for regarding parameter documentation.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: '모든 KRDS 컴포넌트 카테고리 목록을 가져옵니다' (Get a list of all KRDS component categories). It specifies the verb ('가져옵니다' - get/fetch) and resource ('KRDS 컴포넌트 카테고리 목록' - KRDS component category list). However, it doesn't explicitly differentiate from sibling tools like 'list_all_components' or 'search_krds_components', which might have overlapping functionality.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives. With multiple sibling tools related to KRDS components (list_all_components, search_krds_components, get_component_code), there's no indication of when this specific category-listing tool is appropriate versus those other options. The description only states what it does, not when to choose it.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
search_design_tokensC
KRDS 디자인 토큰을 검색합니다 (색상, 간격, 타이포그래피 등).
| Name | Required | Description | Default |
|---|---|---|---|
| type | No | 토큰 타입 (예: color, spacing, typography) | |
| query | No | 검색할 키워드 (예: primary, blue, font) |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries full burden for behavioral disclosure. The description only states what the tool does (searches design tokens) but doesn't disclose any behavioral traits like whether it's read-only, what format results are returned in, whether there are rate limits, authentication requirements, or what happens when no results are found. For a search tool with zero annotation coverage, this is inadequate.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is extremely concise - a single sentence that efficiently communicates the core purpose. There's no wasted language or unnecessary elaboration. It's appropriately sized for a simple search tool with only two parameters.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given that there are no annotations and no output schema, the description should provide more complete context. For a search tool that presumably returns results, the description doesn't indicate what format results come in, whether they're paginated, what fields are included, or how comprehensive the search is. The description is too minimal for the tool's likely complexity.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema description coverage is 100%, with both parameters ('type' and 'query') having clear descriptions in the schema. The description adds minimal value beyond the schema by mentioning examples of token types ('색상, 간격, 타이포그래피 등') that align with the 'type' parameter, but doesn't provide additional semantic context. This meets the baseline of 3 when schema coverage is high.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the verb ('검색합니다' - searches) and resource ('KRDS 디자인 토큰' - KRDS design tokens), and specifies examples of what can be searched ('색상, 간격, 타이포그래피 등' - color, spacing, typography, etc.). However, it doesn't explicitly differentiate from sibling tools like 'search_krds_components' or 'get_color_palette', which reduces it from a perfect score.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives. With sibling tools like 'search_krds_components', 'get_color_palette', and 'get_token_stats' available, there's no indication of when this search tool is appropriate versus those other tools for finding design-related information.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
search_krds_componentsC
KRDS 컴포넌트를 검색합니다. 검색어나 카테고리로 필터링할 수 있습니다.
| Name | Required | Description | Default |
|---|---|---|---|
| query | No | 검색할 키워드 (예: button, input, modal) | |
| category | No | 컴포넌트 카테고리 (예: Form, Navigation, Layout) |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden. It mentions filtering capabilities but doesn't disclose behavioral traits such as pagination, rate limits, authentication needs, or what the output looks like (e.g., list of components with details). For a search tool with zero annotation coverage, this is a significant gap.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is concise with two sentences that directly state the tool's function and filtering options, with no wasted words. However, it could be more front-loaded by immediately distinguishing from siblings, but it's efficiently structured overall.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the complexity of a search tool with no annotations and no output schema, the description is incomplete. It lacks details on output format, error handling, or how results are returned (e.g., sorted, limited). With siblings offering similar functionalities, more context is needed to guide proper use.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, with clear descriptions for both parameters (query and category), including examples. The description adds minimal value by repeating that filtering is possible but doesn't provide additional semantics beyond what the schema already documents, meeting the baseline for high coverage.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states the tool 'searches KRDS components' and mentions filtering by search term or category, which provides a basic purpose. However, it doesn't specify what KRDS components are or how this differs from sibling tools like 'list_all_components' or 'search_design_tokens', leaving the scope vague.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance is provided on when to use this tool versus alternatives. With siblings like 'list_all_components' (likely unfiltered listing) and 'search_design_tokens' (different resource), the description fails to clarify use cases, exclusions, or prerequisites, offering only basic functionality without context.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
validate_krds_complianceC
HTML/CSS 코드를 분석하여 KRDS 가이드라인 준수 여부를 확인하고 개선 제안을 제공합니다.
| Name | Required | Description | Default |
|---|---|---|---|
| code | Yes | 검증할 HTML 또는 CSS 코드 |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of behavioral disclosure. It mentions analysis and suggestions but lacks details on how the tool behaves: e.g., whether it's read-only or modifies code, what permissions or authentication are needed, rate limits, output format (beyond 'improvement suggestions'), or error handling. For a tool with zero annotation coverage, this is a significant gap in transparency.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence in Korean that clearly states the tool's purpose without redundancy. It is front-loaded with the core action (analyze code) and outcome (compliance check and suggestions), with no wasted words. Every part of the sentence earns its place by conveying essential information.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the complexity (code analysis tool), no annotations, and no output schema, the description is incomplete. It doesn't explain what the output looks like (e.g., a report, list of issues), behavioral traits (e.g., is it a safe read operation?), or how it integrates with sibling tools. For a tool that likely returns detailed results, more context is needed to guide effective use by an AI agent.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema description coverage is 100%, with one parameter 'code' documented as '검증할 HTML 또는 CSS 코드' (HTML or CSS code to validate). The description adds no additional parameter semantics beyond what the schema provides (e.g., no examples, format constraints, or size limits). Since the schema fully covers the parameter, the baseline score of 3 is appropriate, as the description doesn't compensate but also doesn't detract.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: 'HTML/CSS 코드를 분석하여 KRDS 가이드라인 준수 여부를 확인하고 개선 제안을 제공합니다' (Analyzes HTML/CSS code to check KRDS guideline compliance and provide improvement suggestions). It specifies the verb (analyze/check), resource (HTML/CSS code), and outcome (compliance verification and suggestions). However, it doesn't explicitly differentiate from sibling tools like 'get_krds_resources' or 'search_krds_components', which might also relate to KRDS guidelines but serve different purposes.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives. It doesn't mention prerequisites (e.g., needing KRDS guidelines knowledge), exclusions (e.g., not for other code types), or comparisons to siblings like 'get_krds_resources' (which might provide guideline details) or 'search_krds_components' (which might find compliant components). Usage is implied only by the purpose statement, with no explicit context for selection.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
9 tool updates
v1.0.0- First observed
get_color_palette - First observed
get_component_code - First observed
get_krds_resources - First observed
get_token_stats - First observed
list_all_components - First observed
list_component_categories - First observed
search_design_tokens - First observed
search_krds_components - First observed
validate_krds_compliance
TDQS
Scored across 9 tools
Every tool has a clearly distinct purpose with no overlap. Tools like get_component_code, list_all_components, and search_krds_components all target components but with different actions (get specific code, list names, search/filter), making them easily distinguishable. The descriptions clearly differentiate between fetching, listing, searching, and validating operations.
All tool names follow a consistent verb_noun pattern in snake_case, such as get_color_palette, list_all_components, and search_design_tokens. This uniformity makes the tool set predictable and easy to navigate, with no deviations in naming conventions.
With 9 tools, the count is well-scoped for a UI/UX design system server. Each tool serves a specific purpose in accessing and managing design resources, components, and compliance, without feeling excessive or insufficient for the domain.
The tool set covers core operations for a design system, including fetching resources, listing/searching components and tokens, and validating compliance. A minor gap exists in update or modification tools (e.g., for editing components or tokens), but agents can work around this with the provided read and validation tools.
Maintenance
Related MCP Connectors
Build and manage your design system with AI: tokens, themes, components, icons, Figma and code.
Serves your design system and coding standards to coding agents, so they stop guessing.
Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.
Find UI components and themes, retrieve code, and generate with hosted 21st AI when enabled.
Related MCP Servers
- AlicenseBqualityCmaintenanceProvides AI coding tools with structured access to U.S. Web Design System components, patterns, templates, and accessibility guidance for building government websites.95 npm1MIT
- FlicenseAqualityDmaintenanceExposes Levit design system (GDS) metadata to AI coding tools, enabling queries about color tokens and component usage via natural language.11-
- AlicenseNot gradedqualityCmaintenanceProvides Korean government design system (KRDS) guidelines to AI models via MCP, enabling AI assistants to comply with KRDS standards when developing government websites and digital services.19 npm15MIT
- AlicenseNot gradedqualityAmaintenanceUAE Design System (AEGOV DLS) for AI assistants: component catalogue, design tokens, UAE PASS & Emirates ID scaffolds, snippet validation.MIT