Website design feedback MCP for Claude Code

Contents

• [A useful review method](#a-useful-review-method)
• [What to ask Claude Code to check](#what-to-ask-claude-code-to-check)
• [A practical feedback scorecard](#a-practical-feedback-scorecard)
• [Use this in your AI agent](#use-this-in-your-ai-agent)

For website design feedback inside Claude Code, use a reference-driven review that checks the page's structure and visible result before suggesting changes. Give your agent a captured page and ask it to compare hierarchy, typography, color, spacing, components, imagery, and visible behavior. The goal is an ordered implementation plan, not a vague request to make the page look better.

A useful review method

Start with four questions:

1. What is the page trying to make clear? Identify the audience, primary action, supporting proof, and the order in which a visitor encounters them.
2. What does the page actually show? Check sections, components, layout, viewport, page state, images, overlays, clipping, and visible interaction or motion.
3. What visual rules repeat? Record font families, font files and variants, sizes, weights, line heights, color roles, contrast, spacing, borders, radii, shadows, gradients, and image treatment.
4. Which changes will improve the page most? Rank fixes by effect on hierarchy, readability, trust, and ease of action.

The examples below give you a useful starting shortlist. Claude Code shows a developer-tool page pattern, Exa MCP Server shows another MCP-focused reference, and Notion Developer Platform gives a broader product-platform comparison. Compare their opening screens, primary actions, proof, and the amount of detail shown before the next section.

What to ask Claude Code to check

Ask for observations before recommendations. A useful review should return:

• A section-by-section outline of the page.
• The most important visual hierarchy problem.
• The primary and secondary actions, including whether their placement matches the page goal.
• A typography inventory with family, variant, size, weight, and line height where visible.
• A color inventory organized by role, such as background, text, border, accent, success, and warning.
• Spacing and component patterns that repeat or feel inconsistent.
• Image crops, overlays, clipping, motion, and responsive behavior that affect comprehension.
• A short list of changes ordered by impact, with each change tied to an observed detail.

If you have several references, ask the agent to compare them rather than average them into a generic style. One reference may have the clearest hierarchy, another may handle proof better, and a third may offer a useful component pattern. Keep those roles separate and explain which reference supports each recommendation.

A practical feedback scorecard

Score each area from 1 to 5, then fix the lowest scores first:

Use the scorecard after every meaningful revision. A page can look polished while still hiding its main action, using weak contrast, or presenting proof too late. A specific comparison makes those problems easier to see and gives Claude Code a clearer implementation task.

Fudge is useful when the feedback needs to come from a captured page rather than code alone. It can search saved references, inspect page structure and observed design details, compare references, identify fonts, review contrast, and export supported details into formats your agent can use. You can also add website captures through the browser extension, then ask for a focused review of the page you want to improve.

Use this in your AI agent

> Review my captured website and the three reference pages below as a design reviewer. First outline the page sections, primary action, proof, typography, colors, spacing, components, image treatment, motion, and visible page states. Then compare the references by hierarchy and usefulness, score my page from 1 to 5 for clarity, hierarchy, readability, consistency, evidence, and behavior, and give me the five highest-impact changes. For every recommendation, state the observed problem, the intended result, and the component or style rule to change. Install Fudge for your AI agent

Give Claude Code a review contract with four parts: evidence, priority, implementation location, and verification. Ask it to describe the observed page element, explain why it matters to the visitor, name the component or style rule that should change, and define how to check the result at the same viewport.

For example: "The primary action appears after two dense content blocks. Move it beside the opening explanation on desktop and keep it immediately below that explanation on mobile. Preserve the current button label. Verify that the action remains visible in the first screen at both widths." That is more actionable than "make the hero clearer."

Separate confirmed observations from suggestions. Ask the agent to label each item as observed, inferred, or proposed, and to avoid inventing font names, color values, spacing measurements, or responsive behavior that the reference does not show. If a detail matters, capture or inspect the page at the viewport where it appears. Finish with a short before-and-after checklist so the next review can measure progress.

Review the page's purpose and hierarchy before changing its visual style. First, write one sentence describing who the page serves and what action it wants. Then check whether the opening screen answers three questions quickly: what is this, why should I care, and what can I do next?

Next, inspect the path from the opening explanation to the primary action. Remove competing actions, move important proof closer to the claim it supports, and make sure headings describe the visitor's job rather than an internal product feature. After that, check readability: heading scale, paragraph width, line height, text and background contrast, and spacing between sections.

Only then tune colors, borders, radii, shadows, imagery, or motion. Those details should reinforce the hierarchy you already chose. Use the references to compare one decision at a time, such as button placement or card density, instead of copying the entire look. Ask Claude Code to implement the highest-impact structural change first, then run the same scorecard again before making smaller polish changes.

Related questions

• Website design feedback MCP for Claude Desktop
• Use Real Website Examples Inside Windsurf
• Website design feedback MCP for Gemini CLI
• Website Design Feedback MCP for GitHub Copilot