# Website design research MCP for Cursor [Open the live Fudge conversation](https://design.withfudge.com/share/website-design-research-mcp-for-cursor) Last updated: 2026-08-25 If you want Cursor to use website design references while you build, an MCP server can connect your coding workflow to saved examples and their observable design details. The best method is to compare a focused set of references, write down the decisions they suggest, and only then ask Cursor to implement an original version. ## The method that works Begin with a clear screen-level question. "How should this developer product explain setup?" is more useful than "Find a cool landing page." Collect a few relevant examples, then search for visual descriptions that match your question. Useful searches describe the composition, such as "developer landing page with a product preview beside a short hero" or "documentation page with a narrow reading column and persistent navigation." Open the examples below and compare their first screens. Notion Developer Platform, Claude Code, and Exa MCP Server are concrete references for thinking about developer audiences, page density, calls to action, and product explanation. Use them as research material, not as templates to reproduce. Your working sequence should be: 1. Search for references by page type and visual problem. 2. Inspect the page structure and visible states. 3. Record recurring layout and typography decisions. 4. Compare which choices fit your product and content. 5. Give Cursor a short brief before asking for code. ## 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 inspect before implementation For the layout, record the section order, maximum content width, column relationships, alignment, gaps, and changes at smaller widths. For typography, separate display headings, supporting text, labels, navigation, and code or technical content. Note family, weight, size, line height, and measure where those details are visible. For styling, identify color roles rather than collecting colors without context. Mark which color belongs to the page background, primary text, muted text, borders, buttons, links, status messages, and highlighted surfaces. Also check whether cards rely on borders, shadows, tinted backgrounds, gradients, or simple spacing. For behavior, note what is visible in the capture: navigation states, tabs, menus, overlays, video, clipping, or motion. Do not assume an interaction works a certain way just because it looks familiar. Ask Cursor to label observed behavior separately from proposed behavior. ## A reference comparison you can use Create one row per website and compare these fields: - Audience and page purpose - Hero layout and action placement - Navigation and section rhythm - Content width and responsive changes - Heading and body hierarchy - Card, button, border, radius, and shadow choices - Product preview or image treatment - Strong patterns to adapt - Brand-specific details to avoid Then choose, instead of averaging everything together. For example, you might take the compact navigation from one reference, the explanatory hero structure from another, and a simpler surface treatment from a third. Tell Cursor why each choice was selected and which existing components or tokens it must preserve. ## Make the result durable Ask Cursor to produce a design brief before editing the project. The brief should include the page goal, content order, component plan, type scale, color roles, spacing rules, responsive behavior, accessibility checks, and open questions. This turns research into something you can review with a teammate and reuse when the page changes. Use observed details as evidence, not as ownership claims. A captured page can help you understand hierarchy, proportion, and visual relationships, but it does not give you the original design system, source files, brand permission, or exact implementation. Write new copy, use suitable assets, and adapt the underlying decisions to your own product. Before calling the page finished, compare it at the same viewport as the reference and then test longer content, keyboard navigation, narrow screens, and visible focus states. A strong result keeps the useful structure while remaining readable and maintainable when the reference dimensions no longer apply. ## Use this in your AI agent > Use the connected website design references to research a developer-facing screen for my Cursor project. Compare the examples by page purpose, layout, typography, color roles, spacing, surfaces, responsive behavior, and visible interactions. Return a concise comparison table, recommend an original direction that fits my existing components and tokens, and write a reviewable design brief before changing code. Clearly separate observed details from recommendations, and do not invent facts that are not visible in the references. [Install Fudge for your AI agent](/mcp) to use this workflow from Cursor. --- Design research extracts decisions you can understand and adapt. Copying asks for a surface match without examining why the original page is organized that way. Research compares the page goal, content order, hierarchy, spacing, type scale, color roles, responsive behavior, and interaction states. It then asks whether those choices fit your product, audience, content, and existing code. Copying usually starts with a screenshot and a request to reproduce it, which can produce brittle layout code, borrowed brand cues, and a result that fails when your text or images differ. A useful Cursor instruction is: "Explain which patterns are structural, which are decorative, and which depend on the original brand. Adapt the structural patterns to my product, replace brand-specific details, and preserve my existing component conventions." Review the explanation before implementation. If Cursor cannot connect a visual choice to a page goal or content need, treat it as decoration and question whether it belongs in your interface. --- Set boundaries before asking for code. Name the files or component area to change, list the existing components Cursor should reuse, and state which tokens, routes, data shapes, and dependencies must remain unchanged. Ask for a plan and a small first patch rather than a full redesign. Give it acceptance checks such as: the hero supports a longer heading, the layout collapses cleanly on narrow screens, buttons keep their existing focus treatment, text remains readable, and no new dependency is needed. Ask Cursor to identify any missing asset or content assumption before filling it with a placeholder. A disciplined sequence is: research brief, component plan, first-section implementation, visual review, responsive review, then the next section. Keep the comparison table beside the code review so you can check whether each change answers a documented decision. If an edit goes beyond the agreed area, ask Cursor to revert that part and explain why it was proposed. ## Related questions - [Website design research MCP for Gemini CLI](/share/website-design-research-mcp-for-gemini-cli) - [Website Design Research MCP for GitHub Copilot](/share/website-design-research-mcp-for-github-copilot) - [Website design research MCP for Claude Desktop](/share/website-design-research-mcp-for-claude-desktop) - [Website design system MCP for Claude Code](/share/website-design-system-mcp-for-claude-code)