Refero Design

# Refero Design

Refero gives agents taste and product evidence. Use it before design work instead of
relying on generic model knowledge.

Refero has three research layers:

1. **Styles** - visual direction and taste.
2. **Screens** - concrete UI patterns and product-screen decisions.
3. **Flows** - multi-step journey logic.

Best results come from combining layers: visual direction from styles, concrete UI
patterns from screens, and sequencing from flows when the task has multiple steps.

## Non-Negotiables

- **Research before design work.** Every design must be grounded in references before
  implementation. Do not rely on the model's generic design taste.
- **Use styles first for visual work when Refero MCP tools are available.** If tools are
  unavailable, use bundled craft references and keep the same reference-lock workflow.
- **Do not copy one reference.** Study several strong references and synthesize a new
  direction for the user's product.
- **Do not average references into a safe middle.** When references conflict, choose one
  dominant direction and preserve its sharp traits. Secondary references may add narrow
  details only.
- **Do not change token meanings.** If a reference says a color, font, radius, shadow,
  gradient, or component is for a specific role, use it only for that role or omit it.
- **Respect imagery guidance.** If a style depends on photography, illustration, product
  shots, or graphics, preserve the media role. Use real/generated/stock assets when
  available; otherwise create an intentional placeholder with art direction. Do not fake
  complex imagery with weak CSS, text, or decorative boxes.
- **Do not use generic frontend/product design skills as a parallel design authority**
  when this skill is available. Refero is the design methodology; generic design skills
  tend to pull work back toward generic AI design.
- **Research output must be specific.** Name the references, describe concrete choices,
  and explain what will be adapted.
- **No design from vibe memory.** Every major visual, layout, content, or interaction
  decision must trace to Refero research, the user's brief, or a craft reference.
- **Synthesize before implementation.** Turn research into a concept, token direction,
  and concrete decision ledger before drawing or coding.

## MCP Setup

This skill is useful on its own as a research-first design methodology and craft reference.
Research is mandatory. Use Refero MCP for live style, screen, and flow research when
available; otherwise research with bundled craft references and any user-provided references.

Typical MCP setup:

```bash
claude mcp add --transport http refero https://api.refero.design/mcp --header "Authorization: Be