AnalogxAlphaLabs

Front-end design resources

Five things I saw recommended for making Claude's front ends look less generic. I read the sources, built the same four pages with each one, and looked at the results. The pages are all in the bake-off.

1. Taste Skill

Skill · Leonxlnx/taste-skill · MIT

An "anti-slop" skill that pushes Claude toward the look of a good company site: plain copy, one visual system, one section per screen, quiet hover motion. It sets a page type first, and only tech pages get shader effects. It is the most opinionated of the five and ships its own build and check scripts.

On the test it gave the clearest identity and avoided the stock purple gradient look. It leans quiet, so an "energetic" brief needs an explicit nudge.

Top pick

2. UI/UX Pro Max

Skill · nextlevelbuilder/ui-ux-pro-max-skill · MIT

A lookup catalog rather than a taste filter: 67 styles, 161 palettes, 57 font pairings and 99 UX rules, with a search script that recommends a design system for a brief. Good for picking a palette quickly and for accessibility checks.

On the test it produced the most generic result. Its data had no row for "energetic" and "healthcare" together, so it defaulted to a calm cyan. It did catch a real contrast failure on a button.

Useful for palettes and checks

3. Design Motion Principles

Skill · kylezantos/design-motion-principles · MIT

A motion-only skill with two modes, create and audit. It weights three designers' published ideas (Emil Kowalski for speed and restraint, Jakub Krehel for polish, Jhey Tompkins for play) by project type, and gates every animation on how often a user would trigger it.

I paired it with Taste Skill. Layout and type came from Taste and motion from this one. Stills can't show motion, so that half of the result still needs a live look.

Pair with a visual skill

4. Awesome Claude Design

Reference collection · VoltAgent/awesome-claude-design

About 68 ready-made DESIGN.md files modeled on well-known products, grouped by category. You hand one to Claude Design and it builds a starter kit. A sibling repo, awesome-design-md, targets general coding agents.

It is a file collection, not a skill, so I did not build a page from it. Its value is as a model for writing a DESIGN.md of our own.

Reference, not tested

5. Design.MD Chrome

Unverified

I could not find a source for this one. My guess is a browser extension that pulls a DESIGN.md out of a live website, but I have not confirmed that, so I left it out of the test.

Not verified

Control: no skill

The same brief with no design guidance, to see what each skill actually adds. It held up well and was the most playful of the four, but it used emoji icons and had no consistent system behind it.

How to read this. One pass per variant, all written by the same model, judged from screenshots. Nobody ran the skills' own scripts, so Taste Skill's full build and check workflow was not exercised, and motion was not judged at all. Treat it as a first look at what is out there, not a benchmark.