ГлавнаяМатериалы из Reels/ShortsЧек-лист
Чек-листНовое
кодовое словоМакет

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

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

Содержание4 глав
  1. 011. Установить скиллы до сборки страницы
  2. 022. Проверить применение на странице
  3. 033. Подключить браузер к готовой странице
  4. 044. Проверить комплект

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

npx skills@latest add emilkowalski/skills

  • Проверьте, что агент видит установленный скилл в списке доступных.

  • Установите Impeccable по инструкции репозитория и проверьте его доступность агенту.

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

  • Установите скилл заранее, а проверку запускайте, когда уже появился макет.

  • Установите Taste и проверьте, что агент его видит.

  • Если есть предпочтение по дизайн-системе, укажите его в задаче. Если предпочтений нет, оставьте выбор скиллу.

  • Уберите длинное дублирующее описание стиля, если оно противоречит работе Taste: инструкции в запросе могут переопределить решения скилла.

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

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

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

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

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

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