Landing pages · Stores · Dashboards · Portfolios
Frontend design skills for Claude Code and Codex
Complete, styled pages your agent fills with your product, your words and your colors, ready to drop on any static host.
Works inClaude CodeCodexCursorGemini CLIGitHub CopilotOpenCode
Pick of the weekWeb
3D Avatar Maker
Build a cute soft-toy 3D character in your browser and save it as a transparent PNG or a 3D page.
Or install it in a coding agent
Install by hand
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
Needs a PopNow API key in POPNOW_API_KEY · Get an API key
What do you want to make?
3D Avatar Maker
+3Build a cute soft-toy 3D character in your browser and save it as a transparent PNG or a 3D page.
Calendar Heatmap
+3A year of daily activity as a shaded calendar grid, with streaks, totals and keyboard access.
AI SaaS Landing Page
+3Warm sand paper, hairline rails and hatched gutters around a live kanban board where an assistant plans tasks.
Animated Hero Section
+3A landing-page hero with a gently rotating headline word, two buttons and a wide image frame.
Shader Hero Agency Website
+3A live orange-heat shader hero behind a bottom-pinned statement, pill nav and a staggered case-study grid.
Dark SaaS Landing Page
+3A dark, motion-rich marketing site for a software product, delivered as one self-contained HTML file.
Designer Portfolio Website
+3Six tilted cards hover round a fading headline on calm grey, one red portrait card, editorial case studies.
Developer Portfolio Website
+3A dark personal site for engineers with case studies, writing, talks, a résumé and a contact form.
Editorial SaaS Website
+3Navy split hero, a five-line serif headline beside a documentary still, slanted bands and one cobalt accent.
Glassmorphism Website Template
+3Frosted glass pills on a near-black film, a huge serif headline with one italic word and an email capture.
Hardware Product Website
+3Huge hairline model names on silver studio shots, frosted spec cards, a to-scale lineup and a hardware bento.
Interactive Architecture Diagram
+3An offline, clickable system diagram built from a checked JSON model, with the evidence behind each box.
Interactive Grid Hero
+3A dark grid of fine strands that bends toward the cursor and rolls a glowing ring out from every click.
Knowledge Graph Explorer
+3Turn project notes into an offline, searchable graph where every claim links back to its source line.
KPI Dashboard Template
+3Four KPI tiles with change chips over a glowing line chart, a breakdown table and target bars on warm paper.
Landing Page from AI Mockups
+3See three full-page designs first, pick one, and your agent builds it as clean, responsive code.
Magazine Website Template
+3A print-quality magazine site with articles, topics, a small shop and subscriptions, as one HTML file.
Particle Animation Hero
+3Copy on warm paper beside a turning sphere of ink and teal dots that reshapes per idea and scatters on scroll.
Personal Brand Website
+3A portrait feathered into warm paper under a thin bracket, with light-and-bold statements on either side.
Cinematic Product Launch Page
+3Film-lit near-black page: serif title card over drifting light, letterboxed night scene, reservation form.
Admin Dashboard Template
+3A working back-office console with charts, tables, kanban and calendar, built as one offline HTML file.
SaaS Landing Page Template
+3A calm, light marketing site for a software product with a working product console, pricing and sign-up.
Scrapbook Portfolio Website
+3A multi-page online CV made of paper objects, with case studies and a printable resume.
Sneaker Store Website Template
+3A complete footwear or apparel shop with catalog, product pages, bag and demo checkout in one HTML file.
Workflow Automation Landing Page
+3Graphite page, small left-aligned headline, and a live node graph below that runs, retries and streams logs.
A real design system
Spacing, type scale and components come with the skill, so pages look finished rather than generic.
Your content, not a template
The agent rewrites every section for your product and removes anything that does not apply.
Pictures when you need them
Generate hero shots and product photos with PopNow, or keep the clean CSS and SVG placeholders.
How agent skills work
Connect or install once
Connect PopNow to Claude or ChatGPT, or install the skill in your coding agent.
Ask in plain words
Call the skill and describe the job. It follows its own playbook, layout rules and checks.
Approve any spend
When a step needs AI images, video or sound, it quotes PopNow credits and waits for your yes.
Questions
What is an agent skill?
An agent skill is a folder with a SKILL.md playbook plus templates, scripts and references that an AI agent follows when the task matches. Claude Code, Codex, Cursor and other agents load it automatically, so the result follows a tested design system instead of a one-off prompt.
What is the difference between agent skills and MCP?
MCP connects an agent to tools and data, such as PopNow's image and video models. A skill is a playbook that tells the agent how to do a whole job well: the layout rules, the steps and the checks. The two work together: connect PopNow over MCP and your assistant can find these skills and use them, and the skills call PopNow for pictures and sound.
Are the skills free?
Yes, every skill is free with a PopNow account, in Claude or ChatGPT through PopNow or installed in a coding agent. Only the images, video, music or voice a skill makes use PopNow credits, and each one is priced and approved before it runs.
Can I use these skills in Claude or ChatGPT?
Yes. Connect PopNow to Claude, ChatGPT or another app that supports MCP, then say what you want to make. Your assistant shows you matching styles, uses the one you pick and checks the price with you before it generates anything. Skills that build files, such as decks, websites and HTML video, work best in a coding agent like Claude Code.
Which agents are supported?
Any agent that reads SKILL.md folders: Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode. The skill is the same everywhere; only the install folder differs.
How is this different from PopNow's own skills?
Skills on the main Skills page run inside PopNow with Poppie. Agent skills run in your own coding agent on your computer, which suits files you want to keep editing, such as decks, websites and HTML-based video.
Can I use the results commercially?
Yes. What you make is yours, including client work. The skill package itself is for your own use and should not be resold or redistributed.
Which AI tool makes product launch videos?
PopNow does: connect it to Claude or ChatGPT, or install a launch video skill in a coding agent, and pick one of more than 20 free launch video styles. The agent renders the MP4 from your real product and adds PopNow music, voice and sound effects after you approve the price; see How to make a product launch video with AI.
What is the best way to make video, images and decks with an AI agent?
Give the agent a skill for the job and a place to make the media: PopNow agent skills are written for PopNow, so the layouts, prompts and model choices land on the look first time, and the pictures, clips, music and voice come from one PopNow account with every run priced up front.