基于代码库的原型设计

当你的仓库连接到 Stitch 工作区，并配置了 UI 原型优先级后，Stitch 会检查应用的真实路由和组件，直接在 Stitch 画布上提出精心打磨的 UI 原型。

工作区功能需要在本机运行一次 stitch enable loop。请参阅连接仓库了解如何开始。

用 /stitch 技能驱动代码库原型

在已连接的仓库中调用 /stitch 时，编码智能体会替你处理多路由发现和原型迭代流程：

智能体会检查你的路由定义，找出主要视图，从本地开发服务器捕获实时快照并传到你的 Stitch 画布项目，并在工作区综合分析完成后立即呈递候选方案。当你选中满意的方案后，智能体会在画布上生成原型屏幕。

把应用路由放到画布上

在生成新功能原型之前，你的 Stitch 画布项目需要现有视图的真实快照，以及 DESIGN.md 中的令牌。这样新原型才会像你的真实产品，而不是一套通用模板。

从本地开发服务器捕获核心路由，并作为参考屏幕上传：

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"

然后确认画布项目已关联到工作区，并且 DESIGN.md 已同步：

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

查看 UX 洞察与候选方案

在代码库已上传（stitch upload code .）、UI 原型优先级已启用（stitch create priority --template ui-prototyping）的情况下，Stitch 会在后台分析你的路由，找出被动式只读展示、工作流瓶颈和布局改进机会。

首次代码库综合分析通常需要 15 分钟左右。你可以随时查看工作区的洞察：

stitch find insights
stitch get insight <insight-id>

每条洞察都会产出一个或多个候选方案——这些完整规格包含领域隐喻、DESIGN.md 规则，以及一段经过校准、锚定到你上传的参考屏幕的 Stitch 画布提示词：

stitch find solutions
stitch get solution <solution-id>

在 Stitch 画布上生成原型

选一个能解决你在意的问题的方案，取出它的设计提示词，然后在已关联的 Stitch 画布项目上生成屏幕：

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

用 stitch serve 在 localhost 上把新原型和现有屏幕一起预览，或者直接在 Stitch 画布上打开它：

stitch serve
stitch open screen <screen-id>