My design reference stack for working with Claude Code

1. First, decide what you are looking for

No single site is good for every design task. Pick a source by the kind of decision you need to make.

• For landing pages: Lapa Ninja, Land-book and SaaSFrame.
• For product screens and flows: Mobbin, Page Flows and SaaSFrame.
• For visual direction: Awwwards, then check that the idea is still usable and accessible.
• For work rules the agent can read: Refero Styles.

2. A five-minute process

• Pick one source that fits the type of screen.
• Pick one screen or flow, not a random collection of twenty images.
• Attach a link or screenshot and say exactly what to take from it.
• Write down explicitly what not to copy: logo, copy, brand colors and content.
• Ask for a real check on desktop and mobile after the work is done.

3. Refero Styles

Examples of DESIGN.md files that translate visual direction into rules an agent can apply again and again.

• Good when you need to lock down colors, typography, spacing and components.
• Use it as a starting point for your own brand rules.
• Do not copy another brand's file without adapting it to your product and audience.

4. Mobbin

A library of product screens and flows from real products. Especially useful before building onboarding, sign-up, checkout or a settings screen.

• Search by screen type or product pattern.
• Check how many steps the flow has, not just what the first screen looks like.
• Take a structural principle, not a screenshot to copy.

5. Page Flows

A good source for understanding complete user journeys, including the sequence of screens and the decisions between steps.

• Useful when you need to see what happens before and after a key action.
• Look for the friction points, confirmations and errors inside the flow.
• Give the agent the sequence, not just one nice frame in the middle.

6. SaaSFrame

Focused references for SaaS products: marketing pages, onboarding, pricing and emails.

• Especially good when building a B2B product or a work tool.
• You can compare the product screen against the marketing page that sells it.
• Check that the reference matches the complexity level of your product.

7. Land-book

A broad collection of landing pages and websites, useful for finding structure, hierarchy and pacing between sections.

• Pick a reference from the same business category or the same type of audience.
• Check what shows up above the fold before scrolling.
• Separate good structure from a visual effect that does not serve the message.

8. Lapa Ninja

A large gallery of landing pages, split by category, color and page type.

• Good for a quick search for hero, social proof, pricing and CTA.
• Pick only two or three principles from each reference.
• Keep your own content and offer at the center.

9. Awwwards

A strong source for art direction, typography and motion, but not every site there is a model of usability.

• Use it to search for a visual language, not as automatic approval for every interaction.
• Check accessibility, speed and readability before adopting an effect.
• If the animation hides the action, it does not belong in the product.

10. The prompt I give the agent

Paste the reference and the task in the marked spot. The prompt forces the agent to explain what it is taking, what it is not copying and how it checks the result.

This is a visual reference, not a template to copy:
[link or screenshot]

The task:
[which screen or page needs to be built]

Analyze the reference for:
1. Information hierarchy.
2. Typography and scale.
3. Spacing and density.
4. Color, surfaces and contrast.
5. Component structure and mobile behavior.

Before writing code:
- Write down the three principles you are taking from the reference.
- Write down which parts you are not copying.
- Adapt the principles to my brand, my content and my users.

After the work is done:
- Open the screen on desktop and mobile.
- Compare it to the reference.
- Show the three biggest gaps.
- Fix only after you have shown the gaps.

11. Success check

• You can explain in three sentences which principles were taken from the reference.
• The product does not look like a copy of the original brand.
• The hierarchy is clear even without effects.
• The main action works on desktop and mobile.
• The final screenshot was checked against the reference, not just against the code.

12. If the result is still generic

• Replace a broad inspiration collection with one precise reference.
• Write down the first thing the user needs to understand and do.
• Cut down the number of colors, button styles and heading sizes.
• Ask the agent to show gaps before it runs another round.
• Check whether the problem is really design, or the message and the product are still unclear.

13. The sources

• Refero Styles: DESIGN.md files agents can work from.
• Mobbin: product screens and flows.
• Page Flows: recorded user journeys broken down into steps.
• SaaSFrame: focused examples for SaaS products.
• Land-book and Lapa Ninja: landing pages and websites.
• Awwwards: art direction, typography and motion.