SCRAPS (JOINSCRAPS.COM) - THE AI SKETCHBOOK
Building the ai-powered thinking canvas for creatives
NOTE
This is a video-heavy case study. Consider switching to browsers like Safari or Chrome if the videos are not loading, due to video streaming limitations of newer browsers like Dia or 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 MEMBERS
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
First Launch Video - Scraps Desktop
Second Launch Video - Scraps Mobile
Third Launch Video - ProductHunt
Fourth Launch Video - Drawing Mode
THANKS FOR READING!