Лендинги · Магазины · Дашборды · Портфолио
Навыки фронтенд-дизайна для Claude Code и Codex
Готовые оформленные страницы, которые агент наполняет вашим продуктом, вашими текстами и вашими цветами. Их можно сразу выложить на любой статический хостинг.
Работает вClaude CodeCodexCursorGemini CLIGitHub CopilotOpenCode
Выбор неделиВеб
3D-конструктор аватаров
Соберите милого плюшевого 3D-персонажа прямо в браузере и сохраните его как прозрачный PNG или 3D-страницу.
Или установите его в агента для кода
Установка вручную
mkdir -p ~/.claude/skills && cd ~/.claude/skills
curl -fL -H "Authorization: Bearer $POPNOW_API_KEY" \
https://api.popnow.ai/api/v1/agent-skills/3d-avatar-maker/download -o popnow-3d-avatar-maker.zip
unzip -o popnow-3d-avatar-maker.zip && rm popnow-3d-avatar-maker.zip/popnow-3d-avatar-maker
mkdir -p ~/.agents/skills && cd ~/.agents/skills
curl -fL -H "Authorization: Bearer $POPNOW_API_KEY" \
https://api.popnow.ai/api/v1/agent-skills/3d-avatar-maker/download -o popnow-3d-avatar-maker.zip
unzip -o popnow-3d-avatar-maker.zip && rm popnow-3d-avatar-maker.zip$popnow-3d-avatar-maker
mkdir -p ~/.cursor/skills && cd ~/.cursor/skills
curl -fL -H "Authorization: Bearer $POPNOW_API_KEY" \
https://api.popnow.ai/api/v1/agent-skills/3d-avatar-maker/download -o popnow-3d-avatar-maker.zip
unzip -o popnow-3d-avatar-maker.zip && rm popnow-3d-avatar-maker.zip/popnow-3d-avatar-maker
mkdir -p ~/.gemini/skills && cd ~/.gemini/skills
curl -fL -H "Authorization: Bearer $POPNOW_API_KEY" \
https://api.popnow.ai/api/v1/agent-skills/3d-avatar-maker/download -o popnow-3d-avatar-maker.zip
unzip -o popnow-3d-avatar-maker.zip && rm popnow-3d-avatar-maker.zippopnow-3d-avatar-maker
mkdir -p ~/.copilot/skills && cd ~/.copilot/skills
curl -fL -H "Authorization: Bearer $POPNOW_API_KEY" \
https://api.popnow.ai/api/v1/agent-skills/3d-avatar-maker/download -o popnow-3d-avatar-maker.zip
unzip -o popnow-3d-avatar-maker.zip && rm popnow-3d-avatar-maker.zip/popnow-3d-avatar-maker
mkdir -p ~/.config/opencode/skills && cd ~/.config/opencode/skills
curl -fL -H "Authorization: Bearer $POPNOW_API_KEY" \
https://api.popnow.ai/api/v1/agent-skills/3d-avatar-maker/download -o popnow-3d-avatar-maker.zip
unzip -o popnow-3d-avatar-maker.zip && rm popnow-3d-avatar-maker.zippopnow-3d-avatar-maker
Нужен API-ключ PopNow в POPNOW_API_KEY · Получить API-ключ
Что вы хотите создать?
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Сначала три полноэкранных макета на выбор, затем ваш агент собирает выбранный как чистый адаптивный код.
Шаблон сайта журнала
+3Сайт журнала с качеством печатного издания: статьи, рубрики, небольшой магазин и подписка — в одном HTML-файле.
Герой с анимацией частиц
+3Текст на тёплой бумаге рядом со сферой из чернильных и бирюзовых точек, меняющей форму под каждую идею.
Сайт личного бренда
+3Портрет, растворённый в тёплой бумаге под тонкой скобкой, с лёгким и жирным заявлением по бокам.
Кинематографичная страница запуска продукта
+3Почти чёрная страница в свете премьеры: заголовок с засечками, ночная сцена в letterbox и форма брони.
Шаблон админ-панели
+3Рабочая консоль бэк-офиса с графиками, таблицами, канбаном и календарём — в одном офлайн-HTML-файле.
Шаблон лендинга для SaaS
+3Спокойный светлый маркетинговый сайт для программного продукта с рабочей консолью продукта, ценами и регистрацией.
Сайт-портфолио в стиле скрапбукинга
+3Многостраничное онлайн-резюме из бумажных предметов, с кейсами и версией резюме для печати.
Шаблон сайта магазина кроссовок
+3Полноценный магазин обуви или одежды с каталогом, карточками товаров, корзиной и демо-оформлением заказа в одном HTML-файле.
Лендинг автоматизации процессов
+3Графитовая страница, небольшой заголовок слева и живой граф узлов: запускается, повторяет попытку, пишет логи.
Настоящая дизайн-система
Отступы, шкала шрифтов и компоненты входят в навык, поэтому страницы выглядят законченными, а не шаблонными.
Ваш контент, а не шаблон
Агент переписывает каждый блок под ваш продукт и убирает всё, что не подходит.
Картинки, когда нужны
Сгенерируйте главные изображения и фото товаров в PopNow или оставьте аккуратные заглушки на CSS и SVG.
Как работают навыки для агентов
Подключите или установите один раз
Подключите PopNow к Claude или ChatGPT или установите навык в своего агента для кода.
Просите обычными словами
Вызовите навык и опишите задачу. Он следует своему сценарию, правилам вёрстки и проверкам.
Расходы только с вашего согласия
Когда шагу нужны ИИ-изображения, видео или звук, навык показывает цену в кредитах PopNow и ждёт вашего «да».
Вопросы
Что такое навык для агента?
Папка с файлом SKILL.md, в котором описан порядок работы, а также шаблонами, скриптами и справочниками. ИИ-агент следует ему, когда задача подходит. Claude Code, Codex, Cursor и другие агенты загружают его автоматически, поэтому результат опирается на проверенную дизайн-систему, а не на разовый промпт.
Чем навыки для агентов отличаются от MCP?
MCP подключает агента к инструментам и данным, например к моделям изображений и видео PopNow. Навык — это инструкция, которая объясняет агенту, как хорошо сделать всю работу: правила вёрстки, шаги и проверки. Они работают вместе: если подключить PopNow по MCP, ассистент сможет находить эти навыки и использовать их, а навыки вызывают PopNow для изображений и звука.
Навыки бесплатные?
Да, каждый навык бесплатный при аккаунте PopNow, будь то использование в Claude или ChatGPT через PopNow или установка в агент для кода. Расходуют кредиты PopNow только изображения, видео, музыка или голос, которые создаёт навык, и каждый из них оценивается и подтверждается до запуска.
Можно ли использовать эти навыки в Claude или ChatGPT?
Да. Подключите PopNow к Claude, ChatGPT или другому приложению с поддержкой MCP и скажите, что хотите создать. Ассистент покажет подходящие стили, использует выбранный и согласует с вами цену до генерации. Навыки, которые создают файлы, — презентации, сайты и HTML-видео, — лучше всего работают в агенте для кода, например в Claude Code.
Какие агенты поддерживаются?
Любые агенты, которые читают папки SKILL.md: Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot и OpenCode. Навык везде одинаковый, отличается только папка установки.
Чем это отличается от навыков самого PopNow?
Навыки на главной странице «Навыки» работают внутри PopNow вместе с Poppie. Навыки для агентов работают в вашем собственном агенте на вашем компьютере, и это удобно для файлов, которые вы хотите дальше править: презентаций, сайтов и видео на HTML.
Можно ли использовать результаты в коммерческих целях?
Да. Всё, что вы создаёте, принадлежит вам, в том числе работа для клиентов. Сам пакет навыка предназначен только для вашего использования, его нельзя перепродавать или распространять.
Какой ИИ-инструмент делает ролики о запуске продукта?
PopNow. Подключите его к Claude или ChatGPT либо установите навык ролика о запуске в агент для кода и выберите один из более чем 20 бесплатных стилей. Агент рендерит MP4 из вашего настоящего продукта и добавляет музыку, голос и звуковые эффекты PopNow после того, как вы подтвердите цену. См. «Как сделать ролик о запуске продукта с ИИ».
Как лучше всего делать видео, изображения и презентации с ИИ-агентом?
Дайте агенту навык под задачу и место для создания медиа. Навыки агентов PopNow написаны под PopNow, поэтому макеты, промпты и выбор моделей попадают в нужный вид с первого раза, а изображения, ролики, музыка и голос идут из одного аккаунта PopNow, и каждый запуск оценивается заранее.