Empieza por el modelo de escenas de Mac

Este caso de uso te ayuda a convertir una idea en la estructura básica de una app para Mac diseñada desde el principio para el escritorio, sin tener que adaptar una pila de navegación pensada para pantallas táctiles. Pídele a Codex que elija primero el modelo de escenas y luego diseñe la ventana principal con una barra lateral que conserve la selección, un panel de detalles y un inspector para controles secundarios o metadatos.

Usa el complemento Build macOS Apps cuando quieras que Codex aplique esa estructura de escritorio y use principalmente la línea de comandos para compilar y ejecutar la app. Su habilidad de patrones de SwiftUI para macOS es útil para diseñar escenas, barras laterales, inspectores, comandos y ajustes, y para crear pequeñas integraciones con AppKit cuando SwiftUI no cubre un comportamiento específico de Mac.

Crea una barra lateral, un panel de detalles y un inspector

Dale preferencia a NavigationSplitView cuando convenga mantener la navegación visible y conservar el elemento seleccionado. Usa filas nativas y sencillas en la barra lateral, deja que esta use los fondos del sistema y reserva las tarjetas personalizadas o los conjuntos extensos de metadatos para el panel de detalles o el inspector.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62import SwiftUI

struct Item: Identifiable, Hashable {
  let id: String
  let title: String
  let systemImage: String
}
let items = [Item(id: "notes", title: "Notes", systemImage: "note.text"), Item(id: "photos", title: "Photos", systemImage: "photo")]

struct ItemDetailView: View {
  let selection: String?
  var body: some View { Text(selection ?? "Select an item").frame(maxWidth: .infinity, maxHeight: .infinity) }
}
struct ItemInspectorView: View {
  let selection: String?
  var body: some View { Text("Metadata: \(selection ?? "No selection")").padding().frame(minWidth: 220) }
}
@MainActor final class LibraryStore: ObservableObject {
  @Published var entries = items
  @Published var selection: String?
  @Published var showInspector = true
  func addItem() {
    let item = Item(id: UUID().uuidString, title: "New Item", systemImage: "doc")
    entries.append(item)
    selection = item.id
  }
}

struct LibraryRootView: View {
  @StateObject private var store = LibraryStore()
  @SceneStorage("LibraryRootView.selection") private var savedSelection: Item.ID?
  @SceneStorage("LibraryRootView.showInspector") private var savedShowInspector = true

  var body: some View {
    NavigationSplitView {
      List(selection: $store.selection) {
        ForEach(store.entries) { item in
          Label(item.title, systemImage: item.systemImage)
            .tag(item.id)
        }
      }
      .listStyle(.sidebar)
      .navigationTitle("Library")
    } detail: {
      ItemDetailView(selection: store.selection)
        .inspector(isPresented: $store.showInspector) {
          ItemInspectorView(selection: store.selection)
        }
    }
    .focusedSceneObject(store)
    .onAppear {
      store.selection = savedSelection
      store.showInspector = savedShowInspector
    }
    .onChange(of: store.selection) { _, selection in
      savedSelection = selection
    }
    .onChange(of: store.showInspector) { _, showInspector in
      savedShowInspector = showInspector
    }
  }
}

Si la app necesita tamaños poco habituales para los paneles de una vista dividida, coordinación de ventanas a bajo nivel o un comportamiento personalizado en la cadena de respuesta, pídele a Codex que conserve la estructura de SwiftUI y añada solo la integración con AppKit indispensable para ese caso.

Incorpora comandos, barras de herramientas y atajos de teclado en la interfaz de escritorio

Los usuarios de Mac deberían poder encontrar las acciones importantes en la barra de menús y en la barra de herramientas, y descubrir sus atajos de teclado. Pídele a Codex que vincule los commands de la escena, las opciones de menú que dependen del contexto y los botones de la barra de herramientas con las mismas acciones de la app. Así, quienes usen la app en el escritorio no tendrán que buscar controles que solo se activan con gestos.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28@main
struct LibraryApp: App {
  @FocusedObject private var store: LibraryStore?
  var body: some Scene {
    WindowGroup {
      LibraryRootView()
    }
    .commands {
      CommandMenu("Library") {
        Button("New Item") {
          store?.addItem()
        }
        .keyboardShortcut("n")
        .disabled(store == nil)

        Button("Toggle Inspector") {
          store?.showInspector.toggle()
        }
        .keyboardShortcut("i", modifiers: [.command, .option])
        .disabled(store == nil)
      }
    }

    Settings {
      LibrarySettingsView()
    }
  }
}

Usa FocusedValue, el estado de la escena o un estado explícito de selección cuando un comando deba aplicarse al elemento que se muestra en el panel de detalles. Si el mismo atajo de teclado pudiera quedar registrado en varios lugares, pídele a Codex que centralice su gestión para que la app tenga una sola vía para ejecutar el comando.

Guarda las preferencias en Settings

Usa una escena Settings dedicada a las preferencias de la app y guarda con @AppStorage las elecciones del usuario que deban conservarse entre sesiones. En Mac, esto suele funcionar mejor que añadir una pantalla de ajustes a la pila de navegación de la ventana principal.

1
2
3
4
5
6
7
8
9
10
11
12
13
14struct 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()
  }
}

Describe la idea de la app en el prompt y valida su estructura

Para aprovechar esta página, describe en el prompt la idea de la app, los principales objetos de contenido y las acciones principales. Luego pídele a Codex que empiece por crear la estructura de escritorio en torno a ese flujo de trabajo. Pídele al agente que haga una prueba breve de compilación y ejecución y que resuma cómo se organizan las escenas, cómo se conectan los comandos con las acciones, qué componente gestiona cada estado y qué casos requirieron una integración con AppKit.

Consejos prácticos

Mantén el diseño nativo de la barra lateral

Usa un ícono, una línea para el título y, como máximo, una línea secundaria breve en cada fila de la barra lateral. Mueve las tarjetas con más contenido, los contadores y los metadatos al panel de detalles o al inspector para que sea fácil revisar la lista de un vistazo.

Evita ocultar los ajustes en la pila de navegación principal

Si una preferencia del usuario afecta a toda la app, pídele a Codex que coloque el control en Settings, guarde la preferencia con @AppStorage y permita acceder a los ajustes desde el menú de la app, en lugar de añadir otra pantalla a la pila de navegación.

Reserva AppKit para necesidades puntuales del escritorio

Si la función necesita mostrar paneles para abrir o guardar archivos, controlar qué objeto recibe primero los eventos o usar una NSView personalizada, limita la integración con AppKit a ese caso y deja que SwiftUI gestione el modelo de estado, en lugar de reescribir toda la ventana en AppKit.