Claude Web Design SkillClaude Web Design Skill
A Claude Code skill·by Kopplin Co.·v0.1.0

Give Claude Web Design Skills in one command.

Claude Web Design Skill is 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

As featured in

  • Investment Loop
  • Digital Word
  • The Bakersfield Tribune
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.

No. Installing the package writes a single SKILL.md file into ~/.claude/skills/web-design/. It never reads or modifies your project files. Uninstall removes only that directory.

Not directly. This is a Claude Code skill — it relies on Claude Code's skill loader and its automatic activation logic. The principles inside SKILL.md are stack-agnostic, but the auto-activation only triggers in Claude Code.

No. The skill itself is free and runs locally. You still need Claude Code installed and a Claude account to use Claude Code, but the skill adds zero new costs.

Defaults, not requirements. The skill leans Next.js + Tailwind + shadcn/ui because they're the dominant marketing-site stack today, but the principles (hierarchy, restraint, the 10-point review) transfer cleanly to any framework.

Override it in your prompt or in your project's CLAUDE.md. Project-level instructions take precedence over skills. The skill is a strong default, not a straitjacket.

Run npm uninstall @kopplin-co/claude-web-design-skill. The preuninstall script removes the skill directory. If for some reason that step is skipped, run npx web-design uninstall.

MIT-licensed, no telemetry, no upsell. Built by Kopplin Co. as a public release.

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