App 设计稿转 SwiftUI 代码提示词（Codex）

让 Codex 在 SwiftUI App 里实现定稿的 HTML 页面：布局和间距一致，颜色取自主题文件，支持 Dynamic Type。

在我们的 [SwiftUI] App 里实现已经定稿的新手引导页面和首页。布局和间距要和 [designs/] 里的 HTML 文件一致，颜色使用 [Theme.swift] 里的定义，支持 Dynamic Type，合适的地方复用现有组件。

适用于

Codex

所属合集

手机 App

这条提示词能做什么

Codex 会在你真实的 App 里实现已经定稿的新手引导页面和首页，以 HTML 文件作为布局和间距的参照。颜色取自现有的主题文件，支持 Dynamic Type，让文字跟随用户的系统设置缩放；能复用的现有组件就复用，不会再重复造一套。

把 SwiftUI 换成你用的框架，比如 Jetpack Compose、React Native 或 Flutter，另外两个方括号分别指向存放 HTML 设计稿的目录和定义颜色的文件。如果不是苹果平台，就把 Dynamic Type 换成对应的要求，比如在 Android 上跟随系统字体缩放。如果你做了深色模式，也把那几个文件写进去，两套主题一次实现。

这一步 Codex 要在你的代码仓库里工作，因为它需要读取主题和组件。先实现提示词里这两个页面，而不是整个 App；等它们的间距和组件都和设计稿对上，剩下的页面会快很多，因为常用的写法已经在代码里了。

同一合集里的其他提示词

• App 需求说明和页面清单提示词（Codex）写清 App 的用户、核心循环和平台，让 Codex 列出第一版需要的全部页面，分好组并说明每个页面的用途。
• App 新手引导流程设计提示词（Codex）用统一的风格设计三个相连的 390×844 新手引导页面：欢迎页、目标选择页和首页，插画用 CSS 绘制。
• App 首页设计提示词（Codex）为老用户设计 App 首页：围绕你指定的最重要元素展开，下面依次排内容、主按钮、统计和底部标签栏。
• App 列表页和详情页设计提示词（Codex）设计带搜索框和筛选标签的列表页，以及点进去的详情页，分成两个文件，书名和数字都用真实可信的内容。
• App 设置页设计提示词（Codex）用标准分组列表设计 App 设置页：每行显示当前值，该用开关的地方用开关，删除账户这类危险操作放底部标红。
• App 空状态、加载和错误状态设计提示词（Codex）为同一个 App 页面设计空状态、加载和错误三种状态，各存一个文件，导航和页头与正常页面保持一致。