Codebase Prototypes

Once your repository is connected to a Stitch Workspace and paired with a UI prototyping priority, Stitch inspects your application’s real routes and components to propose high-craft UI prototypes directly on the Stitch Canvas.

Workspace features require running stitch enable loop once on your machine. See Connect a Repository to get started.

Drive codebase prototyping with the /stitch skill

When you invoke /stitch inside a connected repository, your coding agent handles the multi-route discovery and prototype loop for you:

Your agent inspects your router definitions to find your primary views, captures live snapshots from your local dev server onto your Stitch Canvas project, and presents candidate solutions as soon as workspace synthesis completes. When you pick a solution you like, the agent generates the prototype screen on your Canvas.

Place your application routes on the Canvas

Before generating new feature prototypes, your Stitch Canvas project needs authentic snapshots of your existing views and your DESIGN.md tokens. That way, new prototypes look like your actual product instead of a generic template.

Capture your core routes from your local dev server and upload them as reference screens:

stitch capture browser --url "http://localhost:5173/dashboard" -o .stitch/dashboard.html
stitch upload screen .stitch/dashboard.html --route "/dashboard" --title "Dashboard"

stitch capture port --port 5173 --route "/schedule" -o .stitch/schedule.html
stitch upload screen .stitch/schedule.html --route "/schedule" --title "Schedule"

Then make sure your Canvas project is linked to your workspace and your DESIGN.md is synced:

stitch loop link --project <project-id>
stitch upload design DESIGN.md

Inspect UX insights and proposed solutions

With your codebase uploaded (stitch upload code .) and a UI prototyping priority active (stitch create priority --template ui-prototyping), Stitch analyzes your routes in the background to spot passive readouts, workflow bottlenecks, and layout opportunities.

Initial codebase synthesis typically takes around 15 minutes. Check your workspace’s insights at any time:

stitch find insights
stitch get insight <insight-id>

Each insight produces one or more candidate solutions—complete specifications that include a domain metaphor, DESIGN.md rules, and a calibrated Stitch Canvas prompt anchored to your uploaded reference screen:

stitch find solutions
stitch get solution <solution-id>

Generate the prototype on the Stitch Canvas

Pick a solution that solves a problem you care about, grab its design prompt, and generate the screen on your linked Stitch Canvas project:

stitch generate screen \
  --title "Interactive Schedule Workbench" \
  --device DESKTOP \
  --prompt "<prompt from stitch get solution>"

Preview the new prototype alongside your existing screens on localhost with stitch serve, or open it directly on the Stitch Canvas:

stitch serve
stitch open screen <screen-id>