recastStart free

How to check if your AI-built site matches the design

AI builders get you close fast. The hard part is knowing how close: a slightly heavier headline or a 24 px offset is easy to miss by eye and expensive to find later. Here’s how to check properly.

Compare at the same size

Open the build at the width the design was made for. Comparing a 1440 px design with a 390 px phone view tells you nothing; most “it looks off” moments are really different viewports.

What to check, in order

  • Type: font family, weight, size, line height, letter spacing. Weight is the most common miss.
  • Color: text, backgrounds, borders, against the reference’s hex values.
  • Spacing and layout: margins, gaps, alignment, max width.
  • Components and states: button shape and fill, hover, focus.

Overlay by eye, or check automatically

Overlay tools put a translucent copy of the design over your page so you can spot offsets, which works but takes time per screen. Recast does it from a link: paste the URL your builder gave you, and it opens the page at the design’s size, compares it with the original, and returns a match score out of 100 plus a fix prompt for whatever’s off. Fold the fixes into a new prompt version and check again until it’s right.

Visual style

  • Colors
    • --ink #14233A: headline, nav text, icon fill.
    • --ink-muted #5B6676: tagline.
    • --line #14233A: active nav underline and arrow button border.
    • --sky #E6EAEF: fallback background behind the photo.
    • --mist #F2F4F7: brightest cloud tone.
    • --rock #7C8799: mid-tone of the mountain shadows.
  • Typography
    • Font: "Inter Tight", falling back to Inter, "Helvetica Neue", Arial, sans-serif. Helvetica Now is the closest match to the reference.
    • Nav links: 12px, weight 400, letter-spacing 0.12em, uppercase, line-height 1.
    • Headline: clamp(34px, 5.8vw, 76px), weight 400, line-height 1.06, letter-spacing -0.01em, uppercase, color #14233A.
    • Tagline: 14px, weight 400, letter-spacing 0.42em, uppercase, color #5B6676. There is a slightly wider gap before "PURPOSE" in the reference, which you can ignore.
  • Effects
The values a check compares against: Recast’s written spec for the original design. See the full prompt.

Common questions

How do I know if my AI-built website matches the design?

Compare at the design’s width, then check type, color, spacing, and components in that order. Recast automates it: paste the live link and get a 0–100 match score and a fix prompt.

Does the page need to be public?

To check from a link, yes: a published or preview URL anyone can open. Otherwise upload a screenshot of the build instead.

What does a check cost?

A build check uses the same credits as a prompt in the mode you pick (Precise or Fast).

More guides

Try it on your own design.

Drop in a screenshot, hero video, or screen recording, and Recast writes the exact prompt to rebuild it in v0, Lovable, Bolt, Claude Code, or Cursor.

Start free