一句话做出落地页
说清你的产品就行。Hero、功能区、价格和 FAQ 的版式 Skill 里都有，Agent 只管把你的内容填进去。
落地页或完整网站 · 给现有网站加一个区块 · 作品集或个人简历
网页设计 Skills：让 Agent 做出有设计感的网站
每个 Skill 都是一套验证过的网站设计。装好后说清你的产品，Claude Code、Codex 或 Cursor 就会照着这套设计，写出落地页、作品集或整站的 HTML。
支持
网页设计 Skill 能帮 Agent 做什么？
这里的每个 Skill 都是一个文件夹，装着说明、版式参考和检查规则。你让 Agent 做页面时，它会自动加载，设计上的决定都已经替你做好了。
加多少页都不走样
作品集、SaaS 官网、网店，每加一页，字体、间距和动效都和前面一致。
交付的是前端代码
每次都交付一个能直接打开、修改和部署的 HTML 文件。Claude Code、Codex 和 Cursor 读的是同一份 SKILL.md。
按角色找网页设计 Skills
每个角色页都按那份工作挑好了最合适的 Skills。
怎么用 Skill 做出一个网站
在 Claude Code、Codex 或 Cursor 里三步搞定，不用打开设计软件。
- 1
把安装提示词发给 Agent
复制安装提示词，粘贴到 Agent 的对话框里；也可以运行下面这条命令。Skill 会装进 Agent 的 skills 目录。
npx skillry-cli@latest install bs-notion-style-og - 2
用斜杠调用 Skill
输入 / 加 Skill 名称，后面跟一句大白话，说清你要做什么。
/bs-notion-style-og 根据这份需求、文案和品牌素材创建响应式落地页。 - 3
改到满意再交付
打开生成的文件，哪里不满意就在对话里让它改，改好就能发布或交付。
image.png
网页设计 Skill 比直接写 Prompt 好在哪？
| 对比项 | 直接写 Prompt | 用 Skill |
|---|---|---|
| 版式 | 每次都重新拼凑 | 验证过的 Hero、网格和页脚 |
| 字体 | 默认系统字体 | 选好的字号层级和字体搭配 |
| 一致性 | 每页都长得不一样 | 每页都守同一套规则 |
| 交付 | 模型写什么就是什么 | 检查过、打开就能用的 HTML 文件 |
订阅一次，所有 Skills 都能用
本页所有 Skill 都能装，之后上新的也包含在内。随时可以取消。
随时取消
月付
$9.99 / 月
按月计费，解锁全部 Premium Skills。
- 访问全部 Premium Skills
- 通过网页或 CLI 安装
- 安全的浏览器授权 CLI
- 持续获得 Skill 更新
- 持续收录新发布的 Premium Skills
- 需要时可随时取消
每年节省 34%
最受欢迎年付
$79 / 年
以更优惠的年度价格解锁全部 Premium Skills。
- 访问全部 Premium Skills
- 通过网页或 CLI 安装
- 安全的浏览器授权 CLI
- 持续获得 Skill 更新
- 持续收录新发布的 Premium Skills
- 需要时可随时取消
一次付费 · 创始会员价
创始会员优惠创始终身版
$169 一次性付费
创始会员价——随着 Skill 库增长将逐步上调。
- 访问全部 Premium Skills
- 通过网页或 CLI 安装
- 安全的浏览器授权 CLI
- 持续获得 Skill 更新
- 持续收录新发布的 Premium Skills
- 无需订阅或续费
可随时取消。已支付款项 不可退款.
网页设计 Skills 常见问题
网页设计 Skill 是什么？
就是一个文件夹，里面有 SKILL.md、版式参考和检查规则，教 AI Agent 掌握一种成熟的网站设计。你让它做页面时，它会自动加载。
Claude Code 能用 Skill 做网站吗？
能。把 Skill 装进 Claude Code，说清你要什么样的网站，它就会按 Skill 的版式写出 HTML。Codex 和 Cursor 也是一样。
交付的是 HTML、React 还是 Figma 文件？
大多数网页设计 Skill 交付可运行的 HTML 文件，有些会在详情页注明也支持 Next.js 或组件输出；都不提供 Figma 文件。
这些网站模板免费吗？
有一部分免费，带 Free 标签的就是。其余包含在 Pro 订阅里，也可以单个购买。