AI 辅助适配 iPad/DUO 2026年10月28日
生活
0 条评论

利用 AI（如 ChatGPT、Claude、Cursor 等）来辅助界面与代码的 Duo / iPad 适配，可以极大地提升开发和设计效率。

要让 AI 输出精准可用的方案，需要掌握 4 项核心原则，并使用 结构化的提示词（Prompt）结构。

一、 让 AI 辅助适配的 4 项核心原则

1. 明确平台与 UI 框架（上下文约束）

AI 在不同框架下的适配语法差异巨大（例如 UIKit 的 traitCollection vs SwiftUI 的 @Environment(\.horizontalSizeClass)，或 Android 的 WindowSizeClass vs Jetpack Compose 的 FoldingFeature）。必须首先限定技术栈。

2. 区分“空间响应”与“姿态感知”

  • 空间响应（适用于 iPad & Duo）：教 AI 按容器宽度/高度划分布局模式（如 Single-column vs Multi-column），不要直接硬编码屏幕像素。
  • 姿态感知（Duo 独有）：提醒 AI 处理物理铰链/折痕（Hinge/Folding Feature）和设备姿态（Tabletop/Flat/Tent）。

3. 强调“连续性”与“无状态丢失”（State Continuity）

设备旋转、展开、半折叠或窗口拉伸时，页面会触发重绘。一定要提示 AI 在代码中处理状态持久化，避免重新布局导致数据重置或用户输入丢失。

4. 采用“分阶段拆解”策略

不要一次性让 AI “把整个 App 适配 Duo 和 iPad”，而是按照：

  1. 组件层（自动适应宽度的响应式卡片/列表）
  2. 页面结构层（侧边栏 + 主内容区的动态 Split 布局）
  3. 硬件特性处理（铰链避让与姿态切换）

二、 提示词（Prompt）设计结构与模板

一个高效的适配提示词应该包含：角色设定 + 硬件/平台目标 + 布局需求 + 边界条件 + 输出要求。

💡 提示词模板 1：UI/UX 设计方案与布局策略设计

当你想让 AI 帮你想清楚某个功能/页面在 iPad 和 Duo 上该怎么布局时使用。

【角色】你是一位资深移动端 UI/UX 设计师，精通 iOS (iPadOS) 与折叠屏/双屏设备 (如 Microsoft Surface Duo / 折叠屏) 的响应式设计规范。

【目标】请帮我设计 [组件/页面名称，例如：邮件客户端的主界面] 在 iPad 和 Duo 设备上的适配方案。

【已知信息】
1. 当前手机端形态：[简述手机端的布局，如：单列列表，点击进入详情页]。
2. 应用核心交互：[核心操作，如：浏览列表、查看详情、快速回复]。

【需求与约束】
1. iPad 适配：
   - 说明在 Regular Width 下的布局（如 Split-View 左右分栏）。
   - 考虑外接键盘/鼠标时的悬停（Hover）与快捷键逻辑。
2. Duo 适配：
   - 区分单屏运行（Single-screen）与双屏展开（Spanned）的界面形态。
   - 说明在半折叠/立式模式（Tabletop Mode）下的上下屏功能拆分。
   - 必须处理中央铰链/折痕（Hinge Safe Area）的避让策略，防止文本或按钮被截断。
3. 共性与差异：用表格总结两者在交互和布局上的共性和差异点。

【输出要求】
请提供清晰的布局结构说明（建议附带 ASCII 简图或 Markdown 结构图），并列出组件级响应式规则。

💡 提示词模板 2：代码重构与响应式布局实现 (以 SwiftUI / Jetpack Compose 为例)

当你要写代码或者重构已有手机端代码时使用。

【角色】你是一位精通 [SwiftUI / Jetpack Compose / Flutter] 的资深客户端开发专家。

【目标】请将以下适用于手机端的单列布局代码，重构为同时支持 iPad 和 Duo (双屏/折叠屏) 的响应式布局。

【待重构代码】
``[粘贴你的现有代码片段]``

【适配要求】
1. 尺寸类适配 (Size Classes)：
   - 当水平尺寸为 Compact 时，保持单列导航（Stack Navigation）。
   - 当水平尺寸为 Regular 时，自动转换为双栏/三栏布局（NavigationSplitView / List-Detail）。
2. Duo / 折叠屏特性处理：
   - 引入姿态/折痕 API（如 Jetpack WindowManager 或 SwiftUI 相应环境变量）。
   - 当检测到有中央折痕（FoldingFeature）时，避免将关键 UI（如输入框、操作按钮）放置在折痕区域内。
   - 支持 Tabletop 模式（上半屏显示 [视图A]，下半屏显示 [操作区B]）。
3. 状态保持：确保布局切换或窗口尺寸动态改变时，[关键状态，例如：选中的 List Item ID] 不丢失。

【输出要求】
请给出完整、可运行的代码，并在关键逻辑（尺寸判断、折痕避让、分栏控制）处加上详细的代码注释。

💡 提示词模板 3：排查与优化现有适配问题 (Debug Prompt)

当应用在 Duo 或 iPad 上出现界面割裂、按钮被掩盖或崩溃时使用。

【问题描述】
在适配 [iPad 屏幕旋转 / Duo 双屏展开 / Stage Manager 窗口拖拽] 时，出现了以下问题：[具体现象，例如：中央折痕挡住了确定按钮 / 旋转后 ViewModel 数据重置]。

【运行环境】
- 平台与框架：[iOS SwiftUI / Android Jetpack Compose 等]
- 目标设备：[iPad Pro 12.9 / Surface Duo / Galaxy Z Fold]

【相关源码】
``[粘贴崩溃或布局异常的代码]``

【需求】
1. 分析导致该问题的根本原因（如硬编码宽度、未响应系统 Size Class 变化、未监听 Safe Area / WindowInsets 等）。
2. 提供修正后的代码方案，并解释如何防范此类硬件适配问题。

三、 使用 AI 时的实战小技巧

  1. 先问设计规范，再生成代码：
    在让 AI 盲目写代码前，先问：“对于我的应用形态（如音频播放器），Duo 的半折叠模式下业界常见的 UI 交互范式是什么？” 确认方向后再让 AI 写代码。
  2. 利用 AI 生成测试用例（Test Matrix）：
    可以要求 AI：“请列出测试该组件在 iPad Stage Manager 和 Duo 模式下需覆盖的 5 个边缘测试场景（Edge Cases）。”（例如：在物理折痕刚好切过 TableCell 时的处理）。