Use your design inspiration collection inside Claude Code

Contents

• [Start with a focused design question](#start-with-a-focused-design-question)
• [Compare references by decisions, not vibes](#compare-references-by-decisions-not-vibes)
• [Turn the comparison into a build brief](#turn-the-comparison-into-a-build-brief)
• [Keep the workflow useful in a codebase](#keep-the-workflow-useful-in-a-codebase)
• [Use this in your AI agent](#use-this-in-your-ai-agent)

You can use your saved design inspiration collection inside Claude Code by connecting Fudge as an AI-agent tool, then asking Claude to search your references before it proposes a page direction or writes interface code. The useful workflow is: save references, describe the design problem, compare a small set of relevant examples, and ask for an implementation brief that keeps the ideas distinct from copied content.

Start with a focused design question

Do not begin with a broad request such as "make this look better." Give Claude a job and a visual constraint. For example:

> Find references in my saved collection for a developer landing page with a clear hero, strong code-focused sections, and a restrained visual style. Compare the closest examples and recommend a direction for my page.

A focused question gives you something you can evaluate. Useful inputs include the page type, audience, mood, content density, mobile priority, and the part of the page that feels weak. You can ask for a reference search around a specific need, such as:

• A compact documentation layout
• A technical product hero
• A pricing section with clear comparison points
• A dark interface with readable code examples
• A responsive page that keeps the main action visible

Open the examples below and compare the first screen before borrowing a pattern. The collection shown includes Notion Developer Platform, Claude Code, and Exa MCP Server. Treat them as visual references for comparison, not as a finished direction for your own page.

Compare references by decisions, not vibes

Ask Claude to turn each reference into a short comparison. A useful table should cover:

This keeps the discussion practical. Instead of saying one site feels polished, Claude can explain that it uses a narrow reading column, a high-contrast action button, and repeated card spacing. You can then decide which choices fit your content.

Turn the comparison into a build brief

Once you have a shortlist, ask for a brief before asking for code. It should include:

1. The recommended page structure and why it fits the goal.
2. Two or three visual principles to carry across the page.
3. A type scale with intended roles for headings, labels, body text, and code.
4. A color role list with accessible text and surface combinations to check.
5. Component guidance for the hero, navigation, cards, forms, and responsive states.
6. A list of ideas to avoid because they would make the page too similar to a reference.

You can also ask Claude to identify exact details from a selected capture, such as font variants, spacing, radii, shadows, or color roles. Treat those details as observations to verify against your own content and brand. An observed style is not the same thing as owning an official internal design system.

Keep the workflow useful in a codebase

Give Claude your existing constraints after the reference review: framework, component library, routes, tokens, breakpoints, and content that must remain. Ask it to map the design brief onto those constraints instead of replacing the whole interface.

A good implementation request has three stages: first produce the plan, then identify the files and components to change, then write the smallest coherent patch. After the first pass, ask Claude to compare the result with the chosen principles rather than with a single screenshot. Check mobile width, keyboard access, readable contrast, empty states, and long content yourself.

The strongest collection workflow creates a repeatable design vocabulary. Save references when they solve a specific problem, label them with what you want to remember, and search by that observation later. Fudge lets you also inspect captured typography, colors, layout, imagery, and interactions when those details matter to the decision.

Use this in your AI agent

> Connect Fudge to Claude Code. Search my saved website references for examples relevant to [describe the page or design problem]. Compare the three closest references by structure, layout, typography, color roles, components, and responsive details. Recommend one direction, list what to borrow as general principles and what to avoid copying, then turn the recommendation into a concise implementation brief for my existing codebase. Ask me for missing project constraints before writing code.

Install Fudge for your AI agent to make this reference-review workflow available inside Claude Code.

Give Claude the page goal, audience, content requirements, and the design problem you want to solve. Then ask it to search your saved references and return a comparison before suggesting code.

For example:

> Search my saved references for landing pages aimed at technical users. I need a hero that explains the product quickly, a section for proof or examples, and one clear primary action. Compare the closest references by section order, content width, typography, color roles, card treatment, and mobile behavior. Recommend a direction that fits my existing brand, and explain which details are general patterns rather than things to copy.

If you already know the weak area, make it narrower: "Find references for a developer pricing section with several plans" is more useful than "find good SaaS pages." Ask Claude to separate observed facts from recommendations, and request a short implementation brief with open questions. That gives you a reviewable plan before your codebase changes.

Include the chosen direction, the evidence you want Claude to preserve, and the limits of the implementation. State which parts of the page can change, which content and routes must stay, and what framework or component rules the codebase already follows.

A practical prompt is:

> Use the approved design brief for this page: [paste brief]. Keep the existing route, content meaning, analytics behavior, and shared components. Implement the hero, navigation, [sections], and responsive states in the smallest coherent patch. Use the reference review only for general structure and visual principles. Do not copy brand-specific text, imagery, or distinctive artwork. Before editing, list the files you expect to change and any missing decisions. After editing, check desktop and mobile layouts, keyboard access, text contrast, loading and empty states, and whether the primary action remains clear.

Ask for a visual review after the first pass. Claude should compare the implementation against the selected principles and identify concrete fixes, such as spacing, hierarchy, wrapping, or contrast, rather than simply saying it looks good.

Related questions

• Use Your Project Website Library Inside Claude Code
• Use Your Captured Website Designs in Claude Code
• Search Your Website Mood Board With an AI Coding Agent
• How to Capture Websites for a Design Reference Collection