Визуальный словарь для работы с нейросетями

Увидеть стиль.
Найти слова.

Выберите интерфейс, который вам близок. Узнайте, из чего он состоит, и заберите рецепт для своего проекта.

Один сюжет. Разные визуальные языки. В каждом примере — вымышленный сервис путешествий TERRA. Сравнивайте оформление при одинаковых заголовках и маршрутах.

О методе

Коллекция [22]

22 из 22
＋ добавить к сравнению · ♡ сохранить в этом браузере · нажмите на пример, чтобы открыть рецепт
От понравившейся картинки — к своему интерфейсу

Как получить похожий результат

01 / ВЫБЕРИТЕ ВИЗУАЛЬНЫЙ ЯЗЫК

Смотрите на признаки

Сравните два примера. Ищите конкретные отличия: контуры, плотность, шрифт, форму изображений. Название стиля — удобная метка, а не полный рецепт.

02 / ПЕРЕДАЙТЕ РЕФЕРЕНС И РЕЦЕПТ

Картинка + точные параметры

Скачайте PNG-референс из карточки и прикрепите к запросу. Скопируйте промпт из карточки. Замените продукт и тексты; сохраните палитру, композицию и размеры.

03 / МЕНЯЙТЕ ПО ОДНОМУ

Уточняйте наблюдаемую разницу

«Уменьши радиус с 24 до 8px» полезнее, чем «сделай стильнее». Зафиксируйте удачную версию и проверяйте каждую правку на телефоне и большом экране.

Что проверено. В коллекции — реальные HTML/CSS-образцы с SVG, а не изображения готовых продуктов. Промпты описывают эти образцы; повторные генерации в других нейросетях пока не протестированы. Процент сходства не заявлен.
Какие настройки использовать в разных нейросетях?

Для модели, которая пишет код: включите работу с изображениями, если она доступна, приложите скриншот и запросите HTML/CSS. Здесь нет обязательных temperature, seed или «силы стиля»: эти настройки поддерживаются не везде и не гарантируют совпадение.

Для генератора изображений: формат 3:2 для обзорного макета, например 1200×800, если разрешение поддерживается; режим референса, если он есть. Сначала добейтесь нужной композиции. Картинка интерфейса не является рабочим сайтом: текст и кнопки придётся реализовать отдельно.

Самый точный способ сохранить именно этот образец — скачать его HTML и попросить модель изменить содержание в готовом файле. Для воспроизводимости фиксируйте название и версию модели, дату, полный промпт, настройки, референс, шрифты и финальный код.

Почему одинаковый промпт даёт разные результаты?

Стиль — не переключатель. На результат влияют модель и её версия, случайность генерации, предыдущая переписка, референс, доступные шрифты и изображения. Seed, когда он доступен, полезен только в пределах поддерживающего его инструмента и набора параметров.

Начинайте сравнение в новом чате, сохраняйте неизменный бриф и прикладывайте тот же референс. Просите исправить конкретное отличие. Пиксельное совпадение проще обеспечить редактированием исходного HTML.

Как оценить повторную генерацию?

Сравните рядом при одинаковом размере окна: 1) композицию и соотношение колонок, 2) размер и начертание заголовка, 3) палитру, 4) радиусы и эффекты, 5) интервалы и плотность. Отдельно проверьте 390px и 768px, читаемость, фокус клавиатуры и работу ссылок.

Фиксируйте каждую попытку: модель, версия, дата, входной референс, полный запрос, фактические настройки, выходной файл и замечания по этим пяти признакам. Не смешивайте визуальное сходство с работоспособностью.

Как устроена коллекция и как её расширять?

В каждой записи есть стабильный ID, русское и английское имя, теги, область применения, композиция, токены, ограничения, ошибки и готовый промпт. Условные группы «Строго / Спокойно / Смело / Цифровое» помогают выбирать настроение; это не историческая классификация.

Некоторые названия — авторские направления с пометкой inspired, а не отдельные общепринятые стили. На следующем этапе можно добавлять новые записи, страницы и подтверждённые результаты генераций, сохраняя тот же тестовый продукт.

Что нового: 16 блоков в каждом стиле

В карточке рецепта откройте «Блоки · 16»: обратная связь, галерея, каталог, отзывы, FAQ, тарифы, преимущества, статистика, команда, статьи, подписка, навигация, таблица, контролы, уведомления, состояния и прогресс. Это 352 стилизованных примеров с локальными действиями, отдельными промптами и HTML.

Подбор основан на библиотеках GOV.UK, Europa, Carbon и рекомендациях W3C WAI. Это авторская подборка распространённых типов, а не рейтинг по статистике использования.

Как исследованы новые направления?

Добавлены 12 направлений. Исторические движения, дизайн-системы и паттерны компоновки разделены по смыслу; палитры и примеры — авторские веб-интерпретации. Это не рейтинг популярности и не единая историческая классификация.

Отправная точка: WebValley — Гайд по направлениям и стилям в веб-дизайне и Студия Александры Шеиной — Стили в веб-дизайне. Затем использованы первичные и авторитетные источники.

Скопируйте текст вручную