Skip to content

jakeefr/fresheyes

Repository files navigation

fresheyes

fresheyes

Free first-time-user reviews of your web app, on your Claude subscription. A confused stranger fumbles through your UI, narrates every friction out loud, scores the rage-quit moment, and hands you copy-paste fix prompts for the things that tripped them up.

Live site Docs Sample report Install How it works

Runs on Claude in Claude Code, Fable 5 by default, with automatic fallback to Opus 4.8 when Claude's safety system needs it. Free on your subscription, no API key required for the plugin.

The fresheyes home page: install it in Claude Code, point it at your app, and read a real report.

Not a test suite. A fresh pair of eyes: an agent that has never seen your product, fumbling through your UI in real time, narrating where it gets lost, then proposing (and building) the better version. You ship the thing. fresheyes is the first user you never had to recruit, and the designer you didn't have to hire.


Install

On your Claude subscription (recommended, free, $0 per run). In Claude Code:

/plugin marketplace add jakeefr/fresheyes
/plugin install fresheyes@fresheyes

Then just ask, in plain English (all of these run on your subscription, $0, no extra commands):

run fresheyes on https://your-app.com, goal: sign up and create a project
run fresheyes on https://your-app.com and propose fixes
run fresheyes on https://your-app.com as the skeptical-newcomer persona
review https://your-app.com with the senior-product-designer lens
run fresheyes on https://your-app.com, then plan the fixes against my repo at ../your-app

The only two slash commands are the install ones above; everything else is a plain-English ask. Your Claude Code session becomes the persona's brain; the bundled MCP server is its eyes (a real screenshot) and hands (clicks, typing). No API key.

Standalone (your own key). For headless or CI runs, bring your own ANTHROPIC_API_KEY:

npx fresheyes https://your-app.com --goal "sign up and create a project" --persona skeptical-newcomer
More run options (fixes, repo diffs, lenses, the hub, offline)

In Claude Code, the plugin runs all of these on your subscription ($0), as plain-English asks: "run fresheyes on X and propose fixes", "run fresheyes on X and plan the fixes against my repo at ../your-app", "review X with the senior-product-designer lens". The hub is a standalone browser UI. The npx forms below are the standalone path with your own key (or the offline mock brain for the bundled demo).

# propose fixes for the ranked frictions (annotated screenshots plus a rebuilt screen)
npx fresheyes https://your-app.com --goal "sign up" --fix

# map frictions into your codebase as PR-style diffs (read-only, never applied)
npx fresheyes diff ./fresheyes-runs/<run> --repo ../your-app

# the expert design pass: every AI-design tell named, plus a full-page rebuild
npx fresheyes critique https://your-app.com --lens senior-product-designer

# everything in a browser: launcher, live narration, reports, personas, connections
npx fresheyes hub

# review the logged-in product: YOU sign in, it keeps only the cookies
npx fresheyes login https://your-app.com
npx fresheyes https://your-app.com --goal "..." --session

# no key needed: run the whole pipeline offline against the bundled demo app
npx fresheyes http://localhost:4173 --goal "sign up" --brain mock --fix

What you get back

A fresheyes report: a 2 out of 5 rage-quit score, the milestone checklist with the rage-quit moment marked, the narrated replay, and the ranked friction list.

A single self-contained report.html you can post anywhere (it works offline, zero external requests). See a sample report. It contains:

  • A rage-quit score (0 to 5): how far a first-timer gets before they would give up, anchored to five screen-checkable milestones so it is reproducible.
  • A narrated replay: every step, the screenshot the persona saw, and its honest inner monologue (hesitations, wrong turns, the moment it would close the tab).
  • A ranked friction report: each finding rated by what it costs a real first-time user, with a copy-paste fix prompt for Claude Code on every item.
  • Before/after fixes: rewritten copy, annotated screenshots, a rebuilt screen, and fresh SVGs. With your repo connected, a reviewable PR-style diff. It proposes; you approve. It never edits your app on its own.

How it works

A run is (app) x (goal) x (persona). fresheyes drives a real recording browser, sees only the pixels a visitor sees (never your code), and narrates as the persona the whole way through.

The loop, step by step
  1. Sees your app by sight (a real screenshot, like a human, not your DOM or code).
  2. Tries to accomplish the goal as a specific persona, narrating its honest inner monologue.
  3. Flags friction: every hesitation, wrong click, dead end, and rage-quit moment.
  4. Scores the run against five milestones fixed before it starts, so the number is reproducible (pin them and re-run for honest before/after numbers).
  5. Fixes it: generates the better version, then reviews its own fix before showing you anything (does it actually remove the friction, match your conventions, and not break things). Anything that fails the self-review is withdrawn.
  6. (Optional) plans the change against your real repo: reads your actual code and hands you a PR-style diff. Read-only by construction.
How the rage-quit score works

Before the run, the goal is decomposed into exactly five ordered, screen-checkable milestones (for example "found the path toward signup" up to "the goal is fully accomplished"). A milestone only counts when the screenshot proves it. The score is the count of milestones reached, 0 to 5. Because the milestones are fixed up front (and can be pinned and reused with --reuse-milestones), the score is comparable across runs, so you can measure whether a change actually helped.

Two modes: pre-login and logged-in
  • Pre-login: starts cold and reviews the public path (landing, then the way to signup). This is where strangers bounce.
  • Logged-in (you bring the session): you sign in yourself in a headed browser, fresheyes keeps only the resulting session cookies, and it reviews the real product like a confused new user who is already through the door.

