5 плагинов дизайна для Claude Code: сайты и картинки красивее

Claude Code собирает сайт за вечер, это уже ни для кого не новость. Только сайт выходит какой-то узнаваемый: фиолетовый градиент, три карточки с иконками, шрифт по умолчанию. Глянешь и сразу понятно, кто делал. Это лечится плагинами. Ставишь один раз, и Claude начинает думать про шрифты, цвета и отступы, прежде чем писать код

Я сама программированию не училась, десять лет работала бухгалтером и экономистом. За июль и август собрала с Claude несколько сайтов с приёмом оплат и телеграм-ботов. Так что дальше всё описано для человека без технического образования

Что получишь

• лендинг или сайт, который не выглядит как шаблон нейросети
• плакаты и обложки в PNG и PDF прямо из Claude Code
• готовую цветовую тему, одну на сайт, презентацию и документы
• скриншоты своего сайта на экране телефона, без того чтобы открывать его руками

Что нужно до старта

Если Claude Code ещё не стоит на компьютере, вот установка по шагам

• Claude Code. Входит в платный Claude Pro: $20 в месяц или $17 в месяц при оплате за год (claude.com/pricing, проверено 03.10.2026). У меня Pro обходится примерно в 1 900-2 000 ₽ за аккаунт. Из России Claude официально не работает, нужен VPN
• Где запускать. Подойдёт приложение Claude для компьютера, вкладка Code. Или терминал. В облачной версии на claude.ai/code плагины из этого урока не ставятся, это прямо написано в документации
• Node.js для плагина 4. Бесплатно, ставится с nodejs.org как обычная программа
• Аккаунт Canva для плагина 5. Базовый бесплатный, часть функций Canva платная. Если Canva у тебя не открывается, нужен VPN

Если Claude Code ещё не стоит, в терминале это одна строчка. Для Mac и Linux:

curl -fsSL https://claude.ai/install.sh | bash

Для Windows в PowerShell:

irm https://claude.ai/install.ps1 | iex

Как вообще ставится плагин

Плагин это набор инструкций и инструментов, который Claude подгружает сам, когда задача подходит. Лежат плагины в «магазинах» (marketplace). Официальный магазин Anthropic называется claude-plugins-official, и Claude Code подключает его сам при первом запуске в терминале

В терминале. Пишешь в Claude Code команду установки, например:

/plugin install frontend-design@claude-plugins-official

Откроется окно плагина. Выбираешь, для чего ставить: - «Install for you» - для тебя во всех папках. Чаще всего нужно именно это - «for all collaborators on this repository» - для всех, кто работает в этом проекте - «in this repo only» - только для тебя и только в этой папке

После установки Claude Code сам перезагрузит плагины. Если попросит, напиши /reload-plugins

В приложении для компьютера. Рядом с полем ввода кнопка «+», дальше Plugins → Add plugin. Откроется список плагинов из официального магазина, ищешь по названию и ставишь

Проверить, что встало: /plugin, вкладка Installed

Шаги: 5 плагинов

1. frontend-design: сайт без нейросетевого лица

Плагин от самой Anthropic. Он учит Claude сначала выбрать внятное направление дизайна: шрифты, палитру, характер страницы. И только потом писать код. Как раз то, чего не хватает сайтам «по умолчанию»

/plugin install frontend-design@claude-plugins-official

Что написать дальше. Плагин включается сам, когда просишь сделать сайт или страницу. Работает лучше, когда ты рассказываешь, для кого страница и какое должно быть ощущение:

Сделай одностраничный сайт для мастерской керамики. Люди приходят из Instagram, им 30-50 лет, хотят записаться на мастер-класс. Ощущение: тёплое, ручное, немного деревенское. Без фиолетовых градиентов и без трёх одинаковых карточек с иконками. Сначала предложи 2 направления дизайна словами, я выберу, потом пиши код.

Последнее предложение экономит лимит. Не понравится направление, ты узнаешь это до того, как он напишет пятьсот строк

2. example-skills: плакаты и готовые темы

Это набор навыков из открытого репозитория Anthropic. Нам из него нужны два: - canvas-design делает плакаты, обложки и другие статичные картинки в PNG и PDF - theme-factory даёт 10 готовых тем (цвета плюс шрифты) и применяет их к слайдам, документам и страницам. Может придумать и новую тему под тебя

