# Basecoat UI MCP

Офлайн MCP-сервер с шаблонами, макетами и статической проверкой для Basecoat UI. Пригодится, когда агент верстает интерфейс на Astro, Next.js или Tailwind CSS 4.

- MCP-сервер · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 38
- Автор: zygiu-zygis
- Лицензия: MIT · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/zygiu-zygis/basecoat-ui-mcp
- Обновлён: 2026-10-14
- HTML: https://affpapa.org/nevibecode/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 байт. Исходники приложения сервер не трогает.

## Требования
- Нужно: Node.js (команды через npx)
- Переменные окружения: `BASECOAT_PROJECT_ROOT` — это ключи и токены: значения спроси у человека, в репозиторий и общие файлы не записывай.

## Установка

### Claude Code (родная платформа)

**Командой платформы**
```bash
claude mcp add --env BASECOAT_PROJECT_ROOT=<BASECOAT_PROJECT_ROOT> --transport stdio basecoat-ui-mcp -- npx -y @intellmedia/basecoat-ui-mcp
```
Вместо <…> подставьте свои значения

### Codex

**Командой платформы**
```bash
codex mcp add basecoat-ui-mcp --env BASECOAT_PROJECT_ROOT=<BASECOAT_PROJECT_ROOT> -- npx -y @intellmedia/basecoat-ui-mcp
```
Вместо <…> подставьте свои значения

### Cursor

**Файл настроек**
Файл `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "basecoat-ui-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "@intellmedia/basecoat-ui-mcp"
            ],
            "env": {
                "BASECOAT_PROJECT_ROOT": "<BASECOAT_PROJECT_ROOT>"
            }
        }
    }
}
```
Вместо <…> подставьте свои значения

### GitHub Copilot

**Файл настроек**
Файл `.vscode/mcp.json`:
```json
{
    "servers": {
        "basecoat-ui-mcp": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "@intellmedia/basecoat-ui-mcp"
            ],
            "env": {
                "BASECOAT_PROJECT_ROOT": "<BASECOAT_PROJECT_ROOT>"
            }
        }
    }
}
```
Вместо <…> подставьте свои значения

### Gemini CLI

**Командой платформы**
```bash
gemini mcp add -e BASECOAT_PROJECT_ROOT=<BASECOAT_PROJECT_ROOT> basecoat-ui-mcp npx -y @intellmedia/basecoat-ui-mcp
```
Вместо <…> подставьте свои значения

## Когда брать
- собрать каркас проекта на Astro или Next.js с Tailwind CSS 4
- получить разметку компонента Basecoat UI с вариантами состояний
- подобрать макет страницы с сеткой и слотами
- найти график под тему оформления и вставить его в разметку
- проверить вёрстку на соответствие правилам Tailwind v4 и семантическим токенам

## Примеры запросов агенту
- Собери каркас проекта на Astro с Tailwind CSS 4 и тёмной темой без мигания
- Дай разметку компонента с вариантами состояний для формы входа
- Подбери макет дашборда с боковой панелью и слотами под виджеты

## Похожие
- [Front-End Checklist](https://affpapa.org/nevibecode/mcp/front-end-checklist.md) — MCP-сервер · ★ 74559
- [tldraw](https://affpapa.org/nevibecode/mcp/tldraw.md) — MCP-сервер · ★ 51091
- [Figma-Context-MCP](https://affpapa.org/nevibecode/mcp/figma-context-mcp.md) — MCP-сервер · ★ 16062
- [mcp-server-chart](https://affpapa.org/nevibecode/mcp/mcp-server-chart.md) — MCP-сервер · ★ 4402
- [Dembrandt](https://affpapa.org/nevibecode/mcp/dembrandt.md) — MCP-сервер · ★ 3821
- [RevoGrid DataGrid MCP Pro](https://affpapa.org/nevibecode/mcp/revogrid-datagrid-mcp-pro.md) — MCP-сервер · ★ 3450

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md