A Claude Code skill·v0.1.0

Give Claude design taste. In one command.

A free skill that teaches Claude opinionated visual design for marketing sites. Restraint, hierarchy, and the boring fundamentals that make interfaces look expensive — wired into every prompt.

npm install @kopplin-co/claude-web-design-skill

Installs SKILL.md into ~/.claude/skills/web-design/. Restart Claude Code to pick it up.

How it worksView on GitHub
Pairs withNext.jsTailwindshadcn/uiMIT licensedZero config

What Claude designs without the skill, vs. with it.

Same prompt. Same model. Different defaults. Hierarchy, restraint, and taste are now table-stakes from the first prompt.

Without skill
example.com
SaaSify Pro
HomeFeaturesPricingBlogDocsLoginSign Up Free
🚀 New! Now with AI

The #1 All-In-One Solution To Boost Your Productivity By 10x With Powerful AI-Driven Features

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Start Free Trial →Watch DemoPricingContact Sales
Speed Boost
Lorem ipsum dolor sit amet consectetur.
Power Boost
Lorem ipsum dolor sit amet consectetur.
Ease Boost
Lorem ipsum dolor sit amet consectetur.
AI Boost
Lorem ipsum dolor sit amet consectetur.
Sync Boost
Lorem ipsum dolor sit amet consectetur.
Trust Boost
Lorem ipsum dolor sit amet consectetur.
LOGO
LOGO
LOGO
LOGO
LOGO
LOGO
LOGO
LOGO
With skill
example.com
S
Saasify
ProductPricingDocsGet started
For modern teams

Software your team will actually open on Monday.

A faster, quieter way to run async work. No new ceremony, no third dashboard.

Get startedRead the docs →
LINEARVERCELRAYCASTNOTION

Illustrative. Real output varies by prompt; the consistent direction is the point.

What it teaches Claude

The boring fundamentals that separate good from generic.

No new framework. No design tokens you have to learn. Just opinionated, production-shaped guidance Claude reaches for automatically.

Typography & scale

Two-typeface defaults, Tailwind-mapped scale, line lengths that read like editorial — not lorem ipsum.

Color tokens, not hex chaos

A six-token palette in CSS variables. One accent, used sparingly. Clean dark and light parities.

Spacing & rhythm

An 8-point grid by default. Generous section padding. Whitespace that reads premium, not cheap.

Hero & section patterns

Hero formulas that answer the three questions in three seconds. Anti-patterns called out by name.

Component conventions

Buttons, forms, navigation, and cards with sane defaults. shadcn/ui-flavored, but stack-agnostic.

Accessibility floor

WCAG AA contrast, semantic markup, visible focus states, keyboard nav. The floor, not the ceiling.

The 10-point review

Claude grades the page before you do.

Ask Claude to review a layout and it runs the same checklist a senior designer would. Score, three highest-leverage fixes, done.

Average score before / after5.4 / 10→8.2 / 10
  1. 01

    Hierarchy

    Can a visitor tell what the page wants them to do in 3 seconds?

  2. 02

    Typography

    Two typefaces or fewer. Consistent scale. Readable line lengths.

  3. 03

    Color

    One clear accent. Contrast passes WCAG AA without squinting.

  4. 04

    Spacing

    Whitespace is generous and consistent. The 8-point grid holds.

  5. 05

    CTAs

    The primary action is obvious from anywhere on the screen.

  6. 06

    Mobile

    Works at 375px without horizontal scroll or 12-pixel tap targets.

  7. 07

    Above the fold

    Value prop and CTA visible on a 1366×768 laptop without scrolling.

  8. 08

    Consistency

    Buttons, cards, and headings styled the same across every page.

  9. 09

    Trust signals

    Testimonials, logos, or social proof live near the value prop.

  10. 10

    Performance

    Images via next/image. Fonts via next/font. No avoidable bloat.

How it works

Three steps. About thirty seconds.

No API keys. No config. No new model. Just one of Claude Code’s built-in skill slots, filled with opinionated taste.

Step 01

Install the skill

One npm install. The post-install script copies SKILL.md into ~/.claude/skills/web-design/.

Step 02

Restart Claude Code

Open a new session so Claude Code picks up the new skill on startup.

Step 03

Ask Claude to design

Say things like "design a hero section" or "review this landing page". Claude activates the skill automatically.

Terminal
npm install @kopplin-co/claude-web-design-skill

Then run claude in a new terminal window.

Claude Code
> design a hero section for a B2B
  SaaS that helps compliance teams
  ship audit reports faster

Claude consults SKILL.md automatically. No special prefixes.

Inside SKILL.md

Nothing hidden. The actual skill, on display.

Five short excerpts from the file Claude reads. The full document is ~16KB of restraint, defaults, and named anti-patterns.

SKILL.md·Typography
Read on GitHub →
// Hero headline
text-5xl md:text-6xl lg:text-7xl
font-semibold tracking-tight leading-[1.05]

// Section heading
text-3xl md:text-4xl lg:text-5xl
font-semibold tracking-tight

// Body
text-base leading-7

// Line length: 60–75 char.
// Use `max-w-prose` on long-form blocks.
CLI included

For when npm scripts aren’t enough.

The package ships a small web-design binary. Reinstall, uninstall, or sanity-check the install path without digging through npm internals.

Local install? Prefix with npx.

~/projects · zsh
  • $ web-design install(Re)copies SKILL.md into ~/.claude/skills/web-design.
  • $ web-design uninstallRemoves ~/.claude/skills/web-design and forgets the skill.
  • $ web-design wherePrints the install path. Useful when sanity-checking from a script.
  • $ web-design --helpShows all commands and flags.
FAQ

The honest answers.

Real objections, not vanity questions. If yours isn’t here, the issue tracker is open.

Ship pages that look like you hired a designer.

Install the skill once. Restart Claude Code. Spend the rest of the afternoon arguing about copy instead of color tokens.

npm install @kopplin-co/claude-web-design-skill
Star on GitHubView on npm