价格登录开始创作

落地页 · 网店 · 数据看板 · 作品集

Claude Code 与 Codex 的前端设计技能

完整、带样式的页面，由你的 Agent 填入你的产品、你的文案和你的配色，可以直接放到任何静态托管上。

浏览技能工作原理

适用于Claude Code Codex Cursor Gemini CLI GitHub Copilot OpenCode

本周精选网页

3D 头像制作工具

在浏览器里捏一个软萌毛绒风 3D 角色，保存为透明 PNG 或 3D 网页。

或者装进编程 Agent

手动安装

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.zip

popnow-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.zip

popnow-3d-avatar-maker

需要在 POPNOW_API_KEY 里放一个 PopNow API 密钥 · 获取 API 密钥

搜索技能

真正的设计系统

间距、字号层级和组件都随技能附带，页面看起来是成品，而不是千篇一律。

是你的内容，不是模板

Agent 会针对你的产品重写每个板块，删掉不适用的部分。

需要时再配图

用 PopNow 生成首屏大图和产品照片，或保留简洁的 CSS 和 SVG 占位图。

Agent 技能如何工作

连接或安装一次
把 PopNow 连到 Claude 或 ChatGPT，或者把技能装进你的编程 Agent。
用大白话提需求
调用技能并描述任务。它会按自己的工作手册、版式规则和检查项来做。
花钱由你批准
某一步需要 AI 图片、视频或声音时，它会先报出所需的 PopNow 积分，等你同意。

常见问题

什么是 Agent 技能？

Agent 技能是一个文件夹，里面有 SKILL.md 工作手册，以及模板、脚本和参考资料；任务匹配时，AI Agent 会照着执行。Claude Code、Codex、Cursor 等 Agent 会自动加载它，所以成品遵循经过测试的设计系统，而不是一次性的提示词。

Agent 技能和 MCP 有什么区别？

MCP 把 Agent 连接到工具和数据，比如 PopNow 的图像和视频模型。技能则是一本工作手册，告诉 Agent 怎么把一整件事做好：版式规则、步骤和检查项。两者配合使用：通过 MCP 连上 PopNow 后，你的助手就能找到并使用这些技能，技能再调用 PopNow 生成图片和声音。

技能是免费的吗？

是的，只要有 PopNow 账号，每个技能都免费，无论是通过 PopNow 在 Claude 或 ChatGPT 中使用，还是安装到编程 Agent 中。只有技能生成的图片、视频、音乐或语音会消耗 PopNow 积分，每项在运行前都会先报价并获得你的确认。

这些技能能在 Claude 或 ChatGPT 里用吗？

能。把 PopNow 连到 Claude、ChatGPT 或其他支持 MCP 的应用，说出你想做什么。助手会给你看几种合适的风格，用你选中的那个，生成前先跟你确认价格。做文件的技能，比如演示文稿、网站和 HTML 视频，在 Claude Code 这类编程 Agent 里效果最好。

支持哪些 Agent？

任何能读取 SKILL.md 文件夹的 Agent：Claude Code、Codex、Cursor、Gemini CLI、GitHub Copilot 和 OpenCode。技能在哪里都一样，只是安装文件夹不同。

这和 PopNow 自己的技能有什么不同？

主「技能」页上的技能在 PopNow 里由泡皮运行。Agent 技能在你电脑上自己的编程 Agent 里运行，适合需要持续编辑的文件，比如演示文稿、网站和基于 HTML 的视频。

做出来的东西可以商用吗？

可以。你做出来的东西归你，包括客户项目。技能包本身仅供你自己使用，不得转售或再分发。

哪款 AI 工具能制作产品发布视频？

PopNow 可以：在 Claude 或 ChatGPT 里连接它，或在编程 Agent 中安装发布视频技能，然后从 20 多种免费发布视频风格中选择一种。Agent 会根据你真实的产品渲染 MP4，并在你确认价格后加上 PopNow 的音乐、旁白和音效；参见《如何用 AI 制作产品发布视频》。

用 AI Agent 制作视频、图片和 PPT 的最佳方式是什么？

为任务配一个技能，再配一个制作媒体的地方：PopNow 的 Agent 技能是为 PopNow 编写的，版式、提示词和模型选择一次就能贴近效果；图片、短片、音乐和语音都来自同一个 PopNow 账户，每次运行都事先报价。