Дизайн-система сайта по понравившемуся образцу

Текст

Промт: дизайн-система по референсу

Главный лайфхак урока. Без своей дизайн-системы Claude делает сайт «как у миллионов других» (пример 01). Дизайн-система — это правила вашего стиля: цвета, шрифты, отступы, кнопки, блоки страницы. Claude собирает её по понравившемуся чужому дизайну и дальше верстает по ней любые страницы.

Павел в уроке: Claude «берёт вот этот дизайн и декомпозирует его в шрифты, будет декомпозировать его в цвета, в то, какие здесь отступы, как выравнивание». Раньше такая работа стоила 100–300 тыс. ₽ и занимала у дизайнера минимум несколько недель. Теперь Claude превращает референс в шаблон, фирменный стиль — его можно отдать и дизайнеру как техническое задание.

Шаг 1. Найти референс

• Pinterest — в поиске наберите «веб-дизайн»: там огромное количество красивых примеров.
• Behance — раздел UI/UX: работы, которые дизайнеры выкладывают прямо сейчас и которые набирают просмотры.
• Из референса берём цвета, шрифты и композицию — как всё выстроено. Логотип, фото и тексты чужие, их не берём.
• Понравилось — скопируйте картинку (правой кнопкой → «Копировать картинку») или ссылку на работу.

Наши референсы:

• картинка с Pinterest для Volt — 02 Исходник/Референсы/02 Volt — FUTURE IS NOW/;
• кейс с Behance для Granit — 02 Исходник/Референсы/02 Granit — SENVA Real Estate/.

Ссылки на оригиналы — в Источник.md в каждой папке. Адреса Pinterest и Behance — в 01 Скиллы и MCP/08 Ссылки на сервисы.md.

Шаг 2. Первая система — по картинке (Volt)

Павел скопировал картинку, открыл новый чат, вставил её и продиктовал промт. Дословно:

[картинка-референс во вложении]
Сделай мне, пожалуйста, из этого дизайн-систему в формате «атомы, молекулы, организмы». Для того чтобы из этого я мог создавать свои сайты. И учти там все вопросы, связанные с веб-дизайном, которые нам нужны дальше.

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

«Все вопросы, связанные с веб-дизайном» Claude понял так и добавил в систему сам:

• адаптив под телефон и планшет;
• контраст текста — посчитан для каждой пары «текст — фон»;
• SEO-шапка страницы, скорость загрузки, доступность;
• формы с понятными ошибками и отправкой на свой адрес, без почтовых ссылок;
• 152-ФЗ: согласие на обработку данных у каждой формы и плашка cookie до запуска счётчиков;
• шрифты своими файлами, без загрузки с Google Fonts;
• правила для фото и готовый промт для их генерации.

Модель и режим. Opus (в кадре — Opus 5.5). Первую систему Павел запустил в режиме Medium и тут же сказал: «я бы, наверное, поставил Extra, чтобы он получше подумал над этими вещами». Промт второй системы он отправил уже в режиме Extra.

Шаг 3. Вторая система — параллельно, по ссылке (Granit)

Не дожидаясь первой системы, в том же чате Павел дал ссылку на второй референс. Дословно:

[ссылка на референс — у нас https://www.behance.net/gallery/255203847/SENVA-Real-Estate-Website-UIUX-Design-Branding]
Параллельно запусти следующий процесс. Возьми ещё вот этот вот пример стиля и сделай из него тоже вторую дизайн-систему, потому что мы протестируем обе. Ключевые вещи, которые важны для меня — это типографика. В том примере, который ты видишь, там не очень хорошо читается текст издалека, потому что там достаточно тонкий текст и слишком плотно буквы, плотно строчки. Нужно, чтобы читалось всё очень хорошо, потому что это всё-таки телесуфлёр, мы делаем сервис. Вот. Сделай, пожалуйста, для него.

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

Параллельно. По словам «параллельно запусти» Claude отдал вторую систему отдельному помощнику и продолжил первую. Павел: «если вы просите его быть в роли оркестранта или работать параллельно, максимально задействовать параллельных агентов, он это будет делать». Можно и просто открыть второй чат. Пока системы собирались, Павел занялся хостингом и доменом — примеры 05 и 06.

Как повторить у себя

Промт собран по уроку:

[картинка или ссылка на понравившийся дизайн]
Сделай из этого дизайн-систему в формате «атомы, молекулы, организмы», чтобы я мог по ней делать свои сайты. Учти все вопросы веб-дизайна, которые понадобятся дальше.
Сайт для [что за продукт и для кого]. Что мне важно: [например, текст читается издалека / один акцентный цвет].
Что в референсе не нравится: [например, тонкий бледный шрифт] — исправь.
Шрифты — только с кириллицей. Логотип, фото и название референса не бери.

Вторая система — в том же чате, не дожидаясь первой:

Параллельно запусти следующий процесс. Возьми ещё вот этот пример стиля [картинка или ссылка] и сделай из него вторую дизайн-систему, мы протестируем обе. Что важно для меня: [...].

Что получилось

• Granit — 04 Результат/02 Дизайн-система Granit.html
• Volt — 04 Результат/04 Дизайн-система Volt.html

Каждая система — одна страница-витрина: палитра, шрифты, кнопки, поля, карточки и экран суфлёра. Открывается двойным щелчком, шрифты встроены. Такую страницу можно приложить к сообщению и попросить Claude оформлять по ней сайты. Дальше по этим системам тот же сайт делается в новом стиле — пример 03.