All skills

redreference

For developersWebsites

Curated design references with a step-by-step taste loop.

Paste into Claude Code — it'll install this skill

Uses

design-inspirationMCPVoltAgent/awesome-design-mdsourceAre.naserviceAwwwardsserviceBehanceservice

What it does

Searches galleries (Are.na, OnePageLove, Awwwards, Behance, Land-book + a design-inspiration MCP) and builds a local interactive HTML page with screenshots, links and like/dislike ratings, then iteratively digs into more of what fits your taste.

How to use

  1. 1Say “find references for X” or /redreference <niche>.
  2. 2Browse the generated HTML page, rate 1–10.
  3. 3The skill captures your taste and finds similar work.
  4. 4You get a moodboard + a visual-taste-profile (feeds redloft).

When it triggers

“find design references for X”“curate inspiration for X”“moodboard for X”/redreference

Example

/redreference ceramics-studio landings — builds a gallery, learns from likes, returns a moodboard.

Updates

  • A third class of sources appeared — tokens instead of screenshots. Galleries (Are.na, Awwwards, Behance) answer "do I like it"; the new class answers "what numbers is it made of": a brand's exact hex values, font stacks, spacing and radii from the `VoltAgent/awesome-design-md` collection (MIT, 74 brands). The file comes from a local copy pinned to a commit and the brand name resolves through an allowlist — no URL is ever assembled from user input. On first fetch the file is scanned for injection payloads and enters the prompt inside inert delimiters: it is external DATA, not instructions. After the build, a round-trip check against the reference is mandatory.

  • Added to the RedSkills catalog.

Liked this skill? New breakdowns and updates land in the channel.