# Website design research MCP for Cline [Open the live Fudge conversation](https://design.withfudge.com/share/website-design-research-mcp-for-cline) Last updated: 2026-08-25 Website design research with Cline is most useful when the agent receives concrete observations and decisions rather than a vague request to make a page look polished. Use Fudge to inspect captured references, compare the parts that affect the visitor's task, and turn the result into a small implementation plan. ## A practical workflow for Cline 1. **Choose two to four references.** Pick pages that match the job you are building, such as a developer landing page, documentation site, pricing page, or dashboard. 2. **Compare the same elements.** Check the opening section, navigation, heading scale, content width, button treatment, spacing, cards, borders, colors, and mobile behavior. 3. **Write decisions before code.** State what you want to keep, what you want to avoid, and which values are estimates. 4. **Build in slices.** Ask Cline to inspect the current project, propose a small plan, build the page shell, and pause before refining typography and components. The references below are starting points for comparison, not proof that one layout is right for every project. Open the references directly when needed: [Notion Developer Platform](https://notion.com/product/dev), [Claude Code](https://anthropic.com/claude-code), and [Exa MCP Server](https://exa.ai/mcp). ## 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) ## Record decisions instead of impressions Use a table before prompting Cline: | Area | What to record | Your decision | |---|---|---| | Page width | Narrow, medium, or wide content column | Chosen maximum width | | Opening section | Text-led, visual-led, or split | Preferred structure | | Type | Family, size, weight, and line height | Roles to keep | | Color | Background, text, accent, and border roles | Approved palette | | Components | Cards, tabs, code blocks, forms, and links | Reusable pieces | | Responsive behavior | What stacks, wraps, or changes | Mobile rule | Record observations precisely. “The heading is large” is less useful than “the heading has a heavy weight, a short measure, and a clear gap before supporting text.” If you do not know an exact value, label it as an estimate and ask Cline to keep it easy to adjust. ## Prompt Cline with project constraints Give Cline the framework, existing components, route, styling approach, and files it may change. Separate requirements from inspiration. A reference can suggest a calm color balance or dense information layout, but it should not replace accessibility, content, or product requirements. Ask Cline to reuse the existing component library, preserve keyboard behavior, avoid unrelated route changes, and explain each visual decision. Describe mismatches with concrete language such as “the content column is too wide,” “the gap above the cards is too small,” or “the mobile layout stacks too late.” Review the shell before applying the same pattern across the page. ## Check the result before keeping it Confirm that the page has one clear primary action, readable text at normal zoom, consistent spacing, visible focus states, sensible narrow-screen behavior, and reusable components. Compare the opening section and one content-heavy section with the references. Remove decorative details that do not support the page goal. Fudge lets you support this workflow by inspecting captured references, comparing typography and colors, and turning observations into a brief that Cline can apply to the current project. ## Use this in your AI agent > Use Fudge to compare the saved website references for this page. Summarize the opening layout, content width, typography roles, color roles, spacing rhythm, buttons, cards, and responsive patterns. Separate observed details from recommendations. Then propose a small implementation plan for this Cline project, preserving existing components and behavior. Start with the page shell, explain each visual decision, and pause for review before making broader changes. Do not copy brand-specific text, assets, logos, or identity. [Install Fudge for your AI agent](/mcp) --- Keep research separate from component mapping. First write the visual decisions in plain terms, then map each decision to an existing component before creating anything new. For example, record “outlined secondary action with a compact height” rather than “build a new button.” Identify the current button variant, spacing token, and focus treatment that can express it. If the library cannot express the pattern, ask Cline to show the smallest extension needed and explain which other screens will inherit it. Give Cline constraints: do not replace the component library, do not change unrelated routes, reuse existing tokens, preserve keyboard behavior, and keep responsive rules local unless they are genuinely shared. Implement one representative section first, correct the direction, and only then apply it elsewhere. --- Include five parts: the page goal, observed patterns, decisions you made, project constraints, and review steps. State what the visitor should do, name the references, and list concrete observations such as content width, heading hierarchy, button order, card density, color roles, and mobile stacking. Mark uncertain values as estimates. Specify the files or route Cline may touch, the components it must reuse, and accessibility or content requirements. End with a staged request: inspect the current implementation, propose the smallest plan, build the shell, pause for review, then refine typography and components. Ask for a checklist of changes and remaining uncertainty. Give one correction at a time using measurable language. Use [Fudge for your AI agent](/mcp) when a reference detail needs verification. ## Related questions - [Website design research MCP for Codex](/share/website-design-research-mcp-for-codex) - [Website design feedback MCP for Windsurf](/share/website-design-feedback-mcp-for-windsurf) - [Website design system MCP for Claude Code](/share/website-design-system-mcp-for-claude-code) - [Website design research MCP for Claude Desktop](/share/website-design-research-mcp-for-claude-desktop)