AI Creative Lab

A living textbook. Each chapter is a real, deployable mini-app — built with AI as your co-pilot. You bring the idea. AI brings the execution speed.

▶ Watch the Animation 📚 Start Here (Activity Guide)

Choose a Chapter

Chapter 00
The Logo That Comes Alive
Build an SVG logo animation from scratch. Learn the core mindset: AI is a collaborator, not the creator. This is where it all starts.
SVGAnime.jsBrandingGitHub Pages
→ Chapter 01
Daily Focus Dashboard
A minimal personal dashboard: time, date, a daily intention you set, and a focus timer. Runs in the browser — no account needed.
LocalStorageTimersProductivityJS
→ Chapter 02
Idea Capture Board
A free-canvas drag-and-drop sticky note board that saves to your browser. Organize thoughts, ideas, and tasks — no app or login required.
Drag & DropLocalStorageDOMArrays
→ Chapter 03
One-Click Invoice Generator
Fill in your details, add line items, and download a clean PDF invoice instantly. No subscription. No cloud. Just a browser.
PDFFormsMathFreelance
→ Chapter 04
Animated Portfolio Page
Build a personal portfolio page with animated section reveals, a project grid, animated stat counters, and a contact form — deployable on GitHub Pages.
CSS AnimationsIntersection ObserverLayoutPortfolio
→ Chapter 05
Meeting Note Taker
A structured note-taking app with auto-timestamping, 5-type tagging, keyboard shortcuts, and one-click export to plain text or Markdown.
File DownloadKeyboard EventsMarkdownProductivity
→ Chapter 06
Brand Palette Generator
Pick a base color, generate a full brand palette with tints, shades, and harmonic companion colors. Export as CSS variables, SCSS, JSON, or a Tailwind config.
Color MathHSLCSS VariablesSVG Export
→ Chapter 07
Custom Soundboard
Build a browser-based soundboard with labeled pads, upload your own audio clips, assign keyboard shortcuts, and fire sounds live. No hardware required.
Web Audio APIFileReaderGainNodeStreaming
→