Design · Tonight build
Build your own Shots.so
Your screenshot, but dressed for the timeline. Shots.so charges $10–$20 per month — that’s $120–$240 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 anyone posting product screenshots to social media. The goal: turn a raw screenshot into a polished social image in seconds, entirely in the browser. 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 Xnapper and Pika — 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 Shots.so you actually use.
| Estimate | What you get |
|---|---|
| 2 hours | gradient background, padding, device frame, export |
| 6 hours | style presets, batch export, annotations, social sizes |
| 2 weeks+ | template gallery, 3d mockups, video exports, accounts — the part you should probably skip |
What a minimal Shots.so alternative needs
- drag-and-drop or paste-from-clipboard screenshot input
- gradient and solid backgrounds with padding, corner radius, and shadow controls
- browser and device frames with light and dark variants
- output size presets for common social formats
- PNG export and copy-to-clipboard at exact pixel dimensions
Data model
local Composition, StylePreset, and ExportJob objects only
Integrations
browser Canvas and Clipboard APIs
Capability context
Astro, Alpine, Browser API
The guardrail
Render and export entirely in the browser so screenshots never leave the device.
Deliberate non-goals
Do not add accounts, cloud storage, a template marketplace, video mockups, or team libraries.
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 “Shinyshot”, a deliberately focused alternative to Shots.so. 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: anyone posting product screenshots to social media. Primary outcome: turn a raw screenshot into a polished social image in seconds, entirely in the browser. Product principle: optimize the exact workflow below instead of copying the full breadth of Shots.so. 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 drops a screenshot onto the canvas, picks a gradient background, adjusts padding and corner radius, and exports a social-ready PNG. 2. The user wraps the screenshot in a browser frame, tunes the shadow, switches between two social size presets, and copies the result to the clipboard. 3. The user saves the current look as a preset and applies it to the next screenshot in two clicks for a consistent feed. 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. Canvas: the framed screenshot centered on its background with a drag-and-drop target, zoom controls, and live rendering of every adjustment. 2. Style panel: gradient and solid background swatches, padding, corner radius, shadow, and frame pickers with instant preview. 3. Export bar: output size presets for common social formats, scale selector, PNG download, and copy-to-clipboard action. 4. Presets: saved style combinations with thumbnails plus apply, rename, and delete controls, stored locally in the browser. CORE CAPABILITIES 1. drag-and-drop or paste-from-clipboard screenshot input 2. gradient and solid backgrounds with padding, corner radius, and shadow controls 3. browser and device frames with light and dark variants 4. output size presets for common social formats 5. PNG export and copy-to-clipboard at exact pixel dimensions DETAILED BEHAVIOR AND BUSINESS RULES Treat these as server-enforced product requirements, not interface suggestions: 1. Render everything on a client-side canvas; the screenshot must never be uploaded to any server. 2. Accept PNG, JPEG, and WebP input, cap input dimensions to keep rendering responsive, and reject non-image files with a clear message. 3. Export at the exact preset pixel dimensions with device-pixel-ratio-aware scaling so text inside the screenshot stays crisp. 4. Persist presets and last-used settings in localStorage only, with a visible reset-to-defaults control. DATA MODEL AND LIFECYCLE Design a small relational schema centered on local Composition, StylePreset, and ExportJob objects only. 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 Astro, Alpine, Browser API 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 browser Canvas and Clipboard APIs. 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 Render and export entirely in the browser so screenshots never leave the device. 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 a dropped 4K screenshot, the canvas renders within a second and every slider updates the preview without visible lag. 2. Given an export at a 1600 by 900 preset, the downloaded file has exactly those dimensions with the chosen background and padding. 3. Given a non-image file dropped on the canvas, the app shows a friendly error and the current composition is untouched. 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 add accounts, cloud storage, a template marketplace, video mockups, or team libraries.
You are building a production-ready software product named “Shinyshot”, a deliberately focused alternative to Shots.so. 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: anyone posting product screenshots to social media. Primary outcome: turn a raw screenshot into a polished social image in seconds, entirely in the browser. Product principle: optimize the exact workflow below instead of copying the full breadth of Shots.so. 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 drops a screenshot onto the canvas, picks a gradient background, adjusts padding and corner radius, and exports a social-ready PNG. 2. The user wraps the screenshot in a browser frame, tunes the shadow, switches between two social size presets, and copies the result to the clipboard. 3. The user saves the current look as a preset and applies it to the next screenshot in two clicks for a consistent feed. 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. Canvas: the framed screenshot centered on its background with a drag-and-drop target, zoom controls, and live rendering of every adjustment. 2. Style panel: gradient and solid background swatches, padding, corner radius, shadow, and frame pickers with instant preview. 3. Export bar: output size presets for common social formats, scale selector, PNG download, and copy-to-clipboard action. 4. Presets: saved style combinations with thumbnails plus apply, rename, and delete controls, stored locally in the browser. CORE CAPABILITIES 1. drag-and-drop or paste-from-clipboard screenshot input 2. gradient and solid backgrounds with padding, corner radius, and shadow controls 3. browser and device frames with light and dark variants 4. output size presets for common social formats 5. PNG export and copy-to-clipboard at exact pixel dimensions DETAILED BEHAVIOR AND BUSINESS RULES Treat these as server-enforced product requirements, not interface suggestions: 1. Render everything on a client-side canvas; the screenshot must never be uploaded to any server. 2. Accept PNG, JPEG, and WebP input, cap input dimensions to keep rendering responsive, and reject non-image files with a clear message. 3. Export at the exact preset pixel dimensions with device-pixel-ratio-aware scaling so text inside the screenshot stays crisp. 4. Persist presets and last-used settings in localStorage only, with a visible reset-to-defaults control. DATA MODEL AND LIFECYCLE Design a small relational schema centered on local Composition, StylePreset, and ExportJob objects only. 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 Astro, Alpine, Browser API 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 browser Canvas and Clipboard APIs. 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 Render and export entirely in the browser so screenshots never leave the device. 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 a dropped 4K screenshot, the canvas renders within a second and every slider updates the preview without visible lag. 2. Given an export at a 1600 by 900 preset, the downloaded file has exactly those dimensions with the chosen background and padding. 3. Given a non-image file dropped on the canvas, the app shows a friendly error and the current composition is untouched. 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 add accounts, cloud storage, a template marketplace, video mockups, or team libraries.
You are building a production-ready software product named “Shinyshot”, a deliberately focused alternative to Shots.so. 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: anyone posting product screenshots to social media. Primary outcome: turn a raw screenshot into a polished social image in seconds, entirely in the browser. Product principle: optimize the exact workflow below instead of copying the full breadth of Shots.so. 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 drops a screenshot onto the canvas, picks a gradient background, adjusts padding and corner radius, and exports a social-ready PNG. 2. The user wraps the screenshot in a browser frame, tunes the shadow, switches between two social size presets, and copies the result to the clipboard. 3. The user saves the current look as a preset and applies it to the next screenshot in two clicks for a consistent feed. 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. Canvas: the framed screenshot centered on its background with a drag-and-drop target, zoom controls, and live rendering of every adjustment. 2. Style panel: gradient and solid background swatches, padding, corner radius, shadow, and frame pickers with instant preview. 3. Export bar: output size presets for common social formats, scale selector, PNG download, and copy-to-clipboard action. 4. Presets: saved style combinations with thumbnails plus apply, rename, and delete controls, stored locally in the browser. CORE CAPABILITIES 1. drag-and-drop or paste-from-clipboard screenshot input 2. gradient and solid backgrounds with padding, corner radius, and shadow controls 3. browser and device frames with light and dark variants 4. output size presets for common social formats 5. PNG export and copy-to-clipboard at exact pixel dimensions DETAILED BEHAVIOR AND BUSINESS RULES Treat these as server-enforced product requirements, not interface suggestions: 1. Render everything on a client-side canvas; the screenshot must never be uploaded to any server. 2. Accept PNG, JPEG, and WebP input, cap input dimensions to keep rendering responsive, and reject non-image files with a clear message. 3. Export at the exact preset pixel dimensions with device-pixel-ratio-aware scaling so text inside the screenshot stays crisp. 4. Persist presets and last-used settings in localStorage only, with a visible reset-to-defaults control. DATA MODEL AND LIFECYCLE Design a small relational schema centered on local Composition, StylePreset, and ExportJob objects only. 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 Astro, Alpine, Browser API 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 browser Canvas and Clipboard APIs. 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 Render and export entirely in the browser so screenshots never leave the device. 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 a dropped 4K screenshot, the canvas renders within a second and every slider updates the preview without visible lag. 2. Given an export at a 1600 by 900 preset, the downloaded file has exactly those dimensions with the chosen background and padding. 3. Given a non-image file dropped on the canvas, the app shows a friendly error and the current composition is untouched. 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 add accounts, cloud storage, a template marketplace, video mockups, or team libraries.
You are building a production-ready software product named “Shinyshot”, a deliberately focused alternative to Shots.so. 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: anyone posting product screenshots to social media. Primary outcome: turn a raw screenshot into a polished social image in seconds, entirely in the browser. Product principle: optimize the exact workflow below instead of copying the full breadth of Shots.so. 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 drops a screenshot onto the canvas, picks a gradient background, adjusts padding and corner radius, and exports a social-ready PNG. 2. The user wraps the screenshot in a browser frame, tunes the shadow, switches between two social size presets, and copies the result to the clipboard. 3. The user saves the current look as a preset and applies it to the next screenshot in two clicks for a consistent feed. 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. Canvas: the framed screenshot centered on its background with a drag-and-drop target, zoom controls, and live rendering of every adjustment. 2. Style panel: gradient and solid background swatches, padding, corner radius, shadow, and frame pickers with instant preview. 3. Export bar: output size presets for common social formats, scale selector, PNG download, and copy-to-clipboard action. 4. Presets: saved style combinations with thumbnails plus apply, rename, and delete controls, stored locally in the browser. CORE CAPABILITIES 1. drag-and-drop or paste-from-clipboard screenshot input 2. gradient and solid backgrounds with padding, corner radius, and shadow controls 3. browser and device frames with light and dark variants 4. output size presets for common social formats 5. PNG export and copy-to-clipboard at exact pixel dimensions DETAILED BEHAVIOR AND BUSINESS RULES Treat these as server-enforced product requirements, not interface suggestions: 1. Render everything on a client-side canvas; the screenshot must never be uploaded to any server. 2. Accept PNG, JPEG, and WebP input, cap input dimensions to keep rendering responsive, and reject non-image files with a clear message. 3. Export at the exact preset pixel dimensions with device-pixel-ratio-aware scaling so text inside the screenshot stays crisp. 4. Persist presets and last-used settings in localStorage only, with a visible reset-to-defaults control. DATA MODEL AND LIFECYCLE Design a small relational schema centered on local Composition, StylePreset, and ExportJob objects only. 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 Astro, Alpine, Browser API 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 browser Canvas and Clipboard APIs. 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 Render and export entirely in the browser so screenshots never leave the device. 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 a dropped 4K screenshot, the canvas renders within a second and every slider updates the preview without visible lag. 2. Given an export at a 1600 by 900 preset, the downloaded file has exactly those dimensions with the chosen background and padding. 3. Given a non-image file dropped on the canvas, the app shows a friendly error and the current composition is untouched. 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 add accounts, cloud storage, a template marketplace, video mockups, or team libraries.
Build just one piece
Not ready to replace all of Shots.so? 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.
Export at exactly 1600 by 900The preview is decoration. The export is a contract.
Build the export pipeline for a browser screenshot-styling tool: whatever the on-screen preview looks like, the exported PNG must measure exactly the preset's pixel dimensions. Never export the preview canvas, it is sized for the viewport and scaled by device pixel ratio, so its bitmap is almost never the advertised size. Instead, on export, create an offscreen canvas at exactly the preset dimensions and re-render the full composition, background gradient, padding, corner radius, shadow, frame, screenshot, with every measurement computed for the target size rather than scaled up from preview coordinates, so text inside the screenshot stays crisp instead of arriving pre-blurred by an upscale. Get the details right: corner-radius clipping antialiases cleanly, shadows render fully inside the bounds instead of clipping at edges, and the screenshot scales with high-quality resampling. Offer PNG download and copy-to-clipboard from a blob, with a fallback message where the clipboard API refuses images. Done when: an export at a 1600 by 900 preset yields a file measuring exactly 1600 by 900 regardless of window size or display density, side-by-side inspection shows the export sharper than or equal to the preview, and clipboard copy pastes correctly into a chat app.
The layout solver behind the pretty paddingOne screenshot, any aspect ratio, always composed like you meant it.
Build the composition layout engine for a screenshot beautifier: a screenshot of arbitrary dimensions must sit correctly inside any output preset, square, wide, tall, with user-controlled padding, corner radius, shadow, and an optional browser frame. The core is a fitting computation: given output dimensions and a padding percentage, scale the screenshot to the largest size that fits the padded content box while preserving aspect ratio, centered, and never upscale a small screenshot into mush, cap at natural size and let the background own the extra room. Layer order matters: background, then shadow, then the frame, then the screenshot clipped to the corner radius, with the radius applied to the frame's outer edge when a frame is present so the screenshot's own corners stay square inside it. The frame's header bar adds height that the fit must account for, otherwise tall screenshots overflow the box. Recompute the entire layout live on every slider change and every preset switch. Done when: a tall phone screenshot and a wide desktop screenshot both compose sensibly in a square preset, no input ever renders upscaled, and toggling the frame on never pushes content outside the padded bounds.
Paste, drop, or rejectCtrl-V straight from the screenshot key is the whole product.
Build the image intake for a screenshot-styling tool, where the fastest path, screenshot key then paste, must feel instant and the wrong input must fail kindly. Handle three entry routes: paste from clipboard (listen for paste events and pull image data from clipboard items, which is how most screenshots arrive), drag-and-drop onto the canvas with visible drop-target feedback during dragover, and a plain file picker as fallback. Validate by decoding, not by trusting extensions or MIME strings: accept PNG, JPEG, and WebP that actually decode into an image, and reject everything else, a PDF, a text file, a corrupt image, with a friendly inline message while leaving the current composition completely untouched, since destroying someone's styled work with a bad drop is unforgivable. Cap input dimensions and downscale oversized images with a notice so a 6K capture doesn't wreck rendering. A new valid image replaces the screenshot but preserves the current style settings, because reusing a look across shots is the workflow. Done when: a clipboard paste lands on the canvas in under a second, a dropped PDF produces a message and zero change to the existing composition, and an oversized image arrives downscaled with its notice shown.
Style presets that live in localStorageSave the look, apply it in two clicks, survive the schema change.
Build local style presets for a screenshot-styling tool: the user perfects a look, background, padding, corner radius, shadow, frame choice, saves it with a name, and applies it to the next screenshot in two clicks. Persist presets in localStorage only, no accounts, no server. Store each as a versioned settings object plus a small thumbnail rendered from the current composition at save time, generated as a compact data URL and capped in size, because localStorage quota is finite and thumbnails are the first thing to blow it. Version the schema explicitly: when a later release adds a new setting, old presets must load with sensible defaults for the missing field rather than crashing or silently resetting, so write a small migration step that runs on read. Guard every write against quota errors and corrupt JSON on read, falling back gracefully instead of white-screening. Applying a preset changes style settings but never touches the loaded screenshot. Include rename, delete with confirmation, an update-in-place action, and a reset-to-defaults control, plus persistence of last-used settings across sessions. Done when: a saved preset applies its exact look to a different screenshot, presets from a simulated older schema version load with correct defaults, and corrupt localStorage data degrades to defaults instead of breaking the app.
Frequently asked questions
How long does it take to build your own Shots.so?
A basic version — gradient background, padding, device frame, export — takes about 2 hours. Roughly 6 hours gets you a solid v1 with style presets, batch export, annotations, social sizes. Matching everything Shots.so really does (template gallery, 3d mockups, video exports, accounts) is closer to 2 weeks+, which is exactly why you should scope down instead.
How much does Shots.so cost if I keep subscribing?
Shots.so runs $10–$20 per month on public paid plans, which is $120–$240 per year. A focused self-built replacement costs your build time plus close-to-zero hosting.
What stack should I use to build a Shots.so 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 Astro, Alpine, Browser API. Pick the stack you already know — the scope matters more than the framework.
What features does a minimal Shots.so replacement need?
A useful v1 needs: drag-and-drop or paste-from-clipboard screenshot input; gradient and solid backgrounds with padding, corner radius, and shadow controls; browser and device frames with light and dark variants; output size presets for common social formats; PNG export and copy-to-clipboard at exact pixel dimensions. Everything else is scope creep until you personally miss it.
What should I deliberately not build?
Do not add accounts, cloud storage, a template marketplace, video mockups, or team libraries.
Does this build also replace Xnapper and Pika?
Yes. Shots.so, Xnapper and Pika all solve the same core job — turn a raw screenshot into a polished social image in seconds, entirely in the browser. 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.