On login, fresheyes never automates credentials, Google sign-in, SSO, 2FA, CAPTCHAs, or payments. Those are deliberately bot-hostile and no open-source tool should drive your real accounts. You log in; fresheyes explores. (And when an app throws a sign-in wall at a stranger in the first ten seconds, the agent bouncing there is itself a finding.)

Personas: the contribution surface

A persona is about twenty lines of markdown (no code) describing a real kind of user: how they behave, what annoys them, when they would quit. The bundled default is skeptical-newcomer (never seen your product, mildly distrustful, low patience for jargon); name it in your ask ("as the skeptical-newcomer persona") or add your own, and every install sees more. A couple of frontmatter knobs the runner actually honors (viewport: 390x844, patience: 0.5).

---
id: impatient-mobile-user
name: The Impatient Mobile User
one_line: On a phone, one-handed, distracted, will not zoom in to read.
viewport: 390x844
patience: 0.5
---

You are a real person visiting this app for the very first time...

Drop one in personas/ and PR it. The library grows every time someone adds a kind of user, and every install sees more.

Expert lenses: senior eyes, every AI-design tell named

Personas tell you where a stranger gives up. Lenses tell you what a senior professional would change. Same format, same contribution surface: markdown, no code. The lens runs on your subscription in Claude Code too ("review X with the senior-product-designer lens"); the npx critique form below is the standalone path with your own key.

npx fresheyes critique https://your-app.com \
  --lens senior-product-designer --lens conversion-specialist

Built-ins: senior-product-designer (hierarchy, type, spacing, craft), conversion-specialist (clarity, CTAs, trust, friction), and brand-designer ("with the logo removed, would anyone know this site is yours?"). Before critiquing, every lens loads a curated design knowledge base (measured patterns from genuinely great sites, design-system principles, conversion heuristics, and the named tells of AI-generated design). You get a craft score, an ai_verdict (clean / mixed / ai-made), ranked issues, and one full-page rebuild shipped as a self-contained before/after.

Extensions and MCP: make the fix step stronger

fresheyes works out of the box. Connections strengthen the fix step: fresheyes finds the friction and decides what to improve; connected tools give it better ways to produce the improvement.

  • Higgsfield MCP for stronger hero art and image assets.
  • Figma MCP to pull your real design tokens and components so fixes match your system.
  • shadcn MCP to build fixes from clean, consistent components.
  • Your repo plus a key for repo-aware change plans.

Secrets live in ~/.fresheyes/connections.json (chmod 600) and only ever leave as masked previews. Connected tools can propose during the fix step; they never write to your repo or app. See docs/EXTENSIONS.md.


Honest positioning

Good AI testing tools exist: Momentic, Bug0, Applitools, ProofShot. fresheyes is not one of them. They answer "does this known flow still pass?" with CI, regression, and green checks. fresheyes is exploratory and subjective on purpose: first-time-user empathy, the fix-not-just-critique loop, and persona and lens libraries anyone can grow. We are not claiming an empty gap. We are betting on craft.

  • Suggestive, never destructive: proposals only, it never edits your app on its own.
  • Never automates logins, CAPTCHAs, or payments.
  • Consent gate: only point it at apps you own or are allowed to test.
  • Plugin runs are $0 (your subscription covers them); API runs print an estimate before spending.

Cleaner prompts, fewer false interruptions

Run requests work best when the goal reads like what a real first-time visitor is trying to do ("sign up and create a project"), in plain language. Clearer goals sharpen the narration and cut down on false interruptions on benign reviews. The bundled fable-safe-prompt skill restates a usability-review goal in plain, first-time-visitor terms for you, and the run skill does the same automatically before each run.

This improves prompt clarity. It does not bypass or disable any safety system. Claude still reads the reviewed site's content and may still switch to Opus 4.8 mid-run; that is expected and the review still completes.


FAQ

A yellow "switched to Opus" notice appears mid-run. Is something wrong?

No. fresheyes runs on Claude Fable 5 by default. On sites with biology, security, or similar sensitive-topic content, Claude's safety system may briefly switch to Opus 4.8 for part of the run (a yellow notice in Claude Code). This is expected, not an error; the review still completes. fresheyes does not and cannot override this, by design. See Cleaner prompts, fewer false interruptions for keeping run prompts clear, which reduces false trips without disabling anything.

Do I need an API key?

Not for the plugin. Installed in Claude Code, runs are free on your Claude subscription ($0 per run). You only need your own ANTHROPIC_API_KEY for standalone or CI runs with --brain api. The offline mock brain (--brain mock) runs the entire pipeline with no key and no network.

Does it change my app or my repo?

No. Everything is a proposal. The browser run never writes anywhere. Repo mode is read-only by construction (the planner's only tools are readers) and hands you a diff you apply yourself, or do not.


Develop

pnpm install && pnpm -r build && pnpm test

The entire suite (including end-to-end browser gates) runs offline, no key needed. Architecture and the normative spec live in docs/ARCHITECTURE.md, docs/ROADMAP.md, and SPEC.md. The marketing site and web UI live in a separate repo, jakeefr/fresheyes-site.

MIT licensed.

About

Resources

License

Contributing

Stars

Watchers

Forks

Contributors