Most AI design problems start before you write the prompt. Refero, Details.so, and Design Spells give your AI tool a visual vocabulary to work from. Setup takes five minutes.
Type "design a landing page for my SaaS" into an AI tool. You get something that could belong to any of ten thousand companies. Clean, competent, forgettable.
That is not a prompt problem. It is an input problem.
AI design tools reproduce statistical averages. Without a reference, they give you the median of everything they were trained on. The fix is to give the AI a real example before you ask it to build anything. When you show it a specific visual reference that matches what you want, the output changes completely. Better inputs. Better outputs. Every time.
Three free sites cover the reference layers you need. Refero handles product-level screen patterns. Details.so handles overall site aesthetics, and already comes with the prompts written for you. Design Spells handles micro-interactions, the small details that make something feel finished rather than generated. Used in sequence, they give your AI tool a complete visual brief instead of a vague instruction.
Refero: Real Screens From Real Products
Refero is a library of actual screenshots and user flows from live products. Not Dribbble concepts. Not agency mockups. Real app screens, organized by screen type.
Site: refero.design
When you are designing a specific screen, whether a pricing table, a dashboard empty state, or an onboarding step, Refero shows you how products that already solved the same problem built it. You search for the screen type you need and get back examples from apps people actually use today. You see how top products handle every transition, what they show when data is missing, how they structure a three-tier pricing table.
How to use it:
- Search for the specific screen you are building. Use narrow terms: "settings security", "onboarding step 2", "dashboard empty state", "checkout flow step 3".
- Find 2 or 3 examples that match the tone of your product.
- Screenshot or copy the URL. Paste it into your AI prompt as a reference.
Copy the Refero Prompt
Copy this.
I want to design a [SCREEN TYPE] for [PRODUCT NAME]. Here are 2 references I pulled from Refero that match the feel I want: [PASTE URLs OR DESCRIBE SCREENSHOTS]. Recreate this style for my product. My brand color is [COLOR]. My primary action is [CTA TEXT].
Your first real run: Go to refero.design and search for a screen you are actively building this week. Find one example that fits. Screenshot it. That screenshot is your first reference.
The mistake that makes it fail: Searching too broadly. "Dashboard" returns hundreds of results across every industry. "Dashboard empty state B2B SaaS" narrows it to what actually applies. Search for the screen state, not just the screen name.
Details.so: Handpicked Sites With Ready-to-Use Prompts
Details.so curates production websites and pairs each one with a pre-written style description. You find a site that looks like what you want your product to look like, copy its prompt, and paste it straight into your AI tool.
Site: details.so
The library updates weekly. Each entry covers what makes that specific site work: the layout choice, the typography decisions, the scroll behavior, the hover effects. The pre-written prompt means you do not have to translate what you are seeing into design language. That work is already done.
This is where business owners without design vocabulary get the biggest return. You do not need to know what "asymmetric grid with oversized type" means. You find a site that looks right. You copy the prompt. You give it to Claude with your product brief attached.
How to use it:
- Browse by category (hero sections, navigation, footers, scroll effects) or scroll the weekly feed.
- Find a site that matches the feeling you want.
- Copy its style prompt.
- Drop it into your AI tool followed by your product brief.
Copy the Details.so Prompt
Copy this.
[PASTE THE DETAILS.SO STYLE PROMPT HERE] Apply this aesthetic to a landing page for [MY PRODUCT]. My product is [ONE-LINE DESCRIPTION]. Keep the visual tone but replace all placeholder content with mine. Primary CTA: [YOUR CTA]. Color palette: [YOUR COLORS IF DIFFERENT].
Your first real run: Browse Details.so for five minutes. When you find a site that looks like what you would want your own product to look like, copy its prompt. Save it. Do not worry about using it yet — having it ready is the whole point.
The mistake that makes it fail: Treating the style prompt as the complete brief. It handles aesthetics only. It does not handle structure, messaging, or your page's conversion goal. Pair it with a layout reference from Refero and you have a complete visual direction.
Design Spells: Interactions That Make It Feel Finished
Design Spells catalogs micro-interactions and animations from products across the web. The small things most users never consciously register, but that make a product feel polished rather than generated.
Site: designspells.com
A button that lifts 4px on hover. A modal that slides in from the right with a 200ms deceleration. An input field that shifts left to reveal a checkmark on completion. None of these are structurally important. All of them register with users as the product being "premium" without them knowing why.
Browse by category: button states, page transitions, loading states, form interactions. Each entry shows the interaction in context. You see what triggers it, what moves, and how long it takes. You then give that behavior as a specific instruction rather than a vague request.
How to use it:
- Browse by category to find an interaction that fits the feeling you want for your UI.
- Note the behavior precisely: what triggers it, what element moves, the timing.
- Give that description as a specific instruction to your AI tool or developer.
Copy the Design Spells Prompt
Copy this.
Add this interaction to [THE ELEMENT]: when the user [TRIGGER], [WHAT MOVES] should [DESCRIBE BEHAVIOR — e.g. "lift 4px with a soft drop shadow that fades in over 150ms"]. Use CSS transitions, no JavaScript libraries. Performance target: 60fps.
Your first real run: Go to designspells.com and find one interaction for a button or card you are building. Write the behavior description in plain English. That is your first interaction spec.
The mistake that makes it fail: Starting here. Design Spells is the polish pass. It comes after the layout and aesthetics are locked. Opening with micro-interactions sends you into detail work on a structure that may still change.
The 3-Step Reference Workflow
Each site solves a different layer of the same problem. The sequence is what makes it work.
| Step | Tool | What you're solving |
|---|---|---|
| 1. Structure | Refero | How should this screen type be organized? What layout patterns work for this specific page? |
| 2. Aesthetic | Details.so | What visual style matches your brand direction? Copy the pre-written prompt. |
| 3. Polish | Design Spells | Which micro-interactions give the UI its character? Describe the behavior as a spec. |
You do not need all three every time. A Refero search is often enough for a specific screen. Details.so is most useful at the start of a project when you are setting the overall visual direction. Design Spells comes last, after structure and aesthetics are locked.
Copy the Combined Brief
Copy this.
I'm building a [SCREEN TYPE] for [PRODUCT TYPE]. Visual reference: [DETAILS.SO STYLE PROMPT OR DESCRIPTION OF WHAT YOU FOUND] Layout reference: [DESCRIBE OR LINK TO THE REFERO EXAMPLE THAT MATCHES] Interaction: When [TRIGGER], the [ELEMENT] should [MICRO-INTERACTION FROM DESIGN SPELLS] My brand: [COLOR, FONT, TONE]. My CTA: [TEXT]. Generate the component.
One practical step worth taking after your first project with these: keep your references in a folder. Once you have found a few that match your product's visual direction, you reuse them across every screen you build. The first reference hunt is the slow part. After that, you are pulling from a library you already built.
What This Does Not Fix
These three sites solve the reference gap. They do not solve everything.
Refero works best for screen-level patterns in digital products. If you are designing print materials, physical products, or highly custom UI, the library is thinner and the search terms are less useful.
Details.so's pre-written prompts describe visual style, not structure or copy. They tell your AI tool what the design should look like. They do not tell it what the page should say or how it should convert.
Design Spells requires someone who can implement the interaction. Describing a micro-interaction precisely is useful. Actually building it still needs CSS or a framework that supports it. The description gets you 90% of the way to a specification. The last 10% is execution.
None of these replace judgment. You are still choosing which references match your product. The workflow handles the translation layer between what you want and what you type into the prompt. The selection is yours.
If You Commented INSPO
Here are the three links:
- Refero: refero.design
- Details.so: details.so
- Design Spells: designspells.com
The PDF version of this guide with all three prompt templates is at the bottom of this page.
One Thing to Do This Week
Open Refero. Search for the specific screen you are building right now. Find one example that fits. Screenshot it.
That screenshot is the first real design reference in your brief. Everything else follows from there. Three minutes of searching changes what your AI produces.
Done.