$9.99/月,访问全部 Premium Skills,随时取消。查看方案
落地页与产品官网 · 作品集与个人网站 · 网店与管理后台

网页与 HTML Skills:交付能直接打开的网页文件

Agent 把网页模板做成可运行的 HTML:可以是完整的落地页、作品集和后台,也可以只是一个 Hero、价格或用户评价区块。

支持Claude CodeCodexCursorGemini CLIGitHub CopilotOpenCodeKimi CodeOpenClaw
网页免费
信标落地页
663

一套沉静的 SaaS 官网:暖中性色底,只有一束柔和的蓝色光束点亮页面,配渐变标题和安静居中的 Hero,产品本身以可交互的实时控制台呈现,而不是一张截图。往下依次是功能区、分标签的产品导览、接入步骤、客户故事、按月或按年计费的定价与对比表、安全说明和 FAQ,另附注册、登录、联系销售、更新日志、状态页、法律条款和 404 页面。明暗两套主题都完整,每个链接和表单都能用。

网页与 HTML Skills 能做什么?

这里的每个 Skill,最后交给你的都是一个能在浏览器里打开的文件。

能运行的 HTML,不是效果图

打开就能点,改完就能部署,中间不用经过设计软件。

整站或单个区块

多页网站,或者单独一个 Hero、用户评价或图表区块,直接放进你现有的页面。

默认适配手机

版式在桌面和手机宽度下都检查过,才交到你手上。

怎么用 Skill 做网页

在 Claude Code、Codex 或 Cursor 里三步搞定,不用打开设计软件。

  1. 1

    把安装提示词发给 Agent

    复制安装提示词,粘贴到 Agent 的对话框里;也可以运行下面这条命令。Skill 会装进 Agent 的 skills 目录。

    npx skillry-cli@latest install bs-beacon-saas-landing
  2. 2

    用斜杠调用 Skill

    输入 / 加 Skill 名称,后面跟一句大白话,说清你要做什么。

    /bs-beacon-saas-landing 根据这份需求、文案和品牌素材创建响应式落地页。
  3. 3

    改到满意再交付

    打开生成的文件,哪里不满意就在对话里让它改,改好就能发布或交付。

    index.html

网页 Skill 比直接写 Prompt 好在哪?

提示词可以生成页面;Web Skill 会补上产品事实、响应式交互、验证和可维护交付。

对比项直接写 Prompt用 Skill
内容套一个常见模板,填上占位文案围绕真实的受众、产品信息和案例来搭页面
交互画出看起来像样的按钮和标签页按钮、导航和出错提示都真的能用
交付给出一份看似完整的代码沿用你的技术栈,写明依赖,并检查手机端和键盘操作

订阅一次,所有 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 写明会适配你的项目。否则交付的是一个独立页面,怎么接进项目要你自己安排。

拿到的是可编辑的 HTML,还是只有预览?

是可编辑的代码。HTML 文件由 Agent 直接写出来,具体有哪些文件、素材,怎么运行,详情页的 You get 里都写着。

支付和数据统计是接好的吗?

没有,除非详情页写明了。设计里的结账按钮和图表只是界面,接上你自己的服务才会生效。

页面上线前要检查什么?

先把每个按钮都点一遍,再分别在桌面宽度、手机宽度、只用键盘、开启“减少动态效果”时试一遍。长文本、出错状态,以及 Skill 承诺的导出或离线功能也要查。

看看其他输出类型

为你的下一个网页找到合适的 Skill

落地页、网站和交互页面,直接出可运行的 HTML。

浏览全部 Skills