Блюпринт · сентябрь 2026
5 плагинов дизайна для Claude Code: ставим за 3 минуты
Просишь Claude Code собрать сайт и получаешь шаблон: те же отступы, серый текст на цветной кнопке. Правил дизайна у него нет. Открой окно команд в папке проекта, вставь пять строк из блока ниже и нажимай Enter после каждой: 3 минуты, и правила у него появятся
npx -y skills add https://github.com/Leonxlnx/taste-skill --skill design-taste-frontend --agent claude-code -y
npx -y impeccable install --providers=claude --scope=project
npm install -g @playwright/cli@latest && playwright-cli install --skills
curl -L -o DESIGN.md https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/notion/DESIGN.md
git clone https://github.com/img2threejs/img2threejs.git .claude/skills/img2threejsПять строк отработали за 3 минуты 8 секунд. В ролике звучит «за 30 секунд»: столько занимает одна команда, а не все пять. Дольше всех ставится Impeccable, он тянет 14 МБ движка
5 команд ставят 4 набора правил и DESIGN.md за 3 минуты, просьба ниже даёт готовую страницу за 102 секунды
Первая страница одной просьбой
Открой в этой же папке Claude Code и вставь ему просьбу целиком:
Используй скилл design-taste-frontend и файл DESIGN.md в корне проекта (цвета, шрифты, отступы, кнопки оттуда). Собери одностраничный лендинг кофейни в одном файле index.html: только HTML и CSS внутри файла, без сборщиков и без внешних библиотек. Блоки: шапка, hero с заголовком и кнопкой, три преимущества, меню из четырёх позиций с ценами, адрес и часы работы, футер.102 секунды, и рядом лежит index.html на 15 289 байт. Вот что в нём:
Страница собралась с первой просьбы, править руками ничего не пришлось: цвета, шрифт и кнопки агент взял из файла в корне
Окно команд на Mac это программа «Терминал» (Cmd и пробел, набери Terminal), на Windows подойдёт Windows Terminal из магазина приложений. В нужную папку попадаешь правым кликом по ней: на Mac «Новый терминал в папке», на Windows «Открыть в терминале». Перед установкой стоит проверить, что машина готова:
node -v
python3 -VОбе строки ответили номером версии (у Node нужен 20 или выше) - едем дальше. Ответили command not found - поставь недостающее с nodejs.org и python.org, это два обычных установщика
Что агент увидел, проверяется одной фразой: скажи ему «перечисли скиллы этого проекта». У меня ответ пришёл такой: design-taste-frontend, img2threejs, impeccable, playwright-cli. Файла DESIGN.md в списке нет и не должно быть: это файл в корне, не скилл
Замер прогона 21.09.2026: пять установок 3 мин 8 с (12 + 160 + 3 + 1 + 12 секунд), сборка страницы 102 с, размер index.html 15 289 байт, Claude Code 2.1.261, node v26.9.0.
Что даёт каждое из пяти
Порядок как в ролике. Любое из пяти ставится отдельно, любое можно пропустить
| Что ставим | Что даёт |
|---|---|
| TasteSkill | правила веб-дизайна вместо усреднённого вывода |
| Impeccable | дизайн-систему, 24 команды и детектор слабостей без ИИ |
| Playwright CLI | агент сам открывает браузер и проверяет собранную страницу |
| Awesome Design | готовую дизайн-систему известного сайта одним файлом |
| Image to Three.js | картинку с фотографии, пересобранную в 3D-объект кодом |
TasteSkill
Первая команда из блока выше. Установщик покажет Found 13 skills, выберет один и напишет Installed 1 skill. Скилл ляжет в .claude/skills/design-taste-frontend, это 88 КБ текстовых правил: сетка, типографика, воздух, иерархия, движение. Что даёт: агент перестаёт выдавать интерфейс, собранный по среднему шаблону
Impeccable
Вторая команда. Ставится дольше всех и с первого раза может упасть строкой Download failed: Could not verify skill bundle: он не дождался ответа, повтори ту же команду. В конце скилл попросит выполнить /impeccable init уже внутри Claude Code. Что даёт: общий язык дизайна из 24 команд (/impeccable audit, /impeccable polish, /impeccable critique), правку элементов прямо в браузере через /impeccable live и детектор, который ищет 61 типовую слабость интерфейса без всякого ИИ
Playwright CLI
Третья команда ставит сам инструмент и его набор правил. Проверить: playwright-cli --version, у меня 0.1.21. Нужен Node 20 или новее. Что даёт: агент открывает страницу в настоящем браузере, читает её структуру, ищет элементы и снимает кадры сам, без твоего участия
Awesome Design
Четвёртая команда кладёт в корень проекта файл DESIGN.md с дизайн-системой Notion: 821 строка, палитра, шрифты, отступы, кнопки, компоненты, поведение на телефоне. В коллекции 73 таких файла, любой другой берётся тем же curl, меняется только имя папки в адресе. Что даёт: агент собирает интерфейс не «как-нибудь красиво», а по конкретной системе с конкретными цветами
Image to Three.js
Пятая команда клонирует скилл img2threejs в папку проекта. Внутри Claude Code он вызывается фразой вида «Rebuild this object as a Three.js model» с приложенной картинкой, доустанавливать ничего не нужно, хватает Python 3.10. Что даёт: предмет с фотографии, пересобранный в код Three.js из примитивов, который можно читать и анимировать. В этом прогоне я его только установил и проверил, что агент его видит: сборка 3D-объекта это отдельная сцена и отдельный цикл проверок, кадра результата тут нет
Детектор Impeccable: было 8 замечаний, стало ноль
На глаз страница выглядит нормально. Правила про неё другого мнения, и проверяются они одной командой:
npx impeccable detect index.htmlНа моей странице детектор нашёл 8 замечаний и 4 совета. Часть из них глазами не поймать вообще: чужой шрифт и выцветший серый мозг достраивает сам
| Что написал детектор | Что это значит |
|---|---|
low-contrast 1.0:1 (need 4.5:1) | текст кнопки в шапке того же тона, что фон кнопки: надпись не читается вообще |
gray-on-color | серый текст на цветном фоне, выглядит выцветшим |
design-system-font: uses inter; not declared in DESIGN.md | шрифт взят не из дизайн-системы, которую сам же агент и получил |
overused-font: Primary font: inter | Inter стоит на половине сайтов мира, лицо интерфейса он не делает |
Дальше не чини руками. Скажи Claude Code: «запусти npx impeccable detect index.html, прочитай замечания и исправь их все, внешний вид и структуру страницы не меняй». Через четыре минуты повторный прогон детектора дал ноль замечаний
Playwright смотрит страницу вместо тебя
Агент, который собрал страницу, может её и открыть. Раздай папку по домашнему адресу и дай этот адрес ему:
python3 -m http.server 8765 --bind 127.0.0.1
playwright-cli open http://127.0.0.1:8765/
playwright-cli eval "document.title"
playwright-cli screenshot --filename=kadr.pngПервая строка обязательна: файл прямо с диска Playwright CLI открывать отказывается и пишет Access to "file:" protocol is blocked. Дальше он читает заголовок вкладки, ищет элементы по тексту и снимает кадры. Команда playwright-cli open --mobile открывает ту же страницу телефоном, и вот тут на моей странице вылезло то, чего на большом экране не было видно
Дефект я отдал обратно агенту одной фразой: «шапка не помещается в 360 px, почини». Связка ради этого и ставится: страницу он собрал сам, кадр снял сам, а что делать с дефектом решаешь ты
Что ломается и что делать
| Что видишь на экране | Почему | Что сделать |
|---|---|---|
Download failed: Could not verify skill bundle | движок Impeccable на 14 МБ не докачался | повтори ту же команду, у меня со второго раза прошло за 160 с |
Access to "file:" protocol is blocked | браузер агента не открывает файлы прямо с диска | выполни python3 -m http.server 8765 --bind 127.0.0.1 и дай ему адрес http://127.0.0.1:8765/ |
command not found: npx или command not found: python3 | на машине нет Node или Python | поставь недостающее с nodejs.org и python.org, потом проверь node -v и python3 -V |
command not found: git на пятой команде | не стоит git | на Mac выполни xcode-select --install, на Windows поставь его с git-scm.com |
Отказано в доступе на третьей команде (EACCES) | системная папка закрыта на запись | повтори её как sudo npm install -g @playwright/cli@latest и введи пароль от компьютера |
| Агент не видит наборы правил, хотя папки на месте | окно агента открыто до установки | закрой окно Claude Code и открой заново в той же папке |
| Страница собралась, но выглядит как раньше | в просьбе не названы ни скилл, ни DESIGN.md | назови оба прямо в тексте просьбы, как в блоке выше |
| Детектор молчит, а глазами видно криво | detect ловит правила, а не вкус | позови /impeccable critique внутри агента, это уже разбор с ИИ |
Что ещё почитать
Пришёл с карусели про дизайн без дизайнера: тот разбор здесь, как получить нормальный интерфейс без навыка. Там вход другой: там про подход, здесь про пять конкретных команд
Хочешь глубже про сами скиллы: три дизайн-скилла для Claude и разбор UI UX Pro Max. Не работал со скиллами вообще: начни с того, что такое скиллы Claude. Нужен не лендинг, а сайт целиком одной строкой: собрать сайт одной строкой
Источники
Страницы открыты 21 сентября 2026 года, поведение инструментов снято собственным прогоном на своей машине
- Leonxlnx/taste-skill - команда установки, состав скиллов, три параметра настройки, лицензия MIT
- pbakaus/impeccable - команды install и detect, 24 команды, Live Mode, лицензия Apache 2.0
- Документация Impeccable - порядок установки и
/impeccable init - Playwright: установка инструмента для агентов - глобальная установка,
install --skills, требование Node 20 - microsoft/playwright - исходники инструмента и лицензия Apache 2.0
- VoltAgent/awesome-design-md - 73 файла DESIGN.md, как их применять, лицензия MIT
- img2threejs/img2threejs - клонирование в папку скиллов, требование Python 3.10, лицензия Apache 2.0
- Собственный прогон 21 сентября 2026 года: установка пяти дополнений, сборка страницы, два прогона детектора и кадры из браузера
Памятка: пять команд и два правила
Всё, что понадобится в следующем проекте, когда эта статья уже закрыта
Сохрани себе
- перед установкой:
node -vиpython3 -Vотвечают версиями, у Node нужен 20 или выше - пять команд в корне проекта:
npx -y skills add …/taste-skill·npx -y impeccable install·npm install -g @playwright/cli@latest·curl -L -o DESIGN.md …·git clone …/img2threejs.git - четыре набора правил уходят в .claude/skills, DESIGN.md остаётся в корне
- Impeccable с первого раза может не докачаться: помогает повтор той же команды
- в просьбе к агенту называй набор правил и DESIGN.md словами, иначе он их не возьмёт
- гони детектор Impeccable после каждой сборки: 8 замечаний на первой же странице это норма
- файл прямо с диска браузер агента не открывает, сначала раздай папку одной командой
Про следующий шаг
Форму ты теперь закрываешь пятью командами. Остаётся вещь, которая приносит деньги
Дополнения дают дизайн, но не дают продукта: страница красивая, а задача твоя так и не решена. На Лагере мы берём твою задачу, режем её на шаги и за три дня доводим до работающего результата
Приходишь со своей задачей, уходишь с собранной вещью и понимаешь, как повторить это без меня
Заявка в закрытый канал, одобряю сразу. Бот напишет первым и отдаст три дня Лагеря. Бесплатно
Частые вопросы
Это правда бесплатно?
Да. TasteSkill и Awesome Design под лицензией MIT, Impeccable и Image to Three.js под Apache 2.0, Playwright ставится бесплатно. Платить нужно только за самого агента: свой тариф Claude Code ты оплачиваешь как обычно
Нужны все пять?
Нет. Минимум для приличной страницы это TasteSkill и DESIGN.md из Awesome Design. Impeccable добавляет проверку, Playwright даёт глаза, Image to Three.js нужен только под 3D
Наборы правил ставятся в проект или на всю машину?
В блоке выше все команды кладут файлы в текущий проект. У Playwright есть флаг -g, он положит свой набор в ~/.claude/skills и сделает его общим для всех проектов
Работает это в Cursor и Codex?
TasteSkill и Impeccable поддерживают Cursor и Codex, у Impeccable флаг --providers=claude,codex,cursor. Image to Three.js работает в Claude Code, Codex и OpenCode. Прогон в статье сделан только в Claude Code
Если дочитал до конца
Дальше я пишу в своём канале
Я работаю один, без команды и подрядчиков: всё собираю Claude, Claude Code и агентами. В канале показываю внутрянку: какие скиллы реально в работе, где агент собрал ерунду и что я дописал. Разборов там больше, чем доезжает до сайта
Это заявка на вход в мой закрытый канал, одобряю сразу. Бесплатно