Audit App UI

It’s easy for an implementation to drift away from your design system as you ship features. A font weight changes here, an ungrounded card border creeps in there, or a hex code gets approximated.

With the Stitch CLI and the /stitch skill, you can run a local design review that compares your live running app against your DESIGN.md. Every step of the review runs locally on your machine without making cloud calls.

Run a review with the /stitch skill

Once you have DESIGN.md in your repository and the Stitch skill installed (stitch agent-skills add), start your dev server and ask your coding agent to review a route:

Your agent detects your running local dev server, captures the live hydrated DOM (.stitch/captured-dom.html) along with a 1280x800 verification screenshot (.stitch/verify-capture.png), and compares both against DESIGN.md.

Instead of vague advice, you get a prioritized list of findings grounded in your actual CSS selectors, screenshot regions, and DESIGN.md rules—and the agent pauses so you can pick which fixes to apply first.

Capture the page from the terminal

You can also capture the snapshot yourself before handing it to your agent:

stitch capture browser \
  --url "http://localhost:5173/dashboard" \
  -o .stitch/captured-dom.html

Running stitch capture browser writes two files locally:

• .stitch/captured-dom.html — The hydrated DOM with computed styles and structural markup.
• .stitch/verify-capture.png — A 1280x800 screenshot of what actually rendered in the viewport.

If the screenshot shows a login screen or modal gate blocking the page, sign in directly inside the open browser tab and re-capture that active tab without reloading:

stitch capture browser --page 1 -o .stitch/captured-dom.html

What to look for in a review

Whether you let /stitch run the audit or inspect the snapshot yourself, focus on four checks:

• Color and surface tokens — Are backgrounds, borders, and primary accents using the exact hex values from DESIGN.md, or did arbitrary grays sneak in?
• Typography and numerals — Do headings, body copy, and data readouts match your type scale and tabular numeral rules?
• Spatial rhythm — Do padding and gap values follow your 4px/8px grid, or are elements cramped against container edges?
• Visual restraint — Did extra status dots, pill badges, or nested borders appear where plain typography would be cleaner?

Test visual fixes on the Stitch Canvas

If an audit uncovers a layout problem and you want to explore a few visual options before touching your application code, upload the captured snapshot straight to your Stitch Canvas project:

stitch upload screen .stitch/captured-dom.html \
  --route "/dashboard" \
  --title "Dashboard Current"

From there, use stitch edit screen or stitch generate variants to try out layout changes on the Canvas, then bring the winning design back to your codebase.