tesserai — MCP-сервер для Claude Code: дизайн-система
tesserai передаёт агенту токены, компоненты и правила дизайн-системы проекта. Помогает сверять интерфейс с системой и вносить изменения в её границах.
claude mcp add tesserai -- npx -y @tesserai/cliЧто делает tesserai
CLI устанавливает дизайн-систему в проект: компоненты, тему CSS и манифест tesserai/design-system.json. Команда init также добавляет CLI как dev-зависимость и регистрирует MCP-сервер для Claude Code; для Cursor предусмотрена регистрация в .cursor/mcp.json. Агент получает структуру системы, токены, компоненты, проверки контрастности и рекомендации по дизайну.
Команда sync обновляет систему, сохраняя изменённые файлы и записывая рядом новые версии; --dry-run показывает план. scan находит повторяющиеся переопределения стилей, ручные изменения сгенерированных файлов и значения, обходящие систему. Для точечных совпадений есть --fix. Нужны Node.js 22 или новее и Tailwind CSS 4, поэтому без них CLI не запустится как описано.
Для ручной регистрации в Claude Code используется команда claude mcp add tesserai -- npx -y @tesserai/cli mcp. CLI также умеет создавать Storybook с проверками доступности и экспортировать систему в другие стеки, включая SCSS, MUI и Swift.
Какие задачи решает
- передать агенту токены и компоненты проекта
- проверить, где интерфейс переопределяет стили системы
- обновить компоненты, сохранив изменённые файлы
- собрать Storybook с проверками доступности
Примеры запросов агенту
- Покажи токены и компоненты дизайн-системы проекта.
- Найди повторяющиеся переопределения компонентов и объясни, что меняется.
- Обнови дизайн-систему, сохранив мои изменённые файлы.
Как установить tesserai
Командой платформы
claude mcp add tesserai -- npx -y @tesserai/cliКомандой платформы
codex mcp add cli -- npx -y @tesserai/cliФайл настроек
{
"mcpServers": {
"cli": {
"command": "npx",
"args": [
"-y",
"@tesserai/cli"
]
}
}
}Файл настроек
{
"servers": {
"cli": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@tesserai/cli"
]
}
}
}Командой платформы
gemini mcp add cli npx -y @tesserai/cliПо шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о tesserai
Как установить tesserai в Claude Code?
Выполните claude mcp add tesserai -- npx -y @tesserai/cli, затем claude mcp add cli -- npx -y @tesserai/cli.
Что делает tesserai?
MCP-сервер даёт агенту доступ к токенам, компонентам, проверкам контрастности и рекомендациям дизайн-системы. Через CLI систему можно устанавливать, обновлять и анализировать.
Что нужно для работы tesserai?
Нужны Node.js 22 или новее и Tailwind CSS 4. Для React поддерживаются Base UI, Radix или React Aria; для Vue — Reka UI, для Svelte 5 — Bits UI.
