Codex Use Case

构建 Mac 应用外壳

用 Codex 和 Build macOS Apps 插件,把应用想法变成符合桌面习惯的 SwiftUI 外壳:侧边栏、详情区、检查器、菜单、工具栏、快捷键和 Settings。

macOS Code
Build a Mac app shell macOSCode

场景定位

用 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。

技术栈

需要 Split-view app shell
默认选项 NavigationSplitView、.sidebar lists 和 inspector(isPresented:)
为什么需要

持久侧边栏、详情区和检查器比 touch-first push navigation 更符合常见 Mac 应用布局。

需要 桌面动作和设置
默认选项 commands、CommandMenu、keyboard shortcuts 和 Settings scene
为什么需要

菜单栏动作、快捷键和独立设置窗口能让功能像真正的 Mac 应用,而不是拉伸的 iOS 页面。

需要 状态所有权
默认选项 @State、@SceneStorage、@AppStorage 和显式 selection bindings
为什么需要

让 Codex 保持侧边栏选择、检查器可见性和用户偏好可预测,避免反射式增加 view model。

需要 原生逃生口
默认选项 通过窄 NSViewRepresentable 或 NSWindow bridge 使用 AppKit
为什么需要

只在 SwiftUI 无法清晰表达的具体平台行为上使用 AppKit,同时让 SwiftUI 继续作为 scene 和 selection state 的来源。