Claude Design Skills: Build Sites That Don't Look AI

Claude design skills are instruction folders that push Claude past its default visual style, so pages stop looking like every other AI-generated site. Anthropic ships one itself, the frontend-design skill, and pairs it with Claude Design, a canvas for prototypes and slides.

Used together, they turn "functional" into "someone made choices here."

I learned this the practical way. I built the first version of this website with Claude Code, then read Anthropic's frontend-design skill while researching this article and found my own design on its list of generic tells. The second version you're looking at fixed most of them. Here's what I changed and how to do the same.

What is Claude Design?#

Claude Design launched on April 17, 2026 as an Anthropic Labs product. You describe what you need, Claude builds a first version on a canvas, and you refine it through chat, inline comments, direct edits and adjustment sliders.

Teams use it for interactive prototypes, product wireframes, pitch decks, marketing pages and design explorations. According to the getting-started guide, the essentials are:

• Plans: Pro, Max, Team and Enterprise, currently in beta. Enterprise admins must switch it on.
• Where: claude.ai/design on the web, or the sidebar of the Claude desktop app.
• Usage: it shares your plan's limits with chat, Claude Code and Cowork.
• Design systems: Claude can build your team's colors, type and components from your codebase, and /design-sync in Claude Code pulls a design system in.
• Exports: zip, PDF, PPTX, standalone HTML, Canva and a handoff bundle for Claude Code.

You can also work from the terminal. Add the Claude Design MCP server with claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp, then run /design-login.

The AI design tells, straight from Anthropic's skill#

The most useful design document I've read this year is Anthropic's frontend-design SKILL.md. It tells Claude to act like a studio design lead whose client has already rejected cliché proposals, and it names the patterns AI-generated design clusters around right now:

1. A warm cream background with a high-contrast serif and a terracotta accent.
2. A near-black background with a single bright accent color.
3. A broadsheet layout with hairline rules and dense newspaper columns.
4. The SaaS card kit: identical rounded cards, the same soft shadow, gradient washes.
5. Template chrome on every page: all-caps eyebrow labels, meta strings joined with middle dots, monospace data labels, and an arrow glued to link text.

It also flags typographic habits: accenting one word of a headline in italic or color, all-caps labels, and numbered markers like 01, 02, 03 on content that isn't a sequence. On motion, it says fade-and-slide entrances on every section read as generated, and that one orchestrated moment lands better.

The skill is careful to say none of these are wrong for every brief. They're defaults, not choices, and they appear no matter what the page is about.

What I changed on this site#

My first build was dark with an orange accent, uppercase monospace eyebrows above every heading, numbered cards and a fade-in on every section. It was polished and it was generic. After reading the skill I kept what's specific to my subject and cut the rest:

• Kept: the Obsidian-style knowledge graph behind the hero, because it comes from the actual subject, AI brains built on linked notes. That became the one bold element.
• Kept: the live terminal, because Claude Code sessions are literally what I sell.
• Removed: all-caps eyebrow labels, now short sentence-case labels.
• Removed: 01/02/03 numbering on cards that aren't steps.
• Removed: italic color accents from every heading except the hero.
• Removed: scroll-triggered fades on every section, leaving one page-load sequence.

It's a small list, and it made the site feel more like a person designed it.

How to build your own Claude design skill#

A design skill is a normal skill: a folder with a SKILL.md file. If you haven't written one, start with my guide to Claude skills. The version that works best follows Anthropic's two-pass process:

---
name: designing-pages
description: Plan and build distinctive web pages and UI. Use when creating a landing page, redesigning a screen, or when the user asks for design, layout, or visual polish.
---
 
# Designing pages
 
## Pass 1: plan before code
1. Name the subject, audience and the page's one job.
2. Write a token system: 4-6 named hex colors, typefaces and their roles,
   a layout concept with an ASCII wireframe, and 3 principles.
3. Compare the plan to what you'd produce for any similar page.
   Revise every part that matches the generic default, and say why.
 
## Pass 2: build and critique
- One bold element; everything else quiet.
- No all-caps labels, no single-word color accents, no numbered markers
  unless the content is a real sequence.
- One orchestrated motion moment at most. Respect reduced motion.
- Responsive to mobile, visible focus states, accessible contrast.
- Screenshot the result and remove one decorative element before delivering.

Claude Academy has a more elaborate take, a design-elevation skill with separate reference files for an interrogation checklist, a technique catalog and a reference library of design exemplars. It works well because each reference file only loads when needed, so a large catalog costs nothing until Claude uses it.

Tips for better results with Claude and design#

• Give it real content. Placeholder copy produces placeholder design. The skill itself warns that templated copy makes a page feel templated.
• Ground choices in the subject. A dashboard for financial analysts and a toy for children should look nothing alike. Tell Claude which one you are.
• Ask for two or three directions before picking one; comparing is faster than guessing.
• Keep your brand in the repository. Put tokens and component rules where Claude reads them every session, such as a CLAUDE.md file or the design skill itself.
• Review with screenshots. In Claude Code, a browser preview plus a screenshot catches more than reading JSX.

Design is one of the fastest places to feel the difference between using Claude and directing it. If you want to practise that on your own projects, it's part of what we build in the Claude Code course. And if you're still deciding which tool to design and build in, compare Cursor vs Claude Code.