Skip to main content

​
Designing or redesigning a page

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

Search visual directions

Prompt: Search Refero styles for developer tool websites with product screenshotsTry a few angles, such as premium fintech website with restrained typography or data infrastructure website dark technical style.
2

Open the strongest styles

Prompt: Get the full Refero style for DepotFull styles give tokens, typography, spacing, surfaces, component rules, imagery guidance, and do/don’t rules.
3

Ground the UI in real screens

Prompt: Search Refero screens for pricing page annual monthly toggle on webPick relevant screen UUIDs and get details for them before making layout decisions.
4

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.

​
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.
Use related_queries from the flow response to discover adjacent flows and screens.

​
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

Tools

Current tools, parameters, and response shapes.

Refero Skill

Research-first design methodology for agents.

Refero for Business

Integrate Refero as a design data layer.