生成与编辑屏幕

设计中最难的一步，是迈过空白页面。借助 Stitch CLI 和 /stitch 技能，你可以创建项目、生成初始屏幕、拓展出多个变体，并一次打磨一个细节——全程不必离开终端。

创建项目并固定

每个屏幕都存在于一个 Stitch 画布项目中。创建一个新项目（或列出现有项目），并把它固定到你的文件夹，这样就不必再传 --project：

stitch create project --title "Analytics Workbench"
stitch config set project <project-id>

如果你在安装了 /stitch 技能（stitch agent-skills add）的编码智能体中工作，也可以直接让 /stitch 在一轮对话里创建项目并生成第一个屏幕。

生成第一个屏幕

第一条提示词不必写成小说。说清楚这个屏幕是什么、整体氛围如何，以及上面应该放哪些具体内容：

使用 --device DESKTOP 或 --device MOBILE 运行 stitch generate screen：

stitch generate screen \
  --title "Revenue Overview" \
  --device DESKTOP \
  --prompt "A revenue telemetry dashboard for a subscription business on a warm editorial paper surface (#FAF8F5) with deep charcoal ink (#181615), featuring a 12-month revenue comparison chart, a three-column KPI summary strip, and a recent transactions table."

想做大幅变动时，探索变体

何必满足于看到的第一个布局？变体让你一次拓展出 1 到 5 个不同的选项。

运行 stitch generate variants 时，选择你希望 Stitch 变化的创意范围（--creative-range）和方面（--aspects）：

• 当布局已经可行，只想测试更细微的字体、间距或颜色润色时，使用 REFINE。
• 当你想看到完全不同的布局（LAYOUT）、配色（COLOR_SCHEME）或字体排版（TEXT_FONT）时，使用 EXPLORE 或 REIMAGINE。

stitch generate variants \
  --screen <screen-id> \
  --count 3 \
  --creative-range EXPLORE \
  --aspects LAYOUT,COLOR_SCHEME \
  --prompt "Explore a compact high-density layout and a high-contrast dark theme"

一次只改一处

当你有满意的屏幕后，就从宽泛探索切换到定向编辑。挑一项你想做的改动，并具体说明要改什么、怎么改：

指明具体组件

具体的视觉指令

新增 UI 元素

把顶部的 KPI 卡片换成一条紧凑的单行水平滚动信息条，并在右上角页头添加日期范围选择器。

把这条指令传给 stitch edit screen：

stitch edit screen <screen-id> \
  --prompt "Replace the top KPI cards with a compact single-line horizontal ticker and add a date-range selector in the top-right header."

在 localhost 上预览并导出 HTML

想看看屏幕在真实浏览器中的感觉——或让编码智能体检查实时 DOM——请启动本地预览服务器：

stitch serve

当你准备把屏幕的 HTML 拉进项目，或在浏览器中打开 Stitch 画布上的屏幕时：

stitch get screen <screen-id> --code --output ./screens/revenue-overview.html
stitch open screen <screen-id>

关于如何把自定义艺术素材、stitch serve 和交互式编辑与编码智能体结合起来，完整演练请参阅与编码智能体迭代。