1. Habit
  2. Skills
  3. Refero Design skill
referodesign · 12K installs

Refero Design skill
Runs by itself, issue labelled design.

Designs grounded in real references.

Install the Refero Design skill and make it a habit: follow https://gethabit.dev/skills/referodesign/refero-design.md

  1. 1Copy
  2. 2Paste into Claude Code, Codex or Cursor
  3. 3It runs by itself

12K installs323 starsMIT licenceSource on GitHub ↗

Refero Design

by referodesign · 12K installs

The skill

The refero design skill gives agents a research-first method for UI, product and web design.

Only when you ask.

The habit

Designs grounded in real references.

↻ Runs by itselfissue labelled design

How the habit works.
You don't have to.

Three questionsWhen does it start? How does it check its work? What does it remember?

01

It starts by itself

issue labelled design. Runs in GitHub Actions or Claude Code routine.

  • ↻ issue labelled design
  • issues.labeled == design

02

It checks its work

quality gate plus approval. If a check fails, it tries again.

  • ✓reference lock is written before any code
  • ✓every decision ledger row names a source
  • ✓at least two full styles fetched with refero_get_style
  • ✓rendered result compared against the locked reference

03

It remembers

locks and ledgers. The next run reads it first: earlier reference locks and decision ledgers.

loops/refero-design-loop/ledger.md

One run, step by step.
Then it stops.

Stop ruleStops after one design task and at most one retry.

  1. 01

    Write the brief

    The agent drafts a short design brief and asks you only for facts that would change the result.

  2. 02

    Research styles

    It runs several refero_search_styles queries and fetches the strongest with refero_get_style.

  3. 03

    Screens and flows

    For concrete patterns it uses refero_search_screens, and for multi-step journeys refero_search_flows.

  4. 04

    Choose a direction

    For a big redesign it shows three reference-locked options and you pick one.

  5. 05

    Lock and ledger

    It writes the reference lock and a decision ledger where each choice has a source.

  6. 06

    Build

    It implements the design and keeps token and media roles from the references.

  7. 07

    Quality gate

    It runs the quality gate questions and compares the render with the lock, then fixes drift.

What it may do.
Nothing more.

Safe by defaultIt writes only in its own folder and asks you before anything goes out.

Is it for you?
Use it when it fits.

Quick checkRead both lists. If the left one sounds like you, the Refero Design skill helps.

Use it when

  • ✓ You design a landing page
  • ✓ You redesign a product screen
  • ✓ You polish a dashboard

Skip it when

  • – You only change backend code
  • – You need print layout

Questions

Refero Design skill, answered.

Does it work without the Refero MCP tools?

Yes. The skill then uses its bundled craft references and keeps the same lock and ledger steps.

When does it ask me something?

When the brief misses facts that matter, and when a large redesign needs you to pick one of three options.

How do I install the Refero Design skill?

Copy the prompt at the top into your agent. It installs the skill from referodesign/refero_skill and sets up the habit. Or run npx skills add referodesign/refero_skill --skill refero-design.

Is the Refero Design skill free?

Yes. It is published under MIT. Habit is free too.

Refero Design. Now as a habit.

Install the Refero Design skill and make it a habit: follow https://gethabit.dev/skills/referodesign/refero-design.md

  • Free
  • No account
  • Undo in one line

All referodesign skills →More design skills →

Works in

  • Claude Code
  • Codex
  • Cursor
  • ChatGPT
  • Claude app

Made by referodesign, published under MIT. Habit links to the original and never changes it. Is this your skill?

Copying didn't work here. Select the line and copy it by hand.