Working HTML, not mockups
Open the file, click through it, deploy it. No design tool in between.
登陆页面和产品网站·作品集和个人网站·在线商店和管理面板
Frontend Design Skills for AI agents
Frontend design templates your agent turns into working HTML: whole landing pages, portfolios and dashboards, or a single hero, pricing or testimonial section.
Works in
Pick a web page Skill to start with
What frontend design Skills do
Every Skill here ends in a file you can open in a browser.
Full sites or single sections
Multi-page sites, or one hero, testimonial or chart section to drop into a page you already have.
Responsive by default
Layouts are tested at desktop and mobile widths before they ship.
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.How to build a web page with a Skill
Three steps in Claude Code, Codex or Cursor. No design app needed.
- 1
Paste the install prompt
Copy the install prompt into your agent, or run the command below. The Skill lands in your agent's skills folder.
Download the ZIP from this Skill page, extract it, and follow SKILL.md. - 2
Call it with a slash
Type a slash and the Skill name, then say what you want in plain words.
/bs-interactive-system-map Build a responsive landing page from this brief, copy, and brand kit. - 3
Review and ship
Open the file it made, ask for changes in the same chat, then publish or hand it off.
index.html
Why use a web page Skill instead of a prompt?
A prompt can make a page. A Web Skill adds product grounding, responsive interaction, validation, and a maintainable handoff.
| Aspect | A plain prompt | A Skill |
|---|---|---|
| Content | Fills a familiar template with filler copy | Builds the page around your real audience, product facts and proof |
| Interaction | Draws buttons and tabs that only look right | Wires up real states, navigation and error handling |
| Handoff | Returns code that looks finished | Follows your stack, lists dependencies and checks phone and keyboard use |
What you can build with a frontend design Skill
- 01Landing pages for a launch or campaignTurn your copy and images into a page with clear sections and a sign-up or buy button.
- 02Clickable prototypesMock up real screens and buttons so your team can try the product before it is built.
- 03DashboardsLay out numbers, tables and charts so they are easy to read on any screen.
- 04Reusable page partsButtons, cards and layouts in one style, so new pages match the ones you already have.
How to pick a frontend design Skill
- 1Pick a style that fits your productSaaS, portfolio, shop or event page: choose the look that matches what you are building.
- 2Try the live exampleEvery Skill page has a working example site you can click through, on desktop and on phone.
- 3Download it and tryInstall it in your agent and build one page with your own content. You will know within minutes.
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