Guide · Web Design
Agent skills for web design: structure, then surface, then review
Web design is several jobs stacked. Someone has to decide which pages exist and how they connect. Someone has to make a visit succeed. Someone has to give the surface a coherent look. And someone has to check that the result still works with a keyboard, a small screen, and a reader who did not design it. A skill that is good at one of those jobs is often silent on the others.
The mistake is to start with taste. A distinctive font on a confused page map is still a confused site. This guide orders the work, then shows how to tell a making skill from a review skill. Candidates come from the Web Design topic, ranked by observed search demand.
Quick scan: which layer needs a skill
| Layer | The question | A skill is useful when |
|---|---|---|
| Structure | What are the pages, and how do people move? | You are still arguing about navigation |
| Visit | Can someone finish the job they came for? | Flows, forms, or empty states are unclear |
| Surface | Does it look like one product? | Type, color, and spacing are being invented per page |
| Review | Does it hold up for other people and devices? | You need a named standard, not another opinion |
Three neighbors this topic is not
Search demand for "web design" sits next to three different jobs. Mixing them up is how a skill list gets installed and then ignored.
- Product design spans research, prototypes, and handoff in a design tool. That is the Designers topic, and the designers guide walks it by stage. Use it when the artifact is a Figma or Penpot file, not a page in a browser.
- Web development is the software lifecycle with weight on the browser and the server. The Web development topic is the right list when the question is how the application is built.
- A landing page has one offer and one action. Conversion structure lives on the Landing pages topic. A general web design skill will under-specify the offer.
Choose by layer
Structure before pixels
Information architecture is the map: navigation, hierarchy, URL patterns, and the flows between pages. The information-architecture skill on this topic is explicitly about that layer, and it says to do the work before visual design. If you cannot describe the page list without pointing at a mock, you are not ready for a visual skill.
The visit, including the words
User experience here means a visitor can complete the job. That includes content design: words written for the page, not pasted in from a doc. designing-beautiful-websites covers structure, flows, responsive layout, visual systems, content, and interaction states in one skill. Treat a skill that wide as a checklist you steer, not as proof that every layer is deep. For marketing copy specifically, the Copywriting topic is the narrower list.
A visual system, not a one-off screen
Anthropic's frontend-design skill is about aesthetic direction: type, a point of view, and avoiding the look of an untouched template. high-end-visual-design pushes the same idea with concrete spacing, shadow, and motion rules, and it tries to block generic defaults. Both are making skills. They do not replace a token pipeline or a design-system audit. If the product already has a system, a skill that invents a new palette is working against you. visual-design-foundations is the closer fit when you need type, color, spacing, and iconography written down as tokens.
Review against a document, not a vibe
Review skills are the ones worth trusting with a finding, because they name the rule they apply.
- Accessibility. The accessibility skill audits against WCAG 2.2. Ask it for contrast, names, focus order, and keyboard use. A passing note that says "looks accessible" is not a finding.
- Interface guidelines. Vercel's web-design-guidelines skill reviews UI code against the Web Interface Guidelines, which cover interactions, animation, layout, content, forms, and performance. It is a code review, so it wants the implementation, not a screenshot alone.
- Heuristics. design-review says it scores a UI with Nielsen's ten usability heuristics. Heuristics find confusion. They are not a substitute for WCAG.
web-design-reviewer is the odd one: it inspects a running site for layout breakage, responsive behavior, and visual consistency. Use it when a page is already up. It cannot design the page that does not exist yet.
How to judge a candidate
- Layer: structure, visit, surface, or review. Skip a skill that claims all four with no standard named.
- Input: a brief, a repository, or a URL. A review skill that cannot see the thing it is reviewing will improvise.
- Standard: WCAG, a published guideline, or a heuristic list you can look up. Taste is not a standard.
- System loyalty: does it extend the tokens you have, or generate a second look?
- Scope: this topic's skills are frontend and design. They are the wrong tool for an API or a database schema.
Where to start
One candidate per layer, to compare. The full list, including skills that implement pages in HTML and React, is on the Web Design topic.
| Layer | Candidate | What it is for |
|---|---|---|
| Structure | information-architecture | Navigation, hierarchy, URLs, and flows before visual design |
| Visit and surface | designing-beautiful-websites | UX and UI across structure, layout, content, and states |
| Surface | frontend-design (Anthropic) | Aesthetic direction when a new UI looks like a template |
| Guideline review | web-design-guidelines | Checks UI code against Vercel's interface guidelines |
| Accessibility | accessibility | WCAG 2.2 audit and repair |
| Heuristic review | design-review | Weighted review using Nielsen's heuristics |
popular-web-designs offers HTML and CSS drawn from real products such as Stripe, Linear, and Vercel. Read it as a pattern book. If the output is a page you will maintain in a codebase, the HTML topic is the closer list for the markup itself.
Before you install
Frequently asked questions
How is a web design skill different from a web development skill?
Web design skills plan and judge the site a visitor uses: structure, flows, visual design, responsive layout, accessibility, and content. Web development skills build the software around that, including servers, APIs, and a framework. If the task is a Next.js feature, start at Web development. If the task is whether the page makes sense, stay here.
Should I install a design skill and a review skill?
Yes, when you are both making and checking. A skill that chooses type and color will not reliably catch a contrast failure or a broken heading order. Pair a making skill with one review skill that names its standard.
Can I copy a famous site's design system?
Use a gallery of existing systems as a reference for hierarchy and components. Shipping another company's palette, type, and marketing layout as your own product is a brand problem, and it usually still looks generic once the content is yours.
Pick with confidence.These guides explain how to compare skills and choose the one that fits. Read each skill's own SKILL.md before installing it. How this works