KRDS Design System

Name: KRDS Design System
Author: re-rank

Build interfaces that follow the Korea Responsive Design System (KRDS) faster.

От сообществаРаботаетБез входаГлобальныйБесплатноТолько чтение

Что умеет

Search Krds Components: KRDS 컴포넌트를 검색합니다. 검색어나 카테고리로 필터링할 수 있습니다.
Get Component Code: 특정 KRDS 컴포넌트의 전체 HTML 코드와 정보를 가져옵니다.
List Component Categories: 모든 KRDS 컴포넌트 카테고리 목록을 가져옵니다.

Какие данные видит

Нужен ли аккаунт

Не нужен: сервер работает без входа

Build interfaces that follow the Korea Responsive Design System (KRDS) faster. Search and insert official components, retrieve ready-to-use HTML, and explore color, spacing, and typography tokens. Validate your code for KRDS compliance and accessibility and get actionable improvement suggestions.

Как подключить

Как подключить KRDS Design System к Claude

Адрес сервера, который нужно вставить в настройках Claude:

https://uiux-mcp--re-rank.run.tools

Откройте Claude (сайт claude.ai или приложение для компьютера).
Перейдите в Настройки → Коннекторы (в английском интерфейсе: Settings → Connectors).
Нажмите Добавить пользовательский коннектор (Add custom connector).
Вставьте адрес сервера, скопированный ниже, в поле URL удалённого MCP-сервера и нажмите Добавить.
В чате нажмите + → Коннекторы и включите новый коннектор.

Пользовательские коннекторы доступны на тарифах Free, Pro, Max, Team и Enterprise. На Free можно добавить только один. В Team и Enterprise коннектор сначала добавляет владелец организации в Настройки организации → Коннекторы.

Авторизация

После нажатия Добавить откроется окно входа в сервис. Войдите под своим аккаунтом и подтвердите доступ. Пароль Claude не видит.

Как подключить KRDS Design System к ChatGPT

Адрес сервера, который нужно вставить в настройках ChatGPT:

https://uiux-mcp--re-rank.run.tools

Откройте ChatGPT в браузере (chatgpt.com). Нужен тариф Plus, Pro, Business, Enterprise или Edu.
Один раз включите режим разработчика: Настройки → Приложения → Дополнительные настройки → Режим разработчика (Settings → Apps → Advanced settings → Developer mode).
Откройте Настройки → Коннекторы и нажмите Создать (Create).
Заполните форму: Название (любое), Описание (одна фраза, что делает сервис), URL MCP-сервера (скопируйте ниже).
В поле Аутентификация выберите OAuth, если сервис требует вход, иначе Нет. Нажмите Создать.
В новом чате откройте + → Приложения/Коннекторы и включите коннектор.

Название раздела у OpenAI менялось (Connectors → Apps/Plugins). Если пункт называется иначе, ищите «режим разработчика» в настройках. В рабочих пространствах Business/Enterprise администратор должен разрешить пользовательские коннекторы.

Авторизация

При первом использовании ChatGPT откроет окно входа в сервис. Войдите и подтвердите доступ.

Как подключить KRDS Design System к Cursor

Адрес сервера, который нужно вставить в настройках Cursor:

https://uiux-mcp--re-rank.run.tools

Быстрый способ: нажмите кнопку Открыть в Cursor ниже, Cursor сам предложит добавить сервер.

Вручную:

В Cursor откройте Settings → Cursor Settings → MCP и нажмите Add new global MCP server.
Вставьте JSON, скопированный ниже, в открывшийся файл ~/.cursor/mcp.json (для одного проекта: .cursor/mcp.json в корне проекта).
Сохраните файл. Сервер появится в списке MCP; при необходимости пройдите авторизацию по кнопке рядом с ним.

Авторизация

Если сервис требует вход, рядом с сервером в списке MCP появится кнопка авторизации.

Список инструментов сервера (9)

Технические названия из tools/list. Нужны только разработчикам.

search_krds_components	KRDS 컴포넌트를 검색합니다. 검색어나 카테고리로 필터링할 수 있습니다.
get_component_code	특정 KRDS 컴포넌트의 전체 HTML 코드와 정보를 가져옵니다.
list_component_categories	모든 KRDS 컴포넌트 카테고리 목록을 가져옵니다.
list_all_components	모든 KRDS 컴포넌트 이름 목록을 가져옵니다.
search_design_tokens	KRDS 디자인 토큰을 검색합니다 (색상, 간격, 타이포그래피 등).
get_color_palette	KRDS 전체 색상 팔레트를 가져옵니다.
get_token_stats	디자인 토큰 통계 정보를 가져옵니다.
validate_krds_compliance	HTML/CSS 코드를 분석하여 KRDS 가이드라인 준수 여부를 확인하고 개선 제안을 제공합니다.
get_krds_resources	KRDS 리소스 파일 경로와 사용법을 가져옵니다.