# Как подключить четыре надстройки для дизайна в Claude

Кодовое слово: МАКЕТ Лид: Подключите инструменты для анимаций, читаемости, дизайн-решений и проверки страницы в браузере. После каждого подключения проверьте, что агент видит инструмент и применяет его по назначению. Зачем: улучшить интерфейс и проверить фактический результат сборки. Функция: устано

## 1. Установить скиллы до сборки страницы

- [ ] Установите [скиллы Эмиля Ковальски](https://github.com/emilkowalski/skills) для анимаций командой ниже.

```bash
npx skills@latest add emilkowalski/skills
```

- [ ] Проверьте, что агент видит установленный скилл в списке доступных.
- [ ] Установите [Impeccable](https://github.com/pbakaus/impeccable) по инструкции репозитория и проверьте его доступность агенту.

- Его участок: типографика, контраст, структура и отступы. В исходном наборе указаны **23 команды**; их состав сверяйте с установленной версией.
- Установите скилл заранее, а проверку запускайте, когда уже появился макет.

- [ ] Установите [Taste](https://github.com/Leonxlnx/taste-skill) и проверьте, что агент его видит.
- [ ] Если есть предпочтение по дизайн-системе, укажите его в задаче. Если предпочтений нет, оставьте выбор скиллу.
- [ ] Уберите длинное дублирующее описание стиля, если оно противоречит работе Taste: инструкции в запросе могут переопределить решения скилла.

## 2. Проверить применение на странице

- [ ] Дайте задачу с движением: например, меню, модальным окном или появлением карточки.
- [ ] Проверьте, что агент указал конкретные длительности и кривые анимации, а не ограничился фразой «плавная анимация».
- [ ] Проверьте, что для дизайна названы конкретные решения и их источники, а не только «современный минимализм».
- [ ] После появления макета вызовите проверку Impeccable.
- [ ] Разберите предложенные исправления типографики, контраста, структуры и отступов. Не ограничивайте проверку сменой цветов.
- [ ] Зафиксируйте повторяющиеся ошибки, обнаруженные при проверке, чтобы учитывать их в следующих страницах.

## 3. Подключить браузер к готовой странице

- [ ] Когда страница собрана, подключите [Playwright MCP](https://github.com/microsoft/playwright-mcp) в Claude командой ниже.

```bash
claude mcp add playwright npx @playwright/mcp@latest
```

- [ ] Для другого клиента настройте запуск `npx @playwright/mcp@latest` в его блоке `mcpServers` по инструкции клиента.
- [ ] Проверьте, что агент видит инструменты MCP-сервера.
- [ ] Попросите агента открыть собранную страницу в настоящем браузере и проверить её.
- [ ] Убедитесь, что отчёт содержит конкретные наблюдения по открытой странице, а не пересказ кода.
- [ ] Держите браузер под контролем: не открывайте через MCP сомнительные страницы и не оставляйте в том же браузере рабочие сессии с доступом к деньгам или почте.

## 4. Проверить комплект

- [ ] Все три скилла доступны агенту; инструменты Playwright MCP также видны.
- [ ] Скиллы установлены до сборки, Impeccable применён к существующему макету, браузерная проверка выполнена после появления страницы.
- [ ] Проверены конкретные тайминги, типографика, отступы и основания дизайн-решений.

---

Источник: https://localhost:3000/m/kak-podklyuchit-chetyre-nadstroyki-dlya-dizayna-v-claude