Website design research MCP for Claude Code

Contents

• [Start with a specific research question](#start-with-a-specific-research-question)
• [Research in the right order](#research-in-the-right-order)
• [Compare references without copying them](#compare-references-without-copying-them)
• [Turn the research into a handoff](#turn-the-research-into-a-handoff)
• [Use this in your AI agent](#use-this-in-your-ai-agent)

For website design research in Claude Code, use an MCP connection that gives your coding agent concrete website references to compare while it works. The useful process is to collect pages around one design question, inspect their visible structure and styling, and turn the comparison into a focused implementation brief rather than asking for generic inspiration.

Start with a specific research question

A good question is narrow enough to answer and practical enough to change your site. Examples include:

• How do technical products structure the opening screen?
• Which type scale makes dense documentation easier to scan?
• How are feature cards grouped without making the page feel crowded?
• Which color roles create enough contrast while keeping the interface restrained?
• How does the mobile layout change the order of navigation, proof, and calls to action?

Choose two to four references that help answer the same question. The examples below include Notion Developer Platform, Claude Code, and Exa MCP Server. Use them as comparison material for technical-product pages, not as proof that one visual style is right for every project.

Research in the right order

Ask Claude Code to work through the references in four passes:

1. Page structure: Record the visible sections, their order, container width, alignment, columns, and the amount of content shown before scrolling.
2. Visual system: Record typography families and variants, approximate sizes and line heights, color roles, spacing, borders, radii, shadows, gradients, and component treatments.
3. Interaction and state: Note visible navigation behavior, buttons, tabs, accordions, overlays, clipping, media, and any captured page states. Label anything that is not directly visible as unverified.
4. Application: Compare the observations with your current page and rank changes by visitor impact, implementation effort, and confidence.

This sequence prevents the agent from jumping from a screenshot to code. It also gives you a record of why a change was recommended.

Compare references without copying them

Use a table with one row per design decision and one column per reference. Useful rows include opening-section height, headline width, supporting-copy length, primary-action placement, navigation density, card padding, border contrast, heading-to-body scale, and mobile stacking order.

Then classify each pattern as shared, distinctive, or unclear. Shared patterns may be useful conventions. Distinctive patterns may depend on the original brand or content. Unclear patterns need another capture, a wider viewport, or a direct review in the browser before you build around them.

A practical score helps when the references disagree:

• Visitor value: Does the change make the next action or information easier to understand?
• Evidence: Is the detail visible across enough references to trust as a pattern?
• Fit: Does it suit your product, audience, and content length?
• Cost: Can your team implement and maintain it without creating unnecessary complexity?

Prioritize high-value, high-fit changes with clear evidence. Defer decorative details until hierarchy, readability, and responsive structure are working.

Turn the research into a handoff

Ask Claude Code to produce a short brief with five parts: the research question, observed patterns, differences between references, recommended decisions, and checks for the implementation. A useful handoff names the affected page sections and components, includes responsive checks, and distinguishes observed details from choices you still need to make.

If the team needs a reusable record, request the approved observations in CSS, Tailwind v4, JSON, or DESIGN.md. Treat that output as documentation of observed design details and chosen project rules, not as ownership of an official internal design system. Confirm font licensing, brand permissions, and accessibility requirements separately when they matter.

Use this in your AI agent

> Connect Fudge to Claude Code and research my saved website references for one question: how should my technical-product landing page organize its opening screen and feature sections? Record observable page structure, typography, color roles, spacing, components, media, and visible states. Compare the references in a table, classify patterns as shared, distinctive, or unclear, then recommend five decisions ranked by visitor value, evidence, fit, and implementation cost. Finish with a responsive implementation checklist and clearly label anything that still needs browser verification.

Install Fudge for your AI agent.

Start with details that affect comprehension and implementation across the whole page. Research page structure before decoration, because a strong color palette cannot fix an unclear opening sequence.

First check the opening section: headline width, supporting-copy length, primary action, secondary action, navigation density, and visible proof. Next check the repeated system: container width, spacing steps, heading and body sizes, weights, line heights, surface colors, border contrast, corner radii, and button treatments. Then inspect feature cards, forms, tables, media crops, and responsive stacking.

For each detail, ask Claude Code to record what is visible, how certain the observation is, and whether it appears across more than one reference. Ask it to avoid guessing hidden behavior from a static capture. Finish by comparing those findings with your current page, including content length and component constraints. This produces research you can use instead of a list of attractive screenshots.

Use a prompt that fixes the comparison criteria and asks for decisions only after the evidence is organized:

> Compare the three saved website references for a technical-product landing page. Review them one at a time, then create a comparison table covering section order, container and column structure, headline width, body text, primary action, proof placement, typography, color roles, spacing, borders, radii, shadows, imagery, and visible interaction states. Mark each finding as observed, inferred, or unclear. Identify patterns shared by multiple references and separate them from distinctive branding. Compare the findings with my current page and recommend five changes ranked by visitor value, confidence, fit, and implementation effort. End with a checklist for desktop and mobile review. Do not invent hidden behavior or copy distinctive wording and artwork.

Add your page URL or route, framework, target viewport, and the visitor action you care about. If you want an implementation handoff, ask for approved changes in your project vocabulary and request code only after the research table is reviewed.

Related questions

• Website design research MCP for Claude Desktop
• Website design feedback MCP for Windsurf
• Website design research MCP for Gemini CLI
• Website Design Research MCP for GitHub Copilot