Design-to-Code Workshop with Claude Code, Cursor & Figma (Friends of Figma Miami - Feb 2026)
9K views · 2026-02-27
UI Design
You've seen the design-to-code demos. But what does it actually look like to set up your environment, clone a repo, prompt Claude Code, push changes to GitHub, and go back and forth between Figma and code all in one sitting?
Get our skills for free (PRD skill, Extract DS, and more) → https://designproject.io/skills-repo/?utm_source=youtube&utm_medium=video&utm_campaign=design_to_code_workshop&utm_content=description
Join TDP Community as a Founding Member NOW! ⭐→ https://designproject.io/community/?utm_source=youtube&utm_medium=description&utm_campaign=community_backfill&utm_content=design_to_code_workshop
Design to Code Workshop for Companies 🚀 Apply using this link → https://relay.designproject.io/design-to-code-workshop
WATCH MORE LIKE THIS:
▶️ Stop using V0 and Lovable to prototype, use Claude Code instead: https://youtu.be/hqIU6hluMZA?si=owf3lb95d4xMWrsm
▶️ I Built My Entire Design System in 4 Hours With AI. Full Tutorial (Claude + Cursor + Figma): https://youtu.be/nafNPuElCtY
▶️ Figma to Component Library in 2 days | Claude Code + Storybook Tutorial: https://youtu.be/AiEATeNyWnk?si=5T6SQR2CGdZUl0a2
In this live workshop at @friendsoffigmamiami7363, I walk a room full of designers through the entire design-to-code workflow from scratch. We take Andrej Karpathy's open-source LLM Council project, redesign it using Claude Code and Cursor, bring it into Figma with Figma MCP, and push it back to GitHub.
WHAT YOU’LL LEARN
- How to clone an open-source repo and set up your environment in Cursor
- Using Claude Code's plan mode to get better results before writing a single line of code
- Prompting Claude Code to redesign a live product from a visual reference
- Connecting Figma MCP to go from code to Figma and back
- Committing and pushing your changes to GitHub
- How designers can start shipping real code without an engineering background
Resources:
- LLM Council Open Source Repo: https://github.com/karpathy/llm-council
- Cursor: https://www.cursor.com
- Claude Code Documentation: https://code.claude.com/docs
- Figma MCP Setup: https://help.figma.com/hc/en-us/sections/35280374295831-Figma-MCP-collection
CONNECT WITH ME: 🌐 https://designproject.io/ 💼 LinkedIn: /diannealter
About The Design Project: We help B2B SaaS product teams ship faster by combining AI tools with strategic design expertise. We've worked with 50+ teams (including companies acquired by Slack, Nvidia, and MrBeast) to cut product cycles in half using battle-tested AI workflows and design systems.
---
Get our skills for free (PRD skill, Extract DS, and more) → https://designproject.io/skills-repo/?utm_source=youtube&utm_medium=video&utm_campaign=design_to_code_workshop&utm_content=description
Join TDP Community as a Founding Member NOW! ⭐→ https://designproject.io/community/?utm_source=youtube&utm_medium=description&utm_campaign=community_backfill&utm_content=design_to_code_workshop
Design to Code Workshop for Companies 🚀 Apply using this link → https://relay.designproject.io/design-to-code-workshop
WATCH MORE LIKE THIS:
▶️ Stop using V0 and Lovable to prototype, use Claude Code instead: https://youtu.be/hqIU6hluMZA?si=owf3lb95d4xMWrsm
▶️ I Built My Entire Design System in 4 Hours With AI. Full Tutorial (Claude + Cursor + Figma): https://youtu.be/nafNPuElCtY
▶️ Figma to Component Library in 2 days | Claude Code + Storybook Tutorial: https://youtu.be/AiEATeNyWnk?si=5T6SQR2CGdZUl0a2
In this live workshop at @friendsoffigmamiami7363, I walk a room full of designers through the entire design-to-code workflow from scratch. We take Andrej Karpathy's open-source LLM Council project, redesign it using Claude Code and Cursor, bring it into Figma with Figma MCP, and push it back to GitHub.
WHAT YOU’LL LEARN
- How to clone an open-source repo and set up your environment in Cursor
- Using Claude Code's plan mode to get better results before writing a single line of code
- Prompting Claude Code to redesign a live product from a visual reference
- Connecting Figma MCP to go from code to Figma and back
- Committing and pushing your changes to GitHub
- How designers can start shipping real code without an engineering background
Resources:
- LLM Council Open Source Repo: https://github.com/karpathy/llm-council
- Cursor: https://www.cursor.com
- Claude Code Documentation: https://code.claude.com/docs
- Figma MCP Setup: https://help.figma.com/hc/en-us/sections/35280374295831-Figma-MCP-collection
CONNECT WITH ME: 🌐 https://designproject.io/ 💼 LinkedIn: /diannealter
About The Design Project: We help B2B SaaS product teams ship faster by combining AI tools with strategic design expertise. We've worked with 50+ teams (including companies acquired by Slack, Nvidia, and MrBeast) to cut product cycles in half using battle-tested AI workflows and design systems.
---