Что вы получите
- Один HTML-файл со встроенными шрифтами и изображениями, без сетевых запросов
- Шейдерный герой, бегущая строка клиентов, полоса студии, сетка работ и индекс проектов с поиском
- Отдельная страница на каждый кейс, а также журнал, политика конфиденциальности, условия и страница 404
- Вкладки услуг, планы сотрудничества с переключателем валюты, расценки, команда, FAQ и форма брифа
- По желанию: фото студии, кейсов и команды, а также зацикленное видео карточки, сделанные PopNow после расчёта кредитов
Подходит для
- Студии дизайна, брендинга, веба, моушена и 3D
- Фрилансеры и небольшие консалтинговые компании с реальными проектами
- Архитектурные и интерьерные бюро, которым нужно спокойное премиальное портфолио
Не подходит для
- Интернет-магазины или тёмные неоновые бренды
- Страницы, где за заголовком нужно фото или видео
- Сайты без готовых работ для показа
Как пользоваться
В Claude или ChatGPT
Используйте навык PopNow «Сайт агентства с шейдерным героем» (creative-agency-website) для этой задачи: Сделайте сайт для Quarrow, студии бренда и веба из четырёх человек в Порту. Проекты: перезапуск магазина керамики, приложение расписания паромов и айдентика пекарни. Форматы работы: Sprint, Launch, Retainer.
В агенте для кода
/popnow-creative-agency-website Сделайте сайт для Quarrow, студии бренда и веба из четырёх человек в Порту. Проекты: перезапуск магазина керамики, приложение расписания паромов и айдентика пекарни. Форматы работы: Sprint, Launch, Retainer.
Потом попробуйте
Назовите цену фото для трёх кейсов и сетки команды до генерации.
Превратите карточку кейса с паромом в медленное зацикленное видео из главного фото; сначала назовите цену.
Что подготовить
- Название студии, одна строка позиционирования, города и контакты
- От двух до шести проектов: бриф, что вы сделали и один измеримый результат
- Услуги, как с вами работают клиенты и кто ведёт проекты
- По желанию: ключ API PopNow или собственные фото студии и проектов
Похожие навыки
Смотреть все →3D-конструктор аватаров
+3Соберите милого плюшевого 3D-персонажа прямо в браузере и сохраните его как прозрачный PNG или 3D-страницу.
Календарная тепловая карта активности
+3Год ежедневной активности в виде календарной сетки с заливкой — с сериями, итогами и управлением с клавиатуры.
Лендинг SaaS с ИИ
+3Песочный фон, тонкие направляющие и штриховка вокруг живой канбан-доски, где ассистент планирует задачи.
Анимированный первый экран сайта
+3Первый экран лендинга с плавно сменяющимся словом в заголовке, двумя кнопками и широкой рамкой для изображения.
Тёмный лендинг для SaaS
+3Тёмный маркетинговый сайт с насыщенной анимацией для программного продукта — в одном автономном HTML-файле.
Сайт портфолио дизайнера
+3Шесть наклонённых карточек вокруг заголовка на сером фоне, красная карточка портрета и кейсы.
Сайт-портфолио разработчика
+3Тёмный личный сайт для инженеров с кейсами, статьями, докладами, резюме и формой обратной связи.
Редакционный сайт SaaS
+3Тёмно-синий разделённый герой, заголовок с засечками рядом с документальным кадром и кобальтовый акцент.
Шаблон сайта в стиле глассморфизма
+3Матовые стеклянные таблетки на почти чёрном фоне, крупный заголовок с засечками и подписка.
Сайт аппаратного продукта
+3Огромные тонкие названия моделей на студийных кадрах, матовые карточки характеристик и линейка в масштабе.
Интерактивная схема архитектуры
+3Офлайн-схема системы, по которой можно кликать: построена из проверенной JSON-модели, с обоснованием для каждого блока.
Интерактивный герой с сеткой
+3Тёмная сетка тонких нитей, которая гнётся к курсору, и светящееся кольцо от каждого клика.
Граф знаний из заметок
+3Превратите заметки проекта в офлайн-граф с поиском, где каждое утверждение ведёт к строке источника.
Шаблон KPI-дашборда
+3Четыре KPI-плитки с чипами изменений, линейный график, таблица разбивки и целевые полосы на тёплой бумаге.
Лендинг из ИИ-макетов
+3Сначала три полноэкранных макета на выбор, затем ваш агент собирает выбранный как чистый адаптивный код.
Шаблон сайта журнала
+3Сайт журнала с качеством печатного издания: статьи, рубрики, небольшой магазин и подписка — в одном HTML-файле.
Герой с анимацией частиц
+3Текст на тёплой бумаге рядом со сферой из чернильных и бирюзовых точек, меняющей форму под каждую идею.
Сайт личного бренда
+3Портрет, растворённый в тёплой бумаге под тонкой скобкой, с лёгким и жирным заявлением по бокам.
Кинематографичная страница запуска продукта
+3Почти чёрная страница в свете премьеры: заголовок с засечками, ночная сцена в letterbox и форма брони.
Шаблон админ-панели
+3Рабочая консоль бэк-офиса с графиками, таблицами, канбаном и календарём — в одном офлайн-HTML-файле.
Шаблон лендинга для SaaS
+3Спокойный светлый маркетинговый сайт для программного продукта с рабочей консолью продукта, ценами и регистрацией.
Сайт-портфолио в стиле скрапбукинга
+3Многостраничное онлайн-резюме из бумажных предметов, с кейсами и версией резюме для печати.
Шаблон сайта магазина кроссовок
+3Полноценный магазин обуви или одежды с каталогом, карточками товаров, корзиной и демо-оформлением заказа в одном HTML-файле.
Лендинг автоматизации процессов
+3Графитовая страница, небольшой заголовок слева и живой граф узлов: запускается, повторяет попытку, пишет логи.
Вопросы
Не замедляет ли шейдер страницу?
Он рендерится в пониженном разрешении с ограниченным коэффициентом пикселей, останавливается, когда герой уходит с экрана или вкладка скрыта, а при уменьшенном движении показывает один кадр. Под ним лежит CSS-версия того же образа, поэтому страница выглядит законченной и без WebGL.
Что здесь генерирует PopNow?
Фото для полосы студии, каждого кейса и команды в одном художественном стиле, а также необязательное медленное зацикливание, которое заменяет неподвижное фото одной карточки кейса. Сам герой — код, ему ничего не нужно. Каждый запуск оценивается в кредитах и стартует только после вашего согласия.
Можно ли использовать без ключа API PopNow?
Да. Встроенные фото студии могут остаться нейтральными заглушками, медиа кейсов могут стать CSS-панелями в цветах каждого клиента, а в расценках используются аватары с инициалами. Навык перечисляет слоты, которым ещё нужны настоящие фото.
Можно ли поменять оранжевый акцент?
Да, через несколько токенов и пресеты цвета шейдера. Страница сохраняет один акцент и избегает фиолетового и лилового, что проверяет валидатор; DESIGN.md вашего проекта переносится на эти токены.