5 бесплатных инструментов, которые превращают Claude в веб-студию

Ты просишь Claude собрать сайт, и он выдаёт ровно то, по чему все уже узнают нейросеть: тот самый фиолетовый градиент, шрифт Inter, карточки с лёгкой тенью и кнопка «Get started» по центру. Технически рабочий сайт. Но выглядит он как ещё одна страница, собранная на коленке, и клиент это считывает за секунду.

Разница между «очередной AI-сайт» и страницей, за которую студии берут десятки тысяч, почти никогда не в коде. Она в упаковке: вкус в дизайне, живое движение, честный редизайн по месту, нормальные макеты и проверка перед сдачей. Хорошая новость: всё это уже существует в виде бесплатных навыков и коннекторов для Claude. Ниже пять штук, которые я собрал в один набор.

Когда сайт выглядит шаблонно

• Claude выдаёт тебе один и тот же «нейросетевой» вид, а ты не понимаешь, как это убрать.
• Сайт вроде работает, но рядом с сайтом настоящей студии выглядит дёшево.
• Правки занимают вечность: проще переписать абзац руками, чем объяснить, что именно не так.
• Анимации либо дёрганые, либо их нет, и всё ощущается статичным.
• Показываешь клиенту скриншоты, а не живой макет, и согласование тянется кругами.
• Перед сдачей нет уверенности, что нигде ничего не отвалилось.

Совпал хотя бы один пункт: иди по набору по порядку.

1. Дизайнер за $5 000: вкус вместо шаблона

Это навык, который даёт Claude насмотренность. Без него он лепит дефолтный вид, с ним собирает страницы с характером: типографика, сетка, цвет и отступы по конкретным правилам, без подгонки «на глаз».

Зачем тебе: один раз подключаешь навык, и каждый следующий сайт перестаёт выглядеть как сгенерированный. Это самое дешёвое улучшение качества из возможных.

Варианта два, оба бесплатные. Навык taste-skill (реверс-инжиниринг вкуса с любого сайта): найди на GitHub по запросу «taste-skill». И официальный навык от Anthropic frontend-design, который прямо запрещает дефолтные шрифты и заставляет выбрать осознанное направление, он уже встроен в Claude: anthropic.com.

2. Редизайн в один клик: правки по месту

Ты тычешь в любой кусок живого сайта, говоришь словами, что не так, и он переписывает именно этот кусок прямо на странице. Аудит, вёрстка, шрифты и финальная полировка, всё из одной установки.

Зачем тебе: правки перестают быть пыткой. Не нужно объяснять «подвинь вот это и поменяй отступ там», ты просто показываешь и говоришь, что поменять.

Инструмент называется Impeccable (23 команды, галереи «до/после», Chrome-расширение и CLI): impeccable.style.

3. Аниматор дорогих сайтов: мягкое движение

Тосты, выезжающие панели и меню начинают двигаться плавно и пружинисто, как на премиум-продуктах. Каждая анимация выглядит продуманной.

Зачем тебе: именно движение отличает «дорого» от «сделано на коленке». Один и тот же сайт с грамотной анимацией воспринимается в разы качественнее.

Бери официальный Motion (навык и MCP для Claude Code, Cursor и Codex): motion.dev/docs/ai-kit. Как отдельный навык под Claude есть animate-skill по курсу Эмиля Ковальски: github.com/delphi-ai/animate-skill.

4. Макеты сразу в Figma: клиент правит живой дизайн

Официальный коннектор связывает Claude и Figma. Claude пушит каждый экран, который собрал, прямо в Figma как редактируемые фреймы, и клиент комментирует настоящий дизайн, а не скриншот.

Зачем тебе: согласование ускоряется в разы. Вместо переписки «а можно вот тут иначе» клиент тыкает прямо в макет, а ты видишь все правки в одном месте.

Это официальный коннектор Figma для Claude Code (Dev Mode MCP), настройка по инструкции самой Figma: help.figma.com.

5. Тестировщик, который ловит баги: проверка перед сдачей

Claude открывает твой сайт в настоящем браузере, логинится, кликает по всем страницам и чинит то, что сломалось, раньше, чем ты это увидишь. Фактически бесплатный QA-прогон перед сдачей.

Зачем тебе: ты сдаёшь проверенную работу и не гадаешь, всё ли работает. Самое неприятное, когда баг находит клиент. Тут такого не будет: проверка идёт заранее.

Это Playwright MCP от Microsoft (около 38 тысяч звёзд на GitHub). Установка в Claude Code одной командой claude mcp add playwright npx @playwright/mcp@latest: github.com/microsoft/playwright-mcp.

Практический бонус: в каком порядке подключать

Не ставь всё сразу. Логика простая: сначала вкус (1), чтобы сайт в принципе выглядел хорошо. Потом движение (3), чтобы он ожил. Редизайн (2) подключаешь, когда нужно быстро править. Figma (4) и тестировщик (5) добавляешь, когда появляется клиент и сдача. Для первого своего сайта хватит только первого инструмента.

Задание на сегодня

За 10 минут сделай «до и после» на своём примере:

1. Открой claude.ai и попроси собрать одну простую страницу, например лендинг для твоего продукта или услуги. Сохрани результат, это твоё «до».
2. В том же чате напиши: «перебери дизайн этой страницы с настоящим вкусом: убери дефолтные шрифты и фиолетовый градиент, выбери одно осознанное направление, задай нормальную типографику, сетку и отступы». Это твоё «после».
3. Поставь две версии рядом и посмотри на разницу. Вот это и есть вклад всего одного инструмента из пяти.

Готово: у тебя есть собственный результат и наглядное сравнение.

Отправить статью в Telegram