# Website references for GitHub Copilot

[Open the live Fudge conversation](https://design.withfudge.com/share/website-reference-mcp-for-github-copilot)

Last updated: 2026-08-25

A website reference MCP for GitHub Copilot helps you bring captured design examples into an AI coding workflow, so Copilot can compare page structure and observed visual details while you build. The most reliable approach is to use references as a decision guide, then ask Copilot to adapt the chosen patterns to your existing components and styles.

## Start with a concrete coding decision

Do not begin with “make my site look like this.” Start with a bounded request such as “choose a hero structure,” “improve the pricing card hierarchy,” or “make this developer landing page easier to scan.” Include the current component or page, the constraints, and the references you want compared.

Ask for the work in this order:

1. **Describe the references:** section order, visible hierarchy, navigation, cards, actions, imagery, and responsive behavior.
2. **Compare the options:** explain what each reference does well for your specific audience and what should not be borrowed.
3. **Write an implementation plan:** identify the components, tokens, styles, and tests that need changes.
4. **Make a narrow edit:** update one area, then review the result before continuing.

This keeps Copilot focused on a useful change instead of encouraging a broad visual rewrite.

Open the examples below and compare the first screen before borrowing a pattern. They include Notion Developer Platform, Claude Code, and Exa MCP Server. Their value here is as a compact set of design references with different approaches to developer-facing pages. Use them to ask better questions, not to assume that their exact structure belongs in your product.

## 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 for observations you can verify

Give Copilot prompts that request visible, checkable details:

- “List the sections in order and describe how each one earns attention.”
- “Compare the type scale and identify roles for the headline, body, label, code, and button text.”
- “Describe the spacing rhythm between sections, cards, controls, and headings.”
- “Compare color roles, contrast, borders, radii, shadows, and emphasis states.”
- “Explain how each layout changes on a narrow screen.”
- “Turn the chosen direction into Tailwind v4 tokens without replacing my existing design system.”

When a detail cannot be confirmed from the reference, ask Copilot to label it as an estimate. This is especially useful for inferred font weights, approximate spacing, and behavior that is not visible in a captured state.

## A simple reference scorecard

Score each candidate from one to five against the job your page must do:

| Check | Question |
|---|---|
| Clarity | Can a new visitor understand the offer quickly? |
| Hierarchy | Is the next action obvious without competing elements? |
| Density | Does the page provide enough detail without feeling crowded? |
| Trust | Do examples, proof, and product details appear at the right time? |
| Adaptability | Can your current components support the pattern without a rewrite? |
| Responsive fit | Does the structure still work when columns stack? |

Choose the reference with the strongest total for your goal, not the one with the most impressive decoration. If two references score differently, use one for structure and borrow only a narrow visual rule from the other.

## Turn the decision into a safe code change

Ask Copilot to return a short design brief before editing: recommended section order, type roles, color roles, spacing scale, component rules, responsive behavior, and rejected alternatives. Then request a file-by-file plan and a small patch. Keep content, accessibility, focus states, keyboard behavior, and existing interactions intact unless the reference comparison shows a clear reason to change them.

A Fudge action can help return observed page structure, typography, colors, spacing, and component details for the references you want Copilot to compare. Those observations are most useful when they become named decisions in your code review, such as “use a quieter border and stronger heading contrast,” rather than unexplained copied values.

## Use this in your AI agent

> Compare my current page with the attached website references for a developer-facing product. First summarize their visible sections, hero layouts, typography roles, color roles, spacing, cards, actions, imagery, and responsive behavior. Score each reference for clarity, hierarchy, density, trust, adaptability, and mobile fit. Recommend one coherent direction, mark uncertain observations as estimates, and explain what should not be copied. Then create a small Tailwind v4 and component implementation plan that preserves my content, accessibility, existing interactions, and current design system. End with a visual QA checklist.

[Install Fudge for your AI agent](/mcp) to make website references available during your coding workflow.

---

Yes, if you give the comparison a clear job and a fixed scorecard. Ask Copilot to inspect the references together, but require it to separate observations from recommendations. Otherwise, it may blend unrelated patterns into one page.

Use a prompt like:

> Compare these three references for my developer landing page. For each one, list the first-viewport structure, navigation, type hierarchy, primary action, card treatment, spacing rhythm, color roles, and responsive behavior. Score each from one to five for clarity, hierarchy, density, trust, adaptability, and mobile fit. Recommend one reference for structure and at most two visual rules from another. Do not copy wording, branding, or page-specific decoration.

Then ask for a decision record with the chosen pattern, rejected alternatives, and the components affected. That record gives you something concrete to review before Copilot edits code. It also prevents a visually attractive reference from winning when it does not fit your content or existing layout.

---

Have Copilot plan and edit in separate steps. First request the smallest set of changes needed to express the selected structure. Review that plan, then ask for one focused patch, such as the hero and its responsive layout. After checking it in the browser, continue with typography, spacing, cards, and polish.

A useful instruction is:

> Apply only the approved hero direction to my existing page. Reuse current components where possible. Preserve content, semantics, keyboard behavior, focus states, and working interactions. Do not add a new dependency or rewrite unrelated styles. Show the changed files, explain each change, and include a desktop and narrow-screen review checklist.

Repeat the same process for later sections. Ask for estimates to be labeled, and verify important font, color, and spacing observations against the captured reference before making them permanent design tokens. This gives you a recognizable direction without turning another website into an unmaintainable template.

## Related questions

- [Website reference MCP for Windsurf](/share/website-reference-mcp-for-windsurf)
- [Best design MCP for AI coding agents](/share/best-design-mcp-for-ai-coding-agents)
- [Use Website References in Cursor with an MCP Server](/share/website-reference-mcp-for-cursor)
- [Design inspiration MCP for Claude Code](/share/design-inspiration-mcp-for-claude-code)