Why improve an existing website with skills?

If you’ve ever had an interface generated by an AI, you know the result. Inter font, purple to blue gradient, nested cards, gray text on colored background, centered hero and glassmorphism for a modern look. The same site comes up everywhere, regardless of the project.

This phenomenon is often called AI slop.

The problem is not that the models are incapable. They know typography, OKLCH contrasts and vertical rhythms. But they do not apply them spontaneously. They lack a leadership vocabulary and a clear list of what to avoid.

Skills change that. They give Claude Code specialized commands to audit, correct and polish an existing interface without starting from scratch.

Prerequisites to get started

Before you get started, make sure you have these items.

  • An active Claude Pro account

  • Claude Code installed on your machine

  • A website project already existing on your computer

Step by step guide

Step 1: Open Claude Code in your project folder

Launch your terminal, go to the root of the project, then type the command claude to start the session.

Step 2: Install the design skill

In your terminal, run the command npx skills add pbakaus/impeccable.

The skill loads automatically. You get 23 specialized controls that drive every dimension of design, like typography, color, layout, movement, micro-interactions, and UX copy.

Step 3: Define the context of your project

In Claude Code, type the command /impeccable teach.

The skill asks you a series of structured questions. It seeks to understand who your site is aimed at, what style you want to adopt, and what aesthetics you explicitly reject.

The responses are saved in the PRODUCT.md and DESIGN.md files at the root of the project. These files are reread with each order, so you never repeat the same brief.

Step 4: Audit the site in its current state

Type the /impeccable audit command. You can also target a specific page with a command like /impeccable audit landing.

The skill scans your code, compares it to 25 documented anti-patterns, then sends you a report rated by severity from P0 to P3. For example, it can report purple gradients, overused fonts, nested cards, insufficient contrasts or broken typographic hierarchies.

This is the diagnosis. It all starts from there.

Step 5: Correct typography and layout

Then continue with /impeccable typeset, then /impeccable layout.

The first command sets the typographic hierarchy, sizes and vertical rhythms. It also avoids popular fonts, unless your DESIGN.md file explicitly justifies them.

The second command fixes spacing, alignments, line lengths and undersized clickable areas.

Step 6: Affirm the visual direction

Depending on the desired result, choose the command that corresponds to the design gesture.

  • /impeccable bolder to make a section more assertive

  • /impeccable quieter to calm a noisy area

  • /impeccable colorize to rework the palette in OKLCH

  • /impeccable delight to add justified micro-interactions

Each order knows in which mode it works, brand or product, and adapts its vocabulary accordingly. A landing page is not a dashboard.

Step 7: Throw the final pass

Type the command /impeccable polish on the page you want to deliver.

This command aligns your code with existing tokens, runs the anti-pattern detector again and returns you a page ready to ship.

Step 8: Test on an existing page

Open a file of your site, then ask Claude Code to use the impeccable skill to audit the page, correct the anti-patterns in P0 and P1, apply a final polish, then propose a more assertive variant of the hero in brand mode.

Go further with AI and design

This guide shows you how to transform a generic website into a more professional interface using Claude skills. To continue, you can apply the same method to your existing sales pages, dashboards or product screens.

Read next

To relate this topic to a more concrete business workflow: