Сайты из Claude Design, которые не выглядят навайбкоженными. 25 приёмов с проверенными ссылками

01В чём фокус

Claude Design открыт с апреля 2026 года, и за пару месяцев по интернету разошлось одно и то же лицо. Кремовый фон, скруглённые карточки, шрифт по умолчанию, градиент в углу. Глаз считывает такой сайт как «сделано нейросетью» раньше, чем читает заголовок.

Модель тут почти ни при чём. Она рисует то, что описано в запросе. Если в запросе «сделай красивый лендинг», получается среднее по всем лендингам. Если в запросе система, шрифты, иконки одного стиля и готовые компоненты, страница выходит конкретной.

Этот гайд собирает двадцать пять приёмов, из которых складывается такой запрос. Список взят из ролика Jay E (RoboNuggets) «25 Tricks to Level Up Claude Design», вышедшего 27 сентября 2026 года. Но это не пересказ. Каждый приём я сверил с официальным сайтом, документацией или репозиторием, и в тексте отмечено, где видео расходится с реальностью: где есть лимит, о котором автор молчит, где лицензия строже, чем «бесплатно», а где приём просто авторская практика без первоисточника.

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

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

Подписка Claude Design доступен на тарифах Pro, Max, Team и Enterprise, на Enterprise его включает администратор. Это бета. Отдельной квоты у него нет: он тратит общий лимит подписки, и при выработке лимита возможна платная доплата. Проверять расход стоит с первого дня, потому что генерация дизайна с картинками съедает лимит заметно быстрее обычного чата.

Claude Code для приёмов про терминал Команда /design требует версию 2.1.265 или новее (так написано на странице про артефакты в документации). В недельном дайджесте называлась 2.1.234, ориентируйся на большую цифру. Нужен вход через /login с провайдером Anthropic API. Если ты сидишь через Bedrock, Vertex или Foundry, команды /design у тебя не будет. Ещё она недоступна в режимах с нулевым хранением данных, HIPAA и CMEK.

Node.js 22 и FFmpeg нужны только для приёма 24 (моушн-графика из транскрипта).

Деньги Основа гайда бесплатна: галереи систем, шрифты, иконки, GSAP. Платными бывают отдельные вещи, и в тексте они помечены: подписка на Claude, безлимит копирований в 21st.dev, платные иконки Flaticon, генерация картинок и видео через Kie.ai.

Оговорка про источники Проверка шла 29 сентября 2026 года. Инструменты меняются быстро: число компонентов, лимиты и условия лицензий к моменту, когда ты это читаешь, могут сдвинуться. Там, где в тексте написано «не подтверждено», это значит, что официальной страницы, которая бы это описывала, найти не удалось.

03Ядро

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

1. Система       цвета, шрифты, компоненты, из которых Claude строит всё остальное
2. Материалы     иконки, картинки, SVG, готовые блоки одного стиля
3. Правила       вкус, тон, стандарты: чего Claude не делает никогда
4. Движение      анимации, скролл, моушн
5. Claude Code   перенос в реальный проект и автоматизация повторяемого

Звено 1, система: Когда Claude знает палитру, шрифты и набор компонентов заранее, он перестаёт придумывать их заново на каждый экран. Приёмы 1, 2, 3, 5, 7, 9.

Звено 2, материалы: Claude плохо рисует иконки и совсем не делает картинки и видео. Значит, их нужно приносить готовыми и одного стиля. Приёмы 8, 13, 14, 15, 16, 17, 18, 19.

Звено 3, правила: Вкус нельзя описать одной фразой, но его можно собрать из референсов и закрепить в скилле. Приёмы 6, 10, 11, 12, 20.

Звено 4, движение: Сайт без движения читается как макет. Приёмы 21 и частично 18 и 24.

Звено 5, Claude Code: Здесь дизайн превращается в код, а всё, что ты делаешь второй раз, превращается в скилл. Приёмы 4, 22, 23, 24, 25.

Ниже приёмы идут в порядке звеньев, но нумерация сохранена по ролику: если захочешь свериться с оригиналом, номера совпадут.

04Блок практики: система и вкус

Здесь семь приёмов про то, чем кормить Claude до того, как он начнёт рисовать.

Приём 1. Собери дизайн-систему в claude.ai/design

Открой claude.ai/design, зайди в раздел Design systems и нажми Create. Для сборки нужен хотя бы один источник: код, скриншоты, презентации и документы, отдельные ассеты вроде логотипов, палитр и типографики. Из них Claude вытаскивает палитру, шрифты, компоненты и паттерны раскладки.

