Как заставить Claude делать красивые сайты: 3 навыка и 2 инструмента

Что понадобится

• Claude Code на компьютере и папка с вашим сайтом. Команды ниже запускаются в этой папке.
• Node.js: через него ставятся навыки командой npx. Для Taste Skill нужна версия 22 или новее и браузер Chrome, Edge или Chromium.
• Одна страница для начала. Пять инструментов на весь сайт сразу дают кашу.

Emil Design Engineering: анимация и детали

• Что даёт: правила Эмиля Ковальски, дизайн-инженера, работавшего в Vercel и Linear. Правильные кривые анимации, мягкие тени вместо жёстких рамок, поведение кнопок и окон.
• Полезное внутри: emil-design-eng (основной навык), review-animations (строгая проверка анимаций), break-ui (проверка страницы длинными именами и пустыми списками).
• Страница проекта: github.com/emilkowalski/skills

Команда установки:

Impeccable: композиция, шрифты, цвет

• Что даёт: 24 команды и 61 автоматическое правило, которые ловят признаки шаблонного дизайна: один шрифт Inter на всё, фиолетово-синие градиенты, карточки в карточках, серый текст на цветном фоне.
• Как включить: в папке сайта запустите команду ниже, затем в Claude Code наберите /impeccable init. Он задаст пару вопросов и запишет описание проекта в файл PRODUCT.md.
• Команды на каждый день: /impeccable critique - разбор страницы, /impeccable audit - техническая проверка, /impeccable polish - финальная доводка.
• Страница проекта: github.com/pbakaus/impeccable

Команда установки:

Taste Skill: направление и настоящие фото

• Что даёт: навык собран по разбору 247 отобранных сайтов. Выбирает визуальное направление, ищет настоящие фотографии в открытых архивах и сам проверяет страницу в браузере.
• Второй способ установки, прямо в Claude Code: /plugin marketplace add Leonxlnx/taste-skill, затем /plugin install taste-skill@taste-skill.
• Страница проекта: github.com/Leonxlnx/taste-skill

Команда установки:

Figma MCP: Claude читает макет

• Что даёт: Claude открывает ваш макет в Figma и берёт из него структуру для кода: блоки, отступы, цвета.
• После команды: откройте новый сеанс Claude Code, наберите /mcp, выберите figma, затем Authenticate и разрешите доступ в браузере.
• Нужен аккаунт Figma. Число запросов зависит от тарифа Figma, условия смотрите у них. Макета нет - пропустите этот шаг.
• Инструкция: developers.figma.com

Команда установки:

Playwright MCP: проверка в браузере

• Что даёт: Claude открывает страницу в настоящем браузере, нажимает кнопки и делает снимки экрана. Он видит результат, а не только код.
• Страница проекта: github.com/microsoft/playwright-mcp

Команда установки:

Одна страница от задачи до правок

• 1. Задача. Одним абзацем: для кого страница и что человек должен на ней сделать.
• 2. Описание проекта. /impeccable init один раз на сайт.
• 3. Направление. Taste предлагает два варианта, вы выбираете один. Есть макет - подключите Figma.
• 4. Страница. Claude собирает её по выбранному направлению.
• 5. Проверка. Playwright открывает страницу на ширине телефона и компьютера, /impeccable critique и review-animations дают список правок.
• 6. Правки. Исправить и проверить ещё раз.

Собрать страницу

Вставьте в Claude Code, подставьте своё.

Проверить в браузере

Когда страница собрана.

Границы

• "До и после" в ролике - одна учебная страница. Насколько изменится ваш сайт, зависит от задачи и текста на нём.
• Красивая страница не спасает непонятное предложение. Сначала текст, потом дизайн.
• Состав навыков и команды обновляются. Если команда не сработала, откройте страницу проекта по ссылке выше.