# Design inspiration MCP for Claude Code

[Open the live Fudge conversation](https://design.withfudge.com/share/design-inspiration-mcp-for-claude-code)

Last updated: 2026-08-25

For design inspiration in Claude Code, use an MCP connection that lets your agent search relevant website references and inspect the details needed to build the interface. A useful workflow is: choose a small reference set, inspect the complete pages, compare the visual decisions, and give Claude Code a constrained implementation brief instead of asking it to copy a website.

## Start with a focused reference brief

Do not begin with “make it beautiful.” Give Claude Code a job, audience, mood, and interface pattern. For example:

> Find references for a developer tool landing page with a direct hero, clear proof near the main action, a dark technical section, and a restrained mobile layout. Prefer pages where the structure and typography are easy to compare.

Keep the first set to three or five references. Too many examples make it harder to tell which decisions are intentional. Divide the references into roles:

- **Structure:** a page whose section order is close to your intended page.
- **Type:** a page with a useful heading, body, label, and code treatment.
- **Proof:** a page that places screenshots, customer evidence, or product detail near an action.
- **Interaction:** a page with motion, menus, overlays, or a state you need to understand.

The examples below include Notion Developer Platform, Claude Code, and Exa MCP Server. Use them as a concrete comparison set, not as proof that one page is the right model for your project.

## 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, not imitate

Once you have references, ask for a factual pass before requesting code. The agent should return:

1. The visible page sections and their order.
2. The main layout relationship between navigation, hero, proof, content, and calls to action.
3. Typography families, variants, sizes, weights, and line heights where visible.
4. Color roles such as background, foreground, muted text, accent, border, and status color.
5. Spacing patterns, container width, radii, borders, shadows, gradients, and image treatment.
6. Motion, overlays, clipping, or state changes that affect the experience.
7. Which observations are certain, which need checking, and which are recommendations.

That last distinction matters. A reference can show a visual choice without revealing the original design system, responsive rules, or reason for the choice. Ask Claude Code to preserve the useful relationship, such as “large title over a quiet canvas with proof beside the action,” rather than copying exact words, logos, assets, or brand colors.

## Turn the comparison into an implementation brief

After inspection, have the agent compare references by decision rather than by page. A simple table works well:

| Decision | Reference A | Reference B | Direction |
| --- | --- | --- | --- |
| Hero layout | Split text and product view | Centered text and proof below | Use split layout on desktop, stack on mobile |
| Type hierarchy | Large compact heading | Smaller editorial heading | Keep the heading large but reduce line length |
| Proof placement | Beside primary action | Separate lower section | Keep one proof point near the action |
| Surface treatment | Dark panel | Warm light canvas | Use one quiet base and one clear contrast panel |

Then ask for code in stages: semantic structure first, visual tokens second, responsive behavior third, and polish last. This makes it easier to compare the result with the references and remove choices that were invented rather than observed.

A design-reference tool is most useful when it shortens the distance between “this feels right” and “here are the measurable decisions.” Search captured references by description, inspect the page details, and save a short brief that Claude Code can reuse. If you need a missing example, add a website capture through the Fudge browser extension before asking the agent to review it.

## A compact Claude Code workflow

1. Write the reference brief.
2. Gather three to five pages.
3. Inspect structure, type, color, spacing, and interaction.
4. Compare the references in a decision table.
5. Ask for a page brief with observations separated from recommendations.
6. Build one section at a time.
7. Recheck the result against the brief, especially mobile stacking, text length, and proof placement.

This produces a repeatable design process without turning inspiration into a pixel-for-pixel imitation.

## Use this in your AI agent

> Help me design this page in Claude Code using website references. Find three to five relevant references, then inspect their visible sections, layout, typography, color roles, spacing, borders, radii, shadows, imagery, motion, and responsive clues. Compare the references in a decision table. Separate observed details from recommendations, identify what still needs verification, and write a concise implementation brief for my stack. Use the references as inspiration, not as a source for copied branding, text, or assets.

[Install Fudge for your AI agent](/mcp)

---

Include five things: the page job, the audience, the visual direction, the interface constraints, and the kind of evidence you want returned. A useful prompt names the section you are building and asks for comparable references rather than a generic style mood.

For example:

> I am building a developer-tool landing page for technical teams. Find three references with a direct hero, visible product proof, compact navigation, and a strong mobile layout. Inspect the section order, container width, heading and body type, spacing rhythm, color roles, borders, radii, shadows, screenshot treatment, and visible motion. Return a comparison table. Mark each detail as observed, inferred, or recommended. Then propose a page structure and Tailwind v4 tokens without copying brand text, logos, or assets.

Add your real constraints after that: framework, target viewport, required sections, accessibility needs, content length, and whether the page must support dark mode. Ask for one section at a time so you can compare the implementation with the reference before the whole page becomes difficult to revise.

---

Start by extracting repeated decisions, not every visible pixel. Across three to five references, record the type scale, text colors, surface colors, spacing steps, container widths, border treatment, corner radii, shadows, button hierarchy, and common section patterns. Keep a separate note for one-off artwork and brand-specific details.

Next, convert the observations into named choices: background, surface, foreground, muted text, accent, border, heading size, body size, section gap, and control radius. Include the reference and confidence beside each choice. If two pages disagree, keep both options and explain when each works instead of averaging them into an arbitrary value.

Give Claude Code a short rule set: use the selected tokens consistently, preserve the page's content hierarchy, keep long headings readable on small screens, and do not invent behavior that was not observed. Ask it to produce a first-pass token file or DESIGN.md, then implement one representative section. Review that section before expanding the same rules across the page.

## Related questions

- [Design inspiration MCP for Claude Desktop](/share/design-inspiration-mcp-for-claude-desktop)
- [Best design MCP for AI coding agents](/share/best-design-mcp-for-ai-coding-agents)
- [Website reference MCP for Windsurf](/share/website-reference-mcp-for-windsurf)
- [Website references for GitHub Copilot](/share/website-reference-mcp-for-github-copilot)