Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

My workflow now: - Design the first path in Figma - Hook up Claude Code to Figma MCP - Prompt: "Build this with Tailwind + Shadcn" - Then generate design system docs + demo page Side note: So many cool products being built, but I'm irrationally happy about a... show more

Tommy Geoco 🇺🇸

18,408 subscribers

59,278 views • 9 months ago •via X (Twitter)

Science & Technology

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

After testing every AI toolchain for a year, this is the only workflow I'm endorsing: Figma → Claude Code (Sonnet 4.5) Here's how I'm building Lorelight: 1. Design the happy path in Figma 2. Feed it to Claude Code via Figma MCP 3. Get a strong foundation in 15 minutes 4. Spend the next 50+ hours iterating (still design work) The design/dev loop that used to be isolated is finally closing. I even built a complete design system in within minutes. Custom components, living documentation, accessibility rules all from the Figma designs. If you're measuring the effectiveness of these tools by whether they can "one-shot" a design, you're consuming too many AI hype commercials. Log off. Then go actually build something with your hands. With AI. With your taste. Stop trying to "one-shot" good shit. And go make stuff with the new tools. For designers who want to ship real products, this is the stack that's getting it done.

After testing every AI toolchain for a year, this is the only workflow I'm endorsing: Figma → Claude Code (Sonnet 4.5) Here's how I'm building Lorelight: 1. Design the happy path in Figma 2. Feed it to Claude Code via Figma MCP 3. Get a strong foundation in 15 minutes 4. Spend the next 50+ hours iterating (still design work) The design/dev loop that used to be isolated is finally closing. I even built a complete design system in within minutes. Custom components, living documentation, accessibility rules all from the Figma designs. If you're measuring the effectiveness of these tools by whether they can "one-shot" a design, you're consuming too many AI hype commercials. Log off. Then go actually build something with your hands. With AI. With your taste. Stop trying to "one-shot" good shit. And go make stuff with the new tools. For designers who want to ship real products, this is the stack that's getting it done.

Tommy Geoco

22,905 views • 9 months ago

A designer who can ship code is one of the most valuable hires in tech today. Here's my new episode with Felix Lee (CEO of ADPList) where he showed me how to use Claude Code and Figma MCP to go from: ✅ Figma → Code: Design to website in 15 min ✅ Code → Figma: App back to editable design Felix also demoed a few apps he's designed and built in Claude Code, including a 3D globe website and a landing page analyzer. Some takeaways from Felix: 1. Stop pasting screenshots into Claude Code. Instead, use Figma MCP to pull in all your assets, icons, and images automatically. 2. You can use the same MCP to convert code back into editable Figma layers to explore more variations. 3. An underrated way to build: Use FigJam to plan a flowchart of your app first, then paste the link into Claude Code with the MCP. 📌 Watch now: Thanks to our sponsors: Replit ⠕: Plan, design, and build with AI agents Linear: The AI agent platform for modern teams

A designer who can ship code is one of the most valuable hires in tech today. Here's my new episode with Felix Lee (CEO of ADPList) where he showed me how to use Claude Code and Figma MCP to go from: ✅ Figma → Code: Design to website in 15 min ✅ Code → Figma: App back to editable design Felix also demoed a few apps he's designed and built in Claude Code, including a 3D globe website and a landing page analyzer. Some takeaways from Felix: 1. Stop pasting screenshots into Claude Code. Instead, use Figma MCP to pull in all your assets, icons, and images automatically. 2. You can use the same MCP to convert code back into editable Figma layers to explore more variations. 3. An underrated way to build: Use FigJam to plan a flowchart of your app first, then paste the link into Claude Code with the MCP. 📌 Watch now: Thanks to our sponsors: Replit ⠕: Plan, design, and build with AI agents Linear: The AI agent platform for modern teams

Peter Yang

77,115 views • 3 months ago

Spent the day testing Claude Opus 4.7. Last month I built a design director agent for OpenClaw and now it cooks. 15 minutes in, Paper Design MCP + Claude Code had made me a rough draft. In under an hour, a Framer worthy site. My workflow: 1. Feed my agent references so it can extract design systems and lock in on my taste 2. Claude Code calls Paper Design MCP to generate the visual system (just keep the Paper app open) 3. Paper exports the assets and Claude Code then preps the build docs 4. Agent loops back, critiques, iterates Got no clue why anyone is paying $10K for a website anymore. It’s easy now.

