Can Shots.so / Xnapper be vibe coded?
Gradient background, padding, rounded corners, export
Gradient background, padding, rounded corners, export. Pure client-side canvas work — there is no server to even build.
Jump to the build brief ↓Checked Jul 2026
What you pay today, before any DIY hosting
high editorial confidence
Buildability by layer
Screens, forms, and focused interactions
The repeatable job the product performs
Availability and legality of required data
Uptime, queues, support, and maintenance
Security, compliance, and user confidence
The achievable core
- A focused, single-user version of Shots.so / Xnapper's main workflow.
- Build a focused single-user workflow with real persistence, search, and export.
- A responsive interface with real empty, loading, success, and error states.
The parts a prompt cannot buy
- their template/mockup library
- device frames kept up to date
- batch processing
- The last 20 percent is sync, migration fidelity, speed, and edge cases.
- Licensed content and distribution rights are not reproducible with an LLM.
Why people still pay
The last 20 percent is sync, migration fidelity, speed, and edge cases.
Licensed content and distribution rights are not reproducible with an LLM.
The brief
Context, requirements, acceptance criteria, non-goals, and the full production standard — as Markdown, ready for any coding agent.
Build brief — a focused alternative to Shots.so / Xnapper
Context
**Shots.so / Xnapper** — Gradient background, padding, rounded corners, export. It currently costs $10/mo.
Gradient background, padding, rounded corners, export. Pure client-side canvas work — there is no server to even build.
This brief describes a focused, single-operator replacement for the part of Shots.so / Xnapper that is genuinely reproducible. It is deliberately narrower than the product it replaces, and it says so in writing. Build the useful core; do not pretend to have rebuilt the rest.
What you are building
A focused, single-user version of Shots.so / Xnapper's main workflow.
Build a focused single-user workflow with real persistence, search, and export.
A responsive interface with real empty, loading, success, and error states.
Requirements
Non-functional
Accessibility: semantic markup, labelled controls, visible focus, and reduced-motion support.
Security: server-side secrets, validated input, and no credentials in the client bundle.
Reliability: retries with backoff on external calls, and a clear failure state when a provider is down.
Portability: the operator can export their data and leave without losing it.
Implementation brief
Build me a screenshot beautifier like Shots or Xnapper, as a single static page.
Requirements:
Drag-and-drop or paste a screenshot onto the page (also support a file picker).
Render it on a canvas with: adjustable padding, corner radius, and shadow;
a background picker with ~10 tasteful presets (gradients + solid colors) plus
a custom color input; optional 16:9 / 4:3 / 1:1 / Twitter-size canvas ratios.
Live preview of every control, no Apply buttons. Controls in a sidebar.
Export as PNG at 1x or 2x with one click; also Copy to clipboard.
Everything client-side · no uploads, no server, works offline once loaded.
Vanilla JS + canvas, one HTML file, no build step, no frameworks.
Make the defaults gorgeous so the first export already looks premium.
Delivery standard
Inspect the repository first, then write a short implementation plan before writing code.
Deliver the smallest complete end-to-end workflow first; every primary control must work against persisted data.
Use real validation and storage; never substitute fake dashboards, decorative controls, hard-coded success states, or mock integrations.
Include responsive layouts plus genuine empty, loading, success, validation, and failure states.
Keep secrets server-side in environment variables, provide .env.example, and never commit credentials or user data.
Add structured logs around every external call and return actionable errors without leaking sensitive details.
Write unit tests for the core logic and one automated test of the main user journey.
Finish with a README covering setup, architecture, data location, backups, tests, deployment, and known limitations.
Acceptance criteria
A clean install starts the app using only the README and .env.example.
The primary journey works from first visit through saved result, reload, edit, export, and deletion where applicable.
Invalid input, missing configuration, provider failure, and an empty database each have a usable state.
The interface works at 390px and 1440px, is keyboard navigable, and shows visible focus on every control.
Tests, type checking, linting, and a production build all pass with no ignored failures.
No part of the interface implies a live integration, security guarantee, or scale capability that was not actually built and verified.
Non-goals
Do not build these, and do not claim to have replaced them:
Their template/mockup library.
Device frames kept up to date.
Batch processing.
The last 20 percent is sync, migration fidelity, speed, and edge cases.
Licensed content and distribution rights are not reproducible with an LLM.
What you still own after launch
Run migrations, backups, restores, and dependency updates.
Test the critical journey after every model, API, or hosting change.
Monitor failures and fix the edge cases a first prompt will miss.
Risk
**Manageable.** A personal version is realistic if you test the critical journey and keep reliable backups.
Editorial confidence in this assessment: high. No independent one-shot implementation is linked yet.
Generated by [Can It Be Vibe Coded?](https://www.canitbevibecoded.com) · Full report: https://www.canitbevibecoded.com/shots
You still own the product
- Run migrations, backups, restores, and dependency updates.
- Test the critical journey after every model, API, or hosting change.
- Monitor failures and fix the edge cases a first prompt will miss.
Before you start
Can Shots.so / Xnapper be vibe coded?
Yes, for personal use. Gradient background, padding, rounded corners, export. Pure client-side canvas work — there is no server to even build.
What can an AI coding agent reproduce from Shots.so / Xnapper?
A focused, single-user version of Shots.so / Xnapper's main workflow. Build a focused single-user workflow with real persistence, search, and export. A responsive interface with real empty, loading, success, and error states.
What will a DIY Shots.so / Xnapper replacement still be missing?
their template/mockup library; device frames kept up to date; batch processing; The last 20 percent is sync, migration fidelity, speed, and edge cases.; Licensed content and distribution rights are not reproducible with an LLM.
What do I still own after building a Shots.so / Xnapper alternative?
Run migrations, backups, restores, and dependency updates. Test the critical journey after every model, API, or hosting change. Monitor failures and fix the edge cases a first prompt will miss.