Heroes & Sidekicks · Design

The Design Library

Everything we've gathered for the Coherence redesign and branding, in one place. Every link goes straight to the original, nothing hides inside a social post, and each entry says what it is, why it's worth opening, and what it costs.

40 resources · prices and access checked Thursday 1 October 2026 · bookmark this page

If you only open three

The fastest way to get value from this list today.

01 · STUDY
ReferoSee how 400+ real products designed any screen you're working on. Free sample, $10 a month for everything.
02 · BORROW A LOOK
Refero Styles2,000+ complete design systems from real products. Find the feel Coherence should have and hand it to Claude.
03 · GET INSPIRED
InsporaFree, updated hourly, mostly video, so you see how things move, not just how they look.

Nothing matches that. Try a shorter word, or switch off "Free to look at only".

THE RECIPE

How the AI design tools fit together

From a guide shared with us (the "PIXELS Guide"), boiled down. This is the order a studio would work in, and it's how to combine the tools in sections 03 and 04 so they don't pull against each other.

  1. Write a five-line brief. What Coherence is, who it's for, three words for the feeling, the one action a visitor should take, and one piece of proof.
  2. Pick a look. Choose a design system from Refero Styles or getdesign.md, or capture a site you love with the DESIGN.md extractor.
  3. Plan before building. UI UX Pro Max proposes the structure, colours, fonts and the mistakes to avoid. Approve or push back before anything is built.
  4. Build with taste. Taste Skill builds it and checks its own work against the "generic AI look" before showing it.
  5. Add motion last. Design Motion Principles adds a few purposeful movements, then audits them.
  6. Review like a picky designer. Check at phone width and desktop, fix the five weakest things, run the Vercel guidelines check.

The rule that makes it work: tell Claude who wins when tools disagree. The chosen design system decides colours and fonts, UI UX Pro Max decides page structure, Taste Skill decides layout. And borrow a brand's feel, never its logo, name or words.

THE BRIEF

20 UX rules to hand the AI

From a post called "The UX Laws in My CLAUDE.md" (1 September 2026). We couldn't find where it was originally published, so the full text lives here. It's a ready-made instruction file: the builder pastes it into Claude Code's instructions and every screen gets built to these rules. It's also a good checklist for reviewing a screen yourself.

  • Fewer choices per screen
  • Big, easy targets
  • Familiar patterns
  • Group related things
  • Break content into chunks
  • Respond within 0.4 seconds
  • One standout main button
  • Key actions close by
  • Essentials first
  • End flows on a high
  • Show progress
  • Keep it simple
  • Sensible defaults
  • Prevent errors
  • Make errors recoverable
  • Consistent patterns
  • Connect related elements
  • Fewer steps
  • Reveal complexity gradually
  • Make the finish feel close
Show the full instruction file (copy and paste ready)