Use your saved website reference library inside Claude Code

Contents

• [Use the library to answer one design problem](#use-the-library-to-answer-one-design-problem)
• [Ask for a side-by-side comparison](#ask-for-a-side-by-side-comparison)
• [Turn saved references into project rules](#turn-saved-references-into-project-rules)
• [Connect the brief to your existing code](#connect-the-brief-to-your-existing-code)
• [Use this in your AI agent](#use-this-in-your-ai-agent)

You can use your saved website reference library inside Claude Code by connecting Fudge as an AI-agent tool and asking Claude to search the collection before it plans or builds a page. The best approach is to use saved references as a decision library: find examples for a specific problem, compare what they actually do, and turn the comparison into constraints your code can follow.

Use the library to answer one design problem

Start with a question that has a clear outcome. For example:

> Search my saved website references for strong developer-product landing pages. I need a clear hero, readable technical content, and a page structure that works on mobile. Compare the closest examples and recommend a direction for my site.

You can make the search more specific by naming the part you need help with:

• A hero that explains a technical product quickly
• A docs-style page with a strong reading flow
• A card grid for product capabilities
• A pricing or plan comparison section
• A dark interface with restrained accents
• A responsive navigation pattern

The examples below include Notion Developer Platform, Claude Code, and Exa MCP Server. Compare their visible choices for inspiration, but do not treat the collection as a ready-made template or assume that one reference is correct for your project.

Ask for a side-by-side comparison

A useful Claude response should separate observations from recommendations. Ask it to compare each reference across the same categories:

Then ask for a recommendation based on your actual content. A reference may have an attractive hero but an unsuitable section rhythm. Another may have a useful navigation pattern but too much visual density. The comparison should help you choose individual decisions instead of copying a whole page.

Turn saved references into project rules

Before Claude writes code, ask for a short design brief containing:

1. The page structure and the purpose of each section.
2. A small set of visual rules for spacing, alignment, surfaces, and emphasis.
3. Type roles for headings, body copy, labels, and technical content.
4. Color roles and contrast combinations to verify.
5. Component guidance that fits your existing codebase.
6. A list of reference-specific details to avoid copying.

If the design question depends on exact values, ask Claude to inspect the selected capture for typography, colors, spacing, borders, radii, shadows, images, or interactions. Use those findings as input for your own decisions. Extracting observed details can inform a build, but it does not give you an official internal design system from the source website.

Connect the brief to your existing code

Give Claude the constraints that matter: your framework, route, shared components, design tokens, breakpoints, content model, and any behavior that must remain unchanged. Ask it to map the chosen direction onto those constraints and to list the files it will edit before making changes.

After the first implementation, request a review against the brief. Check the page at narrow and wide widths, confirm that headings and buttons wrap well, test keyboard navigation, and verify that text remains readable against surfaces. If the page has cards or repeated sections, check that the spacing and hierarchy remain consistent when content gets longer.

Keep saving references with a useful note about the problem they solve. "Good developer page" is hard to search later. "Compact hero with code preview and muted surface layers" gives Claude a clearer starting point. Fudge lets you search saved references by description and observed design details, then inspect selected captures when a decision needs more evidence.

Use this in your AI agent

> Connect Fudge to Claude Code and search my saved website reference library for [specific page type or design problem]. Compare the closest references by page structure, layout, typography, color roles, components, and responsive behavior. Separate observed details from your recommendations. Create a design brief for my existing project, including the page outline, visual rules, type and color roles, implementation constraints, and ideas to avoid copying. Do not write code until I approve the brief.

Install Fudge for your AI agent to search and use your saved references while you work in Claude Code.

Use the words you would put in a design note, not a list of broad keywords. Describe the page, audience, visual problem, and details you want to compare. "Developer landing page with a compact hero, code preview, muted background, and clear primary action" gives Claude more direction than "modern tech design."

Add one or two exclusions when needed: "Find sparse examples, not editorial portfolios" or "Focus on pages with dense technical content, not image-led campaigns." You can also ask for separate passes: first search for structure, then search for typography or color decisions. This prevents one attractive screenshot from dominating every recommendation.

Finally, tell Claude what you will do with the result. Ask for three references, a comparison table, a recommended direction, and the exact questions that remain open. If the library does not contain a close match, ask Claude to say so and broaden the search gradually rather than forcing an unrelated example into the brief.

Have Claude produce a design brief and an implementation plan before it edits the repository. The brief should explain the chosen page structure and visual rules. The plan should map each change to an existing route, component, token, or stylesheet and identify anything that needs a new component.

Use a prompt like this:

> Based on the approved reference comparison, plan the smallest safe update to my existing page. Preserve the route, content meaning, shared components, analytics behavior, and current accessibility behavior. Reuse existing tokens where possible. List files to change, sections to update, responsive states to check, and any decisions that need my input. Do not copy distinctive text, imagery, or artwork from the references. After implementation, review the result against the brief at desktop and mobile widths.

This keeps the library useful without letting a reference override your project. Ask for a diff-sized change where possible, then review hierarchy, wrapping, contrast, keyboard access, and long-content behavior before moving on.

Related questions

• Use Your Website Mood Board Inside Claude Code
• How to Capture Websites for a Design Reference Collection
• Use your design inspiration collection inside Claude Code
• Use Your Captured Website Designs in Claude Code