Website reference MCP for Windsurf
Use captured website references in Windsurf to compare layouts, fonts, colors, and components before you build a new interface.
website reference mcp for windsurf
A website reference MCP for Windsurf helps you bring real website examples into your coding workflow, inspect the decisions behind them, and turn those observations into practical build notes. The useful workflow is more specific than asking an agent to make a page look similar. You give it saved references, ask it to identify visible patterns, and decide which patterns belong in your product.
A useful reference workflow
Use this process when starting a new page or improving an existing one:
- Save two or three websites that solve a similar communication problem.
- Ask for observations about sections, content width, spacing, typography, colors, buttons, cards, imagery, and responsive behavior.
- Compare the references and separate shared patterns from one-off details.
- Turn the useful observations into component rules, CSS variables, Tailwind utilities, or a DESIGN.md brief.
- Review the proposed changes against your existing content, navigation, accessibility requirements, and brand.
This gives Windsurf concrete material to work with while keeping your copy, product structure, and visual identity original. It also makes the design discussion easier to review because each recommendation can be traced to an observed detail or an explicit product decision.
Open the examples below and compare their first screens before borrowing a pattern. Notion Developer Platform, Claude Code, and Exa MCP Server are useful references for developer-facing pages. Treat them as material to analyze, not templates to reproduce.
Captured pages
What to ask Windsurf to inspect
Ask for concrete details instead of mood words. A strong review covers:
- The order and purpose of major sections
- Main content width, alignment, and surrounding space
- Heading and body fonts, sizes, weights, and line heights
- Background, text, border, accent, and button colors
- Button padding, shape, border, and interaction states
- Card gaps, dividers, shadows, and image crops
- Desktop and narrow-screen layout changes
- Details that define the page and details that can change
Then ask Windsurf to label each result as an observation, an adaptation, or an implementation decision. This prevents a visible fact from being presented as a requirement and keeps the agent from making unsupported assumptions.
A prompt you can paste
> Review my saved website references for patterns I can adapt to this product. First list observed facts about layout, typography, colors, spacing, buttons, cards, imagery, and responsive behavior. Then compare the references and identify shared patterns and meaningful differences. Finally propose an implementation plan for my existing components. Keep the content, branding, and structure original. Use accessible HTML and explain which recommendations are observations versus new design choices.
Add your framework, component constraints, supported screen sizes, and accessibility requirements. For code-ready output, request CSS variables, Tailwind utilities, or a short DESIGN.md. Keep the first request focused so Windsurf does not rewrite unrelated files.
Use this in your AI agent
> Use my saved website references to guide this Windsurf task. Compare their layout, typography, colors, spacing, components, imagery, and responsive behavior. Separate observed facts from recommendations, keep my content and branding original, and produce an implementation plan for my existing components before changing code.
How should I ask Windsurf to use a website reference without copying it?
Ask Windsurf to extract rules and patterns rather than reproduce the page. Have it describe the reference first, compare it with your current interface, and explain which ideas fit your product. Set clear boundaries: keep the copy, logo, navigation, imagery, content structure, and brand identity original unless you explicitly choose to change them.
A useful prompt is:
> Analyze this reference as design research. List the visible layout, typography, spacing, color, component, and responsive patterns. Explain why each pattern may work. Recommend adaptations for my product, but do not copy text, branding, imagery, or page structure. Show the proposed changes as component-level tasks and wait before editing unrelated files.
This gives you a design rationale you can review. You can accept a spacing system while rejecting the navigation, or borrow a card hierarchy while using your own content and visual identity.
What should I check after Windsurf implements the reference-inspired design?
Review the result in five passes. First, check hierarchy: can a visitor identify the main action quickly? Second, compare spacing and alignment at the same viewport size as the reference. Third, verify heading width, line height, and contrast. Fourth, test narrow screens and keyboard navigation. Fifth, remove details that look borrowed but do not help your product.
Ask Windsurf for a short table with columns for reference observation, implemented choice, and reason. Then inspect the key breakpoints yourself. If the result feels close but generic, change one high-impact variable at a time, such as type scale, content width, button treatment, or section rhythm. That makes improvements easier to evaluate.