A landing page from one prompt
Describe your product. The Skill already has the hero, feature grid, pricing and FAQ, so the agent writes your copy into a layout that works.
A landing page or full site · A section for your current site · A portfolio or resume
Web Design Skills for AI agents
Each Skill is one tested website design. Install it, describe your product, and Claude Code, Codex or Cursor builds the landing page, portfolio or full site as working HTML.
Works in
Pick a web design Skill to start with
What a web design Skill gives your agent
Each Claude design Skill here is a folder of instructions, layout references and checks. Your agent loads it when you ask for a page, so the design decisions are already made.
Templates that stay consistent
Portfolios, SaaS sites and online stores keep the same type, spacing and motion on every page you add.
Front-end design that ships as code
Every run ends in an HTML file you can open, edit and deploy. Claude Code, Codex and Cursor all read the same SKILL.md.
Find web design Skills for your role
Each role page picks the Skills that fit that job best.
For designersA design system your agent repeats, so you work on the details.
For foundersProduct sites, pitch decks and launch videos before the first hire.
For content creatorsCovers, social cards and talking-head overlays in your style.
For marketersCampaign pages, launch videos and social images from one brief.How to build a website 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.
npx skillry-cli@latest install bs-beacon-saas-landing - 2
Call it with a slash
Type a slash and the Skill name, then say what you want in plain words.
/bs-beacon-saas-landing 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 design Skill instead of a prompt?
| Aspect | A plain prompt | A Skill |
|---|---|---|
| Layout | Invented again on every run | A tested hero, grid and footer |
| Typography | Default system fonts | A chosen type scale and pairing |
| Consistency | Each page looks different | Every page follows one system |
| Output | Whatever the model writes | A checked HTML file, ready to open |
Every Skill, one plan
Install any Skill on this page and every new one we add. Cancel anytime.
Cancel anytime
Monthly
$9.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
Save 34% a year
Most popularYearly
$79 / 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
$169 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 design Skills FAQ
What is a web design Skill?
A folder with a SKILL.md, layout references and checks that teaches your AI agent one proven website design. The agent loads it when you ask for a page.
Can Claude Code build a website with a Skill?
Yes. Install the Skill into Claude Code, describe the site, and it writes the HTML following the Skill's layout. Codex and Cursor work the same way.
Do I get HTML, React or a Figma file?
Most web design Skills deliver a working HTML file. Some also name Next.js or component output on their detail page; none ship a Figma file.
Are the website templates free?
Some are. Free Skills carry a Free label; the rest are included in Pro or can be bought one at a time.
Explore other use cases
Find the right Skill for your next website
Landing pages, portfolios and full sites your agent builds.
Browse all Skills