先选任务
以“走得通的访客路径”为目标选择。比较下方示例，准备自己的材料，阅读运行要求后再安装。
登陆页面和产品网站·作品集和个人网站·在线商店和管理面板
Frontend Design Skills for AI agents
以“走得通的访客路径”为目标选择。比较下方示例，准备自己的材料，阅读运行要求后再安装。
Works in
Pick a web page Skill to start with
开始制作前的三个判断
Every Skill here ends in a file you can open in a browser.
核对输入
整理已确认文案、源文件与输出限制；让智能体排版前先标出缺失材料。
定义验收
除了首屏，还要检查导航和真实服务连接。
Find web page Skills for your role
Each role page picks the Skills that fit that job best.
For foundersProduct sites, pitch decks and launch videos before the first hire.
For designersA design system your agent repeats, so you work on the details.
For marketersCampaign pages, launch videos and social images from one brief.
For ecommerce sellersStore pages, posters and promo videos for every new product.从一份小样开始
Three steps in Claude Code, Codex or Cursor. No design app needed.
- 1
检查技能包
获得访问权限后下载，阅读 SKILL.md，确认依赖与额外费用。
Download the ZIP from this Skill page, extract it, and follow SKILL.md. - 2
先安排一个小任务
让智能体先围绕“走得通的访客路径”制作草稿。提供来源材料，不依赖示例事实。
/bs-interactive-system-map Build a responsive landing page from this brief, copy, and brand kit. - 3
检查后再扩展
除了首屏，还要检查导航和真实服务连接。
index.html
一份有效需求的三个部分
| 部分 | 需要说明什么 |
|---|---|
| 结果 | 走得通的访客路径 |
| 依据 | 已经确认的来源材料，以及明确标出的缺失事实。 |
| 验收 | 除了首屏，还要检查导航和真实服务连接。 |
把需求写具体
以“走得通的访客路径”为目标选择。比较下方示例，准备自己的材料，阅读运行要求后再安装。
写出限制条件
写明受众、输出使用位置、事实依据，以及必须保持可编辑的内容。
确定验收检查
除了首屏，还要检查导航和真实服务连接。
Every Skill, one plan
Install any Skill on this page and every new one we add. Cancel anytime.
Cancel anytime
Monthly
US$8.99 / month
Full Premium access, billed monthly.
- Access all Premium Skills
- Install from the web or CLI
- Secure browser-authorized CLI access
- Ongoing Skill updates
- New Premium Skills included
- Cancel whenever you need
Annual membership
Most popularYearly
US$69.00 / year
Full Premium access for a lower annual price.
- Access all Premium Skills
- Install from the web or CLI
- Secure browser-authorized CLI access
- Ongoing Skill updates
- New Premium Skills included
- Cancel whenever you need
Pay once · Founding price
Founding offerFounding Lifetime
US$159.00 one-time
Founding price — increases as the library grows.
- Access all Premium Skills
- Install from the web or CLI
- Secure browser-authorized CLI access
- Ongoing Skill updates
- New Premium Skills included
- No subscription or renewal bill
Cancel anytime. Payments are non-refundable.
Web page Skills FAQ
Can I use a web Skill in my existing project?
Yes, if the Skill says it adapts to your project. Otherwise it delivers a standalone page, and you plan the integration yourself.
Do I get editable HTML or just a preview?
Editable code. Your agent writes the HTML files for you, and the detail page's You get list names the exact files, assets and run steps.
Are payments and analytics connected?
No, unless the detail page says so. A checkout button or a chart in the design is just UI until you connect your own service.
What should I check before I ship the page?
Click every control, then try the page at desktop and phone widths, with only a keyboard and with reduced motion on. Also check long text, error states and any export or offline feature the Skill promises.
Explore other output types
Find the right Skill for your next web page
Landing pages, sites and interactive pages as working HTML.
Browse all Skills