Design Check

Run on a real page, here is what comes back

Every sample below was produced by feeding the input shown to the scanner's own code. Nothing was typed in by hand, and the numbers are whatever the scanner returned.

Three tools and a vision pass

Check design

Find what makes a page read as AI-generated, from fonts and gradients to uniform card grids and dead-end copy, and get a fix for each.

A score out of 100, a verdict (generic, mixed or distinctive), and findings ranked by severity, each with the matching code excerpt and a concrete fix.

Input

<style>
  body { font-family: Inter, sans-serif; }
  .btn { border-radius: 9999px; background: linear-gradient(90deg, #7c3aed, #3b82f6); }
</style>
<p class="eyebrow">WELCOME</p>
<h1>Unlock Your Potential</h1>
<a class="btn">Get Started →</a>

Scanner output

generic, 44/100, 4 findings

MEDIUM  Generic default font family (inter)
  fix: Add a second, distinct typeface for headlines and keep the current sans for body/UI text only.

HIGH  Soft tech gradient (purple/blue/pink blend)
  found: linear-gradient(90deg, #7c3aed, #3b82f6)
  fix: Pick one of the two gradient colors as a flat, solid background and drop the other entirely from this element.

HIGH  Eyebrow label directly above a headline
  fix: Delete the label and go straight into the headline.

MEDIUM  AI-cliché vocabulary: unlock
  fix: "unlock" → get / open up

MCP tool check_design, or POST /api/check with url or html.

Cannot do: Reads markup and CSS, not the rendered page. A site that builds its design in script after load will look cleaner here than it is; the vision pass covers that.

Check copy

Catch AI-writing tells in an email, pitch or landing draft, and get a plainer word for each cliché.

The same scored report, limited to wording: cliché vocabulary with replacements, negative-parallel framing, hedge words, heavy em-dash use, problems named without a next step.

Input

We help teams unlock their potential and seamlessly integrate every workflow. It's not about more tools. It's about better outcomes. Our vibrant platform is essentially a game-changer, and there are several errors in the old process that we found missing from most plans.

Scanner output

mixed, 50/100, 4 findings

MEDIUM  AI-cliché vocabulary: vibrant, game-changer, unlock, seamlessly integrate
  fix: "vibrant" → [cut it, name the specific quality instead]; "game-changer" → [cut it and say the specific thing plainly]; "unlock" → get / open up; "seamlessly integrate" → [cut it and say the specific thing plainly]

HIGH  Negative-parallel framing ("It's not X. It's Y.")
  found: It's not about more tools. It's about better outcomes.
  fix: Delete the 'it's not X' half entirely and keep only the direct statement.

LOW  Hedge words: essentially
  fix: Delete "essentially" and reread the sentence, if it still makes sense (it almost always does), leave it out.

HIGH  Diagnosis with no path forward
  fix: For every problem, issue, or error surfaced to a user, pair it with a concrete next step in the same breath, not a separate help page they have to go find.

MCP tool check_copy, or POST /api/check with text.

Cannot do: Matches a fixed word and pattern list. It cannot tell whether the copy suits your brand, and a cliché used on purpose will still be flagged.

Check code comments

Find comments that narrate a request instead of describing the code, before an agent's diff reaches review.

Prompt-leak comments such as "as requested" and "I've added", and hedge words in comments, each with the comment text and a rewrite direction.

Input

// As requested, I've added retry logic to the fetch call
async function load(url) {
  // Essentially this just wraps fetch
  for (let i = 0; i < 3; i++) {
    const r = await fetch(url);
    if (r.ok) return r;
  }
}

Scanner output

mixed, 78/100, 2 findings

HIGH  Prompt-leak comments (1)
  found: // As requested, I've added retry logic to the fetch call
  fix: Rewrite each flagged comment to describe the current behavior or the reason for a non-obvious choice, not the act of making the change.

LOW  Hedge words in comments: essentially
  fix: Delete "essentially" or the whole comment if nothing non-obvious is left once they're gone.

MCP tool check_code, or POST /api/check with code.

Cannot do: Reads comments only, in // , /* */ and # styles. A # inside a string can occasionally be mistaken for a comment, and the code itself is never judged.

Vision pass

Judge the composition of a real screenshot, which the HTML cannot show: hierarchy, rhythm and whether the layout varies.

Extra findings in the same report, written from a Browser Rendering screenshot of your URL that Claude critiques.

No sample is shown for this pass. Every vision run calls Claude on a real key, and we do not run it on the studio's key for a demo, so we have no output of our own to put here.

check_design or POST /api/check with a url, plus either your own Anthropic key in an x-anthropic-key header or a paid Pro key.

Cannot do: Needs a url, not pasted HTML. Free and trialing keys get it only with your own Anthropic key, and Pro on the studio key has a monthly spend allowance.

The rule groups inside check_design

Six groups make up the page scan. There are too few to need a filter, so they are listed in the order the scanner runs them. Each sample shows only that group's findings.

Typography

Flag a page whose only typeface is Inter, Geist, Roboto or system-ui, and name distinct faces to pair with it.

One finding when the default sans stands alone, with display and editorial alternatives.

Input

<style>body { font-family: Inter, sans-serif; } h1 { font-family: Inter, sans-serif; }</style>
<h1>Spring menu</h1>
<p>Open Tuesday to Sunday.</p>

Scanner output

1 finding in this group

MEDIUM  Generic default font family (inter)
  fix: Add a second, distinct typeface for headlines and keep the current sans for body/UI text only.

Part of check_design.

Cannot do: Sees only font-family declarations in style blocks, inline styles and up to five linked stylesheets.

Color

Spot the soft purple, indigo, blue or pink gradient and say what to commit to instead.

A high-severity finding with the gradient text from your CSS.

Input

<style>.hero { background: linear-gradient(135deg, #6366f1, #ec4899); }</style>
<div class="hero"><h1>Book a table</h1></div>

Scanner output

1 finding in this group

HIGH  Soft tech gradient (purple/blue/pink blend)
  found: linear-gradient(135deg, #6366f1, #ec4899)
  fix: Pick one of the two gradient colors as a flat, solid background and drop the other entirely from this element.

Part of check_design.

Cannot do: Recognises two-stop gradients between those hues; it does not judge palettes in general or contrast ratios.

Components

Point at the pill button with an arrow and the small label sitting above a headline.

One finding per pattern, tied to the element that triggered it.

Input

<p class="eyebrow">NEW SEASON</p>
<h1>Cold-brew subscription</h1>
<a href="/join" style="border-radius:9999px;padding:12px 24px">Join now →</a>

Scanner output

2 findings in this group

MEDIUM  Pill-shaped CTA with a generic arrow icon
  fix: Drop the border-radius to something modest (2-4px) or square it off entirely, and remove the arrow glyph.

HIGH  Eyebrow label directly above a headline
  fix: Delete the label and go straight into the headline.

Part of check_design.

Cannot do: The pill and the arrow must sit on the same button or link; styling applied only through external classes it cannot resolve is missed.

Layout and composition

Show when every section shares one width and one background, or when cards and bullets repeat in the same shape.

Findings for a single shared max-width, a single background value, identical cards, and near-identical label-and-sentence bullets, each with a way to break the pattern.

Input

<style>section { max-width: 960px; margin: 0 auto; background: #ffffff; }</style>
<section><h2>Pricing</h2></section>
<section><h2>Process</h2><div class="card">One</div><div class="card">Two</div><div class="card">Three</div></section>
<section><h2>Contact</h2></section>

Scanner output

3 findings in this group

HIGH  Every section uses the same max-width, no real asymmetry
  fix: Pick at least one section and break it out of the shared wrapper, a full-bleed hero with an asymmetric two-column split, a section that runs edge-to-edge, or an inset panel narrower than the rest.

MEDIUM  One flat background value the entire page
  fix: Invert one section: if the page is light, give one section a dark background (and flip the text color to match); if it's dark, do the reverse.

MEDIUM  3 identically-structured cards in a row
  found: card|card|card
  fix: Pick the single most important item and give it double the width (or a distinct background/border treatment) while the rest stay smaller and supporting.

Part of check_design.

Cannot do: Counts sections, widths and class names in the markup; it does not see how the page actually lays out in a browser.

Copy on the page

Find cliché verbs, negative-parallel sentences and hedge words in a page's visible text.

Cliché vocabulary with a replacement for each word, plus the exact sentence when a negative-parallel pattern turns up.

Input

<h1>Our vibrant platform</h1>
<p>It's not about more dashboards. It's about clearer decisions. We help you unlock every report, and ultimately that is the point.</p>

Scanner output

3 findings in this group

MEDIUM  AI-cliché vocabulary: vibrant, unlock
  fix: "vibrant" → [cut it, name the specific quality instead]; "unlock" → get / open up

HIGH  Negative-parallel framing ("It's not X. It's Y.")
  found: It's not about more dashboards. It's about clearer decisions.
  fix: Delete the 'it's not X' half entirely and keep only the direct statement.

LOW  Hedge words: ultimately
  fix: Delete "ultimately" and reread the sentence, if it still makes sense (it almost always does), leave it out.

Part of check_design; check_copy runs this group alone.

Cannot do: Text inside code, pre and textarea is skipped, and a word quoted as an example is not counted.

Experience

Catch a page that reports a problem without a next step, and links that go nowhere.

A finding when two or more problem words appear with no fix language, and one for links that point at #.

Input

<h2>Import failed</h2>
<p>There was an error and a problem with your file. Some columns are missing.</p>
<a href="#">Details</a> <a href="#">Contact</a>

Scanner output

2 findings in this group

HIGH  Diagnosis with no path forward
  fix: For every problem, issue, or error surfaced to a user, pair it with a concrete next step in the same breath, not a separate help page they have to go find.

MEDIUM  2 links pointing at href="#"
  fix: Wire each one to an actual destination, or replace it with a <button> if it's meant to trigger an in-page action rather than navigate, href="#" should not be the final state of shipped copy.

Part of check_design; the first finding also runs in check_copy.

Cannot do: Works from word lists, so it can miss a fix phrased in unusual words and cannot test whether a link target exists.