7 Claude Code Skills for Better Web Design

This stack gives Claude Code seven separate jobs: choose a stronger visual direction, check interface rules, keep the design system in the project, find reusable components, inspect the finished page in a real browser, redesign a page you already built, and swap in polished components for the parts people click.

Three of these are agent skills: Taste Skill, Web Design Guidelines, and Hallmark. The other four are companion tools. Awesome DESIGN.md is a reference library, 21st is a component registry with an MCP server and CLI, Playwright CLI is a browser tool, and Glassy UI is a free component library.

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.

If you already have a page that looks AI-made, you can also give it a new design without losing your words or your signup form, then compare the old and new versions side by side.

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.
• For Hallmark's browser checks: Google Chrome and puppeteer-core (install it with npm i -g puppeteer-core). Without them, Hallmark still runs its other checks.
• For Glassy UI: a React 19 project with Tailwind CSS 4 that has been set up with shadcn.

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.
• Theme: in Hallmark, a finished visual material (paper, type, color, surfaces, and texture) that a page is built in.
• React: the code a lot of web apps are built with. A React component is one reusable piece of the interface, such as a menu or a switch.
• shadcn: a common way to copy component source code straight into your project, so you own and can edit it.

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.

6. Install Hallmark to redesign a page you already built

Hallmark is a free design skill for Claude Code and Codex. It redesigns an existing page and keeps your words, links, form fields, and headings. It changes the layout, type, color, and spacing using one of fifty themes.

Run this in your terminal:

npx skills add nutlope/hallmark -g

The -g flag installs it for every project. Leave it off to install it only in the current folder. To install it for one tool only, add --agent claude-code or --agent codex. Restart Claude Code or Codex afterward.

Hallmark never touches an existing page unless you name it. Run the audit first. It only reports. It lists what reads as machine-made on the page and changes nothing:

/hallmark audit ./index.html

Replace ./index.html with the path to your page or app folder. Read the report, then run the redesign with a short brief:

/hallmark redesign ./index.html

Hallmark offers three themes that fit the brief, builds the page, and records every link, field, and heading before it starts. The redesign fails its own check if one of them goes missing. When it finishes, it gives you a side-by-side before and after. Open both versions in your browser and click the form on the new one.

In Codex, type $hallmark instead of /hallmark. If Hallmark does not start on its own, name it in your request, such as "use hallmark to redesign this page." Say keep the layout if you only want a restyle, or polish if you only want the machine-made details fixed.

7. Use Glassy UI for the parts people click

Glassy UI is a free, open-source library of glass-style React components. It covers the pieces people touch, such as menus, switches, docks, dialogs, tabs, panels, and toasts. Each one comes with its real code and motion, so it works when you click it.

Use it after Claude Code has built the basic version of your app:

1. Open the component list and pick the piece that needs help, such as Glass Menu.
2. Copy the install command shown on that component's page and run it in your project folder. For the menu it looks like this:

npx shadcn@latest add @glassyui/glass-menu

3. Or give the component's page link to Claude Code and ask it to add the component for you.
4. Tell Claude Code where it goes, such as "Use this menu for the account settings screen."
5. Change the words and the colors to fit your app.

The component's source lands in your project, usually under components/glassyui. You should see the new file appear and the menu open and close in your running app.

A screenshot of a nice menu only gives Claude Code a picture to imitate. The component page gives it the real code and the way the piece moves.

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.

Redesign an existing page with Hallmark

Run the audit line first. Read the report, then run the redesign. Replace the bracketed text.

/hallmark audit [PATH TO YOUR PAGE]

/hallmark redesign [PATH TO YOUR PAGE]
Redesign this landing page for [WHAT THE BUSINESS IS, SUCH AS A NEIGHBORHOOD COFFEE SHOP]. Keep the words and the [FORM TO KEEP, SUCH AS THE SIGNUP FORM]. Keep every link, form field, and heading working. Show me the themes you would use before you build, then give me a side-by-side before and after.

Add a Glassy UI component

Paste this into Claude Code once the basic app works.

Add the Glassy UI component from [COMPONENT PAGE LINK, SUCH AS https://glassyui.com/components/glass-menu] to this project using the install command on that page. Use it for [WHERE IT GOES, SUCH AS THE ACCOUNT SETTINGS MENU]. Keep its behavior and motion. Change only the labels and colors to match [DESIGN.md OR YOUR BRAND COLORS]. Then start the app, open and close the component with the mouse and the keyboard, and tell me which files changed.

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.
• Hallmark is free and MIT licensed. Its pages are self-contained HTML and CSS. It uses openly licensed photos and credits each one on the page.
• Glassy UI's component library is free and open source under the MIT license. Its ready-made page templates are a separate paid product. Glassy UI also has React Native versions for iOS and Android apps.
• Glassy UI components need React 19 or newer, Tailwind CSS 4, and a project set up with shadcn.

If something goes wrong

Final check

The workflow passes only when every statement for the tools you used is 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.
8. If you used Hallmark, the audit ran first, and the redesigned page keeps every word, link, and form field from the original.
9. If you used Glassy UI, each added component opens, closes, and responds to the keyboard in your running app.

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