DesignCAN I VIBECODE
Canva?
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.
Canva is a browser-based graphic design platform (founded 2013 in Australia) that lets non-designers create social posts, presentations, posters, videos, websites and print materials through a drag-and-drop editor. Core workflow: pick a template or blank canvas, add text, photos, graphics, charts and brand elements on a layered canvas, then share, present or export. It offers 250,000+ free templates and 1M+ free stock images/graphics, plus import of PDF, PPTX and AI files. The Visual Suite pairs the editor with Docs, Whiteboards, Presentations, Video, Websites, Print, Sheets and Email. Canva AI adds Magic Write, text-to-image, Magic Eraser/background remover, Image Upscaler, auto-captions and AI design generation. Brand Kits apply saved fonts/colors/logos, and real-time multi-user collaboration, comments and sharing are built in. It is monetized via a free tier plus Pro, Teams and Enterp
RESEARCHED BUILD PROMPT
Give this to your coding agent.
Build "DraftCanvas" (working title), a web-based drag-and-drop graphic design editor that replays the core Canva workflow without copying its brand, proprietary templates, or UI. Workflow: user signs in, chooses a purpose (social post, presentation, poster) or blank canvas, picks a size preset (1080x1080, 1920x1080, etc.) or custom dimensions, drags items (text boxes, uploaded images, shapes, stickers) onto a layered canvas, reorders/rotates/resizes them, tunes fonts, colors, alignment and z-order in a right-side properties panel, then exports PNG/JPEG/PDF. Requirements: 1) Canvas using Konva.js or Fabric.js with zoom, pan, snap-to-grid, multi-select, undo/redo history, and keyboard shortcuts; 2) ~25 curated built-in templates stored as JSON specs plus a template gallery; 3) asset library from local uploads (client-side object URLs) and bundled royalty-free SVG stickers — no external stock API; 4) properties panel for font family/size/weight/color/alignment, fill/stroke, opacity, rotation, corner radius, layer order; 5) export via canvas rasterization or SVG serialization, with text converted to paths or fonts embedded so output matches the canvas; 6) persistence as JSON design documents in Node/Express + SQLite with per-user auth (email+password or magic link); 7) pages for editor, template gallery, my designs, plus autosave and last-N snapshot history. Explicitly do not copy Canva's name, logo, template artwork, assets, or pixel-identical UI; create an original, accessible, responsive interface. Out of scope: AI generation, real-time multiplayer collaboration, licensed stock libraries, video/website editing, mobile apps, payments. Deliver a README covering setup (env vars, DB migration, dev server), architecture, and known limitations (single-user-at-a-time editing, small template set, export fidelity caveats).