Getting started

Agent Design Check is launching soon — contact us and we'll email you the moment it ships. Here's what using it looks like.

1. Install

Agent Design Check is a single global npm package. Requires Node.js 18+ on macOS, Linux, or Windows.

install

$ npm install -g agent-design-check

2. Register

Registration authenticates your terminal with an email confirmation link — no password, no dashboard. Your 10 free analyses start immediately.

$ agent-design-check register you@company.com
# check your inbox and click the confirmation link

3. Analyze

Point it at a screenshot (PNG, JPG, WebP), a folder of screenshots, or a screen recording (MP4, MOV, WebM, GIF). Recordings get frame-by-frame analysis plus flow-level findings — dead ends, backtracking, missed state changes.

analyze

$ agent-design-check analyze ./checkout-flow.mp4
$ agent-design-check analyze ./screenshots/
$ agent-design-check analyze ./screens --ci --json   # CI mode

What it checks

Accessibility — WCAG AA/AAA contrast, touch-target sizes, focus visibility, legibility
Layout & spacing — inconsistent margins, broken alignment, mixed spacing scales
Visual hierarchy — competing CTAs, headings that don't rank, unclear next actions
Copy & labels — inconsistent terminology, vague buttons, unhelpful error messages
Flow (recordings) — dead ends, backtracking, steps that take too long
Missing states — loading, empty, and error states that aren't designed

Questions before launch? Get in touch — feedback on what you'd want Agent Design Check to catch directly shapes the roadmap.