---
title: Best resources for designing with Claude Code
slug: building-with-claude-code
url: "https://dontmakeitugly.com/collections/building-with-claude-code"
resources:
  - vercel-web-interface-guidelines
  - shadcn-mcp
  - playwright-mcp
  - refero-styles
  - typeui
  - vercel-agent-skills
  - anthropic-skills
  - chrome-devtools-mcp
  - ui-ux-pro-max
  - checklist-design
createdAt: "2026-09-02"
updatedAt: "2026-09-03"
---

# Best resources for designing with Claude Code

The MCP servers, skills and guidelines that make a coding agent produce better-looking work.

Coding agents are only as good as their context. These are the things worth setting up before you ask for a single screen: fresh docs, a browser so the agent can see its own work, a component registry it can install from, and a rules file that spells out what "good" means. Most of it works in Cursor and Codex too.

## Resources, in order

1. [Web Interface Guidelines](https://dontmakeitugly.com/resources/vercel-web-interface-guidelines.md) — A concise, agent-readable checklist of what a well-built web interface must get right.
   Agent: Excellent.
   Drop this into your AGENTS.md or CLAUDE.md and a whole class of ugly mistakes disappears: missing focus rings, disabled-looking inputs, layout shift, orphaned headings. It's the checklist Checklist Design would write for agents.
2. [shadcn MCP server](https://dontmakeitugly.com/resources/shadcn-mcp.md) — Let your agent browse, search and install components from any shadcn registry.
   Agent: Excellent. Install: `npx shadcn@latest mcp init --client claude`
   This turns "add a nice pricing section" into something the agent can actually do end-to-end. Set it up once and every registry in this directory becomes reachable.
3. [Playwright MCP](https://dontmakeitugly.com/resources/playwright-mcp.md) — Give your agent a browser so it can see and test what it built.
   Agent: Excellent. Install: `claude mcp add playwright -- npx @playwright/mcp@latest`
   The most underused design tool for agents. "Take a screenshot at 375px wide and fix anything that overflows" is a prompt that only works if the agent can actually look.
4. [Refero Styles](https://dontmakeitugly.com/resources/refero-styles.md) — DESIGN.md files extracted from 2,000+ real product websites, written for agents.
   Agent: Excellent.
   This solves a specific problem well. "Make it feel like Linear" is a useless prompt; a DESIGN.md that says what Linear's type scale, radii and greys actually are is not. Treat the extracted systems as a starting point to edit into your own, not a licence to clone someone's brand.
5. [TypeUI](https://dontmakeitugly.com/resources/typeui.md) — Design skills, UI prompts and a shared design system, handed to your agent over MCP.
   Agent: Excellent.
   The interesting part is the workflow, not any single prompt: a design system that lives somewhere your agent can query, instead of a rules file that drifts. The public GitHub repo holds the skills and prompts if you'd rather read them than connect the server. We haven't confirmed the pricing tiers, so check before you commit a team to it.
6. [Vercel Agent Skills](https://dontmakeitugly.com/resources/vercel-agent-skills.md) — Installable skills that teach agents React, Next.js and web design best practices.
   Agent: Excellent. Install: `npx skills add vercel-labs/agent-skills`
   A good example of what "agent resources" should look like: opinionated, specific, machine-readable. Install the design-guidelines skill and ask your agent to review a page against it.
7. [Anthropic Skills](https://dontmakeitugly.com/resources/anthropic-skills.md) — Anthropic's public skills repository, including skills for front-end and design work.
   Agent: Excellent.
   Worth reading even if you don't use Claude, because the skills spell out the difference between a templated interface and a designed one. The front-end skill is a clear articulation of "don't make it ugly".
8. [Chrome DevTools MCP](https://dontmakeitugly.com/resources/chrome-devtools-mcp.md) — Let your agent inspect, debug and profile a live Chrome tab.
   Agent: Excellent. Install: `claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest`
   When something is visually wrong and you can't explain why, this lets the agent inspect the actual computed styles and layout instead of guessing from source.
9. [UI/UX Pro Max](https://dontmakeitugly.com/resources/ui-ux-pro-max.md) — A popular open-source design-intelligence skill with styles, palettes and font pairings for agents.
   Agent: Excellent. Install: `npm install -g ui-ux-pro-max-cli && uipro init --ai claude`
   Broad rather than deep, but a genuinely useful way to make an agent commit to a specific direction (a named style, a real palette, a real font pairing) instead of defaulting to purple gradients.
10. [Checklist Design](https://dontmakeitugly.com/resources/checklist-design.md) — Checklists of what every common screen and component should include.
   Agent: Good.
   Paste a checklist into your prompt and your agent stops forgetting the empty state and the focus ring. Cheap, effective, and a good way to learn what "complete" means.

Work down the list in order. Each linked page says what the resource is, why it's here and how an agent can use it.