Что важно знать. В справке Anthropic среди источников прямо названы код, файлы, макеты из Figma, презентации и скриншоты. Просто ссылка на сайт там не упомянута, поэтому надёжнее загрузить скриншоты страниц, чем рассчитывать, что Claude сам сходит по адресу. И есть возможность, о которой в видео нет ни слова: для систем из React-компонентов в Claude Code есть команда /design-sync.

Ссылки: claude.ai/design и справка по настройке системы.

Приём 2. Возьми готовую систему из Refero

Сайт styles.refero.design собирает больше двух тысяч систем с известных сайтов, и новые добавляются каждую неделю. Для каждой есть цвета, типографика, отступы, компоненты и файл DESIGN.md, который можно отдать Cursor, Claude Code, Codex, v0 или Lovable. Есть кнопка Connect to your AI для Claude, ChatGPT, Cursor и Codex.

Не подтверждено: цена и бесплатный лимит на странице не указаны. Проверь сам, прежде чем строить на этом рабочий процесс. В расшифровке ролика домен записан как «referral.design», это ошибка распознавания.

Приём 3. Пусть Claude сам выберет три системы

Даёшь Claude адрес галереи и описание своего бизнеса и просишь найти три ближайшие системы со ссылками. Технически это возможно, галерея открыта.

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

Приём 5. Шрифт первым выдаёт вайбкод

Шрифт по умолчанию узнаётся мгновенно. Замена шрифта дёшево меняет впечатление от всего сайта. Три источника:

• Fontshare бесплатен по лицензии ITF Free Font License: коммерческое использование разрешено, перепродажа и переделка запрещены.
• Fontesk в видео назван бесплатным, но это верно наполовину. Лицензии у шрифтов разные, часть только для личного использования. Проверяй лицензию каждого шрифта отдельно.
• Fontjoy подбирает пары «заголовок и текст» нейросетью: кнопки Generate, Lock и Edit.

Шрифт называешь в запросе или загружаешь файл в дизайн-систему.

Приём 6. Копирайт по пятёрке лидеров ниши

Просишь Claude изучить пять сильнейших игроков твоей ниши, выписать паттерны текстов (как устроен заголовок, где стоит призыв, какой длины абзац) и записать их в дизайн-систему. Это промпт-приём, а не функция продукта. Как именно Claude Design получает доступ к сайтам конкурентов, в документации не описано.

И одно правило от нас: копируй паттерны, а не тексты. Готовый чужой абзац на твоём сайте это проблема, а не приём.

Приём 7. Смешай две системы

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

Приём 9. Дай ссылку на прошлый проект

Начинаешь новый проект и вставляешь адрес законченного, чтобы Claude взял оттуда систему и ассеты. Проекты Claude Design хранятся как папки и открываются по внутренним ссылкам, а система может использоваться в новых проектах. Что именно вставка адреса подтягивает, справка не описывает. В Claude Code похожую задачу решает возврат к сессии через /resume, но формулировка «назови имя сессии» как официальный приём не подтверждена.

05Блок практики: материалы

Восемь приёмов про то, что Claude сам делает плохо или не делает вовсе.

Приём 8. Картинки и видео через генератор

Claude Design картинки и видео не генерирует, это подтверждается справкой Anthropic. Нужен внешний сервис. В видео это Kie.ai: более двухсот моделей (Veo, Kling, Seedance, GPT Image, Nano Banana, Suno), оплата кредитами, за неудавшиеся задачи не списывают, заявляется экономия до 88% относительно официальных цен. Подключается через промпт в Claude Code. В расшифровке ролика название записано как «Key AI», это ошибка распознавания.

Фразу «один из самых дешёвых» считай маркетингом: точные тарифы я не сверял.

Приём 13. 21st.dev: компоненты, заточенные под агента

21st.dev заявляет больше двенадцати тысяч компонентов, шаблонов и тем shadcn на React и Tailwind. У каждого есть кнопка Copy prompt для Cursor, Claude Code, v0 и Lovable, есть установка через реестр shadcn и MCP-сервер.

Чего нет в видео: бесплатных копирований на сайте два в день, дальше подписка (цену не проверял). Лицензия компонентов на странице не указана. Если берёшь компонент в коммерческий проект, проверь её у конкретного автора.

Приём 14. React Bits: анимированные компоненты

React Bits собирает больше двухсот компонентов: анимированные тексты, фоны, эффекты. Четыре варианта кода (JS или TS, CSS или Tailwind), есть порты на Vue и Svelte. Лицензия MIT с Commons Clause: в своих сайтах использовать можно, перепродавать сами компоненты нельзя. Исходники лежат в репозитории DavidHDev/react-bits.

