01
It starts by itself
issue labelled design. Runs in GitHub Actions or Claude Code routine.
- ↻ issue labelled design
issues.labeled == design
referodesign · 12K installsRefero 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
- 1Copy
- 2Paste into Claude Code, Codex or Cursor
- 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.
When does it start? How does it check its work? What does it remember?
One run, step by step.
Then it stops.
Stops after one design task and at most one retry.
- 01
Write the brief
The agent drafts a short design brief and asks you only for facts that would change the result.
- 02
Research styles
It runs several refero_search_styles queries and fetches the strongest with refero_get_style.
- 03
Screens and flows
For concrete patterns it uses refero_search_screens, and for multi-step journeys refero_search_flows.
- 04
Choose a direction
For a big redesign it shows three reference-locked options and you pick one.
- 05
Lock and ledger
It writes the reference lock and a decision ledger where each choice has a source.
- 06
Build
It implements the design and keeps token and media roles from the references.
- 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.
It writes only in its own folder and asks you before anything goes out.
- Writes only inloops/refero-design-loop/**
- Talks toapi.refero.design
- Sendsnothing
- Your OKIt asks you before anything goes out.
Is it for you?
Use it when it fits.
Read 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
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
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?