Native macOS SwiftUI UI Benchmark Prompt You are being benc...

Prompt

Native macOS SwiftUI UI Benchmark Prompt You are being benchmarked against four other advanced coding models. Your task is to one-shot a polished, fully interactive native macOS SwiftUI prototype that reproduces the attached reference image as closely as possible. Do not ask questions. Do not provide a plan. Do not stop at a partial implementation. Return complete, compile-ready source code. Goal Recreate the entire attached application screen in native SwiftUI: native macOS application visually faithful to the reference polished interaction design responsive layout functional controls animated people carousel accessible keyboard and screen-reader behavior no third-party dependencies Treat the attached image as the sole visual authority. Do not reinterpret, modernize, simplify, or redesign it. Anti-cheating rule Do not: display the reference screenshot as the application background crop pieces of the screenshot into UI elements rasterize the complete interface use WebView, HTML, CSS, Canvas, SpriteKit, or SceneKit reproduce the screen as one static image fake macOS window controls Build the interface from real SwiftUI views. The native macOS window should provide its own traffic-light controls. Technical target Swift 6-compatible code SwiftUI native macOS deployment target: macOS 14 or later no packages or external frameworks AppKit may be used only where SwiftUI has no suitable native equivalent source files must paste into a new macOS SwiftUI Xcode project the project must compile without additional code do not output an .xcodeproj provide no more than six Swift source files keep the implementation structured and maintainable do not introduce an unnecessary MVVM layer Required output Return only the source files. For each file, use this exact format: FILE: Filename.swift ```swift // complete file contents Include an `@main` App type and all required views, models, components, helpers, and previews. Do not include explanations, setup instructions, pseudocode, omissions, or “continue here” placeholders. ## Reference canvas Design the default window around the attached reference’s proportions, approximately: - default size: 1260 × 916 points - minimum useful size: 960 × 640 points - light appearance - high-key cool white and pale blue environment - rounded bottom window corners supplied by the native window - restrained, premium macOS presentation The interface should remain visually coherent when resized. ## Overall composition Reproduce the following hierarchy: 1. narrow left navigation rail 2. top greeting and search 3. People heading, count badge, and subtitle 4. large five-person portrait carousel 5. translucent structural shelf beneath the portraits 6. three supporting cards: Today, Message, and Notes The people carousel is the dominant visual element. Do not let the navigation, search, shelf, or bottom cards compete with it. ## Background Reproduce the reference’s soft high-key environment: - nearly white upper and lower regions - restrained pale blue and lavender ambient field behind the people - subtle center illumination - no obvious decorative blobs - no saturated background - no animated gradient - no dark mode recreation for the primary screen - no heavy glassmorphism The background should create depth while remaining quiet. ## Left navigation rail Reproduce the vertical icon rail: - approximately 84 points wide - selected Home control near the top - four additional subdued navigation icons - Settings near the lower portion - small circular user avatar at the bottom - selected control uses a soft white raised square with a blue Home icon - unselected icons are cool gray - native hover, press, keyboard-focus, and selection feedback Use appropriate SF Symbols. Selecting an icon should update the selected state, even though only the Home screen needs full content. ## Greeting and search Top content should include: - “Good morning, Monika 👋” - “Monika” in semibold - greeting aligned with the main content column - a wide search field at the upper-right - search icon - placeholder: “Search anything...” - visible Command-K shortcut hint - subdued border and soft white surface - approximately 44–48 points tall - Command-K focuses the field - Escape dismisses search focus Use a real SwiftUI text field. ## People heading Include: - “People” in strong black semibold or bold system typography - a small pale-blue count capsule containing “5” - subtitle: “Your most important connections” - previous and next controls on the right - controls use restrained white rounded-square surfaces - controls remain visually subordinate ## People carousel Build a working five-person carousel. Initial order: 1. Oliver 2. Maya 3. James 4. Ethan 5. Sophie Initial featured person: - James Interaction requirements: - clicking a person animates them into the featured center position - previous and next buttons move the selection - Left and Right Arrow keys move the selection - Return activates the featured card - peripheral cards recede smoothly - selection changes use a polished spring animation - hover produces restrained feedback - pressed state is visible - respect Reduce Motion by replacing spring movement with minimal or immediate transitions Use a stable view hierarchy. Do not destroy and rebuild the entire carousel on every selection. ## Carousel geometry Reproduce the reference’s recession hierarchy: Featured card: - approximately 266 points wide - approximately 380 points tall - scale 1.0 - approximately 29–30 point continuous corners - strongest rim and portrait clarity - highest z-index Near peripheral cards: - approximately 0.71–0.74 scale relative to featured - visually subordinate but readable - placed immediately beside the featured card Far peripheral cards: - approximately 0.61–0.65 scale - outermost positions - slightly stronger pale veil than near cards General rail behavior: - exactly one optical center - all cards share one horizontal center axis - featured card extends above and below neighboring cards symmetrically - use most of the available content width - narrow gaps, approximately 8–12 points optically - no perspective rotation - no tilted card planes - no fake side faces - no reflections - no strong directional shadows Depth should come from scale, portrait clarity, z-order, top-biased rims, and soft ambient bloom. ## Portrait assets Attempt to load these macOS asset names: - `oliver` - `maya` - `james` - `ethan` - `sophie` - `userAvatar` The code must compile and render when none of these assets exist. When an image is unavailable: - render a polished contact-specific fallback - use each person’s initials - use a distinct muted palette for every person - do not repeat the same generic silhouette - preserve the portrait composition and visual hierarchy When assets exist: - use aspect-fill - crop without distortion - keep the eyes approximately 28–34% from the top of the card where practical - keep faces clear of labels - do not apply duotones or decorative filters Do not attempt to reproduce or infer the real identities of the people shown in the reference. ## Portrait card styling Each portrait card must include: - tall portrait shape - soft cool-gray image environment - thick milky-white translucent perimeter - bright top-biased rim - subtle inner highlight - restrained zero-offset white bloom - minimal dark shadow - continuous rounded corners - lower contrast scrim over the image - name over the lower-left portrait - colored context pill below the name - small status tile at the top-right The card should feel like a premium translucent object, not a generic rounded rectangle. Avoid: - thick dark borders - large black shadows - exaggerated glass - excessive blur - fake 3D extrusion - marketing-card styling ## Card content Oliver: - name: Oliver - context: Design Sync - accent: violet - top-right icon: message bubble Maya: - name: Maya - context: Feedback - accent: green - top-right icon: message bubble James: - name: James - context: Project Lead - accent: warm orange - top-right icon: filled star - initially featured Ethan: - name: Ethan - context: 1:1 Meeting - accent: blue - top-right icon: message bubble Sophie: - name: Sophie - context: Onboarding - accent: pink - top-right icon: message bubble Names: - white - semibold - rounded system typography - subtle shadow for contrast - featured name unmistakably larger than peripheral names Context pills: - pale tinted raised surface - accent-colored text - soft inner highlight - restrained border - subtle matching glow - compact proportions Status tiles: - small rounded squares - pale translucent surface - accent-colored icon - gentle rim and depth - featured star tile slightly larger ## Structural shelf Build the shelf beneath the people cards as a real SwiftUI surface. It should have: - broad horizontal span - approximately 44–56 points of visible face height - bright upper rim - cooler translucent face - pale blue-gray lower tone - one soft group-level ambient bloom - continuous rounded ends - cards visually seated into or immediately above it Do not use: - perspective - side faces - vanishing points - mirrored reflections - fake physical thickness - dark cast shadows The shelf must support the composition without resembling a dock. ## Bottom support row Create three separate cards aligned in one horizontal row: 1. Today 2. Message 3. Notes Shared styling: - equal height - approximately 24-point spacing - approximately 22-point continuous corner radius - pale cool-white surfaces - very subtle top highlight - restrained border - soft ambient shadow - approximately 24-point internal padding - no heavy glass effect - no dark shadow - no thick outline The row should match the reference’s placement and proportions. ## Today card Include: - title: Today - ellipsis control at upper-right - three event rows - colored luminous dots - times and titles - raised circular plus button at lower-right Events: - 10:00 AM — Design Sync — violet - 1:00 PM — 1:1 with Ethan — blue - 3:30 PM — Project Review — orange Interaction: - plus button appends a visible fourth sample event or briefly presents an inline add state - ellipsis provides visible press feedback ## Message card Include: - small Maya avatar - green online dot - name: Maya Lin - timestamp: 2m ago - message: “Hey Monika! Can you share the latest designs when you have a moment?” - raised Reply button Interaction: - clicking Reply changes the button to Sent with a checkmark - animate the state change subtly - keep the card height stable ## Notes card Include: - title: Notes - warm pale-yellow inner note surface - text: “Prep for project review Focus on key outcomes and next steps.” - pencil control at lower-right Interaction: - clicking the pencil switches to an editable TextEditor - show a checkmark while editing - clicking the checkmark completes editing - keep the card geometry stable ## Visual language Use native SF Pro system typography. Target qualities: - high-key - soft - precise - premium - calm - tactile - people-first - spatial without fake 3D - visually restrained Use spacing, typography, scale, and hierarchy before adding effects. Do not overuse: - gradients - shadows - materials - capsules - borders - blur Every visual effect should correspond to something visible in the reference. ## Animation and interaction quality Include polished but restrained animations for: - carousel selection transfer - card hover - card press - navigation selection - previous and next controls - Reply to Sent - Notes edit transition - plus button press - search focus Animations should: - feel native to macOS - avoid bounce-heavy or playful motion - preserve stable layout - remain responsive - respect `accessibilityReduceMotion` Use hover effects only on macOS. ## Accessibility Include: - meaningful accessibility labels - selected traits for the featured person - keyboard focus indicators - logical reading order - buttons with explicit labels - sufficient text contrast - support for increased text size without immediate clipping - Reduce Motion handling - Reduce Transparency fallback where material is used Do not rely on color alone to communicate state. ## Architecture Use a compact, disciplined structure. Recommended components: - App entry point - DashboardView - NavigationRail - PeopleHeader - PeopleCarousel - PersonCard - PeopleShelf - SupportCardRow - TodayCard - MessageCard - NotesCard - small shared surface and button components - simple value models Use local `@State` for prototype interactions. Do not introduce: - networking - persistence - databases - view models that merely mirror local state - service layers - package dependencies - unrelated screens - placeholder TODOs Centralize repeated visual metrics and colors rather than duplicating arbitrary constants everywhere. ## Compilation requirements Before answering, verify mentally that: - an `@main` application type exists - every referenced type is defined - every property has a valid initializer - macOS uses AppKit rather than UIKit - missing image assets do not crash or prevent rendering - all ViewBuilder branches return valid views - no iOS-only modifiers are used - no undefined custom extensions are referenced - previews compile - button actions compile - the minimum macOS version supports every API used Compilation is a hard gate. A visually ambitious response that does not compile fails the benchmark. ## Final self-review Before producing the files, compare your implementation against the image and correct: - overall proportions - outer margins - vertical rhythm - content alignment - rail span - featured card dominance - peripheral recession - portrait framing - shelf relationship - bottom-card dimensions - typography - color temperature - border strength - shadow strength - excessive effects - missing interactions - missing accessibility behavior Do not claim pixel-perfect reproduction in prose. Demonstrate fidelity through the code. ## Output restriction Output only complete source files using the required filename format. Do not include commentary before or after the files.