# Website design research MCP for Claude Desktop [Open the live Fudge conversation](https://design.withfudge.com/share/website-design-research-mcp-for-claude-desktop) Last updated: 2026-08-25 Claude Desktop can use Fudge to compare captured website references and turn visible patterns into a practical design brief. Start with observations, then make design decisions, and only then ask for implementation help. This keeps the result grounded in the references while still adapting it to your product. ## Use a focused research workflow Begin with one concrete question. Instead of asking Claude Desktop to research website design, ask it to compare three references for a defined job, such as explaining a developer product, presenting an MCP workflow, or guiding visitors to documentation. Use this sequence: 1. **Inspect:** identify page sections, layout, typography, colors, components, images, and visible interactions. 2. **Compare:** show where the references agree, where they differ, and which differences affect the visitor's task. 3. **Decide:** choose the patterns that fit your audience, content, and product constraints. 4. **Apply:** create a short brief with reusable rules, responsive behavior, and open questions. The examples below are useful starting points for comparing technical product pages. They are references to inspect, not a ready-made design system. You can open the references directly: [Notion Developer Platform](https://notion.com/product/dev), [Claude Code](https://anthropic.com/claude-code), and [Exa MCP Server](https://exa.ai/mcp). ## 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 for details you can build from Request a page outline with the purpose of each section, content width, grid behavior, alignment, spacing, typography roles, color roles, component treatments, media behavior, responsive changes, and interaction states. Ask Claude to label each item as an observation, an assumption, or a recommendation. A decision table keeps the comparison practical: | Visitor need | What to check | |---|---| | Understand the product | Headline clarity, supporting explanation, and context | | Find the next step | Primary action placement, labels, and repeated entry points | | Trust the product | Proof, examples, documentation, or workflow explanation | | Scan technical information | Headings, code, diagrams, tables, and spacing | | Use the page on mobile | Navigation, columns, media, controls, and text wrapping | Ask for tradeoffs, not a winner. A strong recommendation explains why a pattern fits your audience and what it costs in content, engineering effort, or page length. ## Turn research into a build brief Keep the final brief short enough to use beside your code. Include the page goal, audience, primary action, section order, reusable components, design tokens, responsive rules, content placeholders, and review checks. Add accessibility checks for heading order, keyboard focus, contrast, labels, reduced motion, and error messages. If an exact detail matters, use Fudge through Claude Desktop to inspect the captured reference's structure, typography, colors, or component styling. Ask for plain design language and record uncertain values as estimates. The goal is a buildable direction, not a copy of another product's text, assets, logo, or identity. ## Use this in your AI agent > Use the available website references to research a design direction for my Claude Desktop project. Compare page structure, visitor flow, layout, typography, colors, spacing, components, media treatment, responsive behavior, and interaction states. Label direct observations separately from assumptions and recommendations. Create a decision table, then a concise implementation brief with reusable tokens, accessible states, mobile rules, open questions, and a review checklist. Adapt general patterns to my product and content. Do not copy brand-specific text, assets, logos, or identity. Use Fudge to inspect a reference when a specific design detail needs verification. [Install Fudge for your AI agent](/mcp) --- Give Claude Desktop a concrete deliverable and a fixed comparison rubric. State what you are building, who it serves, the main action visitors should take, and which screens matter. Ask for a table with one row per category: structure, layout, typography, color, components, media, interaction, and responsive behavior. Require three labels in every row: observed detail, likely implication, and recommended decision. This prevents a visual impression from becoming an unsupported rule. Set a stopping point too. After the comparison, request a one-page brief with no more than five major design decisions and a list of unresolved content questions. You can then use that brief for implementation and ask Claude to review the result against those decisions. --- Include the page goal, audience, primary action, and section order first. Define layout rules next: content width, grid behavior, spacing rhythm, alignment, and how sections stack at smaller widths. Add typography roles with fallback choices, expected size, weight, line height, and readable measure for headings, body text, labels, captions, and code. Define color roles such as background, surface, text, muted text, border, accent, success, and danger. Record component rules for navigation, buttons, cards, forms, code examples, links, and focus states. Finish with mobile behavior, loading and error states, reduced-motion behavior, content placeholders, and a review checklist. Label values taken from references as observed starting points rather than official product rules. Use [Fudge for your AI agent](/mcp) when a captured detail needs checking. ## Related questions - [Website design research MCP for Cline](/share/website-design-research-mcp-for-cline) - [Website design feedback MCP for Windsurf](/share/website-design-feedback-mcp-for-windsurf) - [Website design research MCP for Claude Code](/share/website-design-research-mcp-for-claude-code) - [Website design research MCP for Codex](/share/website-design-research-mcp-for-codex)