← Back to Skills / Marketplace / clean
SKL · 01● FREE

Clean.

The style that makes apps look like a funded startup shipped them — no decoration, just everything in the right place.

● Live preview · Clean demo
● This is real CSS, not a screenshot
↗ New tab
01 · The Vibe

This is the style that makes an app look like professionals built it without trying to show off. No loud colors, no flashy effects — just everything in exactly the right place, with the right amount of breathing room. Think Linear, Craft, Notion, or Stripe. Clean isn't boring. Done well, it's the hardest style to pull off because every detail matters and there's nothing decorative to hide behind. When Claude gets it right with this skill, your app looks like a funded startup shipped it.

● Looks Like
LinearCraftNotionStripeVercel DashboardApple's developer tools
02 · Best For / Avoid If
＋ Best For
+SaaS dashboards and productivity tools
+B2B apps and internal tools
+Anything you're showing to clients or employers
+Apps where users need to focus on the content, not the design
+A solid foundation before adding more personality later
× Avoid If
×You want your app to have a strong visual identity or personality
×You're building something creative or consumer-facing where standing out matters
×Your content is sparse — clean design needs substance to look intentional, not empty
03 · Design Philosophy
01

Whitespace is the design

In most AI-generated apps, whitespace is what's left over after everything else is placed. In clean design, whitespace is placed first. The space between elements communicates hierarchy and importance as much as the elements themselves do.

02

One thing at a time

Every screen has one primary action. Every section has one point. Clean design works by resisting the urge to say everything at once — it trusts the user to move through the interface and find what they need.

03

Consistency over creativity

Every button looks the same. Every card follows the same pattern. Every heading uses the same weight. Creativity in a clean design happens at the layout level — not by making things look different from each other.

04 · Use With Claude / Cursor
Claude
01Open your Claude project
02Click 'Add files' in the Project Knowledge panel
03Drop in SKILL.md and DESIGN.md
04Start a new chat in the project — Claude follows the spec
Cursor
01Place SKILL.md and DESIGN.md in your repo root
02Open .cursor/rules and add @SKILL.md @DESIGN.md
03Restart Cursor for the rules to apply
04Build normally — Cursor references both files per request
★ PRO TIP

Before building with Claude Code, drop SKILL.md and DESIGN.md into Claude Design first. Use it to generate mockups and nail the visual direction — then hand those references to Claude Code. You'll get significantly higher quality output than going straight to code.

05 · Watch Out For
! WARNING
Empty doesn't mean clean
If your content is sparse, the design will look unfinished rather than intentional. Add real copy and real data to your prompts.
! WARNING
Too many shades of gray
Claude tends to add lots of subtle gray variations when going for clean. Keep it to three: background, surface, and border. That's it.
! WARNING
Defaulting to blue
Clean design with a default blue primary button is exactly what AI slop looks like. Pick one specific accent color and name it explicitly in your prompt.
! WARNING
Forgetting hover states
Clean apps feel polished because every interactive element responds slightly on hover. Ask Claude to include hover states on all clickable elements.
● 07 · Download

Two files. That's it.

Drop them into your Claude project or Cursor rules and build normally. No CLI, no package manager, no setup.

↓ SKILL.MD↓ DESIGN.MD