# Website design feedback MCP for Windsurf [Open the live Fudge conversation](https://design.withfudge.com/share/website-design-feedback-mcp-for-windsurf) Last updated: 2026-08-25 For website design feedback in Windsurf, use an MCP connection that lets your coding agent inspect saved website references instead of relying on vague visual descriptions. The practical workflow is: collect a few relevant pages, compare their visible design details, then ask Windsurf to turn the useful patterns into changes for your own site. ## A simple workflow that works 1. **Choose two to four reference pages.** Pick examples for a specific reason, such as a strong developer landing page, a clear pricing layout, or a useful mobile header. Avoid collecting pages only because they look polished. 2. **Ask for observations before recommendations.** Have the agent list the page sections, layout structure, type choices, colors, spacing, borders, radii, shadows, images, and interaction states it can verify. 3. **Separate patterns from copying.** A reference can suggest a content order, card structure, type scale, or contrast approach. Your product, content, and brand still need their own decisions. 4. **Turn the review into a small implementation brief.** Ask for specific edits to your current page, with acceptance checks such as consistent spacing, readable text, responsive behavior, and clear hierarchy. 5. **Review the result against the references.** Compare the first screen, navigation, main call to action, section rhythm, and important component states. Then keep or reject each change deliberately. Open the examples below and compare the first screen before borrowing a pattern. The cards include a developer platform, a coding agent page, and an MCP server page, so they are useful as a small starting set for thinking about technical-product presentation. ## 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 Windsurf to check A useful request names the decision you need to make. For example, ask it to compare the reference pages' hero proportions, headline width, supporting copy length, button grouping, and amount of visible product proof. For a component review, ask it to compare card padding, border treatment, corner rounding, icon placement, heading size, body size, and hover or selected states. For typography, ask for the family, available variants, approximate sizes, weights, and line heights that are actually visible in the captured page. For color, ask it to describe roles rather than only listing hex values: page background, raised surface, primary text, muted text, accent, border, and status colors. This makes the result easier to apply consistently. ## A decision framework for design feedback Use this four-part test for every suggested change: - **Hierarchy:** Can a visitor identify what the page is about and what to do next? - **Consistency:** Does the same spacing, type, color, and component logic repeat where it should? - **Clarity:** Does the design help the content make sense, or does it merely add decoration? - **Fit:** Does the pattern suit your product, audience, and existing page structure? Keep a suggestion when it improves at least one of the first three without weakening fit. If a reference has an unusual animation, dense navigation, or highly branded color scheme, treat it as an example to understand, not an instruction to reproduce. ## A prompt you can use now Paste this into Windsurf after connecting your design-reference MCP: > Review my current website against the saved reference pages. First list only observable details for each reference: page sections, layout, typography, color roles, spacing, borders, radii, shadows, imagery, and visible states. Then compare those details with my page. Recommend the five highest-value changes for hierarchy and clarity, explain the reason for each, and provide an implementation plan that preserves my existing content and brand. Do not copy distinctive branding or invent details you cannot verify. For a more concrete output, add the page route, target viewport, framework, and the part of the experience you want to improve. If you want a reusable handoff, ask for the final observations as CSS, Tailwind v4, JSON, or DESIGN.md, then review the result before applying it. ## Use this in your AI agent > Connect Fudge to Windsurf and review my current website against the saved references. Compare observable layout, typography, color roles, spacing, components, and visible states. Recommend the five most useful changes for hierarchy and clarity, then give me an implementation checklist that preserves my brand and content. [Install Fudge for your AI agent](/mcp). --- Include the page you want reviewed, the visitor action that matters most, the reference pages to compare, and the boundaries the agent must preserve. A strong prompt also asks for observations before code. > Review my landing page for a developer product. The main visitor action is starting a trial. Compare it with the saved references, focusing on hero hierarchy, headline width, supporting copy, button grouping, navigation, proof sections, card patterns, typography, color roles, and spacing. First report what is visibly different. Then recommend the five changes most likely to improve clarity. For each change, explain the design reason, identify the affected component, and give an implementation checklist. Keep my current content and brand direction. Do not copy distinctive artwork, wording, or branding, and mark anything you cannot verify. Add your framework, route, target viewport, and any known constraints. If you want code, request it only after approving the findings. This keeps the review focused and makes it easier to reject attractive but unsuitable changes. --- Group the findings by page structure, typography, color, components, and responsive behavior. Then convert each observation into a testable action rather than a general instruction such as "make it feel more modern." For example: - **Page structure:** Put the primary value statement, supporting explanation, and main action in one clear opening sequence. - **Typography:** Set a defined headline width, body size, weight range, and line height for the opening section. - **Color:** Assign roles for the background, surface, main text, muted text, accent, and borders. - **Components:** Standardize card padding, radius, border, icon alignment, and button height. - **Responsive behavior:** Check the opening layout, navigation, cards, and text wrapping at mobile and desktop widths. For every item, include the current state, proposed change, affected files or components, and a visual check. Ask Windsurf to mark each item as verified, needs review, or not applicable after the edits. That produces a practical handoff instead of an unranked collection of inspiration. ## Related questions - [Website design research MCP for Claude Code](/share/website-design-research-mcp-for-claude-code) - [Website Design Feedback MCP for GitHub Copilot](/share/website-design-feedback-mcp-for-github-copilot) - [Website design feedback MCP for Gemini CLI](/share/website-design-feedback-mcp-for-gemini-cli) - [Website design feedback MCP for Claude Desktop](/share/website-design-feedback-mcp-for-claude-desktop)