> ## Documentation Index
> Fetch the complete documentation index at: https://doc.refero.design/llms.txt
> Use this file to discover all available pages before exploring further.

# Examples

> Simple workflows for design research with Refero MCP

## Designing or redesigning a page

For visual work, start with styles. Then use screens for concrete UI patterns.

<Steps>
  <Step title="Search visual directions">
    Prompt: `Search Refero styles for developer tool websites with product screenshots`

    Try a few angles, such as `premium fintech website with restrained typography` or `data infrastructure website dark technical style`.
  </Step>

  <Step title="Open the strongest styles">
    Prompt: `Get the full Refero style for Depot`

    Full styles give tokens, typography, spacing, surfaces, component rules, imagery guidance, and do/don't rules.
  </Step>

  <Step title="Ground the UI in real screens">
    Prompt: `Search Refero screens for pricing page annual monthly toggle on web`

    Pick relevant screen UUIDs and get details for them before making layout decisions.
  </Step>

  <Step title="Synthesize, then design">
    Use styles for visual language and screens for structure. Do not copy one source directly; choose one primary direction and borrow only specific details from secondary references.
  </Step>
</Steps>

## Understanding a user flow

When you need to design a multi-step experience, use flows:

Prompt: `Search Refero flows for subscription cancellation with retention offer on web`

Pick a flow and get the full breakdown:

Prompt: `Get Refero flow 11201`

You'll see each step with the user's goal, action, system response, related screen UUID, screenshot thumbnail, and screen metadata.

<Tip>Use `related_queries` from the flow response to discover adjacent flows and screens.</Tip>

## Competitive analysis

Research how specific companies handle a feature:

* `Search Refero screens for Notion settings on web`
* `Search Refero flows for Stripe checkout on web`
* `Search Refero styles for Linear developer tool dark website`

Then get details for the strongest results:

* use `refero_get_style` for visual language
* use `refero_get_screen` for screen structure and UI details
* use `refero_get_flow` for journey logic

## Expanding from one good screen

If one screen is close to what you need, use similar screens:

1. Search: `pricing page annual monthly toggle`
2. Pick a screen UUID from the results.
3. Prompt: `Find similar Refero screens for 20c61554-3c93-4848-aeb1-e3c1ba62d99d`

This is useful for comparing variations without writing many new searches.

## Visual inspection

Most research can use text metadata first. When exact visual details matter, request the image:

Prompt: `Get the thumbnail image for Refero screen 20c61554-3c93-4848-aeb1-e3c1ba62d99d`

Use `thumbnail` for quick inspection and `full` when you need fine UI details.

## Batch research

When you already know which references you want, request them together:

* multiple styles with `style_ids`
* multiple screens with `screen_ids`
* multiple flows with `flow_ids`

Keep batches modest. Full styles and full flows can be large, so smaller batches are easier for agents to compare accurately.

## Tips for effective research

* **Start with styles for visual taste.** Screens are not the primary source for brand direction when styles are available.
* **Search by what exists on the screen.** Use concrete terms like `feature comparison table`, `empty state`, or `destructive action confirmation`.
* **Use platform filters.** Screens and flows require `web` or `ios`.
* **Use `page` for pagination.** Do not use old `limit` or `offset` parameters.
* **Use UUIDs for screens.** Numeric IDs are for flows.
* **Preserve roles.** If a style marks a color as CTA-only or decorative-only, keep that role or skip it.

## Next

<Columns cols={3}>
  <Card title="Tools" icon="wrench" href="/mcp/tools">
    Current tools, parameters, and response shapes.
  </Card>

  <Card title="Refero Skill" icon="paintbrush" href="/skill/overview">
    Research-first design methodology for agents.
  </Card>

  <Card title="Refero for Business" icon="building" href="/mcp/business">
    Integrate Refero as a design data layer.
  </Card>
</Columns>