DesignCAN I VIBECODE
PicMonkey?
BUILD FIRST
- One specific customer type and one primary use case
- A vertical slice that completes the main job without manual workarounds
- Visible limits, review steps, and a fallback when an external dependency fails
LEAVE FOR LATER
- Broad third-party integrations
- High-scale collaboration, syncing, and permissions
- Automation that can cause harm without human review
RESEARCH NOTES
What this tool actually does.
PicMonkey is a browser-based, subscription (Pro tier) photo editor and graphic design tool marketed to non-professionals ('no art degree required'). Official feature pages describe: crop, resize, color/exposure adjustments; portrait touch-up tools; one-click Background Remover; Color Changer; filters, textures, and gradients; layer-based editing with text effects (curve, outline, shadow); hundreds of collage layout grids mixing photos, stock photos, videos, and colors; adding video clips to designs plus a royalty-free stock video library; thousands of templates for social posts, YouTube thumbnails, banners, logos, and brand books; customizable vector graphics; animation for graphics/photos/logos; premium brushes (watercolor, sketch, glitter); Smart Resize to reformat a design to multiple output sizes; millions of Shutterstock stock photos; and PNG/JPEG export. Available on desktop and mo
RESEARCHED BUILD PROMPT
Give this to your coding agent.
Build 'CanvasKit' (working title), a browser-based photo editor and template design app that replicates the PicMonkey workflow (open template or blank canvas → upload/touch up an image → add text, graphics, and effects → export). Do not copy PicMonkey branding, logo, proprietary assets, or UI layout; this is a functional reimplementation, not a clone.
Workflow: user uploads an image or picks a blank/template canvas (social post, YouTube thumbnail, banner presets); edits with crop, resize, brightness/contrast/saturation; applies filters; removes background with a client-side segmentation model plus a manual eraser fallback; overlays editable text layers (font, size, color, curve, outline, shadow), vector graphics/shapes, and sticker images; arranges everything on a layered canvas with reorder, hide/show, and layer opacity; supports undo/redo and zoom/pan; previews and exports PNG/JPEG at chosen sizes.
Technical: React front end with Fabric.js or Konva for canvas layer editing; filters via WebGL/CSS; background removal using @imgly/background-removal or MediaPipe Selfie Segmentation; Zustand for state; drag-and-drop plus file-input upload; all processing client-side for privacy. Include undo/redo, zoom/pan, and a layer panel.
Out of scope: real video editing, real-time collaboration, accounts/payments, cloud storage, stock-photo licensing integrations, native mobile apps, print/merch ordering.
Deliver a working app plus a README covering setup, architecture, export-resolution handling, and known limitations (model size/load time, filter performance on large images, Canvas export fidelity).