Этот набор лежит в отдельном магазине, его сначала нужно подключить:

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

Пример для плаката:

Сделай плакат A4 в PDF для мастер-класса по керамике 12 октября в 18:00. Главное на плакате: дата, время и «Запись по ссылке в профиле». Стиль спокойный, много воздуха, тёплые глиняные цвета.

Пример для темы:

Покажи готовые темы из theme-factory. Потом примени выбранную мной тему к файлу index.html, ничего кроме цветов и шрифтов не меняй.

В наборе есть ещё brand-guidelines, только он про фирменный стиль самой Anthropic. Для своего бренда он не подходит

3. playground: подбирать дизайн ползунками

Тоже плагин Anthropic. Делает маленькую страничку-пульт: слева ползунки и переключатели, справа живой предпросмотр, внизу готовый текст, который копируешь обратно в Claude. Для дизайна там есть отдельный шаблон

/plugin install playground@claude-plugins-official

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

Удобно, когда словами объяснить не выходит. Просьбу «чуть темнее, но не настолько» Claude понимает плохо. Ползунок двигаешь сама и сразу видишь

4. playwright: Claude сам смотрит на сайт

Этот плагин даёт Claude настоящий браузер. Он может открыть твою страницу, сделать скриншот, нажать кнопки, заполнить форму. Сделан на основе Playwright от Microsoft, нужен Node.js

/plugin install playwright@claude-plugins-official

Открой мою страницу [адрес или файл index.html] в браузере. Сделай скриншоты в ширине телефона 390 пикселей и компьютера 1440. Найди, где текст налезает, кнопки мелкие или что-то вылезает за край экрана. Исправь и сделай скриншоты ещё раз.

Большинство людей открывает сайт с телефона. А Claude без этого плагина свою же вёрстку на телефоне не видит

5. canva: правки в Canva словами

Официальный плагин Canva. Через него Claude работает с твоими дизайнами в Canva: правит текст и картинки, переделывает дизайн под разные форматы соцсетей, даёт разбор по читаемости и композиции, сверяет с фирменным стилем. Правки он показывает и применяет только после твоего согласия

/plugin install canva@claude-plugins-official

При первом запуске попросит войти в аккаунт Canva. Дальше:

Возьми мой дизайн [ссылка на дизайн в Canva] и сделай из него версии для поста и сторис Instagram. Пришли ссылки на редактирование каждой.

Посмотри дизайн [ссылка] и скажи, что мешает его читать: размер текста, контраст, порядок блоков. Ничего не меняй, только список правок.

Массовое создание дизайнов из таблицы в этом плагине требует Canva Enterprise, так написано в его описании. Остальное работает с обычным аккаунтом, но платные функции Canva остаются платными

Где обычно ломается

Плагин не находится. Проверь название магазина после «@». Для example-skills нужен свой магазин, сначала /plugin marketplace add anthropics/skills. Если официальный магазин пропал, верни его командой /plugin marketplace add anthropics/claude-plugins-official

Поставила, а ничего не изменилось. Плагины подгружаются после /reload-plugins или перезапуска. Бывает и так, что Claude не понял, что пора включать плагин. Назови его прямо: «используй frontend-design»

playwright не запускается. Почти всегда дело в Node.js: не установлен или установлен после того, как открыла Claude Code. Поставь Node.js, закрой и заново открой Claude Code

Лимит кончается за полчаса. Дизайн съедает много: картинки, скриншоты, переделки. Проси сначала описание словами, потом код. Каждый плагин ещё и добавляет немного текста к каждому сообщению, так что не держи включёнными все сразу. Лишние выключаются в /plugin, вкладка Installed

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

Что дальше

Пять плагинов закрывают внешний вид. Если хочется спокойно разобраться в самом Claude: как устроены чаты, проекты, навыки, плагины и лимиты, чтобы не тратить подписку впустую, загляни в «Claude с нуля, 7 уроков». Там по шагам, от первой регистрации до своего первого рабочего проекта

Источники

1. https://code.claude.com/docs/en/discover-plugins
2. https://github.com/anthropics/claude-plugins-official
3. https://github.com/anthropics/skills
4. https://github.com/canva-sdks/canva-skills
5. https://claude.com/pricing

Ещё уроки