# Search Your Saved Website References with an AI Coding Agent [Open the live Fudge conversation](https://design.withfudge.com/share/search-my-saved-website-reference-library-with-an-ai-coding-agent) Last updated: 2026-08-25 An AI coding agent can search your saved website references by describing what you need, then return practical examples for layouts, typography, colors, and components. The useful workflow is to save strong references first, search by the design detail you want to borrow, and use the results as a comparison set rather than copying one page blindly. ## Start with a searchable reference library Save references when you can explain why a page is useful. A short note such as "dark grid with a restrained CTA" or "large proof section with generous whitespace" is more useful later than a vague label like "good website." Capture different kinds of pages: landing pages, pricing pages, product demos, documentation, onboarding, and editorial layouts. This gives your agent material for both broad direction and specific implementation questions. Organize references around jobs you expect to repeat. Useful groups include hero sections, feature grids, social proof, navigation, forms, dashboards, and type systems. You do not need a perfect filing system. The important part is that each saved page has a clear reason to revisit it and enough context for a later search to distinguish a compact feature grid from an oversized editorial layout. ## 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) ## Search by the detail you need Use descriptive searches instead of relying on website names. Ask for "product-led hero sections with a live code demo," "dark SaaS pages with a restrained primary button," or "landing pages that use oversized proof and generous whitespace." Then narrow the results by asking for one concern at a time: composition, spacing, typography, color, responsive behavior, or a particular section. A good search produces a shortlist, not a single answer. Compare three or four references and record what they share, where they differ, and which pattern fits your project constraints. For example, a live demo may make sense when the product is visual, while a concise feature grid may work better when visitors need to scan capabilities quickly. Ask the agent to separate observed details from recommendations so you can tell what came from a saved page and what is being proposed. Open the examples below and compare the first screen before borrowing a pattern. Vercel AI shows a dark grid and restrained call to action; Braintrust uses oversized proof and generous whitespace; json-render makes the product itself the hero through a live code-and-render demonstration; AI SDK uses a compact feature grid with concise install commands. These are useful starting points for searches, not instructions to reproduce any one design. ## Turn search results into coding guidance Give your coding agent a compact brief after you choose the references. Include the page goal, target audience, content that must appear, device priority, brand constraints, and the two or three references that best match the job. Ask it to compare the references before writing code, then return a proposed structure, spacing decisions, type hierarchy, color roles, and component states. For implementation, request decisions your agent can act on immediately: which section should appear first, how wide the content column should be, how cards should stack on smaller screens, which text deserves emphasis, and where interaction states are needed. If you have saved typography or color observations, include them as inputs while keeping your own brand choices separate. A reference library should improve decisions, not turn your site into a collage of unrelated details. Use a simple review checklist before accepting the result: - Does the chosen reference solve the same visitor problem? - Can you explain which details were borrowed and why? - Are the headline, proof, and call to action still clear without the reference styling? - Do spacing, type size, and contrast work on the target screen sizes? - Did the agent preserve your content and brand instead of copying surface details? ## Use this in your AI agent > Search my saved website reference library for pages that match this job: [describe the page or section]. Compare 3 to 5 references by layout, typography, color roles, spacing, components, and responsive behavior. Separate observed details from your recommendations, explain which pattern best fits my audience and constraints, then give me an implementation brief with section order, type hierarchy, spacing rules, component states, and mobile adjustments. Do not copy any page directly. Use these constraints: [brand, content, framework, device priority, and accessibility requirements]. [Install Fudge for your AI agent](/mcp) to search saved references while you plan and build. --- Ask for a comparison, not a generic collection of inspiration. Start by describing the visitor, the action you want them to take, the content available for the hero, and any limits on motion or layout. Then ask the agent to search for saved references with a similar job. A useful prompt should compare live demos, oversized proof, dark grids, and simple text-led compositions. Ask for the headline width, supporting copy, primary action, visual position, spacing, and mobile behavior for each example. Request one recommendation with clear tradeoffs, followed by an implementation brief that does not copy the source page. Follow that with a content pass. Ask whether the proposed hero explains what the product does, who it helps, and what happens after the click. This keeps visual research connected to the visitor's decision instead of turning it into a styling exercise. Copy this into your agent after connecting Fudge at [fudge.ai/mcp](/mcp): > Search my saved references for landing page heroes with a similar visitor goal. Compare three examples, separate observed details from recommendations, choose one direction, and give me a responsive implementation brief without copying any source page. --- Choose three references that solve the same page job, then extract decisions in a consistent format. For each reference, write down the page structure, the most prominent message, the main action, the visual balance, the type scale, the color roles, and any interaction that helps visitors understand the product. Mark each item as observed, adapted, or rejected. Your final brief can use five short parts: goal, content hierarchy, visual direction, component rules, and review checks. Under visual direction, describe the shared pattern across the references rather than naming a single site. For example, you might specify a restrained dark palette, a narrow reading column, generous spacing around proof, and a product demo that appears before secondary features. Give the brief to your coding agent with your framework and responsive requirements. Ask it to explain every major choice against the brief and flag any conflict with your content. This makes weak decisions easier to replace. Copy this into your agent at [fudge.ai/mcp](/mcp): > Compare three saved references for my page goal. Return observed patterns, adapted recommendations, a section order, typography and color guidance, component rules, mobile adjustments, accessibility checks, and tradeoffs. Do not copy any source page. ## Related questions - [Search Your Website Mood Board With an AI Coding Agent](/share/search-my-website-mood-board-with-an-ai-coding-agent) - [Use Your Captured Website Designs in Claude Code](/share/use-my-collection-of-captured-website-designs-inside-claude-code) - [Search Your Design Inspiration Collection With an AI Coding Agent](/share/search-my-design-inspiration-collection-with-an-ai-coding-agent) - [Use your design inspiration collection inside Claude Code](/share/use-my-design-inspiration-collection-inside-claude-code)