Приём 15. Canvas UI: эффекты на холсте

Canvas UI: около тридцати пяти эффектов, число растёт. Liquid, Glass, Shatter, Particle Reveal, VHS. Рендер идёт через canvas, есть версии для React, Vue, Svelte и чистого TypeScript, уважается настройка reduced-motion. Лицензия та же, MIT с Commons Clause. Совместимость нового подхода html-in-canvas с разными браузерами не проверена, посмотри результат в Safari и Firefox до того, как выкладывать.

Приём 16. Иконки одним паком

Claude плохо рисует иконки: они получаются разной толщины и с разными углами. Решение: скачать набор одного стиля и отдать папку.

• Iconify: больше трёхсот тысяч открытых иконок, каталог на icon-sets.iconify.design. Код в основном под MIT, а вот лицензия у каждого набора своя, проверяй её.
• Flaticon (одним словом, не «Flat Icon»): по данным поиска, бесплатный тариф даёт около десяти скачиваний в день и требует указывать авторство. Страницу условий проверить не удалось (ответ 403), так что сверь на flaticon.com/pricing сам. Скачать «целый пак» бесплатно упирается именно в этот лимит.

Кнопку «весь набор целиком» в Iconify я не проверял, чаще берут отдельные иконки или набор с GitHub.

Приём 17. Проси SVG

Когда нужны иконки, иллюстрации или схемы, проси SVG. Это открытый векторный формат W3C: масштабируется без размытия, цвет правится в коде, анимируется через CSS и JavaScript. Это общее свойство формата, а не особенность Claude. Что Claude сможет анимировать результат, на практике так, но качество зависит от сложности рисунка, гарантий нет.

Приём 18. Анимированные иконки Lordicon

Lordicon: свыше девяти тысяч семисот бесплатных иконок (всего больше сорока семи тысяч), экспорт в Lottie, GIF, MP4, SVG и другие форматы. Скачанный Lottie отдаёшь Claude.

Условия бесплатной лицензии, о которых Jay не говорит: обязательно указать Lordicon, иконки нельзя изменять (основа CC BY-ND 4.0), для встроенных иконок действует лимит в миллион запросов к CDN в месяц. Итог: бесплатно, но с указанием источника и без правки самих иконок. Условия: lordicon.com/licenses.

Приём 19. Одна закладка со всем сразу

creatorstoolbox.com: бесплатный каталог без аккаунта, в разделе resources есть ресурсы на Three.js и Refero Styles. Цифра «150+», которую называет Jay, не подтвердилась: на главной значится «800+ инструментов, игр и ресурсов», а в разделе resources выведено тридцать популярных. Мокапы и галереи логотипов отдельными категориями на проверенных страницах не нашлись.

06Блок практики: правила и полировка

Пять приёмов про то, как закрепить вкус, чтобы он не менялся от запроса к запросу.

Приём 10. Собери собственную библиотеку референсов

Вкус растёт от количества увиденного. Собирай примеры, которые нравятся, и храни их так, чтобы Claude мог на них сослаться. Jay сделал для этого своё Chrome-расширение Rubric References: один клик сохраняет страницу со скриншотом и заметкой. Публичной ссылки в ролике нет, поэтому считай это идеей, а не инструментом для установки. Того же можно добиться папкой со скриншотами и одной строкой описания к каждому.

Приём 11. Скилл Impeccable для полировки

Impeccable написал Пол Бакаус: один скилл /impeccable с двадцатью четырьмя командами (audit, polish, critique, typeset, layout, colorize, animate и другие). Внутри правила, которые ловят типичные признаки «сделано нейросетью», и критика от модели. Лицензия Apache 2.0, бесплатно, работает в Claude Code, Cursor, Codex и других инструментах. Репозиторий: pbakaus/impeccable.

Установка:

npx impeccable install

В Claude Code можно через плагины: /plugin marketplace add pbakaus/impeccable, затем /impeccable init. Число звёзд у репозитория на сайте и на GitHub разное, поэтому его здесь нет.

Приём 12. Скилл тона голоса

Собираешь скилл с бан-листом слов, манерой речи и своими фразами и добавляешь готовые стандарты: ASD-STE100 (упрощённый технический английский), руководство Google по стилю документации для разработчиков (developers.google.com/style), правила письма Apple. Существование первых двух подтверждено. Точный адрес и условия использования для стиля Apple и лицензию на ASD-STE100 как основу для скилла я не проверял. Для русского текста это работает как принцип (короткие фразы, один смысл на предложение), а не как готовый список правил.

