Choose the job
Choose for a working visitor journey. Compare the examples below, prepare your own material and review the requirements before installing.
Landing pages & product sites · Portfolios & personal sites · Online stores & admin panels
Frontend Design Skills for AI agents
Choose for a working visitor journey. Compare the examples below, prepare your own material and review the requirements before installing.
Works in
Pick a web page Skill to start with
Three decisions before you build
Every Skill here ends in a file you can open in a browser.
Check the inputs
Gather approved copy, source files and the output constraints. Mark missing material before asking the agent to fill the layout.
Define the review
Check navigation and real service connections, not only the first screen.
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.Work from a small first result
Three steps in Claude Code, Codex or Cursor. No design app needed.
- 1
Inspect the package
Download after obtaining access. Read SKILL.md and identify the dependencies and any outside costs.
Download the ZIP from this Skill page, extract it, and follow SKILL.md. - 2
Brief one small result
Ask your agent for one draft focused on a working visitor journey. Supply the source material instead of relying on sample facts.
/bs-interactive-system-map Build a responsive landing page from this brief, copy, and brand kit. - 3
Review, then expand
Check navigation and real service connections, not only the first screen.
index.html
A useful brief has three parts
| Part | What to specify |
|---|---|
| Outcome | a working visitor journey |
| Evidence | Your approved source material, with missing facts marked. |
| Review | Check navigation and real service connections, not only the first screen. |
Make the brief specific
Choose for a working visitor journey. Compare the examples below, prepare your own material and review the requirements before installing.
State the constraints
Name the audience, where the output will be used, the source of factual claims and the details that must remain editable.
Agree on the acceptance check
Check navigation and real service connections, not only the first screen.
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