Basecoat UI MCP — MCP-сервер для Claude Code: шаблоны Basecoat UI
Офлайн MCP-сервер с шаблонами, макетами и статической проверкой для Basecoat UI. Пригодится, когда агент верстает интерфейс на Astro, Next.js или Tailwind CSS 4.
claude mcp add --env BASECOAT_PROJECT_ROOT=<BASECOAT_PROJECT_ROOT> --transport stdio basecoat-ui-mcp -- npx -y @intellmedia/basecoat-ui-mcpЧто делает Basecoat UI MCP
Сервер отдаёт агенту готовый набор шаблонов, макетов и токенов ритма для Basecoat UI — визуального стиля shadcn/ui без React и без сборки. Работает через локальный stdio, в сеть не ходит. Ответы ограничены по размеру, крупные наборы выдаются курсорами.
Внутри 22 инструмента по шести слоям: настройка проекта, планирование макетов, графики, получение компонентов, графы макетов и контракты состояний. Например, basecoat_setup_config собирает каркас фреймворка с импортами Tailwind CSS 4 и переменными OKLCH, а basecoat_component_syntax отдаёт разметку компонента с вариантами состояний и иконками. Нужен Node.js 22.14.0 или новее.
Корень проекта задаётся флагом --project-root; он важнее переменной BASECOAT_PROJECT_ROOT, а та важнее каталога запуска. Из этого каталога читается DESIGN.md, туда же пишутся сессии в .basecoat/designer/. Родительские папки сервер не обходит, поэтому путь указывайте абсолютный. Файл .basecoat/rhythm.json — необязательная переопределяющая настройка: он должен лежать внутри настоящей папки .basecoat в корне проекта, быть обычным файлом без симлинка и не превышать 65,536 байт. Исходники приложения сервер не трогает.
Какие задачи решает
- собрать каркас проекта на Astro или Next.js с Tailwind CSS 4
- получить разметку компонента Basecoat UI с вариантами состояний
- подобрать макет страницы с сеткой и слотами
- найти график под тему оформления и вставить его в разметку
- проверить вёрстку на соответствие правилам Tailwind v4 и семантическим токенам
Примеры запросов агенту
- Собери каркас проекта на Astro с Tailwind CSS 4 и тёмной темой без мигания
- Дай разметку компонента с вариантами состояний для формы входа
- Подбери макет дашборда с боковой панелью и слотами под виджеты
Как установить Basecoat UI MCP
Командой платформы
claude mcp add --env BASECOAT_PROJECT_ROOT=<BASECOAT_PROJECT_ROOT> --transport stdio basecoat-ui-mcp -- npx -y @intellmedia/basecoat-ui-mcpВместо <…> подставьте свои значения
Командой платформы
codex mcp add basecoat-ui-mcp --env BASECOAT_PROJECT_ROOT=<BASECOAT_PROJECT_ROOT> -- npx -y @intellmedia/basecoat-ui-mcpВместо <…> подставьте свои значения
Файл настроек
{
"mcpServers": {
"basecoat-ui-mcp": {
"command": "npx",
"args": [
"-y",
"@intellmedia/basecoat-ui-mcp"
],
"env": {
"BASECOAT_PROJECT_ROOT": "<BASECOAT_PROJECT_ROOT>"
}
}
}
}Вместо <…> подставьте свои значения
Файл настроек
{
"servers": {
"basecoat-ui-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@intellmedia/basecoat-ui-mcp"
],
"env": {
"BASECOAT_PROJECT_ROOT": "<BASECOAT_PROJECT_ROOT>"
}
}
}
}Вместо <…> подставьте свои значения
Командой платформы
gemini mcp add -e BASECOAT_PROJECT_ROOT=<BASECOAT_PROJECT_ROOT> basecoat-ui-mcp npx -y @intellmedia/basecoat-ui-mcpВместо <…> подставьте свои значения
По шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о Basecoat UI MCP
Как установить Basecoat UI MCP в Claude Code?
Выполните claude mcp add basecoat-ui-mcp -- npx -y @intellmedia/basecoat-ui-mcp. Если нужен свой корень проекта, добавьте его через переменную: claude mcp add --env BASECOAT_PROJECT_ROOT=<BASECOAT_PROJECT_ROOT> --transport stdio basecoat-ui-mcp -- npx -y @intellmedia/basecoat-ui-mcp.
Что делает Basecoat UI MCP?
Отдаёт агенту офлайн-реестр шаблонов, макетов и токенов Basecoat UI и проверяет исходники статически. Сеть при работе не используется.
Что нужно для запуска сервера?
Node.js 22.14.0 или новее. Корень проекта задаётся флагом --project-root или переменной BASECOAT_PROJECT_ROOT.
