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.

Browse web design Skills How Skills work

Works in

WebFree

Slate Admin Console

834

Build a product-grade SaaS admin console in a calm, near-monochrome style where colour is kept for data and status. A slim two-group sidebar with no dead links sits beside a header with a command palette, light and dark modes and two theme presets. Seven working views cover overview, analytics, finance, customers, a drag-and-drop roadmap board, a month calendar and settings. The example product is Corvane, and the default output is one self-contained file that opens offline.

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.

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.

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-slate-admin-console
2
Call it with a slash
Type a slash and the Skill name, then say what you want in plain words.
/bs-slate-admin-console 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

Yearly

$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 offer

Founding 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