Spent the day testing Claude Opus 4.7. Last month I built a design director agent for OpenClaw and now it cooks. 15 minutes in, Paper Design MCP + Claude Code had made me a rough draft. In under an hour, a Framer worthy site. My workflow: 1. Feed my agent references so it can extract design systems and lock in on my taste 2. Claude Code calls Paper Design MCP to generate the visual system (just keep the Paper app open) 3. Paper exports the assets and Claude Code then preps the build docs 4. Agent loops back, critiques, iterates Got no clue why anyone is paying $10K for a website anymore. It’s easy now.

klöss

14,522 views • 3 months ago

At this point, I have become lazy af. Figma connected to Cursor via my MCP and Opus 4.6 is designing a dashboard using Shadcn design system which is in the team library. So you chat in cursor, get designs in figma. Everything is designed according to your design system. Is this the dream of a designer?

At this point, I have become lazy af. Figma connected to Cursor via my MCP and Opus 4.6 is designing a dashboard using Shadcn design system which is in the team library. So you chat in cursor, get designs in figma. Everything is designed according to your design system. Is this the dream of a designer?

AK

91,951 views • 5 months ago

figma "god mode" just leaked.. this week i tried the future of autonomous design: claude connected directly to the figma api with full edit access.. yes it can design in figma what does it mean? you prompt, it designs. it’s like having a team of designers inside figma working with you and 10x ing your capacity why is this different? official figma ai/mcp only "reads" files to help devs. this tool (unofficial MCP) "writes" in figma to replace manual labor. hours of grinding turned into seconds of waiting imagine this: - prompt to design: generate a new screen based on your design or not - prompt to flow: generate end to end user journeys - iteration: create multiple variations in one click - design system: it can use your components to create new screens - zero click management: auto layout, component creation, deduplication handled by prompt - universal control: if you can do it in figma, it can do it for you the impact if figma officially releases this, almost every existing plugin becomes obsolete overnight it feels like figma on steroids. i’m still processing whether i feel empowered or replaced full tutorial in this article from Mark A. Cianfrani. handle with care: ai will have access to everything in figma »

figma "god mode" just leaked.. this week i tried the future of autonomous design: claude connected directly to the figma api with full edit access.. yes it can design in figma what does it mean? you prompt, it designs. it’s like having a team of designers inside figma working with you and 10x ing your capacity why is this different? official figma ai/mcp only "reads" files to help devs. this tool (unofficial MCP) "writes" in figma to replace manual labor. hours of grinding turned into seconds of waiting imagine this: - prompt to design: generate a new screen based on your design or not - prompt to flow: generate end to end user journeys - iteration: create multiple variations in one click - design system: it can use your components to create new screens - zero click management: auto layout, component creation, deduplication handled by prompt - universal control: if you can do it in figma, it can do it for you the impact if figma officially releases this, almost every existing plugin becomes obsolete overnight it feels like figma on steroids. i’m still processing whether i feel empowered or replaced full tutorial in this article from Mark A. Cianfrani. handle with care: ai will have access to everything in figma »

Aurelien

78,970 views • 5 months ago

To add onto my point. This website took ca 2 hours to design + build out with claude - and it has infinitely more opportunity (with my lacking knowledge) for growth and improvement. Built using shadcn + agentation + a bit of messing around in figma.

To add onto my point. This website took ca 2 hours to design + build out with claude - and it has infinitely more opportunity (with my lacking knowledge) for growth and improvement. Built using shadcn + agentation + a bit of messing around in figma.

kosta4a

23,323 views • 3 months ago

damn its so easy to go from design -> code with Figma MCP + Claude Code. literally just one click of a button, and the code is ready! still a lot of polishing to do, but this has helped us make development ~50% faster 😁

damn its so easy to go from design -> code with Figma MCP + Claude Code. literally just one click of a button, and the code is ready! still a lot of polishing to do, but this has helped us make development ~50% faster 😁

Marcel

54,348 views • 5 months ago

