Свой интерфейс по скриншоту через ИИ
Разбор референса, свой набор стилей и адаптивный экран в одном HTML
Какую задачу решает
Собрать свой адаптивный интерфейс по визуальному референсу
Что будет на выходе
Собственный адаптивный экран по референсу
- Кому подойдёт
Новичок, у которого есть скриншот понравившегося сайта, но нет дизайнера
- Тема
- Видео и дизайн
- Инструменты
- Claude Codeлюбой ИИ-чат
Ты нашёл экран, который нравится: тарифы у сервиса, карточка курса у школы, личный кабинет у приложения. Кидаешь скриншот в ИИ с просьбой «сделай так же» и получаешь копию с чужими текстами и цветами, которая на телефоне съезжает и выглядит как от нейросети.
Здесь ты сделаешь иначе. Сначала ИИ разберёт скриншот на устройство: блоки, иерархию, сетку и то, почему экран читается легко. Потом соберёт по этой схеме твой экран с твоими текстами и цветами, в одном HTML-файле, который нормально выглядит и на широком мониторе, и на телефоне.
Скриншот — это схема, по которой ты собираешь свой экран. Разбор → свои цвета и шрифты → экран → проверка на трёх ширинах. Три сообщения в чат и один файл на выходе.
Что получишь
- Разбор референса: блоки сверху вниз, что на экране главное, что второстепенное, какая сетка и отступы.
- Мини-набор своих стилей: 5–6 цветов, шрифт, радиусы и отступы, выписанные отдельно, чтобы следующий экран был в том же стиле.
- Готовый экран в одном HTML-файле с твоим контентом, адаптивный под телефон.
- Список отличий от референса, чтобы было видно, что это твой экран.
Как использовать
- 1Подготовь скриншот и свой контент
Один экран, без лишнего вокруг. Рядом — твои тексты для этого экрана, цвета бренда, логотип, если есть.
- 2Отправь шаг 1 со скриншотом
Нужен чат, который видит картинки: Claude, ChatGPT или Gemini.
- 3Шаг 2 — сборка
Получишь HTML целиком. Сохрани как screen.html и открой двойным кликом в браузере.
- 4Проверь на телефоне
В браузере на компьютере — режим разработчика и ширина 375 пикселей, или просто открой файл на телефоне. Что поехало — в шаг 3.
Если нужен только разбор чужого экрана без сборки, хватит бесплатного гайда Разобрать скриншот, креатив или интерфейс.
Рядом по теме: ИИ-аудитор лендинга по скриншоту, PDF, который не выглядит как от нейросети, Аудит визуального стиля по скриншотам, статья «Нейросети для работы по 20 профессиям» и Анимация интерфейса: шаблон промпта и карта приёмов (бесплатно).
Дальше — для участников
Регистрация бесплатная и занимает минуту. Часть закрытых материалов откроется сразу, без карты.
Что дальше
Чтобы следующий экран не пришлось собирать с нуля, оформи набор стилей по гайду Мини-дизайн-система: порядок вместо случайных цветов. Если поломки на телефоне повторяются, разберись с ними по материалу Почини вёрстку на телефоне и не устрой редизайн.
Целый лендинг по тому же принципу, без клонирования, собирается в бесплатном курсе Свой лендинг по референсу — без клона.
