Skills

Free skill for Claude Code

Websites that don’t look like AI made them.

Web Designer gives Claude a studio’s process, then checks every page on every screen and every computer.

Free. It arrives by email, or sign in to download it now.

It designs in motion.

Not just pages. Pieces that move, for any product: heroes, cards, menus, modals.

  • Relay, an object drawn in dots, turning under your pointer

  • Harbor, feature cards whose line drawings draw themselves

  • Pebble, a glass speaker, lit and turning in 3D

  • Tally, an agent rendered live in characters

Four briefs. One website.

An invoicing app, an AI note-taker, an architecture studio, a coffee roaster. This is what Claude builds for each, on its own.

  • Invoicing app, by Claude on its own: warm paper, a serif headline with an italic word, a pill above it.

    1Invoicing app

  • AI meeting notes, by Claude on its own: warm paper, a serif headline with an italic word, a pill above it.

    2AI meeting notes

  • Architects, by Claude on its own: warm paper, a serif headline with an italic word, a pill above it.

    3Architects

  • Coffee roaster, by Claude on its own: warm paper, a serif headline with an italic word, a pill above it.

    4Coffee roaster

Same four briefs, with Web Designer.

  • Ledgerline, the same brief with Web Designer: a station departure board.

    Ledgerline, as a station departure board

  • Murmur, the same brief with Web Designer: a murmuration of starlings.

    Murmur, as a murmuration of starlings

  • Halden & Moss, the same brief with Web Designer: a model on the table.

    Halden & Moss, as a model on the table

  • Forager, the same brief with Web Designer: a greengrocer's crate label.

    Forager, as a greengrocer's crate label

Web apps too.

Not another row of KPI cards. The screen is the work.

A courier dispatch dashboard by Claude on its own: a sidebar, a row of metric cards, a map card and a list card.
Claude on its own
The same brief with Web Designer: a green steel T-card board where the jobs that need you and the drivers' runs own the screen.
With Web Designer

Checked on every computer.

Most sites are only checked on one MacBook. Ledgerline’s first pass had nine problems elsewhere: Safari overlapped the price, a small phone scrolled sideways, German text collided. All fixed before anyone saw it.

  • Ledgerline on Windows at 125%.

    Windows at 125%

  • Ledgerline on Windows High Contrast.

    Windows High Contrast

  • Ledgerline on Linux.

    Linux

  • Ledgerline on iPhone.

    iPhone

  • Ledgerline on Android.

    Android

  • Ledgerline on 320 wide.

    320 wide

  • Ledgerline on German-length text.

    German-length text

What you get

  • Three directions, then one.

    Your first screen, designed three different ways before it commits.

  • Real code, in your project.

    React, Next.js, Tailwind, shadcn, Vue, Svelte or plain HTML.

  • Pieces that move.

    Dot matrices, 3D objects, ASCII, line art that draws itself. Heroes, cards, menus, modals.

  • Checked before you see it.

    Scanned for AI slop, tested on every computer, scored by a critic.

Make a site worth screenshotting.

Free. It arrives by email, or sign in to download it now.

For Claude Code on Mac, Windows and Linux.