Agentic UI: Rework the new-user onboarding screens

[bcotrim]

Related issues

• Fixes STU-2019

How AI was used in this PR

Claude ported the design from the exploration branch (explore-site-centric-conversation-chrome, #3975) onto current trunk, and I reviewed every screen in the running app. Worth a close look at two things the AI changed rather than copied:

• The exploration cross-imports welcomeStyles into connect and tour for the feature card and auth buttons. That's extracted into shared components instead — which surfaced real drift, e.g. the tour used variant="outline" for Log in while welcome used solid, under a comment claiming they matched.
• EmptyBackground is parameterized on top of trunk's version rather than taking the exploration's copy, since f61ebe7 changed that component after the branch forked.

Proposed Changes

Second pass on the first-run flow: welcome → concept tour → Add a site. Each screen now owns one story instead of three screens repeating the same pitch.

• The welcome leads with what a WordPress.com account unlocks (Studio Code, sync, previews) and asks for login once, with a reason.
• Two tour screens introduce local sites and Studio Code. The last doubles as the second and final login prompt for people who skipped, since the agent needs an account.
• Terminology follows one verb map: create a local site, connect a live one, import a backup, build reserved for Studio Code. Account auth is always "log in with".

Welcome	Step 1	Step

Testing Instructions

The welcome only shows with zero sites, so point the app at an empty config rather than deleting yours:

DEV_CONFIG_DIR=/tmp/nux npm start

1. Walk welcome → tour → tour step 2 → Add a site. Back should retrace it.
2. Skip login on the welcome; step 2 should offer Sign up / Log in and a "Skip log in" primary action.
3. Log in from the welcome — it should advance on its own.
4. Check both color schemes

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?

[katinthehatsite]

DEV_CONFIG_DIR=/tmp/nux npm start

TIL: this is nice and makes testing so much easier 👍

[wpmobilebot]

📊 Performance Test Results

Comparing 1ba27d5 vs trunk

app-size

Metric	trunk	1ba27d5	Diff	Change
App Size (Mac)	1372.96 MB	1372.99 MB	+0.03 MB	⚪ 0.0%

site-editor

Metric	trunk	1ba27d5	Diff	Change
load	1054 ms	1058 ms	+4 ms	⚪ 0.0%

site-startup

Metric	trunk	1ba27d5	Diff	Change
siteCreation	6541 ms	6592 ms	+51 ms	🔴 0.8%
siteStartup	2386 ms	2376 ms	10 ms	⚪ 0.0%

---

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)

[katinthehatsite]

I see that in some places we specifically set it to true while in others just pass true as default. I am wondering if we should stick to one approach? It is not a big deal though, mostly a nit

[katinthehatsite]

Should we use createInterpolateElement with a single translatable string containing placeholder markers here to avoid splitting the sentence in 4 different bits?

[katinthehatsite]

The changes look good to me 👍 I left some minor comments but they are not blockers. One thing that I noticed is that when the screen gets to the smallest size, the text for the legal details goes somewhat too close to the rest to the rest of the text so it looks a bit crowded:

[katinthehatsite]

One general thought is that I am not sure why we need both of these screens:

It seems to me that we are keeping the user further from the action of creating a site and it would be nice if the user got there faster

[nightnei]

Good point 👍 Also, if we skip authorization, the third screen still asks me to authorize a second time, even though I clicked "Skip" on the first screen.

[bcotrim]

@shaunandrews what do you think about this feedback?

[shaunandrews]

The first screen explains the basics of studio, and the second emphasizes the new focus on AI and Studio Code. The second screen also serves as a second chance for us to ask for login, with the emphasis that you need it for the AI features—the aim is to get more people to login by showing them what they're missing.

[katinthehatsite]

Thanks for making the adjustments!

I am still seeing two minor things on my end that mostly happen on the smallest screens:

• the checkmark does a weird split across lines in the feature descriptions:

• I also think we can improve the spacing for the legal items here:

both of these issues happen when you resize Studio to the smallest possible screen

[nightnei]

@shaunandrews I remember that during the demo (walkthrough) call, someone mentioned that the checkmarks felt like actual checkboxes. Or maybe I misunderstood.

At least that was my first impression as well. They reminded me of the onboarding screens in apps where you see things like “Enable notifications” or “Subscribe to updates,” and you expect to be able to check or uncheck them.

Maybe it’s just a personal impression.