Пять дополнений, после которых интерфейсы в Клод Коде перестают выглядеть самодельными

Сначала главное: почему интерфейс выходит самодельным

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

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

1. Навык вкуса

Официальный навык frontend-design из репозитория навыков Anthropic. Его описание дословно говорит о выборе, который не читается как шаблон по умолчанию: палитра, типографика и композиция подбираются под конкретную задачу. Средних значений он не берёт.

Ставится один раз как плагин Клод Кода. Обе команды набираются прямо в диалоге с Клодом.

После установки навык вызывается упоминанием. Например так:

2. Навык гайдлайнов

В ролике речь про свод правил веб-интерфейсов от Vercel. Это открытый документ, по которому можно проверять свою вёрстку: состояния кнопок, фокус, доступность, поведение форм, анимация.

Отдельного готового навыка с таким именем у Anthropic нет, поэтому правило подключается вручную, одной строкой в файл проекта. Работает это ровно так же: Клод читает правила перед вёрсткой.

Строку кладут в CLAUDE.md проекта, тогда она действует в каждом разговоре.

3. Дизайн-система целиком

Навык theme-factory из того же репозитория. Внутри десять готовых тем, каждая с подобранной парой шрифтов и палитрой. Тема применяется к готовому артефакту: странице, презентации, отчёту.

Отдельной установки не требует, он приходит тем же плагином example-skills. Вызов такой:

Если ни одна тема не подошла, навык умеет собрать новую под задачу.

4. Картинка в код

Самый быстрый способ получить чужой уровень вёрстки: дать модели образец глазами. Словами такое описывать долго и неточно.

Работает без всяких установок. Перетащи скриншот прямо в окно Клод Кода и дай задание с точной рамкой.

5. Браузерный агент

Chrome DevTools для агентов. Клод сам открывает браузер, делает скриншот собранного, читает ошибки консоли и меряет скорость. Кривой результат ловится до того, как его увидишь ты.

Ставится одной командой в терминале.

Дальше проверка заказывается словами:

Порядок, в котором это даёт результат

Ставить всё разом смысла мало, эффект собирается по шагам.

• Поставь плагин с навыками, это одна минута и закрывает пункты 1 и 3.
• Пропиши правило Vercel в CLAUDE.md проекта, это пункт 2.
• Собери первый экран через навык вкуса, приложив скриншот образца.
• Подключи браузерный агент и попроси проверить собранное.
• Исправь то, что он нашёл, и только потом показывай людям.

Чего эти дополнения не делают

Граница честная, чтобы ты не ждал лишнего.

• Они не придумают за тебя продукт. Задачу страницы и аудиторию задаёшь ты.
• Они не заменят проверку глазами. Браузерный агент видит ошибки, вкус оценивает человек.
• Навыки Anthropic выложены как примеры, поведение может отличаться от версии к версии. Проверяй на своём проекте.
• Правила Vercel это чужой свод. Он хорош как планка, но твой бренд может требовать другого.

Читать дальше в блоге

Эту тему я разбираю подробно в статье рабочий список нейросетей для контента. Там же лежат остальные разборы про нейросети.