How to vibe codeCleanShot X

Prerequisites

• Mac computer running macOS Sonoma or later

  Required to build and run native macOS AppKit/SwiftUI desktop applications and access ScreenCaptureKit APIs.

• XcodeFree

  Official IDE and toolchain for compiling Swift and managing macOS app entitlements.

• GitHub accountFree

  To version control your Swift codebase and back up project commits.

AI coding tools

• Claude Code

  Best-in-class terminal agent for orchestrating multi-file Swift project scaffolding, setting up AppKit bindings, and debugging complex compilation errors.

• Cursor

  Ideal AI code editor for inspecting canvas drawing logic, tweaking SwiftUI overlay constraints, and reviewing file diffs.

Build guide

1. 01Initialize Native macOS App & Global Hotkeys

   Create a headless or menu-bar-centric macOS application using Swift and AppKit, registering global keyboard shortcuts to trigger screenshot functions.

   Create a new macOS menu bar application in Swift using Xcode project structure. Configure the app to run as an accessory app (LSUIElement = true) so it lives exclusively in the status bar without a dock icon. Implement a global hotkey listener using CGEventTap or Magnet library equivalent to listen for Command+Shift+3 and Command+Shift+4 triggers. When triggered, print the requested capture mode to the console and request screen recording permissions from macOS via CGPreflightScreenCaptureAccess(). Ensure all AppKit lifecycle methods are correctly hooked up in the AppDelegate.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Implement Screen Capture Engine

   Build the screen capture utility using Apple's ScreenCaptureKit or CGWindowListCreateImage to capture specific windows, full screens, or custom rectangular selections with a magnifying crosshair.

   Implement a screen capture service in Swift utilizing Apple's ScreenCaptureKit framework for macOS. Support capturing the primary display, individual windows by window ID, and interactive area selection overlays with a crosshair cursor and screen magnifier view. When an area selection is completed, save the resulting CGImage to a temporary PNG file on disk and return its file URL. Handle all modern macOS permission dialogs gracefully with user guidance if permissions are denied.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Build Quick Access Floating Overlay

   Create a floating thumbnail window that appears in the bottom corner of the screen immediately after capture, allowing drag-and-drop, copying, or opening the editor.

   Build a floating Quick Access Overlay window in SwiftUI/AppKit that appears in the bottom-right corner of the primary display immediately after a screenshot is captured. The overlay window must be floating above all other windows (.floating window level), display a high-resolution thumbnail of the captured image, show file details (dimensions, file size), and provide action buttons for 'Copy', 'Save', 'Annotate', and 'Pin'. Support drag-and-drop operations out of the overlay view onto other desktop applications (NSDraggingSource).

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Develop Annotation Canvas

   Implement a full-featured image markup canvas supporting arrows, rectangles, blur/pixelate overlays, step counters, and text boxes.

   Create a macOS native annotation editor window using SwiftUI and CoreGraphics / Canvas. Load an image onto the canvas and implement interactive drawing tools: straight/curved arrows with customizable heads, rectangles, ellipses, a highlighter tool, and step counter badges. Crucially, implement a secure 'Blur / Pixelate' tool that applies a local Gaussian blur or mosaic pixelation filter to any user-selected rectangular subregion of the image to mask sensitive data. Include undo/redo stack management and export the final composite image as a PNG.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Implement Pinned Floating Screenshots

   Add support for pinning screenshots as transparent, click-through, or interactive floating windows on top of all desktop applications.

   Implement a 'Pin Screenshot' window manager in Swift. Given an image file path, spawn a borderless NSWindow that floats permanently above all other desktop applications. Add controls for resizing the window, adjusting opacity via a slider or scroll wheel, and a 'Lock Mode' toggle that allows mouse events to pass entirely through the pinned window so users can interact with applications running directly underneath it.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Integrate On-Device OCR via Vision Framework

   Add text recognition to extract non-selectable text from screen captures using Apple's Vision framework.

   Integrate Apple's Vision framework (VNRecognizeTextRequest) into the capture pipeline to perform high-speed on-device optical character recognition (OCR). When a user invokes the text capture shortcut or clicks the OCR button on the quick overlay, execute the text recognition request on the captured CGImage, format the recognized text strings into clean blocks, and automatically copy the extracted text to the system pasteboard with a subtle notification toast.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

7. 07Add URL Scheme API Support

   Expose a custom URL scheme handler (`cleanshot://`) to allow triggering capture modes programmatically from external scripts or CLI tools.

   Implement a custom URL scheme handler in the Swift AppDelegate to support commands matching the `cleanshot://` format (e.g., `cleanshot://capture-area?action=annotate`, `cleanshot://capture-fullscreen`, `cleanshot://pin`, and `cleanshot://toggle-desktop-icons`). Parse incoming URL parameters correctly, dispatch the requested action on the main thread, and ensure the app activates properly when invoked from terminal commands or browser links.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for CleanShot X