This guy literally broke down everything to build a 21 agent dev team in Claude Code: 0:00 - Why one prompt = AI slop 1:55 - Claude Code as your full startup 2:43 - The 21-agent team 4:57 - Inside the system analyst agent 5:52 - Live demo: 0 → TestFlight 8:42 - Define a "good" system analyst first 11:53 - The system analyst workflow 12:17 - Why Confluence + Jira + MCPs matter 15:30 - Classic PM skills > vibe coding 19:15 - The scaffolding that kills spaghetti code 22:10 - Setting up agents inside Claude Code 26:19 - The longest dictation prompt this podcast has seen 35:29 - Why dictation beats typing for AI specs 47:30 - Brand guidelines in Figma Make 55:59 - Idea → prompt → design → app 1:06:27 - Claude Code builds the Figma screens 1:23:59 - Frontend tickets appear in Jira (with Figma links) 1:48:49 - The hockey rules AI app goes live 1:53:56 - Full recap: Claude, Confluence, Figma, Jira, Simulator, TestFlight 2:03:17 - Should PMs get AI PM certificates? 2:08:15 - How to build a PM portfolio that lands FAANG offers 2:13:25 - How to get started this week

Aakash Gupta

178,026 views • 2 months ago

Cat Wu, head of product for Claude Code at Anthropic: "you can build almost anything with Claude from a single prompt now" one prompt gets you a working screen, not YOUR product Claude Code has never seen your design system, so it guesses the look fresh every time. how to hand Claude Code that system is in the article. better than the $300 design course in your tabs, and this one's free.

Cat Wu, head of product for Claude Code at Anthropic: "you can build almost anything with Claude from a single prompt now" one prompt gets you a working screen, not YOUR product Claude Code has never seen your design system, so it guesses the look fresh every time. how to hand Claude Code that system is in the article. better than the $300 design course in your tabs, and this one's free.

Mnimiy

113,513 views • 1 month ago

do you understand what just shipped? → AI agents can now design directly on Figma’s canvas. not cheesy mockups… or lame screenshots… real native Figma assets wired to your actual design system → the use_figma MCP tool lets Claude Code, Codex, Cursor, and 6 other coding agents write directly to your Figma files → agents read your component library first and build with what already exists… variables, tokens, auto layout, the works → skills let you teach agents HOW your team designs. a skill is just a markdown file… anyone who understands Figma can write one → also works with Copilot CLI, Copilot in VS Code, Factory, Firebender, Augment, and Warp → free during beta… usage based pricing coming later the design to code gap that’s haunted every product team just collapsed in front of our eyes. designers hand off to agents now no need to wait on developers anymore everyone can take a deep breath now if you’re building products and not connecting Figma to your agents yet, you’re leaving serious speed on the table. set this up today. you’ll thank me later

do you understand what just shipped? → AI agents can now design directly on Figma’s canvas. not cheesy mockups… or lame screenshots… real native Figma assets wired to your actual design system → the use_figma MCP tool lets Claude Code, Codex, Cursor, and 6 other coding agents write directly to your Figma files → agents read your component library first and build with what already exists… variables, tokens, auto layout, the works → skills let you teach agents HOW your team designs. a skill is just a markdown file… anyone who understands Figma can write one → also works with Copilot CLI, Copilot in VS Code, Factory, Firebender, Augment, and Warp → free during beta… usage based pricing coming later the design to code gap that’s haunted every product team just collapsed in front of our eyes. designers hand off to agents now no need to wait on developers anymore everyone can take a deep breath now if you’re building products and not connecting Figma to your agents yet, you’re leaving serious speed on the table. set this up today. you’ll thank me later

klöss

101,073 views • 3 months ago

Today we’re launching Design Canvas for AI agents. AI can build a feature, but every "design tweak" turns into another prompt. We built a drag & drop editor for Claude Code, Cursor, Codex to explore and iterate on your UI, so you get the best design by default. No endless prompting. Ship better designs in code with Subframe.

Today we’re launching Design Canvas for AI agents. AI can build a feature, but every "design tweak" turns into another prompt. We built a drag & drop editor for Claude Code, Cursor, Codex to explore and iterate on your UI, so you get the best design by default. No endless prompting. Ship better designs in code with Subframe.

Irvin Zhan

300,134 views • 5 months ago

I just built my second app in 4 hours with Claude Code. From Figma design to fully functional. No code written. This shouldn't be possible. 😭 The first one took me a week. The second one took an afternoon. By next week I'll be shipping one before breakfast. >View in full.

I just built my second app in 4 hours with Claude Code. From Figma design to fully functional. No code written. This shouldn't be possible. 😭 The first one took me a week. The second one took an afternoon. By next week I'll be shipping one before breakfast. >View in full.

