4 Free Claude Code Skills That Stop Your App Looking AI-Made

Purple gradients, glows and emoji buttons are how people spot an AI-made app. These four free Claude Code design skills fix it.

Hallmark builds a new page from one of fifty themes and checks it in a real browser for AI tells. unslop strips the AI look out of an app you've already built. better-interface gives any screen one ranked design review. reanimate copies an animation you love into your own code, then proves it moves the same.

Three of them install with one line, and the fourth is a quick copy into your skills folder.

Below are the install lines for Mac, Linux and Windows, a first command to try with each, and what each one fixes.

How do you install each design skill?

What you need: Claude Code, Git, and Node.js for the npx installs (Hallmark asks for version 18 or later).

1. Hallmark

npx skills add nutlope/hallmark -g

The -g installs it for every project. Its browser checks also need puppeteer-core and Chrome; without them, only the static checks run.

npm i -g puppeteer-core

Then ask for a new page:

/hallmark [describe the page you want]

Hallmark won't touch a design you already have unless you name it. To check or rebuild an existing page:

/hallmark audit ./index.html
/hallmark redesign ./src/app

2. unslop

On a Mac or Linux:

git clone https://github.com/heydamir/unslop
mkdir -p ~/.claude/skills && cp -r unslop/skills/unslop ~/.claude/skills/

On Windows (PowerShell):

git clone https://github.com/heydamir/unslop
New-Item -ItemType Directory -Force "$HOME\.claude\skills" | Out-Null
Copy-Item -Recurse "unslop\skills\unslop" "$HOME\.claude\skills\"

Then point it at a screen you've already built:

/unslop this dashboard

To work from a live site's link, it also needs Playwright. Run this in your project's folder:

npm install -D playwright
npx playwright install chromium

3. better-interface

npx skills add jakubkrehel/skills

Or install the set as a Claude Code plugin:

/plugin marketplace add jakubkrehel/skills
/plugin install interfaces@interfaces

Then ask for a review:

Use better-interface to review my homepage.

It only reports. Read the list, then ask Claude to fix the top three findings.

4. reanimate

reanimate needs Bun 1.1 or later and runs on macOS or Linux. Its author hasn't tested it on Windows.

npx skills add NiazMorshed2007/reanimate -g

The installer asks which agents to set up; add -a claude-code to skip the question. The first run downloads ffmpeg and a Chromium browser, about 250 MB together, and there are no API keys. Then say what you want, where it is and where it should go:

/reanimate the hero entrance on https://example.com, into components/Hero.tsx

What does each design skill fix?

Each skill takes a different job: a new page, an app you've already built, a review of any screen, and motion.

Hallmark: a new page that doesn't look machine-made

Hallmark is a free, MIT-licensed design skill made by Together AI, with over 46,000 stars on GitHub. It deals three themes from a catalogue of fifty, builds the page around what the visitor came to do, then checks it in a real browser at eight widths for the tells that read as machine-made, like an eyebrow above every heading or one coloured word in a headline. A reviewer with fresh eyes gets the last word before you see it.

unslop: strip the AI look from the app you already have

unslop is a free skill by Damir Sokolovsky, with about 7,000 stars on GitHub in its first week. It lists every sign of slop first (purple gradients, glows, emoji labels, shouty copy, uneven spacing), proposes a direction from your product before it edits anything, then fixes the screen pass by pass like a designer's redline review. It works in Next.js, React, Vue, Svelte, Tailwind or plain HTML and CSS, and its CC BY 4.0 licence lets you use, change and share it, commercially too, with credit to Damir Sokolovsky and a link back to the repo.

better-interface: one ranked review of any screen

better-interface is one skill from Jakub Krehel's free, MIT-licensed set of 14, which has over 10,000 stars on GitHub. Krehel is the design engineer behind the magazine Interfaces. It reviews a screen, a flow or a whole interface for accessibility, layout, writing, typography, colour and UI polish, and returns one report of at most 15 findings, ranked by how much each one hurts the people using it.

reanimate: copy the motion you love, and prove it matches

reanimate is a free, MIT-licensed Claude Code skill with over 1,000 stars on GitHub. It records an animation from a live site, a screen recording, an mp4, a GIF or a Lottie file, rebuilds it in what your project already uses (CSS, Framer Motion, GSAP or three.js), then films the copy the same way and compares the two until the numbers match, usually in 2 to 5 rounds. It copies the motion and leaves the look to you: fonts, images and code from another site still belong to their owners, so make sure you may use what you copy.

Read our insights on AI implementation, or take the free AI bottleneck test to find the jobs costing your team the most time.