# Reopen References From Your Saved Website Reference Library

[Open the live Fudge conversation](https://design.withfudge.com/share/reopen-references-from-my-saved-website-reference-library)

Last updated: 2026-08-25

To reopen a saved website reference, search your library using the visual detail or page section you remember, then confirm the result from its title, domain, and saved note. Queries like "dark grid with restrained CTA" or "live code demo in the hero" usually give you a clearer path than searching only for a website name.

## Search by the job you need to solve

Think about why you saved the reference. Are you choosing a hero structure, looking for a proof section, comparing feature layouts, or trying to make setup guidance easier to scan? Put that job into the search along with the design detail:

- "dark landing page hero with focused CTA"
- "large proof section with whitespace"
- "product demo as hero visual"
- "compact feature grid with install guidance"

If you remember only the mood, add terms for color, spacing, or type: "dark technical page," "generous white space," "bold oversized heading," or "muted borders." Search broadly first, then add one detail at a time until the results become useful.

The examples below offer a practical shortlist from an earlier design-reference conversation. **Vercel AI** is noted for a strong dark grid, restrained CTA, and visual composition. **Braintrust** is noted for oversized proof and generous whitespace. **json-render** makes the product the hero through a live code-and-render demo. **AI SDK** pairs a compact feature grid with concise install commands. Use those notes to decide which reference to open first.

## 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 the right reference for the section

Match the reference to the work in front of you:

| Your current job | Reference to open first | What to compare |
| --- | --- | --- |
| Create a focused dark hero | Vercel AI | Grid, CTA emphasis, visual balance |
| Make proof feel substantial | Braintrust | Scale, whitespace, reading order |
| Show the product immediately | json-render | Demo placement, explanation, interaction cue |
| Organize features and setup | AI SDK | Card density, grouping, short instructions |

This does not mean the whole website is a match. A reference may solve your hero problem while another is better for your feature section. Open the relevant section and separate the pattern from the brand styling.

## Reopen, compare, then decide

When you open a saved capture, check these details before copying an approach:

1. **Hierarchy:** Can you identify the main message, supporting proof, and next action?
2. **Structure:** Which sections appear, and what order makes the page easy to follow?
3. **Spacing:** Does the layout rely on generous gaps, tight cards, or a deliberate mix?
4. **Typography:** How do the heading size, text width, weight, and line height guide scanning?
5. **Color:** Which tones define the background, text, borders, accent, and action areas?
6. **Components:** Are cards, buttons, demos, or proof blocks doing real communication work?

If the reference is captured in your library, you can inspect its page structure, typography, colors, spacing, borders, radii, shadows, and component styles when those details matter. Use the observations to make a decision about your own page. Do not assume that a visually similar choice will work with different content or audience expectations.

## Make future searches easier

Add notes that describe the useful pattern and the context where you might reuse it. "Good design" will not help later. "Developer-tool hero with dark grid and restrained CTA" will. Include the page section and the decision it supports, such as "proof section," "feature comparison," or "setup guidance."

You can also keep a small review list for each reopened reference: what to borrow, what to avoid, and what to test with your own copy. This turns a saved library into a working set of design references instead of a folder of links you rarely revisit.

## Use this in your AI agent

> Search my saved website reference library for [the visual style, page section, or design problem I remember]. Reopen the strongest matches, summarize the saved notes, compare the relevant structure and design details, and recommend which reference to study first.

[Install Fudge for your AI agent](/mcp) to reopen and compare saved website references without leaving your design workflow.

---

Yes. Search with the detail you remember and connect it to the page area or design job. Examples include "navy background with bright accent," "large sans-serif heading with narrow copy column," "rounded cards with subtle borders," or "hero followed by proof and feature grid."

For colors, describe the role rather than trying to guess an exact hex value: "dark background with warm accent" or "neutral page with high-contrast CTA." For typography, mention the visible behavior if you do not remember the family: "oversized bold headline," "compact technical text," or "wide line spacing." For structure, list the order or key element: "product demo hero and short feature grid."

If the search returns several plausible captures, open each and compare the specific detail in context. A color can look right in a card but fail across a full page. A font can suit a headline but become difficult to scan in longer text. Use the saved capture to verify the complete section before deciding what to reuse.

---

Start by writing a one-sentence decision: "Use the reference's compact feature grouping, but keep our existing lighter visual tone." Then break the decision into elements you can test:

- **Keep:** the section order, card grouping, proof scale, or demo placement.
- **Adapt:** the colors, type sizes, wording, and amount of content.
- **Avoid:** details that depend on a different product, audience, or brand.
- **Test:** the first screen, main action, and the section where visitors may hesitate.

Compare at least two references when the choice affects the whole page. For example, use one reference for the hero structure and another for setup guidance, then check whether the combined direction still has one clear hierarchy. Save the conclusion as a new note with the pattern and the intended use. That makes the next search faster and gives a designer or AI agent a precise brief to follow.

## Related questions

- [Reopen References From Your Website Mood Board](/share/reopen-references-from-my-website-mood-board)
- [Reopen References From Your Project Website Library](/share/reopen-references-from-my-project-website-library)
- [Save Websites to Your Collection of Captured Website Designs](/share/save-websites-to-my-collection-of-captured-website-designs)
- [Reopen References From Your Design Inspiration Collection](/share/reopen-references-from-my-design-inspiration-collection)