Design Engineers | AI native design on top of Production Code!
Claude Code is transforming how UX Designers, Product Designers, and Design Systems teams collaborate with developers. In this complete Claude Code tutorial for designers, you'll learn how to edit real production code, work inside a GitHub repository, use Storybook, generate interfaces with Material UI components, create Pull Requests, and collaborate with engineers without using the terminal.
If you've ever wondered how designers can work directly with production code while still respecting an enterprise design system, this end-to-end workflow demonstrates exactly how modern AI-native teams collaborate.
In this tutorial, I’m joined by Principal Software Engineer & Design Systems Architect Sam Rockwell. Together we walk through the complete journey from GitHub to production.
**Resources**
🔗 Starter Repository:
https://github.com/SRochas/mui-wrapper
🔗 Sam Rockwell's Substack:
https://samrockwell.substack.com/
What you'll learn
✅ What GitHub actually is (explained for designers)
✅ Storybook explained simply
✅ Clone your first production repository
✅ Connect Claude Code to GitHub
✅ Run a React project locally
✅ Generate a real feature using Claude Code AI
✅ Build with Material UI Design System components
✅ Verify AI-generated code
✅ Create your first Pull Request
✅ Understand the developer review process
✅ See how developers approve and merge your work
✅ Learn how AI is changing Design Engineering forever
Whether you're a:
• UX Designer
• UI Designer
• Product Designer
• Design Systems Designer
• Design Engineer
• Frontend Designer
• Creative Technologist
• Product Team Lead
this workflow shows how designers can safely contribute directly to production code while collaborating with engineering teams using AI.
If you'd like us to continue this Design Engineering series, let us know what topics you'd like to see next.
Subscribe for weekly tutorials covering:
• Claude Code
• Figma
• Design Systems
• AI Design Workflows
• Design Engineering
• AI for Designers
• Enterprise Product Design
• Production-ready AI workflows
⏱️ Chapters
00:00 Designers can edit production code
01:02 Meet Sam Rockwell
2.33 The starter repository available to clone
3:39 GitHub vs Storybook explained
6:53 Clone your first repository
8:34 Connect Claude Code
10:11 Run Storybook
11:33 Run the starter website
13:09 Search with Claude & Generate a pricing page
15:26 Verify Material UI components
16:41 Create your first Pull Request
18:17 Download and authenticate Github CLI for first timers
20:15 Developer review of Pull Request
21:46 Merge into production
#ClaudeCode #DesignEngineering #DesignSystems #GitHub #ProductDesign #UXDesign #AIDesign
-------------------------------------------------------------------------------
🔗 **Claude Related Tutorials**
Updated Set UP Claude + Figma MCP: https://youtu.be/wCvtTQ-CTgU
First setup video upon release: https://youtu.be/CJIivdkGT5Y
Connect Design System with Claude: https://youtu.be/mAUXxpRx9Zw
Build Design System with Claude: https://youtu.be/WbUhThNIyUQ
Claude Design: https://youtu.be/o7HSVPHCX8I
Claude Cowork: https://youtu.be/afMFZGjQH0w
Figma Skills: https://youtu.be/KUbHHFtM7Js
Claude Skills: https://youtu.be/WUMIdvphiTQ
Ship your Portfolio from Figma with Claude AI:https://youtu.be/BW3pBEZSfcQ
-------------------------------------------------------------------------------
👩🏻💻 I'm Nehmat — Design Leader, Professor, and your guide for navigating the AI era.
I help designers master tools like Claude Design, Figma MCP, and AI design workflows with clarity and real-world application.
🎯 New videos as soon as you need to know: Figma Updates, Industry changes, AI tools & career evolution
💕 Subscribe to get the latest releases & changes in our industry
👉 Join my community to get First Access, more direct guidance & live consultation on your work
🔔 Turn on ALL notifications so you don't miss the latest releases and tutorials
🔥 Hype this video to help it reach the people searching for it
➡️ LinkedIn: https://linkedin.com/in/nehmatgereige
❎ X: https://x.com/33Nehmat
Ⓜ️ Medium: https://medium.com/@nehmat.gereige
🌈 Figma Creations: https://www.figma.com/@nehmatgereige
🌸 FREE Professional Courses 🌸
🤖 The New AI-Design Workflow — Claude AI + Figma (FREE Course):
https://www.youtube.com/playlist?list=PLXdRMPwB8CHnCai2ohL6e9HA4mcq-ZEn0
☸️ Codex & Chatgpt for Designers: https://www.youtube.com/playlist?list=PLXdRMPwB8CHk4F76vsOWHehnz8pcKYP6T
🔥 Figma MAKE — 0 to Expert (FREE Course):
https://www.youtube.com/playlist?list=PLXdRMPwB8CHmbSLEKimjJMuvlAQgi09I
🌈 Complete Figma for Beginners 2025 (FREE Course):
https://www.youtube.com/playlist?list=PLXdRMPwB8CHkdA9Sch2ArrgmViCbHyaRN
🧘🏻♀️ Career in UX/UI Design (FREE Course):
https://www.youtube.com/playlist?list=PLXdRMPwB8CHmky4DDULgzeU-u4XyHNU7y
If you've ever wondered how designers can work directly with production code while still respecting an enterprise design system, this end-to-end workflow demonstrates exactly how modern AI-native teams collaborate.
In this tutorial, I’m joined by Principal Software Engineer & Design Systems Architect Sam Rockwell. Together we walk through the complete journey from GitHub to production.
**Resources**
🔗 Starter Repository:
https://github.com/SRochas/mui-wrapper
🔗 Sam Rockwell's Substack:
https://samrockwell.substack.com/
What you'll learn
✅ What GitHub actually is (explained for designers)
✅ Storybook explained simply
✅ Clone your first production repository
✅ Connect Claude Code to GitHub
✅ Run a React project locally
✅ Generate a real feature using Claude Code AI
✅ Build with Material UI Design System components
✅ Verify AI-generated code
✅ Create your first Pull Request
✅ Understand the developer review process
✅ See how developers approve and merge your work
✅ Learn how AI is changing Design Engineering forever
Whether you're a:
• UX Designer
• UI Designer
• Product Designer
• Design Systems Designer
• Design Engineer
• Frontend Designer
• Creative Technologist
• Product Team Lead
this workflow shows how designers can safely contribute directly to production code while collaborating with engineering teams using AI.
If you'd like us to continue this Design Engineering series, let us know what topics you'd like to see next.
Subscribe for weekly tutorials covering:
• Claude Code
• Figma
• Design Systems
• AI Design Workflows
• Design Engineering
• AI for Designers
• Enterprise Product Design
• Production-ready AI workflows
⏱️ Chapters
00:00 Designers can edit production code
01:02 Meet Sam Rockwell
2.33 The starter repository available to clone
3:39 GitHub vs Storybook explained
6:53 Clone your first repository
8:34 Connect Claude Code
10:11 Run Storybook
11:33 Run the starter website
13:09 Search with Claude & Generate a pricing page
15:26 Verify Material UI components
16:41 Create your first Pull Request
18:17 Download and authenticate Github CLI for first timers
20:15 Developer review of Pull Request
21:46 Merge into production
#ClaudeCode #DesignEngineering #DesignSystems #GitHub #ProductDesign #UXDesign #AIDesign
-------------------------------------------------------------------------------
🔗 **Claude Related Tutorials**
Updated Set UP Claude + Figma MCP: https://youtu.be/wCvtTQ-CTgU
First setup video upon release: https://youtu.be/CJIivdkGT5Y
Connect Design System with Claude: https://youtu.be/mAUXxpRx9Zw
Build Design System with Claude: https://youtu.be/WbUhThNIyUQ
Claude Design: https://youtu.be/o7HSVPHCX8I
Claude Cowork: https://youtu.be/afMFZGjQH0w
Figma Skills: https://youtu.be/KUbHHFtM7Js
Claude Skills: https://youtu.be/WUMIdvphiTQ
Ship your Portfolio from Figma with Claude AI:https://youtu.be/BW3pBEZSfcQ
-------------------------------------------------------------------------------
👩🏻💻 I'm Nehmat — Design Leader, Professor, and your guide for navigating the AI era.
I help designers master tools like Claude Design, Figma MCP, and AI design workflows with clarity and real-world application.
🎯 New videos as soon as you need to know: Figma Updates, Industry changes, AI tools & career evolution
💕 Subscribe to get the latest releases & changes in our industry
👉 Join my community to get First Access, more direct guidance & live consultation on your work
🔔 Turn on ALL notifications so you don't miss the latest releases and tutorials
🔥 Hype this video to help it reach the people searching for it
➡️ LinkedIn: https://linkedin.com/in/nehmatgereige
❎ X: https://x.com/33Nehmat
Ⓜ️ Medium: https://medium.com/@nehmat.gereige
🌈 Figma Creations: https://www.figma.com/@nehmatgereige
🌸 FREE Professional Courses 🌸
🤖 The New AI-Design Workflow — Claude AI + Figma (FREE Course):
https://www.youtube.com/playlist?list=PLXdRMPwB8CHnCai2ohL6e9HA4mcq-ZEn0
☸️ Codex & Chatgpt for Designers: https://www.youtube.com/playlist?list=PLXdRMPwB8CHk4F76vsOWHehnz8pcKYP6T
🔥 Figma MAKE — 0 to Expert (FREE Course):
https://www.youtube.com/playlist?list=PLXdRMPwB8CHmbSLEKimjJMuvlAQgi09I
🌈 Complete Figma for Beginners 2025 (FREE Course):
https://www.youtube.com/playlist?list=PLXdRMPwB8CHkdA9Sch2ArrgmViCbHyaRN
🧘🏻♀️ Career in UX/UI Design (FREE Course):
https://www.youtube.com/playlist?list=PLXdRMPwB8CHmky4DDULgzeU-u4XyHNU7y