Приём 20. Apple HIG как скилл

Руководство по человеческому интерфейсу Apple открыто на developer.apple.com: размеры шрифтов, минимальная область нажатия, цвет. Идея: превратить его в скилл, чтобы Claude следовал правилам, а не угадывал.

Условия повторного использования текста HIG мне подтвердить не удалось, а Apple Design Resources (шаблоны и иконки) идут по отдельной ограниченной лицензии. Поэтому делай скилл как краткую выжимку правил со ссылкой на источник, а не как копию страниц.

Приём 21. GSAP для анимации и скролла

GSAP это библиотека анимации, которой пользуются крупные студии. Она даёт скролл-секции и появление текста по буквам. Новость, которой в видео нет: теперь GSAP полностью бесплатен вместе со всеми плагинами (ScrollTrigger, SplitText, DrawSVG, MorphSVG, Draggable), после того как проект купил Webflow. Старое «часть плагинов платная» устарело. Юридический текст лицензии я не читал, на странице цен ограничений на коммерческое использование нет.

07Блок практики: Claude Code и автоматизация

Пять приёмов про перенос дизайна в проект и про то, что стоит превратить в скилл.

Приём 4. Дизайн-система как скилл

Скилл в Claude Code это папка с файлом SKILL.md, вызывается командой /имя-скилла или подхватывается автоматически (документация: code.claude.com/docs/en/skills). Jay показывает скилл для стиля Duolingo, но готовым официальным скиллом это не является: это его промпт. Систему из claude.ai/design можно перенести и использовать в любом чате, включая Claude Code. Тезис из видео «веб-версия не видит файлы на компьютере» отчасти устарел: есть привязка репозитория и /design-sync.

Приём 22. Команда /design в Claude Code

Официальная команда, режим research preview. Она приносит воркфлоу артбордов Claude Design в терминал и в Claude Code Desktop, построена на артефактах. Claude публикует холст с редактируемыми артбордами, ты выбираешь один, правишь и просишь реализовать. Пример из документации:

/design redesign the composer based on what people actually use it for

Что нужно помнить: версия 2.1.265 или новее, включённый шаблон Design, провайдер только Anthropic API. Правки на артборде сохраняются автоматически, экспорт в PNG или PDF, открывать лучше в браузере на компьютере. Что Claude «знает весь воркспейс и память» в документации напрямую не подтверждено: подтверждено лишь, что дизайн-скилл ищет систему проекта (файл CLAUDE.md, файл темы). Ввод скриншотом в документации не упомянут. Источники: what's new, неделя 34 и страница про артефакты.

Приём 23. Свой скилл с ползунками

Идея: панель слайдеров для любой HTML-страницы (шрифты, отступы, цвета), значения потом фиксируются в дизайне. Такой паттерн документация поддерживает: у артефактов есть раздел «Tune with interactive controls» со слайдерами и переключателями. Готового скилла /tweak в документации нет, его нужно написать самому. Название панели Tweaks в интерфейсе Claude Design по справке не сверено.

Приём 24. Из транскрипта в моушн-графику

Транскрипт с пословными таймкодами превращается в анимацию по твоей дизайн-системе. Инструмент в видео: HyperFrames от HeyGen, открытый фреймворк «пишешь HTML, получаешь видео». Лицензия Apache 2.0, рендер без платы, нужны Node.js 22 и FFmpeg.

npx hyperframes init my-video

Для агентов: claude plugin install hyperframes@hyperframes. Команда hyperframes transcribe даёт пословные тайминги локально через whisper.cpp или из импортированного JSON. «Бесплатно» верно для локального режима, для качества документация советует платный API (OpenAI или Groq). Есть одноимённые форки, ставь только из heygen-com. Документация: hyperframes.heygen.com.

Приём 25. Собственная дизайн-ОС

Микроприложение, в котором лежат все готовые дизайны и собственная библиотека элементов: 3D-ассеты, моушн, фирменные иконки, всё проиндексировано. Это авторская практика Jay, внешнего первоисточника нет, и всё про его конкретное приложение не подтверждено. Полезное из этого: артефакт в Claude Code по документации одностраничный и без бэкенда, так что для индекса и хранилища понадобится свой хостинг. Начинать можно с папки: assets, icons, references, systems, и одного файла-оглавления, который Claude читает первым.

08Свой результат за вечер

Четыре шага, чтобы пройти цепочку целиком на одном проекте. Возьми лендинг своего продукта.

