# Reopen References From Your Design Inspiration Collection [Open the live Fudge conversation](https://design.withfudge.com/share/reopen-references-from-my-design-inspiration-collection) Last updated: 2026-08-25 You can reopen references from your design inspiration collection by searching for the page structure, colors, typography, or interaction pattern you remember. Start with a specific visual phrase, then compare a short list of captures and label what each one is useful for. ## Search by the design detail, not just the name If you remember the company or website, search that name first. If you remember the feeling but not the source, describe what was visible: - dark grid with a restrained CTA - oversized proof section and generous whitespace - live code-and-render product demo - compact feature grid with concise install commands - large headline with a product screen underneath - minimal layout with thin borders and strong contrast Combine a layout term with a purpose when you can. "Dark product hero" gives you a different shortlist from "dark pricing cards" or "dark documentation sidebar." The page purpose helps separate references that share colors but solve different problems. ## Captured pages [![Vercel AI](https://pin.fontofweb.com/310?format=jpg)](https://design.withfudge.com/share/pin-310) [Vercel AI](https://design.withfudge.com/share/pin-310) [![Braintrust](https://pin.fontofweb.com/189?format=jpg)](https://design.withfudge.com/share/pin-189) [Braintrust](https://design.withfudge.com/share/pin-189) [![json-render](https://pin.fontofweb.com/7794?format=jpg)](https://design.withfudge.com/share/pin-7794) [json-render](https://design.withfudge.com/share/pin-7794) [![AI SDK](https://pin.fontofweb.com/8392?format=jpg)](https://design.withfudge.com/share/pin-8392) [AI SDK](https://design.withfudge.com/share/pin-8392) ## Choose references by role A useful inspiration collection is easier to reopen when every capture has a clear role. For a new page, select no more than five references and sort them like this: - **Structure:** section order, navigation, hero arrangement, or card layout - **Type:** headline size, body width, text density, and hierarchy - **Color:** background, text contrast, accent use, and muted surfaces - **Proof:** testimonials, metrics, logos, examples, or product evidence - **Motion:** demos, transitions, hover states, or scrolling behavior The Vercel AI example below is useful as a reference for a strong dark grid, restrained CTA, and visual composition. Braintrust is described through oversized proof and generous whitespace. json-render makes the product itself the hero with a live code-and-render demo. AI SDK shows a compact feature grid paired with concise install commands. ## Compare the examples with one question Open the examples below and ask: "Which page problem does this solve?" That question is more useful than asking which one looks best. Choose the dark grid when the page needs a clear visual frame and a focused action. Choose the oversized proof approach when visitors need confidence before they continue. Choose the live demo when the product is difficult to explain in a static paragraph. Choose the compact feature grid when several capabilities need to be scanned quickly. Keep structure and styling decisions separate. You may prefer the section order from one reference and the typography or spacing from another. Write those choices down before building so you do not accidentally copy a complete page without understanding why it works. ## Make your collection easier to search next time Add notes that describe visible details and the reason you saved the capture. "Nice landing page" will not help much later. A note such as "dark grid, compact CTA, product visual in the hero" gives you several useful search terms. Use practical groups such as hero ideas, product demos, proof sections, feature explanations, pricing, mobile navigation, or editorial layouts. A capture can belong to more than one group if it solves more than one problem. Before you finish, check: - Does the note explain what is visible? - Does it name the page section or problem? - Can you tell what to borrow and what to leave behind? - Is the capture still relevant to the kind of page you are making? The goal is a collection you can search by memory and purpose, not a pile of references you must browse from the beginning every time. ## Use this in your AI agent > Search my design inspiration collection for references with [describe the layout, colors, typography, or interaction]. Return a focused shortlist, identify the role of each reference, and compare the visible structure, type, color, proof, and motion details without inventing anything not shown. For a faster reference-review workflow, [install Fudge for your AI agent](/mcp). --- Translate the mood into visible choices before searching. "Premium" could mean generous spacing, quiet colors, large type, restrained borders, or high-quality photography. Search two or three of those details together instead of using the mood word alone. A useful format is: > [layout] + [color treatment] + [main page element] Examples include "centered hero, warm white background, product screenshot," "dark split layout, bright accent, signup form," or "editorial typography, generous margins, proof section." If the first search is too broad, add the page purpose. If it is too narrow, remove the least certain detail and keep the layout plus one visual clue. Once you recover a plausible reference, use its visible characteristics to run a second search for related pages. That two-step approach works well when your memory is more about the mood than the source name. --- Pick one reference for the page structure and a different one for the visual language. Then write a short translation for each selected detail. For example: - Reference structure: compact feature grid - Your translation: three benefits with one proof point each - Reference color: dark background with a bright accent - Your translation: use the accent only for the primary action and key values - Reference interaction: live demo in the hero - Your translation: show one real workflow rather than recreating the entire interface Next, list the content that must remain yours: your headline, proof, screenshots, wording, and customer path. Compare the draft against the references only for spacing, hierarchy, emphasis, and clarity. If the page still looks like a collection of borrowed parts, remove one reference and simplify. A strong direction usually has one clear structure, one visual mood, and a small number of deliberate supporting patterns. ## Related questions - [Reopen References From Your Project Website Library](/share/reopen-references-from-my-project-website-library) - [Reopen References From Your Captured Website Design Collection](/share/reopen-references-from-my-collection-of-captured-website-designs) - [Capture websites for a website mood board](/share/capture-websites-for-my-website-mood-board) - [Reopen References From Your Website Mood Board](/share/reopen-references-from-my-website-mood-board)