All jobs

Redesign a Page in a Nuxt App with Your Team

An agent redesigns the Nuxt UI dashboard settings page under team follow-ups, posts browser screenshots after each pass, and opens a PR only when you approve.

Run this on RushIn a Project that has your repository.

What the agent does

For a Nuxt app like nuxt-ui-templates/dashboard, the agent begins with package.json and the settings routes. The template is Nuxt ^4.6.1 with @nuxt/ui ^4.11.3, Tailwind CSS ^4.3.3, Vue ^3.5.43 and packageManager pnpm@12.11.2. Scripts are pnpm dev, pnpm build, pnpm lint and pnpm typecheck. nuxt.config.ts loads @nuxt/eslint, @nuxt/ui and @vueuse/nuxt, sets css to ~/assets/css/main.css and compatibilityDate 2026-06-30. The settings shell is app/pages/settings.vue: a UDashboardPanel with UDashboardNavbar title Settings, a UNavigationMenu for General, Members, Notifications and Security, and a NuxtPage outlet capped at lg:max-w-2xl.

The General page at app/pages/settings/index.vue is the redesign target unless a follow-up names another tab. It uses a Zod profileSchema (name, email, username, avatar, bio), a reactive profile seeded with sample values, UForm plus UPageCard sections, UInput fields and an avatar file picker via a hidden input and onFileChange. Members uses app/pages/settings/members.vue with MembersList.vue; notifications and security live in their sibling Vue files. The agent keeps @nuxt/ui components and existing tokens from the template rather than inventing a parallel CSS system.

Work proceeds in passes. After pnpm install and pnpm dev, the agent changes the settings UI, opens the sandbox browser to /settings, and posts screenshots of desktop and narrow widths. It then waits. Teammates send follow-ups (tighter spacing, clearer hierarchy, move bio below username, adjust the Members empty state) and can take the browser to point at a control. The agent applies the next pass only after that feedback. It runs pnpm lint and pnpm typecheck before claiming a pass is ready to review.

The pull request opens only when a follow-up says the design is approved. Until then the session stays parked between turns with the disk intact. No PR means no review noise while the layout is still moving.

Security and notifications tabs (app/pages/settings/security.vue and notifications.vue) stay byte-identical unless a follow-up explicitly expands scope. The agent's lint and typecheck runs cover the whole app, so a settings-only edit that breaks a shared Nuxt UI import is fixed before the next screenshot pass.

Start it with one API call

POST https://api.prix.dev/o/{org}/sessions with this body:

{
  "agent": "claude",
  "input": "Redesign the settings page of this app to be clearer, keeping the existing design tokens and components. Post screenshots from the browser after each pass and wait for a follow-up before the next. Open the pull request only when told the design is approved.",
  "resources": [
    {
      "url": "https://github.com/your-org/your-app"
    }
  ]
}
  1. Get an API key. In the console, open Settings, then API keys, and create a key for your org. Send it in the Authorization header as a Bearer token.
  2. Send the request. POST the body in request.json to https://api.prix.dev/o/{org}/sessions, with your repository as the resources URL. The run starts in its own cloud sandbox.
  3. Read what came back. Follow the run on its live stream or wait for the run.completed webhook, then read the result and its trajectory.

What comes back

After approval, the session opens a pull request on a new branch touching the settings Vue files (typically app/pages/settings.vue and app/pages/settings/index.vue, and sibling tabs if follow-ups asked). The PR description links the design goal, lists each pass and the follow-up that drove it, and notes that pnpm lint and pnpm typecheck were run in the sandbox.

Screenshots from each pass remain on the session as artifacts for comparison. A reviewer checks that UForm, UPageCard and UNavigationMenu usage still matches Nuxt UI patterns, that Zod schema fields stay aligned with the form, and that no unrelated dashboard pages changed. Session status and PR URL come from GET /o/{org}/sessions/{id}.

Run it on every design critique scheduled

When a product or design critique is booked, start one session per page with this prompt and the repository in resources. Keep the same execution_id across follow-ups with POST …/sessions/{id}/messages so the sandbox resumes with prior screenshots and files.

On approval, your automation can record the PR URL from the session webhook payload. Do not schedule a second redesign session for the same page while the first is still running; use follow-ups instead.

The use case this job follows, with its automation and trigger: Steer a run as a team.

Why run it on Rush?

A redesign needs a running Nuxt UI app, a real browser for screenshots and a place to pause between critique rounds. The Rush sandbox parks between turns for seven idle days, so the team’s comments land on the same disk and the same preview server.

Opening the PR only after approval keeps main free of half-finished layout experiments. The transcript and artifacts show every pass, which is hard to reconstruct from a laptop-only design thread.

Frequently asked questions

Which settings tab does it redesign first?

General at app/pages/settings/index.vue is the default, behind the shell in settings.vue. Follow-ups can redirect the agent to members, notifications or security without starting a new session.

Will it replace Nuxt UI with custom CSS?

No. The prompt keeps existing design tokens and components. Expect UForm, UPageCard, UInput and UNavigationMenu to remain the building blocks unless you explicitly ask otherwise.

When does the pull request open?

Only after a follow-up says the design is approved. Earlier turns post screenshots and wait; they do not open a PR.

Can the team drive the browser?

Yes. A teammate can take the sandbox browser during a live turn to show spacing or copy issues, then send a follow-up describing the next pass.