Для ИИ-агентов
Как подключить агента
Что дать агенту в продукте: DESIGN.md, реестр через MCP, llms.txt и сниппет
npx shadcn@latest add @umbra/skill-umbra-uiКонтекст для ИИ-агентов отдаётся четырьмя путями: правила (DESIGN.md), навык с порядком работы, сниппет для CLAUDE.md продукта и реестр, который агент читает через shadcn MCP
llms.txt
- /llms.txt: оглавление со ссылками на DESIGN.md и документацию каждого элемента
- /llms-full.txt: DESIGN.md и документация всех элементов одним текстом
- /DESIGN.md: правила в формате Google Stitch, YAML-шапка из tokens/
shadcn MCP в продукте
pnpm dlx shadcn@latest mcp init --client claude
В components.json продукта:
{
"registries": {
"@umbra": "https://aid-design-lovat.vercel.app/r/{name}.json"
}
}
После этого агент ставит компоненты фразой: «добавь плитку и кнопку из @umbra». Описание «что это, когда брать и когда нет» агент видит через MCP до установки. Реестр целиком: https://aid-design-lovat.vercel.app/r/registry.json
Навык umbra-ui
Порядок сборки экрана: каркас, плитки, роли цвета, правило двух плиток, APCA, движение, проверка в 1100 × 700. Ставится в .claude/skills/umbra-ui/ продукта, подробности на странице «Навык «Экран по Umbra»»
Сниппет для CLAUDE.md продукта
Вставить блок ниже в CLAUDE.md продукта (ShadeNotes, портфолио, новый продукт). Он короткий намеренно: подробности агент берёт из DESIGN.md и навыка umbra-ui
## Интерфейс: Umbra
Дизайн-система продукта: Umbra (https://aid-design-lovat.vercel.app). Перед любой работой с интерфейсом:
1. Прочитать DESIGN.md: https://aid-design-lovat.vercel.app/DESIGN.md (полный контекст с компонентами: /llms-full.txt). Навык `umbra-ui` (`.claude/skills/umbra-ui/SKILL.md`) задаёт порядок работы.
2. Компоненты брать из реестра `@umbra`: найти через shadcn MCP или /llms.txt, поставить `npx shadcn@latest add @umbra/<имя>`. Своё писать, только если в `@umbra` нет, и только из классов токенов (`bg-tile`, `text-muted`, `p-tile`, `rounded-tile`, `gap-tile`).
3. Не вводить без вопроса автору: новые цвета и токены, радиусы вне шкалы, кривые и длительности вне токенов, второй набор иконок, второе живое существо. Продукт меняет только акцент (`product.css`), логотип и одно живое существо.
4. Иконки только `@phosphor-icons/react` через `Icon` из `@umbra/icon` (вес выбирается сам).
5. Контраст по APCA: брать только пары из таблицы https://aid-design-lovat.vercel.app/colors; новая пара текст / фон это вопрос автору.
6. Проверки перед сдачей: `eslint` (с `eslint.umbra.mjs`), `tsc --noEmit`, сборка, скриншоты 1100 × 700 в светлой и тёмной теме. В отчёте написать, что проверено.
Чтобы агент ставил компоненты фразой, в components.json продукта:
{
"registries": {
"@umbra": "https://aid-design-lovat.vercel.app/r/{name}.json"
}
}
и один раз pnpm dlx shadcn@latest mcp init --client claude. Навык ставится командой npx shadcn@latest add @umbra/skill-umbra-ui