Tuki

182,385 views • 4 months ago

New open source project: Easel, a macOS workspace for AI-assisted product design and frontend iteration powered by the Codex SDK. Think of it as "Claude Design for Codex." It brings together a local project library, design-system setup, Codex chat, and a live web preview with a point-and-click inspector. Set up your design system however you like. Import one from Figma , bring your own, or have the agent generate it as a design.md. Then use it to build prototypes and slide decks. Codex-first, with Claude and other AI providers and local models planned for future releases. OpenAI Developers

New open source project: Easel, a macOS workspace for AI-assisted product design and frontend iteration powered by the Codex SDK. Think of it as "Claude Design for Codex." It brings together a local project library, design-system setup, Codex chat, and a live web preview with a point-and-click inspector. Set up your design system however you like. Import one from Figma , bring your own, or have the agent generate it as a design.md. Then use it to build prototypes and slide decks. Codex-first, with Claude and other AI providers and local models planned for future releases. OpenAI Developers

James Rochabrun

61,199 views • 1 month ago

I'm building a Figma plugin to generate design system variables/tokens 🛠️ After sharing the first demo, it grew too big, making it hard to manage and add new features. So, I restarted the project and cleaned up the code to make it easier to handle. Here’s detailed demo - It generate variable from preset and all alow to customize. Now, Just working on UI before final release I’ve already shared test version, who signed up. Let' me know if you wanna test.

I'm building a Figma plugin to generate design system variables/tokens 🛠️ After sharing the first demo, it grew too big, making it hard to manage and add new features. So, I restarted the project and cleaned up the code to make it easier to handle. Here’s detailed demo - It generate variable from preset and all alow to customize. Now, Just working on UI before final release I’ve already shared test version, who signed up. Let' me know if you wanna test.

vijay verma

21,818 views • 1 year ago

A good design workflow should create more clarity, not more tabs. That is why OptimAI Claw is useful. One prompt can now help automate parts of your workflow on Figma and Stitch -- from research and structure to faster execution inside the tools you already use. “Turn this idea into a clean landing page concept. Draft the layout in Figma. Generate a matching flow in Stitch.” Less switching. Less friction. More room to think. That is what agentic AI should feel like: quiet, useful, and already inside the workflow. OptimAI Claw is built for that. --- 💡Launch OptimAI Claw with Core Node v2:

A good design workflow should create more clarity, not more tabs. That is why OptimAI Claw is useful. One prompt can now help automate parts of your workflow on Figma and Stitch -- from research and structure to faster execution inside the tools you already use. “Turn this idea into a clean landing page concept. Draft the layout in Figma. Generate a matching flow in Stitch.” Less switching. Less friction. More room to think. That is what agentic AI should feel like: quiet, useful, and already inside the workflow. OptimAI Claw is built for that. --- 💡Launch OptimAI Claw with Core Node v2:

OptimAI Network

184,716 views • 2 months ago

Today we're shipping screen-aware dictation. First, we built a speedy speech-to-text (very fast, ~450ms). But, many products do this! So we went further. Now dictate using your screen as context. In Claude Code, it writes the prompt. In G-Mail, it replies in your voice. Demo:

Today we're shipping screen-aware dictation. First, we built a speedy speech-to-text (very fast, ~450ms). But, many products do this! So we went further. Now dictate using your screen as context. In Claude Code, it writes the prompt. In G-Mail, it replies in your voice. Demo:

Farza 🇵🇰🇺🇸

2,750,030 views • 4 days ago

Figma Capture + Claude Fable 5 = clone any competitor's landing page in minutes 🤯 Figma just dropped a Chrome extension that copy/pastes any live website into Figma as editable layers. Point Claude Code — running the new Fable 5 model — at the capture, and it rebuilds the whole page in YOUR brand: structure, copy, design system, photography. All inside Claude Code. Perfect for DTC brands and agencies who keep losing weeks rebuilding proven landers from scratch. If you're still cloning competitor pages the old way, You're screenshotting their site and praying the AI guesses the structure right. You're rebuilding sections by hand because the fonts and spacing never come out true. You're paying a designer $3K to recreate a page that already exists. This workflow eliminates the entire loop: → Capture the competitor's landing page with Figma's new Chrome extension — editable layers, not screenshots → Claude Code reads the page structure through the Figma MCP: every section, every headline, in order → It rebuilds the page in YOUR brand — your colors, your fonts, your voice (it even respects your banned-words list) → GPT Image 2 generates on-brand product photography from the layer names → Claude places every image automatically — finished page, ready to ship No screenshots. No guessing at structure. No design invoice. What you get: → A pixel-structured clone of any proven lander, rebuilt in your brand → Every line of copy rewritten in your voice → 16 on-brand images generated and placed for ~$2 in API costs → Start to finish in about 15 minutes Built 100% with Figma + Claude Code on Claude Fable 5. I put together a step-by-step playbook showing you exactly how to set it up. Want access for free? > Like this post > Comment "CLONE" And I'll send it over (must be following so I can DM)