Шаг 1. Система. Зайди на styles.refero.design, выбери три системы, ближайшие к твоему продукту. Скачай их DESIGN.md. В claude.ai/design создай систему из скриншотов твоих страниц или выбранной галереи и добавь два-три референса. Смотри, что Claude вытащил: палитра и шрифты должны совпасть с тем, что ты видишь на скриншотах.

Шаг 2. Материалы. Выбери шрифтовую пару на Fontshare, проверь лицензию. Скачай один набор иконок на Iconify и положи папку в проект. Если нужны картинки, сгенерируй их отдельно и приложи файлы.

Шаг 3. Правила. Установи Impeccable (npx impeccable install), затем /impeccable init. Напиши в скилл тона три правила: слова, которых не должно быть, длина предложения, обращение к читателю.

Шаг 4. Реализация. В Claude Code запусти /design, опиши экран. Выбери один артборд, поправь, попроси реализовать. Прогони /impeccable audit и исправь то, что он найдёт. Если нужна анимация, добавь GSAP: он бесплатный.

09Что ты увидишь

Сравнивать «до» и «после» на глаз ненадёжно: после сотого правленого экрана кажется, что стало лучше, даже когда не стало. Поэтому проверяй результат по конкретным признакам. Открой страницу и ответь на пять вопросов:

• Шрифт заголовка не совпадает с тем, что Claude ставит по умолчанию. Проверь в инструментах разработчика браузера: вкладка Computed, свойство font-family.
• Иконки одной толщины линии и одного стиля углов. Достаточно приблизить экран и сравнить три-четыре иконки.
• Цвета страницы берутся из выбранной системы: не больше пяти-шести оттенков, и каждый есть в палитре системы.
• Тексты не содержат слов из твоего бан-листа и не длиннее правил тона.
• /impeccable audit не находит ничего критичного или каждое найденное замечание ты закрыл.

Если хотя бы по трём пунктам ответ «да», цепочка сработала. Если нет, ищи слабое звено с конца: чаще всего ломается система (шаг 1), потому что она задаёт всё остальное.

Полностью «человеческим» дизайн от этого не станет. Он станет узнаваемо твоим, а этого достаточно.

10Чтобы не споткнуться

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

Вторая ошибка: путать «бесплатно» и «без условий». Fontesk, Lordicon, Flaticon, React Bits, Canvas UI: у каждого свои условия. Где-то нужна ссылка на автора, где-то запрет перепродажи, где-то дневной лимит. Прочитай лицензию до того, как вставишь работу в клиентский проект.

Третья ошибка: верить, что Claude «знает» твой воркспейс. В документации подтверждён лишь поиск дизайн-системы проекта. Если правило важно, впиши его в CLAUDE.md или в скилл явно.

11А если…

…у меня нет подписки Claude? Половина приёмов работает без неё: Refero, шрифты, иконки, GSAP, компоненты. Не будут работать Claude Design и /design.

…Claude Design упёрся в лимит? Отдельной квоты у него нет, он тратит общий лимит подписки. Дели работу: систему и правки делай в Claude Design, реализацию в Claude Code.

…мне нужен русский шрифт? Проверь набор символов в описании шрифта на Fontshare или Fontesk: кириллица есть не у всех.

…хочу проверять свой сайт на «нейросетевость»? Как раз для этого Impeccable: правила ловят типовые признаки, а критика от модели показывает слабые места.

…что из этого обязательно? Ничего. Но если брать только три приёма, то брать систему (1 или 2), шрифт (5) и иконки одним набором (16). Они дают больше всего при меньших усилиях.

12Зачем на самом деле

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

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

13А дальше

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

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

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

Один Клод не справляется. Собери рой про субагентов, когда проект перерос одну переписку.

Если хочешь собирать такие вещи вместе с людьми, которые делают то же самое на n8n, Make и в Claude Code, заходи в клуб NeyroMakers: neyrohub.ru/neyromakers.

14Источники

• Claude Design: анонс Anthropic Labs: запуск, тарифы, что умеет.
• Справка: начало работы с Claude Design
• Справка: дизайн-система в Claude Design: из чего собирается система.
• Claude Code: артефакты и /design: требования, версии, слайдеры.
• Claude Code: what's new, неделя 34: выход /design.
• Claude Code: скиллы
• Impeccable и репозиторий: установка и команды.
• HyperFrames: установка, транскрибация.
• Ролик-источник: Jay E (RoboNuggets), «25 Tricks to Level Up Claude Design in 13 Mins», 27.09.2026, youtube.com/watch?v=_SVU3oC4JX8.