Guide

How Claude Design Skills works

A design skill is a small, portable package that teaches Claude Code to build in a specific visual style. Here’s the whole workflow, start to finish.

Browse the library

Filter web aesthetics by category, from SaaS minimalism to brutalism, cyberpunk and CRT terminals.

Preview it live

See a shared set of real components — nav, hero, cards, forms — restyled entirely by the style's token map.

Install as a skill

Copy SKILL.md, tokens.json and tokens.css, or grab the zip, and Claude Code builds in that exact style.

What’s inside each skill

SKILL.md

The instruction file Claude Code reads — style summary, signature elements, fonts and the full token map.

tokens.json

Machine-readable design tokens — colors, radius, shadow and type — ready to import into any build pipeline.

tokens.css

Drop-in CSS custom properties. Apply to your root and every component restyles from the variables.

tailwind.css

A Tailwind v4 @theme block — utilities like bg-accent and font-display come straight from the style's tokens.

DESIGN.md

Google's open DESIGN.md format — import the style straight into Claude Design and other compatible tools.

Four ways to use a style

Copy & paste

Every artifact has a one-click Copy button on its style page — paste SKILL.md into your own skills folder, or the CSS straight into your project.

SKILL.md · tokens.json · tokens.css · tailwind.css

Download the zip

Grab the complete skill folder from any style page, then unzip it into your Claude Code skills directory.

unzip <slug>.zip -d ~/.claude/skills/

claude.ai

Upload the downloaded zip as a custom skill.

Settings → Capabilities → Skills → Upload skill → <slug>.zip

shadcn/ui

Apply any style as a theme to a shadcn project — colors, radius and fonts map onto the standard variables, dark mode included where the style defines one.

npx shadcn add <site-url>/r/<slug>.json

Ready to pick a style?

Preview all 147 styles live, then copy the one you want.

Browse the library