AI skills design bake-off

The same four briefs, built with different Claude design resources. Read down a column to see one skill across page types, or across a row to compare skills on the same prompt. Click any cell for the full page. What each resource is: front-end design resources.

No skill

Control: same brief, no design guidance.

Taste Skill

Anti-slop skill: plain copy, one system, quiet motion.

UI/UX Pro Max

Catalog of styles, palettes, fonts and UX rules.

Taste + Motion

Taste for look, Design Motion Principles for motion.

Chronicl landing page

Private on-device family care log for iPhone. Inviting and techy, but energetic.

Most playful; emoji icons. Sharpest tech-plus-energy balance. Calm cyan. Safe, most generic. Most polished and inviting.

YouTube redirect page

QR-code and video-description landing page. Auto-redirect only with ?go=1.

Dark navy, giant coral button. Quiet cream and ink. Lowest energy. Most energetic; stock gradient look. Strongest identity; build-log card.

AnalogxAlpha home page

Mock-up of the current home page restyled: real copy, newsletter form that sends nothing.

Violet and yellow stickers; loudest. Clearest; real copy as product cards. Dark navy and orange; the form is the hero. Warm cream, teal and orange; the wave in a frame.

Project Mercury: G1 page

Mock-up of the game page restyled, using the existing concept art. Marked concept art, not gameplay.

Dark indigo with a huge yellow G1; art framed. Full-bleed art with a solid text box. Playful rounded type; purple and pink. Most atmospheric; text over the art is harder to read.

Experiments, not production pages: placeholder content, marked noindex, judged from screenshots at 1440 and 390 wide (animation was not reviewed). These pages load fonts from Google Fonts, unlike the rest of the site.