# Use Your Captured Website Designs in Claude Code [Open the live Fudge conversation](https://design.withfudge.com/share/use-my-collection-of-captured-website-designs-inside-claude-code) Last updated: 2026-08-25 You can use a collection of captured website designs in Claude Code by connecting Fudge through MCP, asking for comparisons grounded in the references you saved, and turning useful patterns into an implementation brief. The most reliable workflow is to organize references by purpose, compare a small set, inspect the details that matter, and ask for decisions tied to your own page. ## Organize references by the job they solve Do not keep one large inspiration list with no labels. Group captures by the question they help answer: - Landing-page structure - Developer documentation - Portfolio presentation - Pricing and conversion sections - Navigation and search - Typography and editorial layouts - Product onboarding The examples below include Notion Developer Platform, Claude Code, and Exa MCP Server. Compare them as references for developer-facing communication and product presentation. Notice which patterns help visitors understand the product, which sections create momentum, and where the page asks for action. Do not assume a pattern belongs on your page just because it looks polished. Give each saved reference a short note such as "clear documentation entry points," "strong product explanation," or "compact navigation." This makes later prompts more specific and helps Claude Code compare references by purpose instead of producing a vague moodboard summary. ## 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) ## Ask Claude Code for a useful comparison A good request names the references, the page you are building, and the decision you need to make. Ask Claude Code to compare: 1. Page structure and section order 2. The first action offered to visitors 3. Heading and body-text hierarchy 4. Use of screenshots, illustrations, or product UI 5. Navigation depth and labels 6. Spacing, borders, radii, and color roles 7. Which patterns are practical for your content Then ask for a recommendation with reasons. A comparison should end with a choice, not only a list of observations. If you are building a developer tool page, ask whether the page should lead with a product explanation, a code example, documentation links, or a visual demo. Keep the reference set small for each decision. Three well-chosen captures are easier to compare than twenty unrelated pages. If two references solve different problems, say so and compare them by job rather than ranking them overall. ## Inspect details before writing code Once you choose a direction, ask for a second pass focused on details that affect implementation. Useful checks include the number of columns, content width, section spacing, heading sizes, font weights, line heights, button treatment, border contrast, corner radii, image crops, and responsive changes. Ask Claude Code to distinguish what is visibly present from what it is recommending. A captured page can show a type hierarchy or card arrangement, but it cannot prove the original design tokens, source files, or internal component names. Use observed details as a reference brief, then make your own decisions for content, accessibility, and responsive behavior. A practical output is a short table with four columns: observed pattern, why it may work, risk for your page, and proposed adaptation. This turns inspiration into choices your team can review. If your collection contains fonts or color observations, use them as starting points and verify them against your own brand and content. ## Build a repeatable prompt sequence Use three prompts instead of one oversized request: - **Compare:** identify meaningful differences across three saved references. - **Adapt:** recommend which patterns fit your page, audience, content, and primary action. - **Implement:** produce a layout brief and component checklist without copying brand-specific details. After Claude Code produces a first pass, ask it to check the result against the brief. Compare the built page with the saved references only for the decisions you intentionally borrowed. This keeps the collection useful while leaving room for an original design. ## Use this in your AI agent > Use the captured website references in my collection to improve a developer-facing page for [describe the product]. Compare the three most relevant references by section order, first action, navigation, typography hierarchy, color roles, spacing, imagery, and responsive behavior. Separate observed details from recommendations. Then choose the best patterns for my page, explain the tradeoffs, and write an implementation brief with sections, content requirements, and a component checklist. Do not copy brand-specific text or visual details. To work with saved references directly in your coding workflow, [install Fudge for your AI agent](/mcp). --- Ask it to inspect the details that change how the page works, not only the details that make the screenshots attractive. Start with section order, content width, navigation labels, heading hierarchy, card structure, primary actions, and the amount of content visible before scrolling. For visual details, request typography families and variants when available, approximate size and weight relationships, color roles, border treatment, corner radii, shadows, gradients, image crops, and spacing between major sections. For interactive pages, ask it to note menus, hover states, motion, overlays, and any content that appears only after an action. Also ask for a confidence label or a clear distinction between "visible in the reference" and "recommended for your page." That prevents an implementation suggestion from being mistaken for an observed fact. Finally, require a short adaptation note for every borrowed pattern: what to keep, what to change, and why it suits your audience. --- Use this four-step workflow: 1. **Choose the set:** Select three to five captures that solve the same design problem, such as developer documentation navigation or a product landing page. 2. **Compare the choices:** Ask Claude Code for a table covering section order, content hierarchy, actions, imagery, type, spacing, and responsive behavior. 3. **Write the brief:** Ask for a recommended structure based on your content, audience, and primary action. Include a "do not copy" list for brand-specific details. 4. **Build and review:** Have Claude Code implement the brief, then compare the result with the brief section by section. Save the decisions that worked and remove references that no longer affect the build. Before coding, provide your actual page inputs: the product description, available screenshots, required links, target screens, and any accessibility or performance constraints. The more specific the page goal, the less likely the result is to become a generic collage of reference ideas. ## Related questions - [Use your design inspiration collection inside Claude Code](/share/use-my-design-inspiration-collection-inside-claude-code) - [Search Your Website Mood Board With an AI Coding Agent](/share/search-my-website-mood-board-with-an-ai-coding-agent) - [Use Your Project Website Library Inside Claude Code](/share/use-my-project-website-library-inside-claude-code) - [Search Your Design Inspiration Collection With an AI Coding Agent](/share/search-my-design-inspiration-collection-with-an-ai-coding-agent)