Save Websites to a Design Inspiration Collection

Save websites to your design inspiration collection by giving every reference a clear reason to keep it. A useful collection helps you answer questions such as "Where have I seen a strong hero section?" or "Which sites handle dense product information well?" It is more valuable than a long list of attractive links because each saved website supports a future design decision.

Use a simple collection method

For every website, save four details:

1. The website name and URL so you can return to the source.
2. The part worth studying, such as the hero, navigation, pricing section, typography, or mobile layout.
3. The detail you noticed, such as generous whitespace, a dark grid, oversized proof, or a compact feature layout.
4. The decision it may inform, such as "use for SaaS landing page structure" or "reference for a restrained call to action."

This turns a pile of bookmarks into a working reference collection. It also prevents a common problem: saving a site because it feels impressive, then forgetting what you wanted from it.

The examples below show four different reasons a website might earn a place in a collection. Vercel AI is useful for a dark grid and restrained CTA. Braintrust is useful for oversized proof and open spacing. json-render is useful for making the product itself the hero through a live demo. AI SDK is useful for a compact feature grid and concise install commands. Compare the reason for saving each one, not only the screenshot.

Organize references by design question

Folders can help, but consistent labels are often more useful. Try labels such as Hero sections, Navigation, Product pages, Conversion, Typography, Visual systems, and Mobile references.

A single website can answer several questions. Save it under more than one label when needed, but write a different note for each use. "Good landing page" is too broad. "Strong hero hierarchy with product proof above the first scroll" is easier to find later. Your note should name the section, the observed detail, and the possible use.

Search before collecting more

When a new project starts, search your saved references using the design outcome you need rather than a company name. Try phrases such as "dark SaaS hero with product demo," "minimal pricing page," "large type with generous spacing," or "compact documentation navigation." Then shortlist three to five references.

Compare the same elements in each one:

• What appears before the first scroll?
• Where does the eye go first?
• How many actions compete for attention?
• Which content is visual, and which is explained in text?
• How do color and type separate primary information from supporting detail?
• Does the pattern fit your product, audience, and amount of content?

The goal is not to copy one site. Combine useful decisions from several references, then adapt them to your own content and brand.

Keep the collection useful

Before saving a reference, ask whether you can name the exact section or behavior you want to remember, whether someone else could search for it, and whether it offers a pattern you can compare with another site. Remove references with no clear purpose, merge duplicates, and rewrite vague notes. A smaller set of strong examples is easier to use than a large archive you never review.

Use this in your AI agent

> Search my saved website references for examples of [design problem]. Return five references, explain the specific section or design detail that makes each useful, group them by pattern, and finish with a short recommendation for which pattern best fits [project, audience, and brand direction].

Install Fudge for your AI agent to search and compare your saved references while you work.

Organize references around visitor decisions rather than visual style alone. Start with hero and positioning, product proof, feature explanation, trust and evidence, pricing or conversion, and mobile behavior.

For each saved site, add one short note under the most relevant group. Examples include "Product visual explains the workflow before the feature list," "Proof appears before detailed claims," or "Primary CTA stays restrained while the page builds context." These notes are more useful than labels such as "modern" or "clean."

Keep a separate shortlist for patterns you may combine. One reference might offer a strong hero structure, another a useful product demo, and a third a better pricing comparison. Review them together before designing so you can decide what belongs in your page and what is only attractive in isolation.

A good starting collection has three to five references per group, not dozens. Add more only when a project exposes a question your current collection cannot answer.

Use this format: section + observed detail + possible use.

Examples:

• "Hero: dark grid creates contrast around the product visual; useful for a technical SaaS homepage."
• "Proof: oversized numbers and generous spacing make evidence feel central; compare for an analytics product."
• "Feature section: compact cards keep explanations scannable; useful when the product has many capabilities."
• "Typography: large headline paired with short supporting copy; consider for a focused launch page."

Avoid notes such as "great design," "inspiring," or "nice colors." They describe your reaction but will not help you find or evaluate the reference later. If you are saving the site for a specific project, include that context too: "Possible pattern for a developer tool landing page, but check whether the density suits our less technical audience."

Before saving, imagine searching for the note six months from now. Use the words you would type then, such as "dark hero," "product demo," "pricing comparison," or "mobile navigation."

Related questions

• Save Websites to a Project Website Library
• Save Websites to Your Collection of Captured Website Designs
• Reopen References From Your Website Mood Board
• Save Websites to a Website Mood Board