# Use Your Project Website Library Inside Claude Code [Open the live Fudge conversation](https://design.withfudge.com/share/use-my-project-website-library-inside-claude-code) Last updated: 2026-08-25 You can use your project website library inside Claude Code by connecting Fudge as an AI-agent tool, then asking Claude Code to search your saved website references while it works on the project. The useful workflow is to save references first, search them by the design problem you are solving, and ask for observed details instead of copying a site blindly. ## A practical workflow 1. **Save the references you want to reuse.** Add website captures that represent the direction of your project. Keep a short note with each one, such as "developer tool landing page," "quiet SaaS pricing layout," or "dark documentation navigation." 2. **Search by the decision you need to make.** Ask for references with a description like "wide hero with a compact code example" or "pricing section with strong plan comparison." This is more useful than searching only by company name. 3. **Ask Claude Code to inspect the strongest matches.** Have it check the page structure, sections, components, viewport, typography, colors, spacing, borders, radii, shadows, and image treatment. 4. **Turn observations into project decisions.** Ask for a shortlist of patterns, what each pattern is good for, and which one fits your existing page. Then implement the chosen direction in your codebase. Open the examples below and compare the first screen before borrowing a pattern. The saved references include Notion Developer Platform, Claude Code, and Exa MCP Server. Treat them as visual starting points, then check their actual structure and details before using an idea in your own page. ## Captured pages [![Notion Developer Platform](https://pin.fontofweb.com/9283?format=jpg)](https://design.withfudge.com/share/pin-9283) [Notion Developer Platform](https://design.withfudge.com/share/pin-9283) [![Claude Code](https://pin.fontofweb.com/1446?format=jpg)](https://design.withfudge.com/share/pin-1446) [Claude Code](https://design.withfudge.com/share/pin-1446) [![Exa MCP Server](https://pin.fontofweb.com/6429?format=jpg)](https://design.withfudge.com/share/pin-6429) [Exa MCP Server](https://design.withfudge.com/share/pin-6429) ## Prompts that produce useful results Start broad: > Search my saved website references for pages that feel appropriate for a developer-focused product. Return five matches and explain the relevant hero, navigation, proof, and call-to-action patterns. Then narrow the decision: > Inspect the two strongest references. Compare their section order, heading scale, body width, button treatment, code examples, spacing, colors, and responsive behavior. Recommend one direction for my current page and explain why. Finally, make the work specific to the project: > Use the chosen reference as inspiration, not a template. Apply the useful structure to this codebase, keep the existing content and routes, and list every visual decision you changed. ## What to check before implementation Use this checklist so a reference becomes actionable rather than decorative: - **Structure:** Does the page move visitors from problem to proof to action in a sensible order? - **Hierarchy:** Can you identify the main heading, supporting copy, primary action, and secondary action quickly? - **Typography:** Which families, weights, sizes, and line heights create the tone? Verify that the fonts are available before adopting them. - **Color:** Which colors serve as background, text, accent, border, success, or warning roles? Check contrast for important text and controls. - **Spacing:** What are the repeated gaps between sections, cards, headings, and buttons? - **Components:** Which patterns repeat, such as cards, tabs, code panels, testimonials, or navigation items? - **Fit:** Does the idea support your content and product, or does it only look good with the reference site's copy? A useful result is a short design brief with selected references, observed details, decisions, open questions, and implementation notes. That brief gives Claude Code enough direction to make consistent changes without turning the reference into a page clone. ## Keep the library useful Save references by project or theme, and add notes while the reason for saving is fresh. Keep several contrasting examples rather than collecting only pages that look alike. One reference may be useful for typography, another for navigation, and another for a pricing comparison. Ask Claude Code to compare those roles separately so it can combine compatible ideas without pretending they came from one design system. Remember that a captured reference shows observed design details. It does not automatically give you the original site's internal design system, source files, licensing terms, or permission to reproduce its assets. Use it to understand choices, then create an original implementation with your own content, assets, and brand rules. ## Use this in your AI agent > Connect to my Fudge project library. Search my saved website references for developer-focused landing pages, inspect the strongest matches, and compare their structure, typography, colors, spacing, components, and responsive layout. Recommend a direction for this codebase, then implement only the decisions that fit my existing content and routes. Do not copy assets or write a visual clone. Summarize the references and every change you make. [Install Fudge for your AI agent](/mcp) --- Ask it to compare the same decision across all three references instead of describing each page in isolation. For example: > Compare these three saved references for a developer product page. For each one, record the hero layout, heading width, navigation pattern, primary action, proof section, code-example treatment, typography scale, color roles, spacing rhythm, and mobile behavior. Mark each observation as useful, optional, or unsuitable for my project. Recommend one structure and two supporting details, with reasons tied to my content. Then ask for a second pass focused on conflicts: > Identify any patterns that should not be combined. Explain where the references use different assumptions about audience, product complexity, or page length. This helps separate reusable choices from surface styling. You can also assign roles to the references: one for page structure, one for typography, and one for a component pattern. That makes the final implementation easier to review and keeps Claude Code from blending unrelated layouts into an inconsistent page. --- Use a brief with five parts: 1. **Goal:** the visitor action the page should support. 2. **Chosen references:** the saved pages and the specific reason each is relevant. 3. **Observed decisions:** section order, layout widths, type scale, colors, spacing, components, and responsive behavior. 4. **Project constraints:** existing routes, content, brand colors, available fonts, technical limits, and patterns that must stay. 5. **Build checklist:** the changes Claude Code should make, followed by items you will review manually. A useful instruction is: > Create an implementation brief from these saved references. Separate observed details from recommendations. Keep my current content and routes, identify decisions that need verification, and finish with an ordered checklist for implementation and review. Before coding, remove anything that depends on unknown source assets or unverified licensing. After coding, compare the result with the brief, not just with the reference screenshots. The goal is a coherent page for your project, with references serving as evidence for individual choices. ## Related questions - [Use your saved website reference library inside Claude Code](/share/use-my-saved-website-reference-library-inside-claude-code) - [Use your design inspiration collection inside Claude Code](/share/use-my-design-inspiration-collection-inside-claude-code) - [Use Your Captured Website Designs in Claude Code](/share/use-my-collection-of-captured-website-designs-inside-claude-code) - [How to Capture Websites for a Design Reference Collection](/share/capture-websites-for-my-collection-of-captured-website-designs)