Use real website examples inside Claude Desktop

To use real website examples inside Claude Desktop, connect a saved reference library to your coding workflow, then ask Claude to inspect concrete page details before writing code. A reliable process is: choose two or three relevant examples, compare the same categories across each one, turn the findings into a short design brief, and review the first implementation against the references.

Choose references for a specific job

Do not begin with a vague request such as "make this feel modern." Choose examples that solve a similar visitor problem. For a developer-product page, compare the navigation, headline width, supporting copy, primary action, content density, proof, and first product visual. Also note what should remain different, such as brand colors, logos, wording, and illustrations.

The examples below are useful starting points for a developer-oriented comparison. They are references, not ready-made specifications. A capture can show a visible pattern without proving the original component code, design tokens, responsive rules, or licensing terms.

Give Claude a comparison task

In Claude Desktop, configure the Fudge MCP server through the app's MCP settings or the configuration method recommended for your installation. Then ask Claude to search your saved references, inspect selected pages, compare observable details, and return a plan before producing code.

Include the constraints that affect the result:

• Framework and styling approach
• Target viewport and responsive breakpoints
• Components to create or reuse
• Content hierarchy and accessibility requirements
• Reference traits approved for inspiration
• Brand details that must not be copied

Ask Claude to separate observations from recommendations. A useful table has columns for reference, observed pattern, proposed adaptation, and confidence. Request checks for heading wrapping, muted-text readability, card alignment, long labels, keyboard focus, and narrow-screen behavior.

Turn the comparison into an original build

Have Claude name decisions such as container width, type scale, spacing rhythm, button states, card anatomy, and responsive changes. Ask it to flag anything that was not visible instead of inventing an answer. Then request a small first pass with the page shell, typography, primary action, and one representative content block.

Review that pass at the same viewport as the reference. If the result feels wrong, describe the concrete mismatch: excessive density, weak contrast, an oversized headline, an unclear action, or a card layout that does not fit the content. Feed that observation back to Claude with the reference name and desired change.

This workflow makes real examples useful without treating a captured page as a design system or copying its identity. It gives Claude enough evidence to adapt a pattern to your product while keeping the final content, branding, and implementation original.

Use this in your AI agent

> Search my saved website references for developer-product pages, compare the Notion Developer Platform, Claude Code, and Exa MCP Server examples where available, and inspect their observable layout, typography, color roles, spacing, and component patterns. Return a comparison table, identify which patterns fit my page goal, flag anything unverified, and propose an original implementation plan without copying branding or wording.

To connect this reference workflow to Claude Desktop and other coding agents, install Fudge for your AI agent.

Ask Claude to compare the first-screen structure, including navigation, headline width, supporting copy, primary action, secondary action, proof, and the first product visual. Then compare heading and body sizes, weight, line height, text measure, content width, section spacing, columns, card alignment, image cropping, borders, radii, shadows, and muted-text contrast.

For mobile, ask which elements stack, shrink, disappear, or change order. Tell Claude to label each result as observed, uncertain, or recommended. Ask it to explain how each observation affects the visitor's next action, not just describe the appearance. End with three decisions: the content width, the type scale, and the primary action treatment. Those choices give the first code pass a clear direction while leaving room for original content and branding.

You can also ask for a short review checklist that covers long headings, keyboard focus, contrast, loading states, and realistic content length. That turns the comparison into something you can use during implementation instead of a one-time moodboard.

Name the traits you want to study, such as content density, type contrast, card grouping, or navigation clarity. Explicitly exclude logos, distinctive color combinations, exact wording, illustrations, and unusual decorative marks.

Ask for an adaptation brief with three columns: observed pattern, why it works for that reference, and a different treatment for your product. Request at least two alternatives for the most visible choice, then compare them at the intended viewport with real content. Ask Claude to label uncertainty when a responsive rule, font source, or state was not visible.

Before accepting the result, replace placeholder copy with your own message and check whether the layout still works. Review the most recognizable elements separately, including the hero composition, illustrations, color pairings, and navigation treatment. This keeps the result useful and original while preserving the practical lesson from the reference.

Related questions

• Use website design references inside Cline
• Use Real Website Examples Inside Claude Code
• MCP Server for Website Design References
• Design inspiration MCP for Windsurf