Personal · Weekend build
Build your own CleanShot X
Screenshot, annotate, drag it where it needs to go. CleanShot X charges $8–$10 per month — that’s $96–$120 a year — for something you can replace with focused software of your own. Here is the honest scope, the honest timeline, and the exact prompt to hand your coding agent.
Who this replacement is for
This build targets a Mac user who screenshots all day for docs and bug reports. The goal: capture, annotate, and hand off screenshots in seconds with everything stored locally. If you need more than that, keep paying — the point of building it yourself is owning a tool shaped exactly like your workflow, not re-implementing a venture-funded roadmap.
Same build, different logo: this v1 also replaces Shottr and Monosnap — they all solve the same core job.
How long it actually takes
One number would be a lie, so here are three. Each tier is a real, usable product — pick the one that matches how much of CleanShot X you actually use.
| Estimate | What you get |
|---|---|
| 10 hours | capture, annotate, floating thumbnail, library |
| 3 days | scrolling capture, ocr text copy, self-timer, backgrounds |
| 3 months+ | screen recording, gif export, cloud sharing — the part you should probably skip |
What a minimal CleanShot X alternative needs
- area, window, and full-screen capture via macOS APIs
- annotation tools with arrows, text, and blur for secrets
- a floating thumbnail for quick drag into other apps
- a searchable local capture library organized by date
- copy to clipboard or save with filename templates
Data model
Capture, Annotation, LibraryEntry, NamingTemplate
Integrations
macOS ScreenCaptureKit, global keyboard shortcuts, system pasteboard
Capability context
SwiftUI, Swift, macOS
The guardrail
Keep every capture on the local disk, request screen-recording permission transparently, and flatten blur annotations destructively so redacted secrets cannot be recovered from the file.
Deliberate non-goals
Do not build screen video recording, cloud uploads, team libraries, a general image editor, or overlap with dedicated photo editing tools.
The complete build prompt
Copy this into your coding agent of choice. It is scoped for a useful v1 — journeys, screens, business rules, data model, security, tests, and acceptance scenarios included. Pick your stack:
You are building a production-ready software product named “Shotdock”, a deliberately focused alternative to CleanShot X. Build a complete, usable vertical slice—not a landing page, static mockup, or disconnected collection of components. WORKING AGREEMENT Before writing implementation code, produce a short technical plan that names the routes or pages, server actions or endpoints, data tables, important state transitions, authorization boundaries, background jobs, and external adapters. Resolve contradictions in favor of the narrow audience and non-goals below. Prefer a small, legible architecture over speculative abstraction, but do not omit persistence, validation, error handling, or tests. PRODUCT BRIEF Primary user: a Mac user who screenshots all day for docs and bug reports. Primary outcome: capture, annotate, and hand off screenshots in seconds with everything stored locally. Product principle: optimize the exact workflow below instead of copying the full breadth of CleanShot X. A first-time user should understand what to do from the interface itself, without a tour or documentation. END-TO-END USER JOURNEYS Implement all of these flows through the real interface and persistent data layer: 1. The user presses a shortcut, drags to select an area, watches the floating thumbnail appear in the corner, and drags it straight into a chat message. 2. The user captures a window, adds an arrow and a text label, blurs an API key, copies the flattened result, and pastes it into a bug report. 3. The user opens the library, filters captures by date, renames one using the filename template, and deletes a stale batch to free space. SCREENS AND INFORMATION ARCHITECTURE Build these as coherent responsive views. Each screen must specify its primary action, secondary actions, visible status, validation feedback, empty state, loading or pending state, success confirmation, and recoverable failure state. 1. Capture overlay: crosshair with pixel dimensions, window highlighting, full-screen option, escape to cancel, and shortcut hints. 2. Floating thumbnail: recent capture preview with drag support, quick copy, annotate, and save actions, and configurable auto-dismiss. 3. Annotation editor: arrow, text, and blur tools with color and size controls, crop, undo, and copy or save with the active naming template. 4. Library: capture grid grouped by date with search, preview, reveal in Finder, naming-template settings, and storage usage. CORE CAPABILITIES 1. area, window, and full-screen capture via macOS APIs 2. annotation tools with arrows, text, and blur for secrets 3. a floating thumbnail for quick drag into other apps 4. a searchable local capture library organized by date 5. copy to clipboard or save with filename templates DETAILED BEHAVIOR AND BUSINESS RULES Treat these as server-enforced product requirements, not interface suggestions: 1. Capture through official macOS screen-capture APIs, request screen-recording permission explicitly, and explain clearly what to enable when permission is missing. 2. Write every capture only to the local library folder; never upload, sync, or transmit image data anywhere in v1. 3. Flatten blur annotations destructively at copy and save time so redacted pixels cannot be recovered from the exported file. 4. Apply the filename template deterministically with date, time, and app-name tokens, and append a counter instead of ever overwriting an existing file. DATA MODEL AND LIFECYCLE Design a small relational schema centered on Capture, Annotation, LibraryEntry, NamingTemplate. Before implementing it, document: 1. Each table’s purpose, primary key, ownership or tenant boundary, timestamps, status fields, and important attributes. 2. Foreign keys, uniqueness constraints, check constraints, indexes needed by the named screens, and transaction boundaries for multi-record changes. 3. The allowed lifecycle or state transitions, who may trigger each transition, which transitions are terminal or reversible, and what audit history must remain immutable. 4. Archive, retention, and deletion behavior, including what happens to dependent records and external files. 5. Idempotency strategy for submissions, jobs, imports, notifications, webhooks, or retries where applicable. Use migrations rather than ad-hoc schema creation. Store time instants consistently and retain named timezone context whenever local schedules or dates matter. Never rely on a counter, disabled button, or client-side check to preserve a business invariant. USERS, AUTHENTICATION, AND PERMISSIONS Implement only the roles required by the stated audience. Make the ownership and visibility model explicit before coding. Enforce authorization in every server-side query and mutation, including search, exports, attachments, live updates, and guessed URLs—not merely by hiding controls. Use secure session defaults, protect state-changing requests, and provide an understandable signed-out, expired-session, and forbidden state. Seed distinct users when multiple roles are required so permissions can be demonstrated and tested. INTERACTION AND VISUAL DIRECTION The product should feel fast, calm, focused, and credible rather than like a generic admin template. Use a clear visual hierarchy, restrained color, readable typography, generous hit targets, and consistent placement for primary actions. Start with server-rendered HTML and progressively enhance only the interactions that benefit from it. The core workflow must remain understandable if enhancement fails. Start with server-rendered Astro pages and ordinary HTML forms. Use HTMX for form submissions, partial navigation, and server-driven updates, then Alpine.js only for small local browser state. The core workflow must remain understandable if either enhancement layer fails. Design mobile layouts intentionally instead of simply stacking desktop panels. Support keyboard navigation, visible focus, semantic landmarks, explicit labels, useful page titles, reduced-motion preferences, and screen-reader announcements for asynchronous results. Never use color alone to communicate state. Destructive actions require clear scope and confirmation; safe repeated actions should be idempotent. TECHNICAL DIRECTION Build this version with the AHA stack: Astro for routing, layouts, and server-rendered pages; HTMX for interactions that benefit from HTML fragment responses; and Alpine.js for small, local interface state. Prefer Cloudflare D1 for relational persistence, R2 for object storage, Workers for server endpoints and scheduled work, Durable Objects only for coordinated real-time state, and Workflows or Queues for durable background jobs—but only when the product requirements call for them. Keep domain rules in testable server-side modules instead of route handlers or UI components. Separate persistence, external providers, and background work behind small interfaces without building a framework. Prefer ordinary HTML forms and URLs for durable navigation; use optimistic interaction only when failure can be reconciled clearly. The product brief currently identifies SwiftUI, Swift, macOS as capability context. Preserve any required native, browser-only, edge, storage, real-time, or background-processing capability through a narrow adapter appropriate to the selected framework. If the core workflow genuinely requires native or browser APIs, keep that runtime as the primary execution surface rather than simulating inaccessible capabilities or inventing an unnecessary web surface. Integrate with macOS ScreenCaptureKit and global keyboard shortcuts and system pasteboard. For every integration: - List required environment variables in an .env.example without real secrets. - Add a small adapter with timeouts, normalized errors, and a deterministic local fake or development path. - Verify inbound signatures and deduplicate provider events where supported. - Keep credentials server-side, encrypt long-lived provider tokens at rest, and redact secrets and sensitive payloads from logs. - Define retry, backoff, and idempotency behavior for any side effect that can be repeated. SECURITY AND PRIVACY Keep every capture on the local disk, request screen-recording permission transparently, and flatten blur annotations destructively so redacted secrets cannot be recovered from the file. Validate, normalize, and length-limit all untrusted input on the server. Escape rendered content by default, sanitize any intentionally accepted markup, rate-limit public or abuse-prone actions, and use private object storage plus short-lived authorized URLs for sensitive files. Collect the minimum personal data necessary for the named workflow. Document retention and deletion behavior. Add specific protections for the riskier surfaces in this app, such as uploads, redirects, outbound requests, email delivery, OAuth, webhooks, CSV import or export, and real-time connections. ACCEPTANCE SCENARIOS Automate these app-specific scenarios at the most appropriate level: 1. Given screen-recording permission is denied, a capture attempt shows an explanation with a direct link to System Settings instead of failing silently. 2. Given a blurred secret in a saved capture, reopening the file in any editor reveals only flattened pixels with no removable blur layer. 3. Given two captures saved in the same second with the same template, both files get distinct names and both appear in the library. TESTING Add focused unit tests for state transitions, authorization predicates, normalization, date or money calculations, and other risky domain rules. Add integration tests for persistence constraints and each external adapter’s success, timeout, retry, and rejection paths. Add at least one browser-level test for every end-to-end journey above, including one small-screen viewport. Tests must use isolated data and run through a documented single command. OPERATIONS AND FAILURE RECOVERY Add structured server logs with request, job, or event correlation IDs but no secrets or unnecessarily sensitive data. Make failures actionable in both the interface and logs. Background work must expose pending, succeeded, failed, and retrying states where relevant; do not silently swallow errors. Include safe database migration and rollback guidance, seed data, backup and restore notes, external-data cleanup behavior, and a basic health or diagnostic path appropriate to the stack. DELIVERABLES Ship the working application, migrations, representative seed data, tests, .env.example, and a concise README. The README must cover prerequisites, local setup, environment variables, migrations, seed and test commands, deployment, integration setup, backup and restore, security decisions, and known limitations. Seed data should exercise the happy path plus at least one empty, failed, overdue, expired, archived, or permission-restricted state relevant to the product. DEFINITION OF DONE The app is complete when a fresh developer can follow the README, create and migrate the database, run the app, sign in as each relevant role, complete every named journey using real persisted data, refresh without losing state, recover from common failures, and use the core interface on phone and desktop. All acceptance scenarios pass, permission boundaries are covered by tests, and no core screen is left as a placeholder. NON-GOALS Do not build screen video recording, cloud uploads, team libraries, a general image editor, or overlap with dedicated photo editing tools.
You are building a production-ready software product named “Shotdock”, a deliberately focused alternative to CleanShot X. Build a complete, usable vertical slice—not a landing page, static mockup, or disconnected collection of components. WORKING AGREEMENT Before writing implementation code, produce a short technical plan that names the routes or pages, server actions or endpoints, data tables, important state transitions, authorization boundaries, background jobs, and external adapters. Resolve contradictions in favor of the narrow audience and non-goals below. Prefer a small, legible architecture over speculative abstraction, but do not omit persistence, validation, error handling, or tests. PRODUCT BRIEF Primary user: a Mac user who screenshots all day for docs and bug reports. Primary outcome: capture, annotate, and hand off screenshots in seconds with everything stored locally. Product principle: optimize the exact workflow below instead of copying the full breadth of CleanShot X. A first-time user should understand what to do from the interface itself, without a tour or documentation. END-TO-END USER JOURNEYS Implement all of these flows through the real interface and persistent data layer: 1. The user presses a shortcut, drags to select an area, watches the floating thumbnail appear in the corner, and drags it straight into a chat message. 2. The user captures a window, adds an arrow and a text label, blurs an API key, copies the flattened result, and pastes it into a bug report. 3. The user opens the library, filters captures by date, renames one using the filename template, and deletes a stale batch to free space. SCREENS AND INFORMATION ARCHITECTURE Build these as coherent responsive views. Each screen must specify its primary action, secondary actions, visible status, validation feedback, empty state, loading or pending state, success confirmation, and recoverable failure state. 1. Capture overlay: crosshair with pixel dimensions, window highlighting, full-screen option, escape to cancel, and shortcut hints. 2. Floating thumbnail: recent capture preview with drag support, quick copy, annotate, and save actions, and configurable auto-dismiss. 3. Annotation editor: arrow, text, and blur tools with color and size controls, crop, undo, and copy or save with the active naming template. 4. Library: capture grid grouped by date with search, preview, reveal in Finder, naming-template settings, and storage usage. CORE CAPABILITIES 1. area, window, and full-screen capture via macOS APIs 2. annotation tools with arrows, text, and blur for secrets 3. a floating thumbnail for quick drag into other apps 4. a searchable local capture library organized by date 5. copy to clipboard or save with filename templates DETAILED BEHAVIOR AND BUSINESS RULES Treat these as server-enforced product requirements, not interface suggestions: 1. Capture through official macOS screen-capture APIs, request screen-recording permission explicitly, and explain clearly what to enable when permission is missing. 2. Write every capture only to the local library folder; never upload, sync, or transmit image data anywhere in v1. 3. Flatten blur annotations destructively at copy and save time so redacted pixels cannot be recovered from the exported file. 4. Apply the filename template deterministically with date, time, and app-name tokens, and append a counter instead of ever overwriting an existing file. DATA MODEL AND LIFECYCLE Design a small relational schema centered on Capture, Annotation, LibraryEntry, NamingTemplate. Before implementing it, document: 1. Each table’s purpose, primary key, ownership or tenant boundary, timestamps, status fields, and important attributes. 2. Foreign keys, uniqueness constraints, check constraints, indexes needed by the named screens, and transaction boundaries for multi-record changes. 3. The allowed lifecycle or state transitions, who may trigger each transition, which transitions are terminal or reversible, and what audit history must remain immutable. 4. Archive, retention, and deletion behavior, including what happens to dependent records and external files. 5. Idempotency strategy for submissions, jobs, imports, notifications, webhooks, or retries where applicable. Use migrations rather than ad-hoc schema creation. Store time instants consistently and retain named timezone context whenever local schedules or dates matter. Never rely on a counter, disabled button, or client-side check to preserve a business invariant. USERS, AUTHENTICATION, AND PERMISSIONS Implement only the roles required by the stated audience. Make the ownership and visibility model explicit before coding. Enforce authorization in every server-side query and mutation, including search, exports, attachments, live updates, and guessed URLs—not merely by hiding controls. Use secure session defaults, protect state-changing requests, and provide an understandable signed-out, expired-session, and forbidden state. Seed distinct users when multiple roles are required so permissions can be demonstrated and tested. INTERACTION AND VISUAL DIRECTION The product should feel fast, calm, focused, and credible rather than like a generic admin template. Use a clear visual hierarchy, restrained color, readable typography, generous hit targets, and consistent placement for primary actions. Start with server-rendered HTML and progressively enhance only the interactions that benefit from it. The core workflow must remain understandable if enhancement fails. Render with React Server Components by default. Use Server Actions for authenticated form mutations and add Client Components only for interactions that genuinely require browser state, browser APIs, drag-and-drop, or live updates. The core workflow must remain understandable before client-side JavaScript finishes loading. Design mobile layouts intentionally instead of simply stacking desktop panels. Support keyboard navigation, visible focus, semantic landmarks, explicit labels, useful page titles, reduced-motion preferences, and screen-reader announcements for asynchronous results. Never use color alone to communicate state. Destructive actions require clear scope and confirmation; safe repeated actions should be idempotent. TECHNICAL DIRECTION Build this version with Next.js, the App Router, and TypeScript. Use Server Components by default, Server Actions for authenticated mutations, and Route Handlers for public APIs, OAuth callbacks, webhooks, feeds, uploads, and downloads. Use PostgreSQL through Drizzle ORM with versioned migrations and an isolated test database. Access S3-compatible object storage through a server-only adapter, and run slow or retryable work in a real job or workflow system instead of the request lifecycle. Keep domain rules in testable server-side modules instead of route handlers or UI components. Separate persistence, external providers, and background work behind small interfaces without building a framework. Prefer ordinary HTML forms and URLs for durable navigation; use optimistic interaction only when failure can be reconciled clearly. The product brief currently identifies SwiftUI, Swift, macOS as capability context. Preserve any required native, browser-only, edge, storage, real-time, or background-processing capability through a narrow adapter appropriate to the selected framework. If the core workflow genuinely requires native or browser APIs, keep that runtime as the primary execution surface rather than simulating inaccessible capabilities or inventing an unnecessary web surface. Integrate with macOS ScreenCaptureKit and global keyboard shortcuts and system pasteboard. For every integration: - List required environment variables in an .env.example without real secrets. - Add a small adapter with timeouts, normalized errors, and a deterministic local fake or development path. - Verify inbound signatures and deduplicate provider events where supported. - Keep credentials server-side, encrypt long-lived provider tokens at rest, and redact secrets and sensitive payloads from logs. - Define retry, backoff, and idempotency behavior for any side effect that can be repeated. SECURITY AND PRIVACY Keep every capture on the local disk, request screen-recording permission transparently, and flatten blur annotations destructively so redacted secrets cannot be recovered from the file. Validate, normalize, and length-limit all untrusted input on the server. Escape rendered content by default, sanitize any intentionally accepted markup, rate-limit public or abuse-prone actions, and use private object storage plus short-lived authorized URLs for sensitive files. Collect the minimum personal data necessary for the named workflow. Document retention and deletion behavior. Add specific protections for the riskier surfaces in this app, such as uploads, redirects, outbound requests, email delivery, OAuth, webhooks, CSV import or export, and real-time connections. ACCEPTANCE SCENARIOS Automate these app-specific scenarios at the most appropriate level: 1. Given screen-recording permission is denied, a capture attempt shows an explanation with a direct link to System Settings instead of failing silently. 2. Given a blurred secret in a saved capture, reopening the file in any editor reveals only flattened pixels with no removable blur layer. 3. Given two captures saved in the same second with the same template, both files get distinct names and both appear in the library. TESTING Add focused unit tests for state transitions, authorization predicates, normalization, date or money calculations, and other risky domain rules. Add integration tests for persistence constraints and each external adapter’s success, timeout, retry, and rejection paths. Add at least one browser-level test for every end-to-end journey above, including one small-screen viewport. Tests must use isolated data and run through a documented single command. OPERATIONS AND FAILURE RECOVERY Add structured server logs with request, job, or event correlation IDs but no secrets or unnecessarily sensitive data. Make failures actionable in both the interface and logs. Background work must expose pending, succeeded, failed, and retrying states where relevant; do not silently swallow errors. Include safe database migration and rollback guidance, seed data, backup and restore notes, external-data cleanup behavior, and a basic health or diagnostic path appropriate to the stack. DELIVERABLES Ship the working application, migrations, representative seed data, tests, .env.example, and a concise README. The README must cover prerequisites, local setup, environment variables, migrations, seed and test commands, deployment, integration setup, backup and restore, security decisions, and known limitations. Seed data should exercise the happy path plus at least one empty, failed, overdue, expired, archived, or permission-restricted state relevant to the product. DEFINITION OF DONE The app is complete when a fresh developer can follow the README, create and migrate the database, run the app, sign in as each relevant role, complete every named journey using real persisted data, refresh without losing state, recover from common failures, and use the core interface on phone and desktop. All acceptance scenarios pass, permission boundaries are covered by tests, and no core screen is left as a placeholder. NON-GOALS Do not build screen video recording, cloud uploads, team libraries, a general image editor, or overlap with dedicated photo editing tools.
You are building a production-ready software product named “Shotdock”, a deliberately focused alternative to CleanShot X. Build a complete, usable vertical slice—not a landing page, static mockup, or disconnected collection of components. WORKING AGREEMENT Before writing implementation code, produce a short technical plan that names the routes or pages, server actions or endpoints, data tables, important state transitions, authorization boundaries, background jobs, and external adapters. Resolve contradictions in favor of the narrow audience and non-goals below. Prefer a small, legible architecture over speculative abstraction, but do not omit persistence, validation, error handling, or tests. PRODUCT BRIEF Primary user: a Mac user who screenshots all day for docs and bug reports. Primary outcome: capture, annotate, and hand off screenshots in seconds with everything stored locally. Product principle: optimize the exact workflow below instead of copying the full breadth of CleanShot X. A first-time user should understand what to do from the interface itself, without a tour or documentation. END-TO-END USER JOURNEYS Implement all of these flows through the real interface and persistent data layer: 1. The user presses a shortcut, drags to select an area, watches the floating thumbnail appear in the corner, and drags it straight into a chat message. 2. The user captures a window, adds an arrow and a text label, blurs an API key, copies the flattened result, and pastes it into a bug report. 3. The user opens the library, filters captures by date, renames one using the filename template, and deletes a stale batch to free space. SCREENS AND INFORMATION ARCHITECTURE Build these as coherent responsive views. Each screen must specify its primary action, secondary actions, visible status, validation feedback, empty state, loading or pending state, success confirmation, and recoverable failure state. 1. Capture overlay: crosshair with pixel dimensions, window highlighting, full-screen option, escape to cancel, and shortcut hints. 2. Floating thumbnail: recent capture preview with drag support, quick copy, annotate, and save actions, and configurable auto-dismiss. 3. Annotation editor: arrow, text, and blur tools with color and size controls, crop, undo, and copy or save with the active naming template. 4. Library: capture grid grouped by date with search, preview, reveal in Finder, naming-template settings, and storage usage. CORE CAPABILITIES 1. area, window, and full-screen capture via macOS APIs 2. annotation tools with arrows, text, and blur for secrets 3. a floating thumbnail for quick drag into other apps 4. a searchable local capture library organized by date 5. copy to clipboard or save with filename templates DETAILED BEHAVIOR AND BUSINESS RULES Treat these as server-enforced product requirements, not interface suggestions: 1. Capture through official macOS screen-capture APIs, request screen-recording permission explicitly, and explain clearly what to enable when permission is missing. 2. Write every capture only to the local library folder; never upload, sync, or transmit image data anywhere in v1. 3. Flatten blur annotations destructively at copy and save time so redacted pixels cannot be recovered from the exported file. 4. Apply the filename template deterministically with date, time, and app-name tokens, and append a counter instead of ever overwriting an existing file. DATA MODEL AND LIFECYCLE Design a small relational schema centered on Capture, Annotation, LibraryEntry, NamingTemplate. Before implementing it, document: 1. Each table’s purpose, primary key, ownership or tenant boundary, timestamps, status fields, and important attributes. 2. Foreign keys, uniqueness constraints, check constraints, indexes needed by the named screens, and transaction boundaries for multi-record changes. 3. The allowed lifecycle or state transitions, who may trigger each transition, which transitions are terminal or reversible, and what audit history must remain immutable. 4. Archive, retention, and deletion behavior, including what happens to dependent records and external files. 5. Idempotency strategy for submissions, jobs, imports, notifications, webhooks, or retries where applicable. Use migrations rather than ad-hoc schema creation. Store time instants consistently and retain named timezone context whenever local schedules or dates matter. Never rely on a counter, disabled button, or client-side check to preserve a business invariant. USERS, AUTHENTICATION, AND PERMISSIONS Implement only the roles required by the stated audience. Make the ownership and visibility model explicit before coding. Enforce authorization in every server-side query and mutation, including search, exports, attachments, live updates, and guessed URLs—not merely by hiding controls. Use secure session defaults, protect state-changing requests, and provide an understandable signed-out, expired-session, and forbidden state. Seed distinct users when multiple roles are required so permissions can be demonstrated and tested. INTERACTION AND VISUAL DIRECTION The product should feel fast, calm, focused, and credible rather than like a generic admin template. Use a clear visual hierarchy, restrained color, readable typography, generous hit targets, and consistent placement for primary actions. Start with server-rendered HTML and progressively enhance only the interactions that benefit from it. The core workflow must remain understandable if enhancement fails. Start with server-rendered Blade views and ordinary forms. Use Livewire for focused server-driven interactions and Alpine.js only for small local interface state. The core workflow must remain understandable without relying on a client-side application shell. Design mobile layouts intentionally instead of simply stacking desktop panels. Support keyboard navigation, visible focus, semantic landmarks, explicit labels, useful page titles, reduced-motion preferences, and screen-reader announcements for asynchronous results. Never use color alone to communicate state. Destructive actions require clear scope and confirmation; safe repeated actions should be idempotent. TECHNICAL DIRECTION Build this version with Laravel, PHP, Blade, Livewire, and Alpine.js. Use controllers and Blade forms for durable navigation, Livewire for focused interactions, Form Requests for validation, Policies and Gates for authorization, and small application actions or services for domain transitions. Use Eloquent with migrations, database constraints, and transactions; Laravel Storage for private S3-compatible files; queued Jobs for retryable work; the Scheduler for recurring work; and Notifications or Mail for email. Keep domain rules in testable server-side modules instead of route handlers or UI components. Separate persistence, external providers, and background work behind small interfaces without building a framework. Prefer ordinary HTML forms and URLs for durable navigation; use optimistic interaction only when failure can be reconciled clearly. The product brief currently identifies SwiftUI, Swift, macOS as capability context. Preserve any required native, browser-only, edge, storage, real-time, or background-processing capability through a narrow adapter appropriate to the selected framework. If the core workflow genuinely requires native or browser APIs, keep that runtime as the primary execution surface rather than simulating inaccessible capabilities or inventing an unnecessary web surface. Integrate with macOS ScreenCaptureKit and global keyboard shortcuts and system pasteboard. For every integration: - List required environment variables in an .env.example without real secrets. - Add a small adapter with timeouts, normalized errors, and a deterministic local fake or development path. - Verify inbound signatures and deduplicate provider events where supported. - Keep credentials server-side, encrypt long-lived provider tokens at rest, and redact secrets and sensitive payloads from logs. - Define retry, backoff, and idempotency behavior for any side effect that can be repeated. SECURITY AND PRIVACY Keep every capture on the local disk, request screen-recording permission transparently, and flatten blur annotations destructively so redacted secrets cannot be recovered from the file. Validate, normalize, and length-limit all untrusted input on the server. Escape rendered content by default, sanitize any intentionally accepted markup, rate-limit public or abuse-prone actions, and use private object storage plus short-lived authorized URLs for sensitive files. Collect the minimum personal data necessary for the named workflow. Document retention and deletion behavior. Add specific protections for the riskier surfaces in this app, such as uploads, redirects, outbound requests, email delivery, OAuth, webhooks, CSV import or export, and real-time connections. ACCEPTANCE SCENARIOS Automate these app-specific scenarios at the most appropriate level: 1. Given screen-recording permission is denied, a capture attempt shows an explanation with a direct link to System Settings instead of failing silently. 2. Given a blurred secret in a saved capture, reopening the file in any editor reveals only flattened pixels with no removable blur layer. 3. Given two captures saved in the same second with the same template, both files get distinct names and both appear in the library. TESTING Add focused unit tests for state transitions, authorization predicates, normalization, date or money calculations, and other risky domain rules. Add integration tests for persistence constraints and each external adapter’s success, timeout, retry, and rejection paths. Add at least one browser-level test for every end-to-end journey above, including one small-screen viewport. Tests must use isolated data and run through a documented single command. OPERATIONS AND FAILURE RECOVERY Add structured server logs with request, job, or event correlation IDs but no secrets or unnecessarily sensitive data. Make failures actionable in both the interface and logs. Background work must expose pending, succeeded, failed, and retrying states where relevant; do not silently swallow errors. Include safe database migration and rollback guidance, seed data, backup and restore notes, external-data cleanup behavior, and a basic health or diagnostic path appropriate to the stack. DELIVERABLES Ship the working application, migrations, representative seed data, tests, .env.example, and a concise README. The README must cover prerequisites, local setup, environment variables, migrations, seed and test commands, deployment, integration setup, backup and restore, security decisions, and known limitations. Seed data should exercise the happy path plus at least one empty, failed, overdue, expired, archived, or permission-restricted state relevant to the product. DEFINITION OF DONE The app is complete when a fresh developer can follow the README, create and migrate the database, run the app, sign in as each relevant role, complete every named journey using real persisted data, refresh without losing state, recover from common failures, and use the core interface on phone and desktop. All acceptance scenarios pass, permission boundaries are covered by tests, and no core screen is left as a placeholder. NON-GOALS Do not build screen video recording, cloud uploads, team libraries, a general image editor, or overlap with dedicated photo editing tools.
You are building a production-ready software product named “Shotdock”, a deliberately focused alternative to CleanShot X. Build a complete, usable vertical slice—not a landing page, static mockup, or disconnected collection of components. WORKING AGREEMENT Before writing implementation code, produce a short technical plan that names the routes or pages, server actions or endpoints, data tables, important state transitions, authorization boundaries, background jobs, and external adapters. Resolve contradictions in favor of the narrow audience and non-goals below. Prefer a small, legible architecture over speculative abstraction, but do not omit persistence, validation, error handling, or tests. PRODUCT BRIEF Primary user: a Mac user who screenshots all day for docs and bug reports. Primary outcome: capture, annotate, and hand off screenshots in seconds with everything stored locally. Product principle: optimize the exact workflow below instead of copying the full breadth of CleanShot X. A first-time user should understand what to do from the interface itself, without a tour or documentation. END-TO-END USER JOURNEYS Implement all of these flows through the real interface and persistent data layer: 1. The user presses a shortcut, drags to select an area, watches the floating thumbnail appear in the corner, and drags it straight into a chat message. 2. The user captures a window, adds an arrow and a text label, blurs an API key, copies the flattened result, and pastes it into a bug report. 3. The user opens the library, filters captures by date, renames one using the filename template, and deletes a stale batch to free space. SCREENS AND INFORMATION ARCHITECTURE Build these as coherent responsive views. Each screen must specify its primary action, secondary actions, visible status, validation feedback, empty state, loading or pending state, success confirmation, and recoverable failure state. 1. Capture overlay: crosshair with pixel dimensions, window highlighting, full-screen option, escape to cancel, and shortcut hints. 2. Floating thumbnail: recent capture preview with drag support, quick copy, annotate, and save actions, and configurable auto-dismiss. 3. Annotation editor: arrow, text, and blur tools with color and size controls, crop, undo, and copy or save with the active naming template. 4. Library: capture grid grouped by date with search, preview, reveal in Finder, naming-template settings, and storage usage. CORE CAPABILITIES 1. area, window, and full-screen capture via macOS APIs 2. annotation tools with arrows, text, and blur for secrets 3. a floating thumbnail for quick drag into other apps 4. a searchable local capture library organized by date 5. copy to clipboard or save with filename templates DETAILED BEHAVIOR AND BUSINESS RULES Treat these as server-enforced product requirements, not interface suggestions: 1. Capture through official macOS screen-capture APIs, request screen-recording permission explicitly, and explain clearly what to enable when permission is missing. 2. Write every capture only to the local library folder; never upload, sync, or transmit image data anywhere in v1. 3. Flatten blur annotations destructively at copy and save time so redacted pixels cannot be recovered from the exported file. 4. Apply the filename template deterministically with date, time, and app-name tokens, and append a counter instead of ever overwriting an existing file. DATA MODEL AND LIFECYCLE Design a small relational schema centered on Capture, Annotation, LibraryEntry, NamingTemplate. Before implementing it, document: 1. Each table’s purpose, primary key, ownership or tenant boundary, timestamps, status fields, and important attributes. 2. Foreign keys, uniqueness constraints, check constraints, indexes needed by the named screens, and transaction boundaries for multi-record changes. 3. The allowed lifecycle or state transitions, who may trigger each transition, which transitions are terminal or reversible, and what audit history must remain immutable. 4. Archive, retention, and deletion behavior, including what happens to dependent records and external files. 5. Idempotency strategy for submissions, jobs, imports, notifications, webhooks, or retries where applicable. Use migrations rather than ad-hoc schema creation. Store time instants consistently and retain named timezone context whenever local schedules or dates matter. Never rely on a counter, disabled button, or client-side check to preserve a business invariant. USERS, AUTHENTICATION, AND PERMISSIONS Implement only the roles required by the stated audience. Make the ownership and visibility model explicit before coding. Enforce authorization in every server-side query and mutation, including search, exports, attachments, live updates, and guessed URLs—not merely by hiding controls. Use secure session defaults, protect state-changing requests, and provide an understandable signed-out, expired-session, and forbidden state. Seed distinct users when multiple roles are required so permissions can be demonstrated and tested. INTERACTION AND VISUAL DIRECTION The product should feel fast, calm, focused, and credible rather than like a generic admin template. Use a clear visual hierarchy, restrained color, readable typography, generous hit targets, and consistent placement for primary actions. Start with server-rendered HTML and progressively enhance only the interactions that benefit from it. The core workflow must remain understandable if enhancement fails. Start with server-rendered Rails views and ordinary forms. Use Turbo for navigation, submissions, and server-driven updates, then Stimulus only for small browser-side behavior. Do not turn the product into a client-side SPA, and keep the core workflow usable when enhancement fails. Design mobile layouts intentionally instead of simply stacking desktop panels. Support keyboard navigation, visible focus, semantic landmarks, explicit labels, useful page titles, reduced-motion preferences, and screen-reader announcements for asynchronous results. Never use color alone to communicate state. Destructive actions require clear scope and confirmation; safe repeated actions should be idempotent. TECHNICAL DIRECTION Build this version with Ruby on Rails and Hotwire: Turbo for navigation, form submissions, and server-driven updates, and Stimulus for small browser-side behavior. Use RESTful controllers with strong parameters and explicit authorization, with domain transitions in testable models or small application services. Use Active Record migrations plus database-level constraints and transactions; Active Storage with an S3-compatible service for private files; Active Job with a durable queue backend for retryable work; Action Mailer for email; and Action Cable only when live updates are required. Keep domain rules in testable server-side modules instead of route handlers or UI components. Separate persistence, external providers, and background work behind small interfaces without building a framework. Prefer ordinary HTML forms and URLs for durable navigation; use optimistic interaction only when failure can be reconciled clearly. The product brief currently identifies SwiftUI, Swift, macOS as capability context. Preserve any required native, browser-only, edge, storage, real-time, or background-processing capability through a narrow adapter appropriate to the selected framework. If the core workflow genuinely requires native or browser APIs, keep that runtime as the primary execution surface rather than simulating inaccessible capabilities or inventing an unnecessary web surface. Integrate with macOS ScreenCaptureKit and global keyboard shortcuts and system pasteboard. For every integration: - List required environment variables in an .env.example without real secrets. - Add a small adapter with timeouts, normalized errors, and a deterministic local fake or development path. - Verify inbound signatures and deduplicate provider events where supported. - Keep credentials server-side, encrypt long-lived provider tokens at rest, and redact secrets and sensitive payloads from logs. - Define retry, backoff, and idempotency behavior for any side effect that can be repeated. SECURITY AND PRIVACY Keep every capture on the local disk, request screen-recording permission transparently, and flatten blur annotations destructively so redacted secrets cannot be recovered from the file. Validate, normalize, and length-limit all untrusted input on the server. Escape rendered content by default, sanitize any intentionally accepted markup, rate-limit public or abuse-prone actions, and use private object storage plus short-lived authorized URLs for sensitive files. Collect the minimum personal data necessary for the named workflow. Document retention and deletion behavior. Add specific protections for the riskier surfaces in this app, such as uploads, redirects, outbound requests, email delivery, OAuth, webhooks, CSV import or export, and real-time connections. ACCEPTANCE SCENARIOS Automate these app-specific scenarios at the most appropriate level: 1. Given screen-recording permission is denied, a capture attempt shows an explanation with a direct link to System Settings instead of failing silently. 2. Given a blurred secret in a saved capture, reopening the file in any editor reveals only flattened pixels with no removable blur layer. 3. Given two captures saved in the same second with the same template, both files get distinct names and both appear in the library. TESTING Add focused unit tests for state transitions, authorization predicates, normalization, date or money calculations, and other risky domain rules. Add integration tests for persistence constraints and each external adapter’s success, timeout, retry, and rejection paths. Add at least one browser-level test for every end-to-end journey above, including one small-screen viewport. Tests must use isolated data and run through a documented single command. OPERATIONS AND FAILURE RECOVERY Add structured server logs with request, job, or event correlation IDs but no secrets or unnecessarily sensitive data. Make failures actionable in both the interface and logs. Background work must expose pending, succeeded, failed, and retrying states where relevant; do not silently swallow errors. Include safe database migration and rollback guidance, seed data, backup and restore notes, external-data cleanup behavior, and a basic health or diagnostic path appropriate to the stack. DELIVERABLES Ship the working application, migrations, representative seed data, tests, .env.example, and a concise README. The README must cover prerequisites, local setup, environment variables, migrations, seed and test commands, deployment, integration setup, backup and restore, security decisions, and known limitations. Seed data should exercise the happy path plus at least one empty, failed, overdue, expired, archived, or permission-restricted state relevant to the product. DEFINITION OF DONE The app is complete when a fresh developer can follow the README, create and migrate the database, run the app, sign in as each relevant role, complete every named journey using real persisted data, refresh without losing state, recover from common failures, and use the core interface on phone and desktop. All acceptance scenarios pass, permission boundaries are covered by tests, and no core screen is left as a placeholder. NON-GOALS Do not build screen video recording, cloud uploads, team libraries, a general image editor, or overlap with dedicated photo editing tools.
Build just one piece
Not ready to replace all of CleanShot X? Fine. These are the peculiar sub-problems hiding inside it — the parts that are actually interesting to build. Each one is a standalone prompt, scoped to an evening, no strings attached to the full build.
The blur that takes its secrets to the graveFlattened at export, unrecoverable by design. No blur layer to peel off.
Build destructive redaction for a screenshot annotation tool. Blur exists to hide API keys and customer names, so treat it as a security feature, not a visual effect. During editing, annotations live as a non-destructive overlay stack, movable, resizable, undoable. At copy or save time, flatten everything: composite the redactions into the bitmap so the exported file contains only final pixels, no layers, no metadata trail, nothing any editor can peel back to reveal the original. Choose redaction that resists recovery: heavy pixelation or a solid fill over the region beats a light gaussian blur, which modern deblurring can partially reverse on text; if you offer gaussian for aesthetics, enforce a floor strength for anything labeled as redaction. Strip EXIF and embedded thumbnails from the export, since a stale preview of the unredacted image is a classic leak. Inside the editor, undo keeps working on the overlay stack right up until export. Done when: a redacted export reopened in any editor shows only flattened pixels, no export carries recoverable previews or metadata, and pre-export undo still restores the original.
The filename template that never overwrites a twinDate, time, and app-name tokens, plus a counter for the same-second collision.
Build a filename template engine for a screenshot tool.
Users define patterns like Screenshot {date} at {time} from {app}, and every capture renders the template deterministically: date and time tokens formatted from capture (not save) time, an app-name token from the frontmost application, sanitized against characters the filesystem rejects, slashes, colons, and friends, with a length cap so a verbose app name can't produce an unwritable path.
Collisions are the interesting part: burst captures land in the same second, producing identical rendered names. Never overwrite. Append an incrementing counter, name 2, name 3, found by checking the destination directory, and mind the race where two saves resolve the same counter simultaneously, create the file exclusively and retry with the next number on failure. Unknown tokens in a template pass through literally with a validation warning in settings, where a live preview shows what the current template yields right now.
Done when: two captures in the same second get distinct names and both survive, hostile app names produce legal filenames, and the settings preview matches actual output exactly.The thumbnail you drag straight into SlackA floating corner preview whose drag payload is a real file.
Build the floating post-capture thumbnail for a screenshot tool. After every capture, a small preview slides into a screen corner, floating above all windows, on every Space, stealing focus from nothing, the user's typing must continue uninterrupted. Its whole point is drag-out: dragging the thumbnail into Slack, Mail, or Finder delivers the actual capture file, so the drag payload must carry a file URL (with an image representation for apps that prefer pasteboard data), meaning the capture is already written to the library before the thumbnail appears. Layer the interactions carefully: a drag beginning past a small movement threshold, a click opening the annotation editor, a hover revealing quick actions (copy, save, dismiss) and pausing the auto-dismiss timer, which otherwise slides the thumbnail away after a configurable delay. Successive captures stack thumbnails without overlap. Dismissal is never deletion, the capture stays in the library regardless. Done when: drag-out lands a real file in three different target apps, the thumbnail never steals keyboard focus, and hover reliably defers auto-dismiss.
The crosshair that works across three mismatched monitorsPixel-accurate area selection spanning displays with different scale factors.
Build the area-selection overlay for a screen capture tool. On the capture shortcut, freeze the moment: cover every display with an overlay showing a dimmed snapshot of the current screen, and let the user drag a crosshair to select a region, with live pixel dimensions beside the cursor and the selected area shown undimmed. Escape cancels from any state without capturing. Multi-display geometry is the hard part: displays have different resolutions, scale factors (Retina versus standard), and arbitrary arrangement offsets, so a selection near an edge, or spanning two displays, must map from global screen coordinates to each display's local pixels correctly, and the dimensions readout must count physical pixels, where a 100-point drag on a 2x display is 200 pixels. Snap to window bounds when hovering a window (highlight it, click captures it whole), and hold a modifier to constrain the drag to a square. Done when: captured pixels match the selection exactly on mixed-DPI setups, window snapping highlights and captures accurately, and escape always exits cleanly.
Frequently asked questions
How long does it take to build your own CleanShot X?
A basic version — capture, annotate, floating thumbnail, library — takes about 10 hours. Roughly 3 days gets you a solid v1 with scrolling capture, ocr text copy, self-timer, backgrounds. Matching everything CleanShot X really does (screen recording, gif export, cloud sharing) is closer to 3 months+, which is exactly why you should scope down instead.
How much does CleanShot X cost if I keep subscribing?
CleanShot X runs $8–$10 per month on public paid plans, which is $96–$120 per year. A focused self-built replacement costs your build time plus close-to-zero hosting.
What stack should I use to build a CleanShot X alternative?
The build prompt on this page ships in four flavors: the AHA stack (Astro, HTMX, Alpine.js), Next.js, Laravel, and Ruby on Rails. The capability context for this product is SwiftUI, Swift, macOS. Pick the stack you already know — the scope matters more than the framework.
What features does a minimal CleanShot X replacement need?
A useful v1 needs: area, window, and full-screen capture via macOS APIs; annotation tools with arrows, text, and blur for secrets; a floating thumbnail for quick drag into other apps; a searchable local capture library organized by date; copy to clipboard or save with filename templates. Everything else is scope creep until you personally miss it.
What should I deliberately not build?
Do not build screen video recording, cloud uploads, team libraries, a general image editor, or overlap with dedicated photo editing tools.
Does this build also replace Shottr and Monosnap?
Yes. CleanShot X, Shottr and Monosnap all solve the same core job — capture, annotate, and hand off screenshots in seconds with everything stored locally. The scoped v1 on this page covers what most people use any of them for, so one focused build replaces whichever you currently pay for.