捕获运行中的应用

当你重新设计现有页面，或在一个成熟应用里为新功能做原型时，不要从空白画布开始。先把真实运行的 UI 搬到 Stitch 画布上，这样你的修改才能建立在真实的布局和样式之上。

用 `/stitch` 技能捕获路由

安装 /stitch 技能后（stitch agent-skills add），启动本地开发服务器，让你的编码智能体把路由捕获到 Stitch 项目：

PROMPT

/stitch Capture the /checkout and /dashboard routes from my running dev server and upload them to my Stitch Canvas project.

智能体会自动探测正在运行的 Vite、Next.js 或 Astro 开发服务器端口，为每条路由捕获水合后的 DOM 和一张 1280x800 的校验截图，确认没有登录弹窗挡住页面，然后把屏幕上传到你的 Stitch 项目。

从终端捕获并上传

CLI 把捕获和上传拆成两个独立命令，这样在把任何内容发送给 Stitch 之前，你总能先在磁盘上检查捕获结果。

在无头 Chrome 中捕获客户端渲染的应用

对于需要 JavaScript 水合、WebFonts 和计算样式的 React、Next.js、Vite 或 Vue 应用，使用 stitch capture browser：

stitch capture browser \
  --url "http://localhost:3000/checkout" \
  --wait-for "#checkout-root" \
  -o .stitch/checkout.html

传入 -o 会同时写出规范化后的 HTML 文件（.stitch/checkout.html）和一张 1280x800 的校验截图（.stitch/verify-capture.png），方便你一眼确认捕获是否正确。

通过 HTTP 或从静态文件捕获

如果处理的是本地端口上的服务端渲染 HTML，或某个静态构建文件，请使用 stitch capture port 或 stitch capture file：

stitch capture port --port 5173 --route "/dashboard" -o .stitch/dashboard.html
stitch capture file ./dist/index.html -o .stitch/index.html

不改代码，绕过登录页

不要为了绕过登录页去捕获页面而改动应用源码。stitch capture browser 提供三种干净的方式来捕获已登录视图：

直接在打开的标签页中登录：在实时浏览器窗口里登录或切换标签页，然后在不重新加载的情况下冻结该活动标签页：
```
stitch capture browser --page 1 -o .stitch/dashboard.html
```

传入已保存的 cookie 和 localStorage：把 --storage 指向一个 JSON 存储状态文件：

stitch capture browser \
  --url "http://localhost:4321/schedule" \
  --storage .stitch/storage.json \
  -o .stitch/schedule.html

在快照前运行登录脚本：传入 --prepare，在捕获 DOM 之前运行一个小的初始化脚本：

stitch capture browser \
  --url "http://localhost:4321/login" \
  --prepare .stitch/signin.js \
  --wait-for "#dashboard" \
  -o .stitch/dashboard.html

上传到 Stitch 画布

本地的 .html 快照或图片确认无误后，用 stitch upload screen 把它放到你的 Stitch 画布项目中：

stitch upload screen .stitch/checkout.html \
  --route "/checkout" \
  --title "Checkout"

上传应用路由时传入 --route，Stitch 就会把该屏幕记录为 /checkout 的规范参考。上传完成后，用 stitch open project 打开项目，或用 stitch edit screen 开始迭代这个屏幕。

用 /stitch 技能捕获路由