# Website Reference MCP for Claude Code [Open the live Fudge conversation](https://design.withfudge.com/share/website-reference-mcp-for-claude-code) Last updated: 2026-08-25 A website reference MCP for Claude Code helps when the agent can inspect saved website examples while editing a real page. The strongest workflow is not “make my site look like this.” It is: define the page goal, compare a few references, separate visible observations from recommendations, approve a small set of patterns, and then implement them within clear boundaries. ## Begin with a focused comparison Name the page you are improving and the decision you need to make. A developer landing page may need a clear setup action, while a documentation page may need navigation and readable technical examples. Tell Claude Code what content, routes, forms, and interactions must remain unchanged. Use a request such as: > Compare my saved website references for the target page. Check page structure, hero composition, navigation, typography scale, color roles, spacing rhythm, buttons, cards, code examples, borders, shadows, and narrow-screen behavior. Return observed details separately from recommendations, then choose the smallest set of patterns that supports my page goal. The examples below make that request concrete. Notion Developer Platform, Claude Code, and Exa MCP Server are available as reference cards. Compare their first screen, content density, calls to action, and treatment of technical content. Use the observations as inspiration, not as a reason to reproduce their branding or wording. ## 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 Claude Code to inspect useful details Request a short decision record before editing. A practical format is “observed,” “recommended,” “why,” and “needs manual verification.” Ask the agent to cover: - **Structure:** order and purpose of major sections, columns, alignment, and content width. - **Typography:** families, weights, sizes, line heights, heading contrast, and text measure. - **Color:** background, surface, text, muted text, link, action, border, and highlight roles. - **Spacing:** section padding, card gaps, button padding, navigation spacing, and paragraph rhythm. - **Components:** buttons, inputs, code samples, cards, tabs, notices, and navigation states. - **Responsive changes:** what stacks, wraps, shrinks, moves, or disappears on small screens. - **Content fit:** whether the reference pattern still works with your own headings and examples. Do not request exact values when the reference cannot support them. A visible relationship can be useful without pretending to be a measured rule. Ask Claude Code to label adapted values so you can review them separately from observations. ## Build a compact design system After choosing a direction, define reusable values for page and surface backgrounds, primary and muted text, action colors, borders, spacing, radii, shadows, type sizes, line heights, and content widths. Map these values to the target components instead of adding isolated styling decisions. A bounded implementation request might be: > Apply the approved values and component rules to the landing page. Preserve the existing content, routes, form behavior, and primary action. Update the hero, navigation, buttons, cards, and code example styles only where the comparison supports a change. Keep the layout usable on narrow screens. Report changed files, observed references, adapted decisions, and checks I should run manually. This creates a result that can be reviewed without asking the agent to redesign the entire project. ## Keep reference work honest Captured pages show appearance, but they may not reveal hidden states, source behavior, licensing, or the complete responsive system. Ask Claude Code to flag those items as unverified. Do not treat a screenshot as an official design system or assume that its font, assets, or interactions can be reused. Avoid mixing too many visual languages. Pick one structural model, such as a developer landing page or documentation-style page, then borrow only a few compatible details. Check the result with your own content at the same viewport sizes used for comparison. Review text wrapping, focus states, contrast, and whether the main action remains obvious. ## Use this in your AI agent > Use my saved website references while improving this Claude Code project. Inspect and compare structure, typography, color roles, spacing, component styles, and responsive behavior. Separate observed details from recommendations and flag anything unverified. Propose a compact token and component system, then apply only approved changes to [target page or components]. Preserve original wording, branding, routes, and existing interactions. Finish with changed files, accessibility checks, and design decisions that need human review. [Install Fudge for your AI agent](/mcp) to use website references inside this workflow. --- Ask Claude Code to extract reusable rules rather than imitate the page. Limit the result to values and component behavior that fit your project, and distinguish direct observation from adaptation. > From the saved reference, extract reusable rules for type hierarchy, spacing steps, content widths, surface and border treatment, button hierarchy, card structure, and responsive changes. Do not copy text, logos, illustrations, brand colors, or unverified behavior. For each rule, label it observed or adapted, explain where it belongs in my project, and identify anything needing manual review. Then propose values and component variants for the target page. Approve the proposal before requesting implementation. This gives you a clear point where you can remove a pattern before it becomes code. --- Choose one page goal and one structural direction before implementation. Decide whether the page should help developers understand a tool, start setup, or browse documentation. Then select only the reference patterns that support that job. Use an approval prompt like this: > Use the comparison to create an implementation plan for the target page. Choose one page structure, one type hierarchy, one spacing rhythm, and a small set of component rules. Keep existing content, routes, and actions. List the files to change, values to add or reuse, responsive checks, and risks. Do not edit until the plan is internally consistent. After reviewing the plan, ask Claude Code to implement the approved items and rerun the same checklist. Pay special attention to mobile layout, focus states, text wrapping, contrast, and whether the visual hierarchy matches the page's actual goal. ## Related questions - [Website references for Claude Desktop](/share/website-reference-mcp-for-claude-desktop) - [Website Design System MCP for Windsurf](/share/website-design-system-mcp-for-windsurf) - [Website reference MCP for Cline](/share/website-reference-mcp-for-cline) - [Use Website References in Codex with an MCP Server](/share/website-reference-mcp-for-codex)