设备类型 | Stitch 中文文档

当你开始一个项目时，Stitch 会要求你做一个选择：App 还是 Web。

这不仅仅关乎屏幕尺寸，更是在定义你的主设计界面（Primary Design Surface）。设备类型决定了 Stitch 如何理解布局、导航和层级。

布局取决于上下文

App 模式： 优化纵向滚动、底部对齐导航（拇指操作区）和堆叠内容。
Web 模式： 优化横向铺展、顶部对齐导航和多列网格。

在 App 模式下设计的屏幕，在桌面端查看时会像一个放大的应用。反过来，把 Web 模式的设计硬塞进手机屏幕，往往会丢失原生移动应用应有的关键细节和 UI 组件。

在两种模式之间设计

从一个平台迁移到另一个平台，最好的方式不是缩放尺寸，而是转译（translate）。

Stitch

如果你有一个移动应用设计，想要一个网页版，可以起草一条提示词，描述需要改动哪些地方才能让设计适配该设备类型。首先，把现有设计作为新项目的参考图（Reference Image），或者作为新屏幕的更新参考。按 Stitch 目前的机制，生成新屏幕可能会有些棘手，下面我们会介绍一些让它更顺畅的方法。

第一阶段：App 设计

来看这个 Raffinato 应用的例子。Raffinato 在意大利语中意为“精致”。 这个项目从 App 模式开始，因为移动端点单流程最重要。

PROMPT

IdeaAn ordering app for a local quality obsessed espresso focused coffee shop named Raffinato.

ThemeA light, high contrast theme with a modern and minimalistic feel.

ContentPrefer a variable sized grid layout: 1 column on one row, followed by 2 columns on the next. Break up the grid into sections with labels categorizing the types of drinks in each section. Provide a mobile ordering layout for common espresso drinks with placeholder values for prices. Focus on the typographic balance for menu items placing the visual emphasis on the item name and less emphasis on details such as size in ounces, and price.

NavigationProvide navigation to easily switch screens between main grid, details, and the cart.

这会生成一个紧凑的纵向界面，非常适合手机。

第二阶段：转译为 Web

要迁移到 Web，可以新建一个设为 Web 模式的项目，或在现有项目中给出更新提示词，并使用某个屏幕的下载图片作为参考。

现在的目标是告诉 Stitch 如何利用更大的屏幕空间。聚焦需要改变的核心 UI/UX 方面，例如导航、Hero 区域和网格密度。

下面是提示词如何处理设备类型转译：

PROMPT

NavigationConsolidate the bottom tab bar and top menu into a single, horizontal navigation bar at the top of the screen with links for Home, Menu, Rewards, and Account.

HeroTransform ‘The Daily Focus’ card into a split-layout hero section. Place the Cortado text and button on the left, and expand the image to cover the right side.

Grid LayoutUpdate the product lists from a 2-column mobile layout to a 4-column desktop grid. Maintain the light cream card background and minimalist vibe.

通过明确告诉 Stitch 把导航移到顶部、把 hero 内容拆分，这条提示词专注于保留品牌的感觉，并针对设备类型的用途优化设计。

在同一项目中切换设备类型

当你以某个设备类型创建 Stitch 项目后，它会持续生成该设备类型尺寸的屏幕。你可以在同一项目内用提示词让 Stitch 转换为其他设备类型，但需要手动微调。

如果在 App 项目里生成 Web 提示词，Stitch 会在 App 框架内生成 Web 内容。

生成设计。
用 Preview > Device Type 把视图切换到目标设备（例如 Desktop）。
如果元素感觉被裁切，手动调整框架大小。

专业技巧：隐藏的内容

在项目内从 App 切换到 Web 时，试着把设计框架的纵向高度大幅拉高。Stitch 往往生成了网站逻辑的“其余部分”，但因为原来的 App 框架太短而隐藏了。向下拖动框架手柄就能露出布局的其余部分。