Clone a functional Billion $$ SAAS Part 2 - Figma. Now that Claude Opus 4.6 and Codex 5.3 are available, I decided to try this again. The result - CanvasKit Tools used - @windsurf Cascade & @OpenAI Codex CLI First agent run - 30 minutes Total time spent w/ extra prompting - 3 hours I think this could be a new metric for model evaluations - TTBS (time to billion $$ SAAS 😂) Code and details below:

Code: github.com/dabit3/canvaskit… This app doesn't have all of the multi-tenet and collaborative features that make Figma valuable to teams, but I assume with a little extra work you could get it there. Features: Tools • Select tool (V) -- Click to select, Shift+click for multi-select, marquee drag for area selection • Frame tool (F) -- Draw container nodes that clip children, with visible labels • Rectangle tool (R) -- Draw rectangles, Shift to constrain to square • Ellipse tool (O) -- Draw ellipses, Shift to constrain to circle • Line tool (L) -- Draw lines, Shift to snap to 45-degree angles • Polygon tool -- Draw triangles/polygons • Star tool -- Draw star shapes • Pen tool (P) -- Freeform vector path drawing • Text tool (T) -- Click to place text, double-click to edit inline • Hand tool (H) -- Pan the canvas by dragging • Zoom tool (Z) -- Click to zoom in, Alt+click to zoom out Canvas • Infinite canvas with pan (Space+drag, middle mouse, or Hand tool) and zoom (scroll wheel) • Dot grid background that fades at low zoom and hides below 15% zoom • Zoom presets -- Zoom to Fit (calculates bounding box), 50%, 100%, 200% • Dimension labels -- Blue pill overlay showing W x H during drawing and resizing • Smart guides -- Snap lines appear when edges/centers align with other objects during move • Resize snapping -- Active edges snap to nearby object edges during resize • Custom rotate cursor -- SVG rotate icon appears when hovering the rotation zone outside selection handles Selection and Transform • Move -- Drag selected objects, with smart guide snapping • Resize -- 8 handles (corners + midpoints), rotation-aware so handles work correctly on rotated objects • Rotate -- Drag outside the bounding box corners, Shift to snap to 15-degree increments • Multi-selection -- Shift+click or marquee rectangle • Alignment buttons -- Align left, center, right, top, middle, bottom (works for single selection against canvas, or multi-selection against each other) • Distribute spacing -- Distribute horizontally/vertically (available with 3+ selected objects) Styling (Properties Panel) • Transform -- X, Y, Width, Height, Rotation number inputs • Corner radius -- Uniform or per-corner (TL, TR, BR, BL) with toggle • Opacity -- 0-100% slider • Blend mode -- Normal, Multiply, Screen, Overlay, Darken, Lighten, Color Dodge, Color Burn, Hard Light, Soft Light, Difference, Exclusion, Hue, Saturation, Color, Luminosity • Fill -- Add/remove fills, solid color, linear gradient, or radial gradient; gradient stops with individual color pickers • Stroke -- Add/remove strokes, solid color, configurable weight, alignment (Inside, Center, Outside); text stroke support • Effects -- Add/remove effects: Drop Shadow, Inner Shadow, Layer Blur, Background Blur; configurable X/Y offset, blur radius, visibility toggle • Color picker -- HSV square + hue bar + alpha bar, hex input, RGB display, 20 preset swatches • OS color picker -- Native system color picker button for both fill and stroke Typography (Text nodes) • Font family -- 20 Google Fonts loaded • Font weight -- 100 through 900 • Font size -- Numeric input • Line height -- Numeric or AUTO • Letter spacing -- Numeric with 0.1 step • Text alignment -- Left, Center, Right, Justified (with distinct SVG icons) • Text decoration -- None, Underline, Strikethrough (rendered on canvas and in edit overlay) • Inline editing -- Double-click to edit text directly on canvas with matching styles Layers Panel • Tree view of all objects on the current page • Drag-and-drop reorder to change z-order • Visibility toggle (eye icon) per layer • Lock toggle (lock icon) per layer • Inline rename -- Double-click a layer name to rename • Selection sync -- Clicking a layer selects it on canvas and vice versa • Context menu -- Right-click for options Organization • Grouping -- Ctrl/Cmd+G to group, Ctrl/Cmd+Shift+G to ungroup • Z-order -- Bring forward, send backward, bring to front, send to back • Multi-page support -- Add, rename, switch, and delete pages File Operations • New file -- Reset the editor • Open file -- Import .canvas.json documents • Save file -- Export as .canvas.json • Import image -- Via file menu, drag-and-drop, or clipboard paste; auto-scaled to fit viewport • Document name -- Editable in the toolbar Export • Format selection -- PNG, JPG, SVG • JPG quality setting • Scale selector -- 0.5x, 1x, 2x, 3x, 4x • SVG export -- Handles text, strokes, rotation, lines, and shapes Persistence • Auto-save to IndexedDB -- 500ms debounce with immediate flush on page unload/close • Auto-restore -- Recovers last session on page load Keyboard Shortcuts • Tool shortcuts -- V, F, R, O, L, T, P, H, Z • Edit -- Ctrl/Cmd+Z undo, Ctrl/Cmd+Shift+Z redo, Ctrl/Cmd+C copy, Ctrl/Cmd+V paste, Ctrl/Cmd+D duplicate, Delete/Backspace delete, Ctrl/Cmd+A select all • Arrange -- Ctrl/Cmd+G group, Ctrl/Cmd+Shift+G ungroup, ] bring forward, [ send backward • View -- Ctrl/Cmd+0 zoom to 100%, Ctrl/Cmd+1 zoom to fit, +/- zoom in/out • Shortcut help overlay -- Press ? to see all shortcuts in a categorized modal UI • Dark theme -- Figma-style dark panels (#2c2c2c backgrounds) • Collapsible panels -- Toggle left (layers) and right (properties) panels • Status bar -- Shows selection count, position, dimensions, rotation, zoom level, and shortcuts button • Toast notifications -- Temporary messages for user feedback (save, import, errors) • Toolbar with SVG icons -- Grouped by category with visual separators