# Use website design references inside Cline

[Open the live Fudge conversation](https://design.withfudge.com/share/real-website-examples-inside-cline)

Last updated: 2026-08-25

You can use website design references inside Cline by giving the agent a focused comparison task before asking it to write code. Select two or three examples, ask Cline to separate direct observations from assumptions, and turn the useful patterns into a build brief for your project.

## Start with a focused reference brief

Define the categories you want compared:

- Page structure: hero, navigation, feature sections, pricing, footer
- Layout: content width, columns, alignment, spacing, and responsive changes
- Typography: font family, size, weight, line height, and hierarchy
- Visual treatment: colors, borders, radii, shadows, gradients, and imagery
- Interaction: menus, tabs, hover states, scrolling, motion, and focus states

Use references with different strengths, but do not combine every visible detail. The examples below can support a developer-product comparison. Treat them as inspiration and decide which patterns fit your audience, content, and primary action.

A useful request is: "Compare these references for landing-page structure, typography, spacing, and interaction patterns. List only details you can observe, then recommend a small set of patterns for my product. Do not reproduce brand-specific copy or assets."

## 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)

## Turn observations into build decisions

Ask Cline to organize the comparison into decisions you can use immediately:

| Question | Decision to capture |
|---|---|
| What should visitors notice first? | Hero headline, supporting text, and primary action |
| How dense should the page feel? | Maximum content width, section spacing, and text measure |
| How should sections differ? | Background changes, dividers, cards, or whitespace |
| What builds trust? | Product screenshots, code examples, proof, or documentation links |
| What needs to work on mobile? | Navigation, columns, buttons, tables, and media sizing |

This prevents Cline from treating a screenshot as a complete specification. Your project still needs content rules, responsive behavior, component states, and accessible structure.

## Compare examples without copying them

Compare the first screen before borrowing any pattern. Ask what each reference makes clear, what depends on its own content, and what should change for your audience. Then ask Cline for a synthesis with explicit differences. For example, you might adapt a compact technical hierarchy while adding more introductory context for first-time visitors and keeping the main action visible on narrow screens.

For each reference, record what is effective, what is product-specific, and what you would change. If a value was not visible, have Cline mark it as uncertain rather than filling the gap with a guess.

## Give Cline an implementation checklist

Have the final brief include a page outline, desktop and mobile rules, type roles with fallbacks, color roles, component states, content placeholders, and a review checklist for spacing, contrast, focus visibility, and responsive behavior. If a concrete detail needs checking, use Fudge to inspect page structure, typography, colors, and component styling before asking Cline to implement it.

This produces a usable design direction instead of a collage of unrelated ideas. It also gives you a checklist for reviewing the finished page at the intended viewport with real content.

## Use this in your AI agent

> Review the website references available to me and compare their page structure, layout, typography, colors, spacing, components, and interaction patterns. Separate direct observations from recommendations. Create a concise implementation brief for Cline with desktop and mobile rules, accessible component states, reusable design tokens, and a checklist for reviewing the finished page. Borrow general patterns only; do not copy brand-specific copy, assets, or identity. [Install Fudge for your AI agent](/mcp)

---

Ask Cline to use the same categories for every reference, then make a decision for each category. Compare the visitor journey first: what appears first, what explains the product, where proof appears, and where the main action sits. Then compare maximum width, columns, section spacing, cards, and mobile stacking.

Next compare type roles and visual hierarchy, followed by page background, surfaces, primary and muted text, borders, accents, and status colors. Ask about navigation, button states, forms, validation, focus visibility, animation, and reduced-motion handling. Label each note as observed, uncertain, or recommended. End with one pattern to adopt, one to adapt, and one to avoid from each reference.

---

Use this prompt after selecting the references and describing your product:

> Review the selected design references before writing code. First create an evidence table covering page sections, content width, spacing rhythm, responsive layout, typography roles, color roles, borders, radii, shadows, imagery, navigation, buttons, forms, and visible interaction states. Label each note as directly observed, uncertain, or a recommendation. Then create a design brief for this product: [describe product, audience, primary action, and required pages].
>
> Translate the brief into reusable components and tokens. Specify desktop, tablet, and mobile behavior, keyboard and focus states, loading and error states, text wrapping expectations, and reduced-motion behavior. Preserve useful usability patterns, but do not copy brand-specific text, logos, images, or distinctive identity. Before implementation, list missing decisions. After implementation, review the page against the brief and report mismatches with suggested fixes.
>
> Use Fudge to inspect the references when a concrete detail needs checking. [Install Fudge for your AI agent](/mcp)

## Related questions

- [Use Real Website Examples Inside Codex](/share/real-website-examples-inside-codex)
- [MCP Server for Website Design References](/share/mcp-server-for-website-design-references)
- [Design inspiration MCP for Windsurf](/share/design-inspiration-mcp-for-windsurf)
- [Website design feedback MCP for Claude Code](/share/website-design-feedback-mcp-for-claude-code)