The PR is called "Tweak card spacing + dark mode fixes." It's +184 −97 across six files.
You read it. p-4 became p-6. bg-white became bg-background. A card component got split in two, which honestly needed doing. Every line makes sense.
You click Approve.
Two days later someone posts a screenshot in the team channel. The cards on the settings page are crammed together. The component that got split is used there too. Nobody on the PR thought to look at that page.
You didn't do anything wrong. You reviewed what you could see. The trouble is that the most important part of a UI change isn't in the diff.
Two things the diff doesn't show
What it looks like. A diff is text. p-4 to p-6 is a single character in the diff and a different layout on screen. Dark mode, hover states, a narrow window: none of them show up in the diff.
What else it touches. Six files changed. Twenty pages might use them. A diff lists the files that changed, not the files that depend on them. That split component, the barrel file whose exports moved: the diff won't tell you who imports them.
To answer the first question you have to run the code. To answer the second you have to search the whole codebase. Neither happens just from reading a diff.
Why nobody looks
Looking is just expensive.
To see a UI change you check out the branch. You reinstall, because the lockfile changed. You start the dev server, find the page, and maybe log in and create some test data. That's ten minutes if nothing goes wrong. If you review five PRs a day, you spend most of an hour waiting on your machine.
So teams settle into a routine without ever deciding on it. Small PRs get approved on trust. Big ones get reviewed from the screenshots the author attached. Only the scary ones get pulled down and run.
Screenshots have a built-in blind spot. The author captures the pages they thought of, and the page that breaks is almost always one they didn't.
AI made the gap wider
This isn't new. It has just gotten more frequent.
AI-generated UI changes are longer, touch more files, and every line looks reasonable, which is exactly why they're hard to review. Sometimes the author hasn't read every line either. Reviewers used to fill the gap with "I know how this person works." That works less often now. (I wrote about the reading side of this a few weeks ago.)
What if looking cost nothing?
Go back to the two questions.
What it looks like. CrossUI Studio opens a PR's branch directly. You pick the repo, pick the branch (after a one-time connect), and you're done. There's no clone, no install, and no dev server. You get the rendered app, and in the preview you can move between pages, switch to dark mode, and open the parts you want a closer look at. (Why no install is possible at all.)
Your first question is probably: without a backend, what are you even rendering? Anything that needs the backend shows up empty, or as that component's own error message. Pages that need a login show you their logged-out version, with the layout and styles intact.
That turns out to be enough. A UI PR changes layout, spacing, component states, and dark mode, and none of those depend on the backend. The part that comes up empty is also the part you couldn't have checked from the diff.
What else it touches. On the PR's branch, open the dependency graph and click the component that got split. You'll see everything that depends on it, including imports that go through barrel files. The settings page is right there in the list. (More on the graph.)
Reviewing a UI PR should cost about as much as reading its diff. Today it costs a dev server on top.
The limits
Four things you should know before you try it.
Connecting a repo takes a personal access token. There's no one-click authorization. With GitHub, the token stays in your browser and requests go straight to GitHub, without passing through our servers. There's also no "paste a PR link" field. You pick the repo, then the branch.
Small repos open in seconds, but a few hundred files can take more than a minute. For a really big repo, clone it and open the local folder. And the dependency graph shows the branch as it is now. It doesn't compare two versions, so to see who depended on something before the change, switch back to main and look again.
One line for the checklist
Most teams' PR template has a line for tests. UI PRs deserve one too: I looked at what this renders.
That line only works if checking it is cheap enough that people actually do it.
A backend change at least has tests and CI behind it. A UI change usually has nothing. For a UI change, the test is looking at it. People have always wanted to look. It just cost too much.
Next time, take the branch you're reviewing right now, open it in Studio, and look before you approve.
Top comments (0)