SCRAPS (JOINSCRAPS.COM) - THE AI SKETCHBOOK
Building the ai-powered thinking canvas for creatives
NOTE
This is a video-heavy case study. Recommended browsers: Safari, Chrome, Comet. Not recommended due to video streaming issues: Dia, Arc.
ROLE
Founder
Designer
Full-stack Engineer
DURATION
March 2025 - Present
SKILLS
Design System
Software Development
Infra Development
Interaction Design
Go-to-market
TOOL
Cursor, Claude Code, Figma, Jitter, and more.
TEAM
Bao To
Ruby Chang (SWE)
TRY OUT THE LIVE PLATFORM AT
… OR EXPLORE SOME PUBLIC SCRAPS PAGES!
HIGHLIGHT 1
Canvas-driven at its core
I designed scraps to simulate the fluidity of the "sketchbooking" process.
Your notes, drawings, and inspirations are spontaneous & free-flowing, and the canvas should reflect that.
Challenge: how do you maintain structure & workflows when building freeform interactive interfaces?
Navigating AI Usage in Creative Workflows
There is heated debate on whether AI limits or enhances creativity.
With my art background, I designed AI features that deals with this fine line - combining:
- The spirits of Dada from 20th century art movements
- Surrealist processes
- Fine-tuned Exploration vs. Exploitation Parameters for creative workflows
Chaos vs. Structure in Creative Tools
How do you maintain both fluidity and structure when ideating on new, original work?
My solution: Figma + Procreate
-> Combining structure from design tools like Figma with the chaotic nature of artist tools like Procreate
Multimodal Expression
Creative works requires flexible ways of showing ideas. Scraps include a multimodal AI engine that analyses all types of content.
Text Cards
Image Cards
Audio Cards
Freeform Drawing
HIGHLIGHT 2
Chat-Canvas Hybrid Interface
Most AI chat interfaces in canvas apps stop at giving information. But how do you bring those ideas onto the canvas?
Challenge: How can you design a chat interface that interacts with the canvas & its multimodal (image, audio, video) content?
Within the AI tools panel, I let the selected items be anchors for generated content (spawns to the right)
When starting a new page, I set up an "onboarding card" to prompt users, and also auto-zooms the canvas to the selected content
HIGHLIGHT 3
Customizable UI
Insight: creatives and artists are power-users. They are willing to trade simplicity for a flexible, personalized user experience.
You can change how your workspace looks, and it is customizable at a page-level (every page is different - think GoodNotes)
Preset themes (Default, Creative, Tech, …) are experiments on how UI changes people feel about the product
HIGHTLIGHT 4
Cross-platform Content Engine
Ideas are spontaneous. Scraps comes with a desktop and a mobile app, allowing you to upload ideas through your phone throughout the day, and then use them later on desktop.
HIGHLIGHT 5
Sharable Creations
Creativity comes with expression. Users can choose to share their pages to others - showcasing their works
STATISTICS
Go-to-market journey!
Together, Ruby and I have launched on ProductHunt, Instagram, LinkedIn, and X, and have together shipped 15 major features to our users, generating 80k+ total impressions, 260 users, and interests from VCs and Angel Investors.
As of 08/20/2025, I personally have:
Shipped 80k+ lines of code, 560+ commits to production
Built a compact design system & component library with 60+ components
Did 3 UI redesign of the whole platform
Did 2 Database migrations to services after Supabase
Created 5 launch videos and 20+ social media posts for scraps products & features
LAUNCH VIDEOS
ProductHunt Launch
Drawing Mode Launch
Scraps Mobile App Launch
First Launch Video
THANKS FOR READING!