← AIAP Tool GuidesAll programsHomeSearch
AIAP Tool Guides·AI for Design·37:47

Pre-Launch Design Testing with an AI Review Agent: Audits, Copy Review, A/B Comparison, Fix Loop into Claude Code, and Ad/Video Scoring

Amlan Designer, "a fellow builder and designer" with entrepreneurial stints; builds one expense-management app (FinLit India) across the series
▶LMS lesson
← PreviousShipping a Web App to the iOS App Store with Expo and Claude Code: WebView Wrapper, EAS Bu
Lesson 5 of 5 in AI for Design
Next →Vibe Marketing: Emotion x Automation x Virality, the Marketer as Orchestrator, and an AI S

The short version

  1. An AI design-review tool (Clarity UX) runs as a Figma plugin, Chrome extension and web app; give an artboard plus context and get a score, attention heat map, predicted engagement/conversion/bounce and fix cards (0:00-0:06).
  2. Agent chat for top issues, "inline audit" for copy, eye-path mode and A/B comparison of two frames (0:06-0:12).
  3. Audit the live expense app via the Chrome extension, paste the full report into Claude Code to apply fixes, then score billboard ads and videos (0:12-0:37).

At a glance, three clicks deep

Skim here first: the closed row is the glance, open is the study card with the key points and timestamps, and the ↓ link drops to that concept's full write-up below.

01An AI design audit with context firstSelect a frame, state what it is for, and the review agent returns a score, focal areas, predicted metrics…›

Select a frame, state what it is for, and the review agent returns a score, focal areas, predicted metrics and per-issue fixes in about a minute.

Audit (0:00-0:06)

Agent and copy review (0:06-0:09)

A/B (0:09-0:12)

↓ Full write-up of this concept

02Close the loop: audit the coded app, paste fixes into Claude CodeRun the review on the localhost app through the Chrome extension, copy the full analysis, and let Claude Co…›

Run the review on the localhost app through the Chrome extension, copy the full analysis, and let Claude Code apply the fixes.

Extension audit (0:13-0:16)

Fixes applied (0:17-0:19)

Ads and video (0:20-0:36)

↓ Full write-up of this concept

The concepts in full

01

An AI design audit with context first

how-to

Context first: "This is an events detail page for a comedy act."

In Figma: Actions > Plugins and widgets > Clarity UX > select an artboard > type context > Start audit. The demo events page scored about 61/100, with issues such as a ticket selector that does not show its limit and share icons needing an overlay. A target icon highlights the layer; results export into the Figma file or as a shareable web report. Asking the agent for an "inline audit" (a keyword) triggers a copy review; eye-path mode predicts where the eye travels. A/B mode compares two frames and picks a winner on predicted task completion.

Do it in this order
Why it matters

Cheap pre-launch feedback before user testing.

02

Close the loop: audit the coded app, paste fixes into Claude Code

how-to

No manual issue hunting - the report becomes the prompt.

Claude Code writes a short UX-review prompt; the extension's AI Design Review scored the expense app 79 against a stated benchmark of 70, flagging low contrast on the chart, font sizes, redundant labels and an empty header button. Pasted into Claude Code, it removed fake status bars, enlarged amounts, added an active indicator to the bottom nav, replaced the demo-data banner and preloaded transactions with an empty onboarding state, and added dates per row. The same web app also scores billboard ads and videos (including YouTube links) with timestamped notes.

Do it in this order
Why it matters

A tight design-QA loop for AI-built apps.

This idea elsewhereparallelPrevious lesson: shipping the same app to the App Store

Tools referenced

ToolCoverageMomentContext
Clarity UXdemonstrated
Figmademonstrated
Claude Codedemonstrated
Google Chromedemonstrated
YouTubedemonstrated
Geminimentioned

Action items

    Resources mentioned

    Resources
    • docLesson page on the platform

    Extraction notes

    This page was built from an auto-generated transcript, which garbles product and people's names. Those were corrected silently in everything above and logged here for transparency. The warnings flag claims that were true on the recording day but change fast.

    Transcript corrections applied

    The transcript saysThe trainer actually means
    CryoDUXClarity UX
    holding / holdingshoarding (billboard)
    heat markheat map
    Cloud CodeClaude Code

    True on recording day — verify before relying

    ← PreviousShipping a Web App to the iOS App Store with Expo and Claude Code: WebView Wrapper, EAS BuNext →Vibe Marketing: Emotion x Automation x Virality, the Marketer as Orchestrator, and an AI S