Mike Futia

46,358 views • 1 month ago

Want to create beautiful, high-converting landing pages like this without spending days in Figma or Webflow? Here's my AI-first workflow: Start with Claude Have Claude interview you about the product, audience, positioning, features, concerns and tradeoffs using this prompt: "Create me a plan file for [Product Idea] and interview me in detail using the AskUserQuestionTool about literally anything: technical implementation, UI & UX, concerns, tradeoffs, etc." Turn the plan into a prototype Use the plan file to generate a working prototype and pull inspiration, layouts and motion ideas from Generate the landing page in code Skip static mockups and build directly in the browser. Run a design review Use the Design Review skill to identify hierarchy, spacing, branding, usability and accessibility issues. Iterate relentlessly Keep refining until it feels designed and polished, not generated. The future isn't designers vs AI. It's builders with great taste using AI as leverage. Anyone can generate. Taste is the moat. Follow for more AI design and vibe coding workflows. And if you want more practical systems like this, my book 'Think. Prompt. Create.' is available now on Amazon

Want to create beautiful, high-converting landing pages like this without spending days in Figma or Webflow? Here's my AI-first workflow: Start with Claude Have Claude interview you about the product, audience, positioning, features, concerns and tradeoffs using this prompt: "Create me a plan file for [Product Idea] and interview me in detail using the AskUserQuestionTool about literally anything: technical implementation, UI & UX, concerns, tradeoffs, etc." Turn the plan into a prototype Use the plan file to generate a working prototype and pull inspiration, layouts and motion ideas from Generate the landing page in code Skip static mockups and build directly in the browser. Run a design review Use the Design Review skill to identify hierarchy, spacing, branding, usability and accessibility issues. Iterate relentlessly Keep refining until it feels designed and polished, not generated. The future isn't designers vs AI. It's builders with great taste using AI as leverage. Anyone can generate. Taste is the moat. Follow for more AI design and vibe coding workflows. And if you want more practical systems like this, my book 'Think. Prompt. Create.' is available now on Amazon

Joey Primiani

470,774 views • 1 month ago

Midday's new website is out, and I'm so proud of Viktor. Viktor used to design in Figma, then hand it over to me. Now he uses Cursor and built the whole new site in Next.js, pushing it to Vercel. For a two-person team, this is the future.

Midday's new website is out, and I'm so proud of Viktor. Viktor used to design in Figma, then hand it over to me. Now he uses Cursor and built the whole new site in Next.js, pushing it to Vercel. For a two-person team, this is the future.

Pontus Abrahamsson — oss/acc

42,180 views • 6 months ago

The most complete AI design skill stack is now in Open Design. AI agents can build full apps. But most of them still design like shit. You used to spend more time fixing the design than building the app. And prompting harder does not fix taste. So Open Design integrated the design skills everyone on X is talking about: Taste Skill Hallmark Frontend Design Image-to-Code Design Review 100+ design systems It works locally with 20+ AI CLIs: Codex, Claude Code, Cursor, Gemini CLI, OpenCode, and more. Pick your agent. Generate pages that finally have taste. 👉

The most complete AI design skill stack is now in Open Design. AI agents can build full apps. But most of them still design like shit. You used to spend more time fixing the design than building the app. And prompting harder does not fix taste. So Open Design integrated the design skills everyone on X is talking about: Taste Skill Hallmark Frontend Design Image-to-Code Design Review 100+ design systems It works locally with 20+ AI CLIs: Codex, Claude Code, Cursor, Gemini CLI, OpenCode, and more. Pick your agent. Generate pages that finally have taste. 👉

Open Design

52,206 views • 1 month ago