Что вы получите
- Два-три полноэкранных макета в разных художественных направлениях из библиотеки из десяти
- Выбранный дизайн как статичная страница или компоненты в вашем проекте с настоящими текстами
- Иллюстрации героя и секций, перерисованные чисто нужного размера и экспортированные как адаптивный WebP
- Снимки десктопа и телефона, сравнение с макетом и отчёт QA
- Отчёт линтера о машинных привычках с применёнными исправлениями
Подходит для
- Лендинги стартапов, приложений и продуктов
- Страницы запуска и листа ожидания, которым нужен особый облик
- Редизайн страницы, которая выглядит как типовой шаблон
Не подходит для
- Точная сборка из существующего файла дизайна с пикселем в пиксель
- Многостраничные сайты с логикой приложения или CMS
- Шаблоны писем
Как пользоваться
В Claude или ChatGPT
Используйте навык PopNow «Лендинг из ИИ-макетов» (landing-page-from-mockup) для этой задачи: Лендинг для Lumen Notes, приложения для простых заметок, которое подсказывает связанные заметки во время набора. Бесплатно на одном устройстве, Pro — $6 в месяц. Отзывов пока нет.
В агенте для кода
/popnow-landing-page-from-mockup Лендинг для Lumen Notes, приложения для простых заметок, которое подсказывает связанные заметки во время набора. Бесплатно на одном устройстве, Pro — $6 в месяц. Отзывов пока нет.
Потом попробуйте
Возьмите героя из макета B, а таблицу тарифов из макета A.
Соберите это в нашем проекте на Astro в папке site/ и снова запустите проверку.
Что подготовить
- Название продукта, аудитория и главное обещание в заголовке
- Три-четыре возможности с одной конкретной деталью у каждой, а также тарифы и цены
- Доказательства, за которые можно ручаться (настоящие цитаты, цифры или факты)
- Ключ API PopNow и ваш DESIGN.md, если бренд уже описан
Похожие навыки
Смотреть все →3D-конструктор аватаров
+3Соберите милого плюшевого 3D-персонажа прямо в браузере и сохраните его как прозрачный PNG или 3D-страницу.
Календарная тепловая карта активности
+3Год ежедневной активности в виде календарной сетки с заливкой — с сериями, итогами и управлением с клавиатуры.
Лендинг SaaS с ИИ
+3Песочный фон, тонкие направляющие и штриховка вокруг живой канбан-доски, где ассистент планирует задачи.
Анимированный первый экран сайта
+3Первый экран лендинга с плавно сменяющимся словом в заголовке, двумя кнопками и широкой рамкой для изображения.
Сайт агентства с шейдерным героем
+3Живой оранжевый шейдерный герой под крупным заявлением, навигация-таблетка и сетка кейсов.
Тёмный лендинг для SaaS
+3Тёмный маркетинговый сайт с насыщенной анимацией для программного продукта — в одном автономном HTML-файле.
Сайт портфолио дизайнера
+3Шесть наклонённых карточек вокруг заголовка на сером фоне, красная карточка портрета и кейсы.
Сайт-портфолио разработчика
+3Тёмный личный сайт для инженеров с кейсами, статьями, докладами, резюме и формой обратной связи.
Редакционный сайт SaaS
+3Тёмно-синий разделённый герой, заголовок с засечками рядом с документальным кадром и кобальтовый акцент.
Шаблон сайта в стиле глассморфизма
+3Матовые стеклянные таблетки на почти чёрном фоне, крупный заголовок с засечками и подписка.
Сайт аппаратного продукта
+3Огромные тонкие названия моделей на студийных кадрах, матовые карточки характеристик и линейка в масштабе.
Интерактивная схема архитектуры
+3Офлайн-схема системы, по которой можно кликать: построена из проверенной JSON-модели, с обоснованием для каждого блока.
Интерактивный герой с сеткой
+3Тёмная сетка тонких нитей, которая гнётся к курсору, и светящееся кольцо от каждого клика.
Граф знаний из заметок
+3Превратите заметки проекта в офлайн-граф с поиском, где каждое утверждение ведёт к строке источника.
Шаблон KPI-дашборда
+3Четыре KPI-плитки с чипами изменений, линейный график, таблица разбивки и целевые полосы на тёплой бумаге.
Шаблон сайта журнала
+3Сайт журнала с качеством печатного издания: статьи, рубрики, небольшой магазин и подписка — в одном HTML-файле.
Герой с анимацией частиц
+3Текст на тёплой бумаге рядом со сферой из чернильных и бирюзовых точек, меняющей форму под каждую идею.
Сайт личного бренда
+3Портрет, растворённый в тёплой бумаге под тонкой скобкой, с лёгким и жирным заявлением по бокам.
Кинематографичная страница запуска продукта
+3Почти чёрная страница в свете премьеры: заголовок с засечками, ночная сцена в letterbox и форма брони.
Шаблон админ-панели
+3Рабочая консоль бэк-офиса с графиками, таблицами, канбаном и календарём — в одном офлайн-HTML-файле.
Шаблон лендинга для SaaS
+3Спокойный светлый маркетинговый сайт для программного продукта с рабочей консолью продукта, ценами и регистрацией.
Сайт-портфолио в стиле скрапбукинга
+3Многостраничное онлайн-резюме из бумажных предметов, с кейсами и версией резюме для печати.
Шаблон сайта магазина кроссовок
+3Полноценный магазин обуви или одежды с каталогом, карточками товаров, корзиной и демо-оформлением заказа в одном HTML-файле.
Лендинг автоматизации процессов
+3Графитовая страница, небольшой заголовок слева и живой граф узлов: запускается, повторяет попытку, пишет логи.
Вопросы
Зачем делать макеты до написания кода?
Выбирать между готовыми на вид страницами быстрее и честнее, чем описывать стиль словами. Это также даёт сборке конкретную цель, поэтому сравнение со снимками может точно сказать, где код отошёл от макета.
Что генерирует PopNow и сколько это стоит?
Макеты (около 30–35 кредитов каждый) и, если хотите, чистые иллюстрации героя и секций (примерно 35–75 кредитов каждая). Типичный полный прогон — около 275 кредитов; облегчённый режим с одним макетом — около 35. Каждая генерация сначала оценивается и запускается только после вашего согласия.
Нужно ли что-то устанавливать?
Node и Python 3, а также локальный Chrome, Chromium или Edge для снимков. Playwright используется, если он уже есть в проекте. Других зависимостей нет.
Будет ли на странице текст с картинок макета?
Нет. Макеты — это картинки, и их мелкий текст может искажаться. Заголовки, возможности, цены и FAQ берутся из вашего брифа, а всё, что агенту пришлось написать самому, перечисляется для подтверждения.