5 Claude Code Skills for Better Web Design

This stack gives Claude Code five separate jobs: choose a stronger visual direction, check interface rules, keep the design system in the project, find reusable components, and inspect the finished page in a real browser.

One accuracy note before you install anything: these are not all Claude Code skills. Taste Skill and Web Design Guidelines are agent skills. Awesome DESIGN.md is a reference library, 21st is a component registry with an MCP server and CLI, and Playwright CLI is a browser tool.

What this helps you do

Build one page from a clear visual reference, write the design decisions down, reuse components without importing a whole design library, and catch visible or functional problems before you call the page finished.

Before you start

You need:

• Claude Code and Node.js 18 or newer.
• A version-controlled website project you can run locally.
• The command that starts your site, such as npm run dev.
• One page to improve and, if useful, one public reference site you have permission to inspect.
• A clean Git checkpoint so you can review or undo every generated change.

Do the first run in a test branch. Community skills, MCP servers, and copied components can run code or add dependencies, so read the source and license before accepting them.

Terms to know

• Agent skill: a folder of instructions and supporting files that teaches Claude Code a repeatable workflow.
• DESIGN.md: a plain Markdown file in your project that records visual rules such as colors, type, spacing, components, and responsive behavior.
• MCP: a standard connection that lets Claude use an outside service as a tool.
• CLI: a command-line program. Claude Code can run it from the terminal.

Step-by-step

1. Install Taste Skill

Taste Skill helps Claude infer a design direction, avoid common AI-made interface patterns, and audit an existing redesign before changing it.

npx skills add https://github.com/Leonxlnx/taste-skill --skill design-taste-frontend

The current default is the experimental v2 skill. Re-running the same command updates an older install.

Taste Skill does not automatically turn any website URL into an exact color-and-spacing file. If you give Claude a reference page, ask it to inspect the visible design, name the reusable patterns, and write only the rules you want to carry into your own project. Check those observations against the real page before saving them.

2. Install Vercel's Web Design Guidelines

This skill reviews interface code against Vercel's current Web Interface Guidelines. Its checks cover accessibility, focus states, forms, motion, typography, images, navigation, theming, touch behavior, and performance.

npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines

Use it after the first implementation pass. Ask Claude Code to audit the files it changed and return findings as file:line notes before making fixes.

3. Add one DESIGN.md from Awesome DESIGN.md

Awesome DESIGN.md is a community collection of design-system documents based on publicly visible websites. It is not an official library from those brands.

1. Open the repository's design-md folder.
2. Pick one system that fits your page's job and audience.
3. Read the file and remove rules you do not want.
4. Save the edited file as DESIGN.md in your project root.
5. Tell Claude Code that DESIGN.md is the visual source of truth for this page.

Do not combine several brand files. Conflicting type scales, spacing rules, and component styles usually produce a page with no clear direction.

4. Connect 21st for components

21st is a community registry, not one component package. Its current setup connects Claude Code to the 21st MCP endpoint and lets the agent search, retrieve, and add components.

npx @21st-dev/cli@latest init --client claude

Follow the browser sign-in or API-key steps shown by 21st's current MCP setup page. Old Magic MCP keys were retired, so create a current 21st key if the connection reports that it is not authenticated.

After setup, ask Claude Code to search for a component by job and visual fit, not by a vague word such as “modern.” For example: “Find a compact pricing comparison with visible keyboard focus that fits DESIGN.md.” Review the source and license before adding it.

21st components are copied into your project in a shadcn-compatible registry format. You own the resulting code and can edit it, but you also own its maintenance.

5. Install Playwright CLI and its agent skills

Playwright CLI lets Claude open the site, read the page structure, resize the browser, interact with controls, and save screenshots.

npm install -g @playwright/cli@latest
playwright-cli install --skills

Start your local website first. Then Claude can run a desktop and mobile pass in separate browser sessions:

playwright-cli -s=desktop open http://localhost:3000 --headed
playwright-cli -s=desktop resize 1440 900
playwright-cli -s=desktop screenshot --filename=desktop.png

playwright-cli -s=mobile open http://localhost:3000 --device="iPhone 15"
playwright-cli -s=mobile screenshot --filename=mobile.png

Replace http://localhost:3000 with your real local URL. A screenshot checks appearance. Claude should also use the page snapshot to test the main link, form, menu, or checkout action with the keyboard.

Copy this

Paste this into Claude Code after the tools are installed. Replace the bracketed text first.

Improve [PAGE OR ROUTE] using [REFERENCE URL] only as visual direction.

1. Read the installed Taste Skill and the project's DESIGN.md before editing.
2. Inspect the reference and list the specific choices worth carrying over:
   color roles, type hierarchy, spacing rhythm, page width, corner treatment,
   imagery, component density, and motion. Do not copy logos, text, images, or
   proprietary brand assets.
3. Update DESIGN.md with the approved rules and note any project exceptions.
4. Build the page. Use 21st only when a component fits DESIGN.md and the existing
   stack. Review its source, dependencies, and license before adding it.
5. Run Web Design Guidelines against every file you changed. Fix the findings
   that apply and explain any finding you intentionally leave unchanged.
6. Start the local site. Use Playwright CLI to test the main user flow by keyboard
   and pointer at 1440 x 900 and on an iPhone 15 viewport. Save one screenshot at
   each size.
7. Compare both screenshots with DESIGN.md. Check hierarchy, spacing, text
   wrapping, contrast, focus visibility, overflow, loading, empty, and error states.
8. Return the changed files, audit findings, test result, screenshot paths, and any
   remaining risk. Do not call the page complete if the main flow fails.

Things to know

• A reference site is inspiration, not permission to copy its brand, writing, images, or proprietary assets.
• The Taste Skill default is actively changing. Pin the older design-taste-frontend-v1 only when your project needs that exact behavior.
• Web Design Guidelines is a code audit. It does not replace manual accessibility testing with a keyboard, screen reader, or real users.
• 21st can add third-party code and dependencies. Review the diff before running it in a production project.
• Playwright can prove that a tested path worked at a tested size. It cannot prove that every route, browser, device, and assistive technology works.
• Keep DESIGN.md in version control. When the design changes, update the file and the interface in the same commit.

If something goes wrong

Final check

The workflow passes only when all seven statements are true:

1. DESIGN.md names the page's color, type, spacing, layout, component, and responsive rules.
2. The implementation follows those rules without copying protected brand assets.
3. Every added 21st component has a reviewed source, license, dependency list, and visible diff.
4. Web Design Guidelines has no unresolved high-impact finding.
5. The main user action works with both pointer and keyboard.
6. Desktop and mobile screenshots show no clipped text, hidden controls, overflow, or broken hierarchy.
7. The production build passes before the page is published.

Official and primary sources: Taste Skill, Vercel Agent Skills, Awesome DESIGN.md, 21st MCP, and Playwright CLI.