Drinks Brand Site
A one-file brand site and shop for a small drinks maker, 34 routes: photo fan hero, recipes that rescale, stockist map, subscriptions, bag and demo checkout.
Web design with AI Skills
Agent Skills for web design work: responsive storefronts, marketing sites and portfolios with real interactions and a QA pass at three widths. For small brands, freelancers and founders who need a finished site, not a mockup.
Checkout is not open yet: it opens once our payment provider finishes its review, and downloads open with it. Nothing is charged until then.
Pick a web design Skill to start with
17 Skills · 12 free
A landing page or full site
Developer Tool Site
A warm light one-file site for an issue tracker or developer tool, 12 views with a full dark theme: a live product window, working demos, pricing and every form.
E-bike Store
A one-file e-bike store with 35 routes: studio hero, range calculator, compare, a page per bike, test-ride booking, bag and demo checkout.
Gifting App Site
A warm cream one-file site for a greeting-card or gift-card app, 19 pages: a tilted phone hero, a card editor you can use, a searchable gift shop with a basket, pricing and help.
Gradient Juice Site
A one-file site for a juice, drinks or food brand, with 31 routes: a gradient campaign hero with drifting cream ribbons, an arched flavor rail, a crate builder, bag, demo checkout and stockist map.
$4.99 or with Premium
Pet Store
A one-file pet-supply store with 39 routes: live-count filters, a page per product, refill planner, bed chooser, wishlist, bag and demo checkout.
Pharmacy Storefront
A one-file pharmacy store with 30 routes: filterable shop, a page per product, a working bag, demo checkout and pharmacist services.
SaaS Product Site
A dark one-file marketing site for a software or AI product, 5 routes: a working app preview, a pricing toggle, help search, live events and a changelog.
Sneaker Store
A one-file footwear store with 27 routes: sage campaign hero, popular tabs, filters, a page per pair with width and size choice, size finder, bag and demo checkout.
$4.99 or with Premium
A portfolio or personal site
Brand Studio Site
A 21-route marker-drawn site for a one-person packaging studio: a cut-out portrait in a cobalt blob, a tilted client ribbon, four solid-colour services, case studies, an estimator and a form.
Designer Portfolio Site
A white sheet in a lime frame for an independent designer, 19 pages: a portrait hero, a moving client strip, services with prices, six case studies with working mock-ups and a brief form.
Poster Designer Portfolio
A printed-sheet portfolio for a poster or print designer, 14 pages: grey grid paper, a one-word display title beside a cut-out portrait, eight posters with live type, project pages and a brief form.
A local business site
Dental Clinic Site
A 13-page website for a dental practice: photo-led home, a page per service, team, prices and a real booking tool.
Neighborhood Café Site
A complete one-file website for a café or bakery: filterable menu, live open-now status, booking form and local-search data.
More web design Skills
Interview Podcast Site
A one-file home for an interview show, 31 routes: a dark hero card with an audio card, a docked player with chapters and a queue, a filtered archive, episode pages with transcripts, and guests.
$4.99 or with Premium
Sports Club Site
A one-file site for a tennis, padel or any club that sells sessions, with 24 routes: a rounded sky-and-court hero, a live quick-booking bar, timetable, plan finder, court map and booking.
$4.99 or with Premium
Travel Agency Site
A one-file site for a small travel or walking company with 30 routes: a mountain-photo hero with one giant word and a glass search bar, filterable journeys, a booking request and a quiz.
$4.99 or with Premium
What web design Skills do
The same kind of work comes back again and again. A Skill settles the format once, so each new round only needs your material.
- One format, every time. The structure and style are written into the Skill, so this month's version matches last month's.
- Built from your material. The agent fills the design with your notes, figures and photos and points out anything that is missing.
- Ready to hand over. You get files you can edit, present or publish, checked before the agent says it is done.
Find web design Skills for your role
Every role page gathers the Skills that people in that job reach for most.
How to build a website with a Skill
Three steps in Claude Code, Codex, Cursor or similar, with no design tools involved.
- Add the Skill folder. Download the ZIP and unzip it into your agent's Skills folder. Each agent page shows where that folder is.
- Call it with a slash. Type a slash and the Skill's name, then describe what you need in your own words.
- Review and ship. Open what it made, ask for changes in the same conversation, then publish it or pass it on.
Where each agent keeps Skills
The folder to unzip into, from each agent’s own docs.
- Claude Code Skills
~/.claude/skills/ - Codex Skills
~/.agents/skills/ - Cursor Skills
~/.cursor/skills/ - Gemini CLI Skills
~/.agents/skills/ - OpenCode Skills
~/.config/opencode/skills/ - GitHub Copilot Skills
~/.copilot/skills/ - Google Antigravity Skills
~/.gemini/config/skills/ - OpenClaw Skills
~/.openclaw/skills/ - Kimi Code Skills
~/.kimi-code/skills/ - TRAE Skills
~/.trae/skills/
Web design with a Skill or a plain prompt
A prompt alone gets you a first draft. A Skill gets you the same finished format on every run.
| Aspect | A plain prompt | A Skill |
|---|---|---|
| Format | Changes from run to run | Fixed and tested |
| Content | Often padded with made-up examples | Written from your own material |
| Next round | Start over and hope it matches | Swap in new material and run it again |
Getting more out of web design Skills
A few habits that make the first run count.
- Collect your material first. Put the facts, figures and images in one folder and name it in your request. The agent reads from there instead of guessing.
- Keep one Skill per job. Use the same Skill each time this job comes round. The output stays consistent and people learn where to look.
- Review in the same conversation. Ask for changes right after the first run. The agent still has the context, so edits are quick and stay on style.
FAQ
Questions about web design Skills
Which agents can run these Skills?
Any agent that reads SKILL.md folders, including Claude Code, Codex and Cursor. Only the folder you unzip into changes; each agent page shows it.
Can I reuse a Skill for the next round?
Yes. That is what it is for. Run it again with new material and you get the same format with the new content.
Will it make up facts?
The Skills are written to work from what you provide and to flag gaps. Still read the result before you send it out.
Are free Skills cut down?
No. Free Skills are complete. Premium Skills come one at a time or with a plan.
Other use cases
Hand the web design work to your agent
Pick a Skill, unzip one folder and ask for the result in plain words. $9.99 / month · $79 / year · $169 once, or $4.99 for one Skill.
See pricing