Figma MCP + Claude Code Tutorial | Publish your Design Portfolio with AI (No Code)
Designers can finally publish real websites — without writing code. In this video, I show designers how to build their own portfolio website step by step starting from a Figma design using Claude Code inside Visual Studio Code, leveraging Figma MCP and Figma Skills, and finally publishing a live site to GitHub Pages. We will explore the project structure, creating an HTML file, and organizing assets for web development. Learn how to set up your project and modify CSS and JavaScript files for a functional site using Claude Code — no coding experience needed.
Claude Code reads your Figma file through MCP and builds your portfolio like a developer would — you just guide it. This is how designers can publish for free in 2026, with no coding required.
In this video, you'll learn how to:
• Connect Figma to Claude Code using MCP (this is NOT a Replit or no-code builder)
• Let Claude Code act as your developer — reading your design and writing real code
• Work inside VS Code with Claude as your AI dev partner, step by step
• Push your portfolio to GitHub and publish it live with GitHub Pages — completely free
• Iterate and refine your portfolio by directing Claude, not writing code yourself
🔗 Claude Code: https://claude.ai/code
🔗 GitHub Pages: https://pages.github.com
🔗 Figma: https://figma.com
🔗 **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
👩🏻💻 I'm Nehmat — Design Leader, Professor, and your guide for navigating the AI era.
I help designers master tools like [Figma MCP, Codex, AI 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
—
CHAPTERS
00:00 Intro - Why designers need this workflow
01:28 Setting up your tools: Claude Code + VS Code
03:50 Connecting Claude inside VS Code
05:50 Creating folder structure for your project with Claude Code
07:57 Create your portfolio Design from Figma with Claude & Figma MCP step by step
10:26 Update the portfolio: Add links to buttons with Claude
13:21 Create animation & CSS transition with Claude & Figma MCP
16:00 Introducing Github to Designers, Value & Purpose
19:32 Commit & Push to Github from VS Code
21:37 Your portfolio is live — Publishing live on GitHub Pages for free
—
SEARCH QUERIES THIS VIDEO ANSWERS
How to publish a design portfolio without coding
Figma MCP to code tutorial for designers
What is Claude Code and how do designers use it
How to use Claude Code as a developer without coding
Figma MCP vs Replit for designers
Publish designer portfolio free with GitHub Pages
Claude Code Figma MCP VS Code tutorial 2026
How designers can publish portfolios using AI
#FigmaMCP #DesignerPortfolio #NoCodeWebsite #ClaudeCode #UXDesign #PortfolioWebsite #AIForDesigners #FigmaTutorial #FreePortfolio #DesignTools2025
Claude Code reads your Figma file through MCP and builds your portfolio like a developer would — you just guide it. This is how designers can publish for free in 2026, with no coding required.
In this video, you'll learn how to:
• Connect Figma to Claude Code using MCP (this is NOT a Replit or no-code builder)
• Let Claude Code act as your developer — reading your design and writing real code
• Work inside VS Code with Claude as your AI dev partner, step by step
• Push your portfolio to GitHub and publish it live with GitHub Pages — completely free
• Iterate and refine your portfolio by directing Claude, not writing code yourself
🔗 Claude Code: https://claude.ai/code
🔗 GitHub Pages: https://pages.github.com
🔗 Figma: https://figma.com
🔗 **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
👩🏻💻 I'm Nehmat — Design Leader, Professor, and your guide for navigating the AI era.
I help designers master tools like [Figma MCP, Codex, AI 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
—
CHAPTERS
00:00 Intro - Why designers need this workflow
01:28 Setting up your tools: Claude Code + VS Code
03:50 Connecting Claude inside VS Code
05:50 Creating folder structure for your project with Claude Code
07:57 Create your portfolio Design from Figma with Claude & Figma MCP step by step
10:26 Update the portfolio: Add links to buttons with Claude
13:21 Create animation & CSS transition with Claude & Figma MCP
16:00 Introducing Github to Designers, Value & Purpose
19:32 Commit & Push to Github from VS Code
21:37 Your portfolio is live — Publishing live on GitHub Pages for free
—
SEARCH QUERIES THIS VIDEO ANSWERS
How to publish a design portfolio without coding
Figma MCP to code tutorial for designers
What is Claude Code and how do designers use it
How to use Claude Code as a developer without coding
Figma MCP vs Replit for designers
Publish designer portfolio free with GitHub Pages
Claude Code Figma MCP VS Code tutorial 2026
How designers can publish portfolios using AI
#FigmaMCP #DesignerPortfolio #NoCodeWebsite #ClaudeCode #UXDesign #PortfolioWebsite #AIForDesigners #FigmaTutorial #FreePortfolio #DesignTools2025