How I use Claude Code as a Designer at Shopify
👋 Welcome to Sneak Peek with Jay, a series where you will see how top design teams use AI. In this interview Jay chats with Kazden Cattapan (Staff Product Designer) who shows the AI design process at Shopify!
🔓 Unlock AI Design & Growth Design videos: https://sneakpeek.design/
🧠 Companion videos
• Intercom's AI Design Process: https://youtu.be/_9OdGDjFrCw
• Ramp's AI Design Process: https://youtu.be/mH5qIPx47jw
• Webflow's AI Design Process: https://youtu.be/XnHAlWeefVw?si=WQjcqeYx-nwZYxMm
🤝 Connect with Kazden Cattapan
• X: https://x.com/kazdenc
• LinkedIn: https://www.linkedin.com/in/kazdencattapan/
🫶 Connect with Jay
• X: https://x.com/jayneil
• LinkedIn: https://www.linkedin.com/in/jayneil/
✂️ Video edited by Rishabh Tripathi
• X: https://x.com/RishabhxDesign
• LinkedIn: https://www.linkedin.com/in/rishabh-tripathi01/
00:00 Trailer
01:26 Guest intro
02:26 Creating moodboard for AI consumption
04:56 Internal prototyping site at Shopify
06:50 Shopify's Playground environment
07:46 Best way to prompt Claude Code
09:25 Not using Shopify design system for initial AI explorations
11:08 Non linear working model with AI
12:58 Collecting design inspiration from Mobbin
15:31 How designers at Shopify share work internally
18:51 Don't give too much scope to Claude Code
21:14 Building a backend system with Claude Code
23:24 Difficulty designing AI experiences in Figma
24:07 Updating UI with Claude Code
26:32 Talking to AI vs giving AI screenshots
28:30 Pro tip for running multiple Claude Code tabs
30:28 Downside of using purple color
31:37 Benefits of prototyping directly in code
37:45 Shopify's designer to engineering handoff process
44:14 Old engineering handoff process
46:10 Time saved by using AI tools
47:37 AI culture at Shopify
50:23 Chief Design Officer at Shopify is Vibe Coding
52:05 AI agents at Shopify
54:41 AI training material to level up your design team
55:50 Why Claude Code is the only design tool you need
58:22 Using Descript to create tutorials for the design team
01:01:48 Finding design inspiration
#aidesign #aidesigntools #claudecode
🔓 Unlock AI Design & Growth Design videos: https://sneakpeek.design/
🧠 Companion videos
• Intercom's AI Design Process: https://youtu.be/_9OdGDjFrCw
• Ramp's AI Design Process: https://youtu.be/mH5qIPx47jw
• Webflow's AI Design Process: https://youtu.be/XnHAlWeefVw?si=WQjcqeYx-nwZYxMm
🤝 Connect with Kazden Cattapan
• X: https://x.com/kazdenc
• LinkedIn: https://www.linkedin.com/in/kazdencattapan/
🫶 Connect with Jay
• X: https://x.com/jayneil
• LinkedIn: https://www.linkedin.com/in/jayneil/
✂️ Video edited by Rishabh Tripathi
• X: https://x.com/RishabhxDesign
• LinkedIn: https://www.linkedin.com/in/rishabh-tripathi01/
00:00 Trailer
01:26 Guest intro
02:26 Creating moodboard for AI consumption
04:56 Internal prototyping site at Shopify
06:50 Shopify's Playground environment
07:46 Best way to prompt Claude Code
09:25 Not using Shopify design system for initial AI explorations
11:08 Non linear working model with AI
12:58 Collecting design inspiration from Mobbin
15:31 How designers at Shopify share work internally
18:51 Don't give too much scope to Claude Code
21:14 Building a backend system with Claude Code
23:24 Difficulty designing AI experiences in Figma
24:07 Updating UI with Claude Code
26:32 Talking to AI vs giving AI screenshots
28:30 Pro tip for running multiple Claude Code tabs
30:28 Downside of using purple color
31:37 Benefits of prototyping directly in code
37:45 Shopify's designer to engineering handoff process
44:14 Old engineering handoff process
46:10 Time saved by using AI tools
47:37 AI culture at Shopify
50:23 Chief Design Officer at Shopify is Vibe Coding
52:05 AI agents at Shopify
54:41 AI training material to level up your design team
55:50 Why Claude Code is the only design tool you need
58:22 Using Descript to create tutorials for the design team
01:01:48 Finding design inspiration
#aidesign #aidesigntools #claudecode