Build a FREE Design Portfolio with AI (No Code) | Figma MCP + Claude Code Tutorial

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:    • Claude + Figma MCP — Updated Setup for Des...   First setup video upon release:    • Figma + Claude Code MCP Server Setup for D...   Connect Design System with Claude:    • Connect Claude with Figma Design System | ...   Build Design System with Claude:    • How to Build a Design System with Claude +...   Claude Design:    • Claude Design Tutorial for Designers | Fir...   Claude Cowork:    • Claude Cowork for Designers — Full Beginne...   Figma Skills:    • Figma MCP Skills in Claude | Deep Dive for...   Claude Skills:    • Claude Skills for Designers | Create Your ...   👩🏻‍💻 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:   / nehmatgereige   ❎ X: https://x.com/33Nehmat Ⓜ️ Medium:   / nehmat.gereige   🌈 Figma Creations: https://www.figma.com/@nehmatgereige 🌸 FREE Professional Courses 🌸 🤖 The New AI-Design Workflow — Claude AI + Figma (FREE Course):    • Claude AI for Designers: The New AI-Design...   ☸️ Codex & Chatgpt for Designers:    • Codex & Chatgpt For Designers   🔥 Figma MAKE — 0 to Expert (FREE Course): https://www.youtube.com/playlist?list... 🌈 Complete Figma for Beginners 2025 (FREE Course):    • Figma Design for Beginners: Complete Course   🧘🏻‍♀️ Career in UX/UI Design (FREE Course):    • Career in UX/UI/Product Design   — 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