# How to Capture Websites for a Design Inspiration Collection [Open the live Fudge conversation](https://design.withfudge.com/share/capture-websites-for-my-design-inspiration-collection) Last updated: 2026-08-25 Capture websites with a question attached to each reference, not just a screenshot you may forget later. Save the page, its purpose, and the design detail you want to study so your collection helps you make decisions instead of becoming a folder of attractive images. ## Define what each reference is for Before adding a website, choose one or two reasons to keep it. Useful reasons include: - A strong hero and call to action. - A product demo that explains the offer quickly. - An effective proof or testimonial section. - A useful feature grid. - A distinctive layout, type treatment, or color system. - A page flow that keeps visitors moving toward one action. Write a short note in visitor language, such as “strong dark grid and restrained CTA” or “live product demo makes the hero understandable.” The references below show how this works in practice. Vercel AI is noted for a dark grid, restrained CTA, and visual composition. Braintrust is noted for oversized proof and generous whitespace. json-render turns the product into the hero with a live code-and-render demo. AI SDK uses a compact feature grid with concise install commands. These notes make a collection searchable by the decision you need to make later. ## 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) ## Use a capture checklist For every website you save, record: 1. **Page and section:** Home page, pricing page, signup page, or a specific section. 2. **Reason for saving:** The design problem this reference helps solve. 3. **What to inspect:** Hero layout, typography, form, navigation, proof, cards, motion, or spacing. 4. **What to borrow:** A principle or structure, not the exact wording or artwork. 5. **What to avoid:** A detail that would not suit your audience or product. Capture the page in the state that matters. If the key idea is a product demo, make sure the demo is visible. If the key idea is a mobile layout, inspect the mobile view rather than relying only on a desktop image. If the page changes after an interaction, note which action reveals the relevant state. A good entry should answer this question months later: “Why did I save this, and what decision can it help me make?” ## Build a collection that stays usable Use a consistent naming pattern, such as: > [Brand or site] - [page or section] - [design reason] Then group references by the problem they solve: hero sections, product demos, pricing, forms, editorial layouts, dashboards, or launch pages. You can also group them by visual direction, but problem-based groups are usually faster when you are working on a new page. Avoid saving ten nearly identical examples without notes. Keep the strongest few and add a comparison note when two references solve the same problem differently. For instance, Braintrust can prompt a study of proof and spacing, while json-render can prompt a study of showing the product immediately. They belong in the same project only if you are clear about which decision each one informs. When a collection grows, search it with descriptions such as “product hero with live demo,” “generous whitespace around proof,” or “compact feature grid.” Searching by the design detail you need is more useful than searching only by company name. ## Compare before you borrow Choose three references for a specific task and compare them side by side. Check the same details in each: - What does the first screen ask the visitor to understand? - Where does the primary action appear? - How much proof appears before the feature list? - Which elements create visual emphasis? - What changes on smaller screens? - Which parts are reusable for your audience? Write a short conclusion after the comparison. For example: “Use the immediate product demonstration from json-render, the restrained action hierarchy from Vercel AI, and the generous proof spacing from Braintrust. Do not combine all three visual treatments.” This turns inspiration into a design direction a team can discuss. A saved reference is most valuable when it leads to a testable decision. Use it to draft a wireframe, revise a section, or explain why a layout should be simpler. Do not treat a reference collection as an official internal design system. It records observed examples and design ideas; your own product, audience, content, and accessibility needs still decide the final result. ## Use this in your AI agent > Help me build a website design inspiration collection for [project]. Find references by design problem, then return a shortlist with the page or section, the reason each reference is useful, the observed layout and typography details, and one principle I can adapt. Group the results into hero, proof, product demo, feature layout, and conversion sections when relevant. Compare three references for my main page task and finish with a concise original design brief. [Install Fudge for your AI agent](/mcp) --- Save enough information to make the reference useful without reopening it immediately: - The website and page name. - The section or state you want to study. - A one-sentence reason for saving it. - The audience or product problem it may help solve. - The visible structure, such as hero, proof, demo, form, or feature grid. - The detail you may adapt, such as spacing, hierarchy, type scale, or CTA placement. - One detail you should not copy because it may not fit your project. For example: “json-render - home hero - saved because the live demo explains the product before the feature list. Adapt the immediate demonstration pattern; do not assume the code-focused presentation fits our audience.” A specific note like that will help you find the right reference when you are working under time pressure. --- Start with the page task, then divide the collection by section. Create groups for hero, navigation, proof, product demo, feature explanation, pricing, signup, and footer. Add a separate visual-direction group only when color, typography, or imagery is a real decision. For the landing page itself, choose three to five references rather than assembling a large moodboard. Give each one a role: one for the hero, one for proof, one for explaining the product, and one for the conversion section. Compare the same details across all of them, then write a short decision such as: “Use the live demo approach from json-render, the dark grid and restrained action from Vercel AI, and the whitespace around proof from Braintrust.” Keep the final brief original. References should explain a choice, not become a template to reproduce. ## Related questions - [Capture Websites for Your Project Reference Library](/share/capture-websites-for-my-project-website-library) - [How to Capture Websites for a Design Reference Collection](/share/capture-websites-for-my-collection-of-captured-website-designs) - [Capture websites for a saved website reference library](/share/capture-websites-for-my-saved-website-reference-library) - [Use Your Website Mood Board Inside Claude Code](/share/use-my-website-mood-board-inside-claude-code)