商品首页
用分类、图片与商品卡片帮助用户找到感兴趣的家具。保留名称、价格和主要操作，再用详情页承接材质、尺寸与规格选择。
先有连贯的任务，再有完整的界面
让每一屏，都有下一步
App 需要把页面连成体验。以家居商城为例，用户从浏览家具到管理订单，需要清楚的导航、一致的商品信息，以及每次操作后的反馈。
购物车
把已选商品、规格、数量与金额放在一起。修改数量后有明确反馈；购物车为空或商品缺货时，仍给用户下一步入口。
个人中心
集中展示订单、收藏和配送地址。底部导航保持一致，让用户从浏览、购买到后续管理，都能找回熟悉的位置。
从你的需求开始
先把关键流程，
写进第一段需求
- 1
打开 AI，选择设计稿模式
在设计文件左侧打开 AI，说明 App 面向谁、首先要完成什么任务。
- 2
补充页面与视觉要求
列出页面、主要信息和必要状态。可以添加参考截图，或选择团队设计系统。
- 3
生成后，逐屏调整
检查内容与页面关系，选中具体对象继续修改，再连接关键交互。
家居商城 App · 需求示例用途 + 页面 + 状态 + 风格
为年轻家庭设计一款家居商城 App。先完成商品首页、商品详情、购物车与个人中心，使用我提供的商品图片、名称、价格和规格。
首页按客厅、卧室与书房组织商品；详情清楚展示材质、尺寸和颜色选择；购物车显示已选规格、数量与金额；个人中心提供订单、收藏与地址入口。
补充规格未选全、商品缺货和购物车为空的状态。整体温暖、简洁，导航、按钮、商品卡片和标签保持一致，文字与布局可继续编辑。不编造评价与销量。
复制后，在 Pixso AI 中粘贴并补充你的业务资料。
生成之后，设计仍在你手里
改一个区域，
把想要的细节留下来
商品信息变多，网格卡片不一定最适合阅读。选中商品区域，让 AI 改为列表；保留导航、品牌风格和已经确认的页面，继续把这一处调整好。
让修改要求具体到对象
把选中的商品卡片改为单列：左侧展示图片，右侧排列商品名称、价格与加入购物车按钮。保留现有商品内容、首屏、分类和底部导航。
一套规范，延续到每一屏
让 App 有自己的样子，
也有一致的使用方式
新项目可以从智能或通用设计系统开始；已有品牌规范时，使用自定义 Design System。让 AI 按团队的组件、颜色与字体生成，再在画布中调整。
了解 Pixso 设计系统相同操作，使用相同组件
加入购物车、修改数量与保存地址都有稳定的按钮和输入规则，新增页面也延续同一套视觉语言。
内容变化，信息层级保持清楚
长商品名、多规格和不同价格格式都应有位置。用真实内容检查卡片与列表，发现问题后直接调整。
从静态页面，到可以走通的流程
连成原型，
和团队一起把体验走一遍
在原型模式中连接页面和交互，沿着浏览商品、选择规格、加入购物车的路径进行演示。产品经理确认流程，设计师调整界面，研发提前了解状态与反馈。
了解交互原型一次评审，优先看这些细节
- 每一屏是否有清楚的主要操作和返回路径。
- 添加成功、商品缺货与购物车为空时，是否能继续操作。
- 商品名称、规格与数量在前后页面是否一致。
- 评论和修改是否回到同一份设计文件，方便团队确认。
准备开发时，再往前走一步
把设计上下文，
带进你的代码工具
通过 Pixso MCP，将设计中的结构、布局、组件与资源交给 Codex、Cursor 等兼容工具。远程授权连接，无需安装 Pixso 客户端。
确定界面与关键状态
提供明确的图层链接，确认页面关系与交互反馈。
结合项目技术栈实现
开发者在代码项目中实现页面，对照设计检查布局与操作。
接入业务，完成测试与发布
登录、数据存储、支付等服务，以及原生打包和应用商店发布，由开发项目继续完成。
常见问题
开始之前，
你可能还想知道
AI 生成 App 后，得到什么？
你会得到可以在 Pixso 中继续编辑的 App 界面设计。可以修改图层、文字、布局与组件，连接交互原型，并与团队共同评审。需要实现可运行应用时，可以将设计交付研发，或通过 Pixso MCP 衔接 AI 编程工具。
不会写代码，可以使用吗？
可以。描述用户、功能、页面和风格即可开始设计；生成后也可以用自然语言调整选中的内容。产品经理和设计师可以先完成界面与流程，代码实现由后续开发环节衔接。
可以用已有 App 截图作为参考吗？
可以。在设计稿模式中添加参考图，说明希望参考的布局、颜色或信息层级，并提供自己的品牌与内容。使用有权使用的参考素材，生成后的界面仍可继续修改。
能使用自己的组件库和设计系统吗？
可以。选择自定义设计系统后，AI 可以依据团队预先配置的品牌颜色、字体、组件与样式生成设计。生成后还能继续调整组件及其在各页面中的使用方式。
能直接生成 Android 安装包或上架 iOS 吗？
Pixso AI 完成界面设计与原型协作，不直接提供原生安装包打包和应用商店上架。可以通过设计交付或 MCP 将设计接入开发，再在项目中完成业务功能、测试、打包与发布。
多人能一起修改 AI 生成的 App 设计吗？
可以。AI 生成的设计保存在 Pixso 文件中，团队成员按文件权限协作编辑、查看和评论。产品经理确认流程，设计师调整界面，研发理解状态，围绕同一份设计推进。
AI 生成 App 免费吗？
Pixso 提供个人免费版。AI 生成按点数使用，AI 点数与席位分别配置；购买席位不自动附赠 AI 点数。使用团队空间时，还需具备文件编辑权限。查看价格与版本。
