Agentic Design System — MCP-сервер для Claude Code
MCP-сервер рендерит веб-интерфейсы и SwiftUI, запускает визуальную оценку и связывает решения с файлами проекта.
claude mcp add ads-mcp -- npx -y ads-mcpЧто делает Agentic Design System
Agentic Design System даёт агенту три инструмента: ads_render создаёт снимки URL, TSX-компонента или SwiftUI-цели, а ads_evaluate проверяет результат и при необходимости сравнивает его с другим запуском. ads_trace подтверждает решения по файлам, хешированным во время рендера. Запуски сохраняются в .ads/runs и переживают новые экземпляры клиента и сервера на той же файловой системе.
Для локального запуска укажите проект через --root /absolute/path/to/project. Перед первым веб-рендером проверьте Chromium командой npx --yes [email protected] doctor, а затем установите его через npx --yes [email protected] setup. Можно передать путь к совместимому Chromium через PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH.
Сервер умеет принимать состояния интерфейса и разные viewport, применяет проверки axe, переполнения, landmarks, live regions, CLS и touch-target. SwiftUI подключается внешним адаптером снимков. Локальное хранилище рассчитано на один проектный корень, поэтому для размещённого или реплицированного запуска понадобятся общее постоянное хранилище и контроль конкурентного доступа.
Какие задачи решает
- отрендерить состояния веб-страницы в заданных viewport
- проверить интерфейс по доступности и визуальным гейтам
- сравнить текущий запуск с базовым
- связать решение с исходниками и артефактами
- оценить SwiftUI-экран через адаптер снимков
Примеры запросов агенту
- Отрендери
http://127.0.0.1:3000/ordersв состоянияхdefault,loading,emptyиerrorчерезads_render. - Оцени запуск
run_...по рубрике для мобильного и десктопного сценария черезads_evaluate. - После чтения манифеста проверь происхождение решения через
ads_trace, используяskills/design-review/SKILL.md,brief.mdиsrc/Orders.tsx.
Как установить Agentic Design System
Командой платформы
claude mcp add ads-mcp -- npx -y ads-mcpКомандой платформы
codex mcp add ads-mcp -- npx -y ads-mcpФайл настроек
{
"mcpServers": {
"ads-mcp": {
"command": "npx",
"args": [
"-y",
"ads-mcp"
]
}
}
}Файл настроек
{
"servers": {
"ads-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"ads-mcp"
]
}
}
}Командой платформы
gemini mcp add ads-mcp npx -y ads-mcpПо шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о Agentic Design System
Как установить Agentic Design System в Claude Code?
Выполните claude mcp add ads-mcp -- npx -y ads-mcp.
Что делает Agentic Design System?
Сервер рендерит URL, TSX и SwiftUI-цели, запускает детерминированные проверки, оценивает снимки и связывает результаты с файлами проекта.
Что нужно подготовить для веб-рендера?
Перед первым веб-рендером нужен Chromium: проверьте его через npx --yes [email protected] doctor и установите командой npx --yes [email protected] setup. Вместо этого можно задать PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH.
