场景定位
用 Codex 和 Build macOS Apps 插件,把应用想法变成符合桌面习惯的 SwiftUI 外壳:侧边栏、详情区、检查器、菜单、工具栏、快捷键和 Settings。
- 难度
- 高级
- 时间跨度
- 约 1 小时
适合用于
- 新的 Mac 应用想法,或需要真正桌面外壳的 iPad-first / web-first 概念
- 编辑器、资料库、管理后台、评审工具这类由侧边栏选择驱动详情区和检查器的产品
- 偏好设置应放在独立 Settings 窗口,而不是主内容栈里的 Mac 应用
Skills & Plugins
相关工具
Starter Prompt
起步提示词
Use the Build macOS Apps plugin to turn [describe your app idea] into a Mac-native SwiftUI app shell with a sidebar, detail pane, inspector, commands, and Settings.
Constraints:
- Choose the scene model first. Prefer `WindowGroup` for the main window and add a dedicated `Settings` scene for preferences.
- Build the main UI around `NavigationSplitView` with explicit selection state, a native `.sidebar` list, a detail surface, and an `inspector(isPresented:)` panel for secondary metadata or controls.
- Keep sidebar rows lightweight and native: one icon, one title line, and at most one short secondary line. Do not wrap every row in large custom cards unless there is a strong product reason.
- Expose important actions through scene-level `commands`, `CommandMenu`, toolbar buttons, and keyboard shortcuts. Do not hide the only path to a critical action behind gestures.
- Use `@SceneStorage` for window-scoped UI state, `@AppStorage` for preferences, and explicit parent-owned selection bindings for sidebar/detail coordination.
- Prefer system materials, semantic colors, and standard sidebar backgrounds. Add custom styling only to detail or inspector content cards when needed.
- Use a narrow AppKit bridge only if SwiftUI cannot express one specific desktop behavior cleanly.
- Create or update `script/build_and_run.sh`, run the smallest useful build/run check, and tell me the exact commands you used.
Deliver:
- the scene structure and main sidebar/detail/inspector views
- the menu, toolbar, and keyboard shortcut wiring
- the Settings scene and preference state model
- any AppKit bridge you added and why it was necessary
- the build/run validation steps and any desktop UX follow-up you recommend 在 ChatGPT 桌面应用中尝试 从 Mac scene 模型开始
这个场景是把应用想法变成真正像桌面应用的 Mac app shell,而不是把 touch-first stack 拉伸到桌面。先让 Codex 选择 scene 模型,再围绕稳定的侧边栏选择、详情表面和检查器设计主窗口。
当你希望 Codex 套用桌面结构并保持 shell-first 的 build/run 循环时,使用 Build macOS Apps 插件。它的 macOS SwiftUI patterns skill 适合 scene 设计、侧边栏、检查器、commands、settings,以及 SwiftUI 差一点无法表达的窄 AppKit bridge。
构建侧边栏、详情区和检查器
当功能受益于持久导航和稳定选中项时,优先使用 NavigationSplitView。侧边栏行保持原生、轻量,让侧边栏使用系统背景;自定义卡片或密集元数据放到详情区或检查器里。
struct LibraryRootView: View {
@SceneStorage("LibraryRootView.selection") private var selection: Item.ID?
@SceneStorage("LibraryRootView.showInspector") private var showInspector = true
var body: some View {
NavigationSplitView {
List(selection: $selection) {
ForEach(items) { item in
Label(item.title, systemImage: item.systemImage)
.tag(item.id)
}
}
.listStyle(.sidebar)
.navigationTitle("Library")
} detail: {
ItemDetailView(selection: selection)
.inspector(isPresented: $showInspector) {
ItemInspector(selection: selection)
}
}
}
} 把命令、工具栏和快捷键放在桌面层
Mac 用户应该能在菜单栏、工具栏和快捷键里发现重要动作。让 Codex 围绕同一组 app actions wiring scene-level commands、上下文菜单项和 toolbar buttons,避免桌面用户只能靠手势找到关键入口。
@main
struct LibraryApp: App {
var body: some Scene {
WindowGroup {
LibraryRootView()
}
.commands {
CommandMenu("Library") {
Button("New Item") {
// Create a new item.
}
.keyboardShortcut("n")
Button("Toggle Inspector") {
// Route this command to the focused window or selected item state.
}
.keyboardShortcut("i", modifiers: [.command, .option])
}
}
Settings {
LibrarySettingsView()
}
}
} 把偏好设置放进 Settings
对应用偏好,使用独立 Settings scene,并用 @AppStorage 持久化用户选择。相比在主内容窗口里再 push 一个设置页,这更符合 Mac 使用习惯。
struct LibrarySettingsView: View {
@AppStorage("showItemMetadata") private var showItemMetadata = true
var body: some View {
TabView {
Form {
Toggle("Show Item Metadata", isOn: $showItemMetadata)
}
.tabItem { Label("General", systemImage: "gearshape") }
}
.frame(width: 460, height: 260)
.scenePadding()
}
} 描述应用概念,再验证 shell
这个页面最适合用于:你的 prompt 明确应用概念、主要内容对象和核心动作,然后要求 Codex 先围绕该工作流构建桌面 shell。
让 agent 运行小型 build/run 检查,并总结 scene 结构、command wiring、state ownership,以及任何必须 bridge 的 AppKit 边界。
实用提示
侧边栏保持原生:每行一个图标、一行标题,最多一条很短的辅助信息。丰富卡片、计数器和元数据应进入详情区或检查器。
不要把全局设置藏在主内容栈。如果偏好影响整个 app,让 Codex 用 @AppStorage 放到 Settings,并通过 app menu 暴露入口。
只为窄桌面缺口使用 AppKit。open/save panels、first-responder control 或自定义 NSView 可以用 AppKit 包一层,但 SwiftUI 仍应拥有 scene 和 selection state。
技术栈
持久侧边栏、详情区和检查器比 touch-first push navigation 更符合常见 Mac 应用布局。
菜单栏动作、快捷键和独立设置窗口能让功能像真正的 Mac 应用,而不是拉伸的 iOS 页面。
让 Codex 保持侧边栏选择、检查器可见性和用户偏好可预测,避免反射式增加 view model。
只在 SwiftUI 无法清晰表达的具体平台行为上使用 AppKit,同时让 SwiftUI 继续作为 scene 和 selection state 的来源。