# Design inspiration MCP for Claude Desktop [Open the live Fudge conversation](https://design.withfudge.com/share/design-inspiration-mcp-for-claude-desktop) Last updated: 2026-08-25 Claude Desktop can use an MCP connection to work from website design references instead of relying only on a written description. A useful workflow is to collect a few references, compare the parts that matter, and ask Claude to turn the observed patterns into a focused implementation plan. ## A practical workflow Start with two to five references that match the job you are doing. For a marketing page, choose references with a similar purpose and audience. For an app screen, choose references with similar density, navigation, and content. Avoid collecting a large moodboard before you know what you need. A smaller set makes differences easier to explain. For each reference, ask Claude to review the same checklist: - What is visible immediately, and which action is easiest to find? - How are sections grouped and spaced? - Which components repeat, such as cards, tabs, forms, or navigation items? - Which typefaces, weights, sizes, and line heights shape the hierarchy? - Which colors serve as background, text, accent, status, and border roles? - What changes between desktop and smaller viewport layouts? Then ask for a comparison, not a copy. A useful result should separate shared patterns from one-off decoration. It should identify which ideas fit your product, which would create unnecessary complexity, and which details still need to be checked in the original reference. Open the examples below and compare their first screen before borrowing a pattern. The Notion Developer Platform, Claude Code, and Exa MCP Server references offer different directions for developer-focused pages. Use them as visual starting points, not as proof that any one layout is right for your project. ## 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) ## What to ask Claude for A strong prompt asks for an outcome you can use immediately. Request a short design brief with these sections: 1. Page goal and primary action. 2. Recommended section order. 3. Layout rules for wide and narrow screens. 4. Typography roles and approximate hierarchy. 5. Color roles and contrast checks to verify. 6. Reusable components. 7. Open questions and details that require confirmation. You can then ask for a second pass that converts the brief into code-ready guidance for your stack. Keep the request grounded in observed details: spacing relationships, card proportions, button placement, heading scale, border treatment, and content density. Ask Claude to label estimates as estimates rather than presenting them as exact measurements. ## Choosing the right references Use references by function: - **Structure:** pages with a similar information hierarchy. - **Typography:** pages whose tone and reading experience fit your brand. - **Interaction:** pages that handle a similar search, setup, checkout, or onboarding task. - **Visual language:** pages with the colors, shapes, imagery, or motion you want to explore. One reference can guide structure while another guides type or color. That is usually more useful than trying to reproduce one page in full. Keep a short record of why each reference is included. If you cannot name the decision it informs, remove it from the set. ## A quick quality check Before using the result in a build, check that the proposed design: - Makes the main action clear without extra explanation. - Keeps headings, body text, and controls readable at smaller sizes. - Uses color for roles rather than decoration alone. - Has enough spacing to show groups and priorities. - Does not depend on imagery that your product cannot maintain. - Distinguishes observed details from your own design choices. When you need more detail, a reference review can include page sections, components, typography, colors, spacing, borders, radii, shadows, imagery, and visible interactions. The goal is a traceable set of decisions that Claude can apply to your codebase, not a vague instruction to make the page feel similar. ## Use this in your AI agent > Review the selected website references for a developer-focused page. Compare their first-screen hierarchy, section order, typography roles, color roles, spacing, card treatment, and primary actions. Separate shared patterns from one-off decoration, recommend a practical direction for my product, and produce a concise implementation brief for Claude Desktop. Mark estimates and unverified details clearly. [Install Fudge for your AI agent](/mcp) to make captured website references available during the conversation. --- Give Claude a clear role, a fixed comparison checklist, and a defined output. For example, ask it to compare three references across first-screen hierarchy, navigation, section order, typography, color roles, spacing, repeated components, responsive behavior, and primary action placement. Tell it what you are building, who it is for, and what constraints matter, such as an existing component library or a limited image budget. Ask for a table with one row per criterion, followed by three sections: shared patterns, meaningful differences, and a recommendation. Request a final implementation brief with page sections, component names, responsive rules, and questions that still need checking. Also tell Claude not to copy wording, logos, illustrations, or distinctive brand details. Ask it to describe what is visibly present and to distinguish observation from interpretation. That keeps the result useful for design decisions while leaving room for an original interface. --- Turn the brief into a small build plan before writing the whole page. First, choose the page goal and primary action. Next, sketch the section order and identify which sections can use existing components. Then define a small set of typography and color roles rather than assigning a new style to every element. Build the first screen before polishing lower sections. Check the result at the widest and narrowest important viewport sizes, then compare it with the brief using the same checklist. Look for unclear hierarchy, crowded controls, weak contrast, inconsistent spacing, and components that only work because the reference had different content. If the result feels too close to one reference, return to the comparison and replace distinctive details with decisions based on your own product. Keep the references nearby for structure and quality checks, but treat the brief as a set of reasons and rules, not a screenshot to reproduce. ## Related questions - [Design inspiration MCP for Cline](/share/design-inspiration-mcp-for-cline) - [Best design MCP for AI coding agents](/share/best-design-mcp-for-ai-coding-agents) - [Website reference MCP for Windsurf](/share/website-reference-mcp-for-windsurf) - [Website references for GitHub Copilot](/share/website-reference-mcp-for-github-copilot)