buoy — MCP-сервер для Claude Code: дизайн-система под контролем агента
Показывает ИИ-агенту токены и правила вашей дизайн-системы. Находит захардкоженные цвета, случайные отступы и предлагает точную правку.
claude mcp add buoy -- npx -y @buoy-design/cliЧто делает buoy
Агент пишет #3b82f6 там, где в проекте есть var(--color-primary), и ставит padding: 17px при шкале кратностей 4. Buoy ловит такие расхождения и возвращает агенту подсказку вплоть до конкретной строки замены. Подключается как MCP-сервер, четыре инструмента: list_design_tokens, find_token_for_value, check_ui_against_design_system, design_system_context.
Начать можно без конфигурации. npx ahoybuoy show all печатает найденные компоненты, токены и дрейф, npx ahoybuoy dock добавляет .buoy.yaml и локальные интеграции. Файл .buoy.yaml описывает пути компонентов, токенов и владельцев — на нём строятся buoy system map и buoy system impact. Для Claude в комплекте идёт хук PostToolUse: проверяет каждый отредактированный файл стилей до того, как агент пойдёт дальше.
Без учётной записи работает локальный контур — сканы, правки, системная карта. Облачные функции вроде PR-бота на GitHub и синхронизации начинаются с buoy ahoy login. Ставить есть смысл до того, как накопится дрейф по всему репозиторию: buoy rescue умеет строить план, вносить правки в новую ветку и генерировать отчёт, но разбирать придётся уже накопленное.
Какие задачи решает
- найти захардкоженные цвета и заменить их на токены
- поймать произвольные отступы вне шкалы
- собрать карту дизайн-системы и непокрытой части UI
- оценить, кого затронет изменение компонента или токена
- прогнать проверку стилей перед коммитом
Примеры запросов агенту
- Подключи buoy и проверь
src/components/Button.tsxна захардкоженные цвета - Найди токен для значения
#1a73e8через buoy - Сделай
buoy system impact Buttonи покажи, кто использует компонент
Как установить buoy
Командой платформы
claude mcp add buoy -- npx -y @buoy-design/cliКомандой платформы
codex mcp add buoy -- npx -y @buoy-design/cliФайл настроек
{
"mcpServers": {
"buoy": {
"command": "npx",
"args": [
"-y",
"@buoy-design/cli"
]
}
}
}Файл настроек
{
"servers": {
"buoy": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@buoy-design/cli"
]
}
}
}Командой платформы
gemini mcp add buoy npx -y @buoy-design/cliПо шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о buoy
Как установить buoy в Claude Code?
Добавьте сервер командой claude mcp add buoy -- npx -y @buoy-design/cli. После этого агент видит инструменты дизайн-системы. Хук PostToolUse ставится отдельно через npx ahoybuoy dock hooks --claude.
Что делает buoy?
Сверяет код с вашими токенами и компонентами: находит жёстко заданные значения, произвольные отступы и неиспользуемые компоненты. Для каждой находки даёт токен и строку исправления.
Нужны ли Figma и аккаунт Buoy?
Нет. Источник истины — код проекта, Figma остаётся необязательным входом. Локальные проверки идут без аккаунта, вход через buoy ahoy login нужен для облачного PR-бота и синхронизации.
