Website references for Claude Desktop

Use captured website references with Claude Desktop to compare layouts, fonts, colors, and components while building a better page.

website reference mcp for claude desktop

Contents

  • [Use a reference in three passes](#use-a-reference-in-three-passes)
  • [What to ask Claude to inspect](#what-to-ask-claude-to-inspect)
  • [A practical comparison checklist](#a-practical-comparison-checklist)
  • [Keep the result original and maintainable](#keep-the-result-original-and-maintainable)
  • [Use this in your AI agent](#use-this-in-your-ai-agent)

A website reference MCP for Claude Desktop lets you bring captured design examples into an AI coding conversation, so Claude can compare pages and turn observed details into practical implementation guidance. The useful workflow is to give Claude a small set of references, ask it to inspect specific details, and then apply the result to your own page rather than copying an entire site.

Use a reference in three passes

Start with the page goal, not with a vague request to make something look better. Tell Claude what you are building, which part needs work, and what should remain unchanged. Then ask for three separate passes:

  1. Structure: identify the visible sections, content order, navigation pattern, hero layout, cards, calls to action, and responsive changes.
  2. Visual system: compare typography, colors, spacing, borders, radii, shadows, image treatment, and component states.
  3. Implementation: convert only the useful observations into your existing CSS, Tailwind classes, or component structure.

This separation makes the result easier to review. It also keeps a reference from becoming a design instruction that is too broad to implement safely.

Open the examples below and compare the first screen before borrowing a pattern. The set includes Notion Developer Platform, Claude Code, and Exa MCP Server. Treat them as references to study, not as proof that one visual direction is right for your project.

Captured pages

What to ask Claude to inspect

Useful prompts name the decision you need to make. For example:

  • “Compare the hero structure in these references and recommend one pattern for a developer tool landing page.”
  • “List the repeated spacing relationships rather than copying individual pixel values.”
  • “Identify the type hierarchy, including likely roles for display, body, labels, and code.”
  • “Compare the primary button treatment, supporting actions, and contrast between foreground and background.”
  • “Turn the observed design details into Tailwind v4 tokens and explain which values are estimates.”

Ask for evidence at the level you can check: section order, relative scale, alignment, color role, and component behavior. If an exact font, value, or interaction matters, ask Claude to mark it as confirmed, estimated, or still needing verification.

A practical comparison checklist

Before changing your page, record the following for each reference:

  • What appears in the first viewport?
  • Where does the main action sit, and how quickly can a visitor find it?
  • Is the layout dense, spacious, editorial, technical, or product-led?
  • How many type sizes carry most of the hierarchy?
  • Which color is reserved for actions or status?
  • Are cards separated by borders, fills, shadows, spacing, or a combination?
  • What happens when the layout becomes narrow?
  • Which parts are patterns worth adapting, and which depend on the original brand?

Then choose one reference for structure and one for visual cues. Mixing several references without a decision rule usually produces a page that feels inconsistent.

Keep the result original and maintainable

A strong output is a small design brief Claude can implement: recommended section order, type roles, color roles, spacing scale, component rules, responsive behavior, and a short list of rejected alternatives. It should describe what to build in your codebase, not reproduce a page line by line.

If you want to inspect a captured page more closely, a Fudge action can return details about its sections, typography, colors, spacing, and component styling for Claude to use in the next implementation step. You can also ask for a DESIGN.md draft so the decisions remain available after the conversation.

Use this in your AI agent

> Use the attached website references to improve my current landing page. First compare their visible section order, hero composition, typography hierarchy, color roles, spacing, buttons, cards, and responsive behavior. Recommend one coherent direction, label observations as confirmed or estimated, and explain what not to copy. Then propose the smallest Tailwind v4 and component changes needed to implement that direction in my existing code. Preserve my content, accessibility, and working interactions unless a change is necessary. End with a review checklist.

Install Fudge for your AI agent to use this reference workflow inside your coding conversation.

What should I ask Claude Desktop to compare first?

Start with the parts that affect the visitor's decision: the first viewport, headline hierarchy, primary action, navigation, and the path from the hero to the next section. These choices shape the page more than isolated colors or decorative effects.

A useful prompt is:

> Compare the attached references with my current page. Focus first on the first viewport, section order, headline and body type roles, primary and secondary actions, card structure, and responsive behavior. Give me three possible directions, recommend one, and explain the tradeoffs before suggesting code.

After Claude recommends a direction, ask for a second pass on details such as spacing, borders, radii, shadows, and image crops. Keep those passes separate so you can reject a visual detail without losing the structural recommendation. If you need exact values, ask for them as inspectable observations or estimates rather than treating every inferred number as a design rule.

How do I turn the comparison into code without copying the reference?

Ask Claude to translate the comparison into rules for your existing components. The output should name roles and relationships, such as a display type scale, a readable body measure, a restrained accent color, consistent card padding, and a clear mobile stacking rule. It should not recreate the reference's brand language or page content.

Use this prompt:

> Convert the approved design direction into a short implementation plan for my existing components. Define typography roles, color roles, spacing tokens, button and card rules, responsive breakpoints, and any required states. Use Tailwind v4 where appropriate, preserve the current content and accessibility, and show only the files or components that need changes. Mark uncertain values as estimates and include a visual QA checklist.

Implement in small passes: structure first, type and spacing second, then color and polish. Compare the result against the reference at the same viewport sizes, but judge the finished page by clarity and usability for your own audience.

Related questions