# PRD — Sketch 9UY ## Lightweight Browser Sketchpad ## Product Summary Sketch 9UY is a fast, no-account sketchpad for quick visual thinking inside the 9UY suite. It should open immediately, feel responsive on desktop and mobile, and let a user draw, erase, undo, and export without setup friction. This product is intentionally smaller than a design tool. It is not Figma, Procreate, or Photoshop in the browser. The core promise is speed, simplicity, and low cognitive load. ## Problem Users often need a disposable canvas for rough diagrams, annotations, and quick freehand notes, but most drawing tools are either: - too heavy - account-gated - overloaded with design features - weak on mobile and stylus support Sketch 9UY should solve the "I just need to draw something now" use case. ## Goals - Launch to a usable drawing surface in one step. - Support mouse, touch, and stylus drawing with low latency. - Keep the UI minimal enough that the canvas remains the primary focus. - Work well as a standalone utility in the 9UY deck. - Allow export to common image formats without requiring an account. ## Non-Goals - Real-time collaboration - Complex vector editing - Multi-page documents - Photo editing - Animation / timeline workflows - Cloud sync or account-based project storage ## Target Users - People needing a quick scratchpad for ideas - Users annotating or mocking up simple layouts - Mobile and tablet users wanting a no-install sketch tool - Anyone who wants a temporary drawing surface without signup friction ## Product Principles - Canvas first: the drawing surface is the product. - Instant start: first stroke should take seconds, not minutes. - Simple by default: advanced controls should not crowd the main flow. - Good enough offline behavior: if the app shell loads, the drawing experience should still feel dependable. - 9UY consistent: match the suite's utilitarian, lightweight, mobile-safe approach. ## Success Criteria - A first-time user can begin drawing within 5 seconds of page load. - Core drawing interactions feel responsive on a mid-range mobile device. - Export works reliably for the primary format in v1. - Users can recover from mistakes using undo/redo without confusion. - The app remains understandable without onboarding text or a tutorial. ## Scope Overview The product should be built in phases. The MVP should be genuinely shippable on its own rather than depending on advanced features from later phases. ## Phase 1 — MVP Phase 1 is the minimum version that should go live. ### Core User Story As a user, I can open Sketch 9UY, draw on a canvas, erase mistakes, clear the canvas, undo or redo actions, and export my sketch as an image. ### MVP Features - Single drawing canvas - Pen tool - Eraser tool - Stroke color picker - Stroke width control - Undo / redo - Clear canvas action with confirmation - PNG export - Responsive layout for desktop and mobile - Pointer Events support for mouse, touch, and stylus ### MVP Interaction Model - Default tool is Pen. - Dragging on the canvas creates a stroke. - Eraser removes existing pixels or stroke data depending on implementation choice. - Undo and redo operate on full user actions, not partial stroke points. - Export downloads the current canvas as a PNG. ### MVP Acceptance Criteria - User can draw visible strokes using mouse, touch, and stylus where supported. - Brush color and size changes affect the next stroke immediately. - Undo removes the most recent completed action. - Redo restores the most recently undone action. - Clear canvas prompts before destructive removal. - PNG export produces a file matching the visible canvas area. - App remains usable at common mobile widths without browser UI obscuring the main controls. ## Phase 2 — Enhanced Drawing These features add utility after the MVP is solid. - Line tool - Rectangle tool - Ellipse tool - Background color selection: white, black, transparent - Opacity control - Keyboard shortcuts for desktop - Space-drag temporary pan behavior ### Acceptance Criteria - Shape tools render predictable, previewable output before commit. - Background selection is reflected correctly in export behavior. - Desktop shortcuts do not interfere with text input or browser defaults more than necessary. ## Phase 3 — Power Features These features are useful, but should not block initial launch. - Text tool - Basic layer stack - Layer visibility and lock controls - Layer opacity - JPEG export - SVG export where technically valid ### Important Constraint SVG export should only ship if the rendering model supports trustworthy vector output. If raster-only operations are present, the UI must disable SVG export or explain why it is unavailable. ## Deferred / Optional Features These are explicitly not required for the first production release and should be treated as stretch work. - Infinite canvas - Zoomable workspace - Two-finger pinch zoom - Flood fill - Read-only share links - Paste-backed snapshot storage - Pressure-based smoothing simulation - Automatic layer flattening rules These features are valuable but materially increase implementation complexity, performance risk, or backend dependency. ## Functional Requirements ### Canvas - Use the HTML Canvas 2D API. - Canvas should resize safely to viewport changes without corrupting existing work. - On mobile, use layout units that account for dynamic browser chrome. - Touch interactions must avoid accidental page scroll while actively drawing. ### Drawing Model - Implementation may be raster-first or stroke-data-first, but undo/redo must remain reliable. - Strokes should render smoothly enough to avoid visibly jagged output at typical brush sizes. - Stylus pressure may be used if available, but must degrade gracefully when absent. ### Controls - Primary controls must stay visible without covering too much of the canvas. - Mobile layout should prioritize tool switching, brush size, undo/redo, and export. - Advanced controls should be collapsible if they threaten canvas space. ### Export - v1 export target is PNG. - Export should use the visible drawing state, not a screenshot of the entire page UI. - Transparent background export should be supported if the active canvas model allows it. ## Performance Requirements - Initial load should be lightweight and framework-free unless a clear need emerges. - Drawing interactions should not visibly lag during normal single-layer use. - The app should remain stable through a typical session of repeated strokes and undo/redo actions. ## Accessibility Requirements - Buttons and inputs must have accessible labels. - Controls must be keyboard reachable on desktop. - Visual state changes for active tools should be obvious. - Color must not be the only indicator of selected tool state. ## Technical Constraints - Prefer vanilla HTML, CSS, and JavaScript in line with the rest of the 9UY suite. - Keep dependencies minimal. - No WebGL dependency for the core product. - PWA behavior is desirable, but core drawing must work before advanced install/offline polish. ## Risks - Infinite canvas and zoom can complicate export, undo/redo, and mobile interaction design. - Layers plus raster editing can become expensive quickly if the data model is not chosen carefully. - SVG export can become misleading if the app allows raster-only operations early. - Sharing features introduce backend, expiry, and moderation considerations that the current app does not yet have. ## Open Questions - Should undo/redo be session-only, or should drafts survive reload? - Should erasing be implemented as destructive raster erase or stroke deletion? - Should mobile prioritize a bottom toolbar, floating toolbar, or collapsible drawer? - Is transparent export required for MVP, or acceptable as a phase 2 enhancement? - Does "share" belong in this app at all, or should export-only remain the permanent scope? ## Recommended Build Order 1. Ship a real MVP: pen, eraser, size, color, undo/redo, clear, PNG export. 2. Improve usability: mobile-safe layout, shortcuts, basic shapes, background options. 3. Add advanced authoring only after the core canvas interaction feels excellent.