Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

generated this mockup w/ claude code yesterday... AI is decent at design if you can give it good references & more importantly, guide it to turn your idea into code

eptwts's profile picture

EP

119,236 subscribers

17,993 görüntüleme • 19 gün önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

Turn design into code with Claude Code + Figma. Through MCP, Claude sees your mockup at the data level—component hierarchies, design tokens, auto-layout rules—and translates it into production-ready code.
0:33

Turn design into code with Claude Code + Figma. Through MCP, Claude sees your mockup at the data level—component hierarchies, design tokens, auto-layout rules—and translates it into production-ready code.

Claude

2,597,925 görüntüleme • 11 ay önce

Claude Code w/ Opus 4.5 is the single greatest AI tool ever made It allows ANYONE to build out any app you can think of even with 0 coding experience If you've never use Opus before you're screwing up In this video I give you the COMPLETE Claude Code beginner's guide:
24:44

Claude Code w/ Opus 4.5 is the single greatest AI tool ever made It allows ANYONE to build out any app you can think of even with 0 coding experience If you've never use Opus before you're screwing up In this video I give you the COMPLETE Claude Code beginner's guide:

Alex Finn

66,313 görüntüleme • 8 ay önce

In Cursor you can *easily* turn comments into code. Just write in natural language what you want in your file. Then highlight it, use CMD+K, and ask the AI to translate it into code - and it will! Turn your thoughts right into apps.
6:50

In Cursor you can *easily* turn comments into code. Just write in natural language what you want in your file. Then highlight it, use CMD+K, and ask the AI to translate it into code - and it will! Turn your thoughts right into apps.

Mckay Wrigley

106,485 görüntüleme • 2 yıl önce

You can make your Figma designs functional with Claude AI Select component, go to Dev Mode and use Figma to Code plugin to turn to React/Tailwind. Copy the code and paste to Claude AI. Prompt "Create this component and center it". Then, "Make this functional", "Add rounded corners", "add hover states", "animate transitions". Don't forget to ask "always give full code". Otherwise, it might break the Artifact.
6:06

You can make your Figma designs functional with Claude AI Select component, go to Dev Mode and use Figma to Code plugin to turn to React/Tailwind. Copy the code and paste to Claude AI. Prompt "Create this component and center it". Then, "Make this functional", "Add rounded corners", "add hover states", "animate transitions". Don't forget to ask "always give full code". Otherwise, it might break the Artifact.

Meng To

171,880 görüntüleme • 1 yıl önce

Claude Code can now design stunning interfaces 🤯 There’s a free GitHub skill called UI UX Pro Max that upgrades Claude Code into a full UI and UX expert. Install it once and Claude suddenly builds cleaner layouts, better apps, and interfaces that actually look professional. Your AI can now code and design like a pro. 🚀
0:26

Claude Code can now design stunning interfaces 🤯 There’s a free GitHub skill called UI UX Pro Max that upgrades Claude Code into a full UI and UX expert. Install it once and Claude suddenly builds cleaner layouts, better apps, and interfaces that actually look professional. Your AI can now code and design like a pro. 🚀

Julian Goldie SEO

76,743 görüntüleme • 4 ay önce

Claude Code feels completely different once you install this. Anthropic quietly released an official plugin called claude-code-setup and it basically turns Claude Code from “pretty good” into an actual AI dev environment. It scans your project and recommends: → hooks → skills → MCP servers → subagents → automations Then sets everything up step-by-step for you. Most people are using Claude Code completely vanilla… which is why their experience feels messy. The real power comes from the ecosystem around it. Install: /plugin install claude-code-setup@claude-plugins-official Bookmark this before you forget it.
0:26

Claude Code feels completely different once you install this. Anthropic quietly released an official plugin called claude-code-setup and it basically turns Claude Code from “pretty good” into an actual AI dev environment. It scans your project and recommends: → hooks → skills → MCP servers → subagents → automations Then sets everything up step-by-step for you. Most people are using Claude Code completely vanilla… which is why their experience feels messy. The real power comes from the ecosystem around it. Install: /plugin install claude-code-setup@claude-plugins-official Bookmark this before you forget it.

Radha Tripathi

75,447 görüntüleme • 3 ay önce

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.
12:14

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,663 görüntüleme • 2 ay önce

Here is how you can give Claude Code access to any data that exists online. It's an easy way to make it 10x more powerful than it already is. For example: Use Claude Code to find open LinkedIn jobs in your area, tailor your resume to them, and apply for them automatically.
4:52

Here is how you can give Claude Code access to any data that exists online. It's an easy way to make it 10x more powerful than it already is. For example: Use Claude Code to find open LinkedIn jobs in your area, tailor your resume to them, and apply for them automatically.

Santiago

178,854 görüntüleme • 7 ay önce

Cursor for Design? This Claude Code UI workflow is insane And many vibe coders not aware of it: 1. Claude Code can assign parallel tasks to sub agents 2. Integrate with git worktree to create sandbox env This means you can get Claude Code generate 10 design at the same time, fork & iterate 🔁 Design is an explorative process, by leveraging sub agent + parallel task capabilities, many interesting product UX can be built; Also turned this workflow into an open-source IDE extension here:
16:38

Cursor for Design? This Claude Code UI workflow is insane And many vibe coders not aware of it: 1. Claude Code can assign parallel tasks to sub agents 2. Integrate with git worktree to create sandbox env This means you can get Claude Code generate 10 design at the same time, fork & iterate 🔁 Design is an explorative process, by leveraging sub agent + parallel task capabilities, many interesting product UX can be built; Also turned this workflow into an open-source IDE extension here:

Jason Zhou

40,635 görüntüleme • 1 yıl önce

TURN CLAUDE CODE INTO AN AI SEO MACHINE. From content and keyword workflows to full search optimization, this is the kind of setup that can turn Claude into a real traffic engine.
7:34

TURN CLAUDE CODE INTO AN AI SEO MACHINE. From content and keyword workflows to full search optimization, this is the kind of setup that can turn Claude into a real traffic engine.

0xMarioNawfal

63,961 görüntüleme • 4 ay önce

Claude Code UI is now available in VSCode via CodeGPT extension! 🙌 You can now run Claude Code directly in your editor and control the planning process. You can pause it, edit tasks, or add new ones while Claude is working. This helps keep Claude on track and makes it way more effective since you can adjust things as it goes. Setup: - Download the extensión - Click the Claude Code OAuth - Authorize the extension - Paste your account code to link Claude Code directly - Done ✅ Works on VSCode and JetBrains editors (Android Studio, IntelliJ, PyCharm, etc.) VSCode : Jetbrains:
0:48

Claude Code UI is now available in VSCode via CodeGPT extension! 🙌 You can now run Claude Code directly in your editor and control the planning process. You can pause it, edit tasks, or add new ones while Claude is working. This helps keep Claude on track and makes it way more effective since you can adjust things as it goes. Setup: - Download the extensión - Click the Claude Code OAuth - Authorize the extension - Paste your account code to link Claude Code directly - Done ✅ Works on VSCode and JetBrains editors (Android Studio, IntelliJ, PyCharm, etc.) VSCode : Jetbrains:

Daniel San

106,169 görüntüleme • 1 yıl önce

My Figma to AI Code plugin is live Turn your designs into production-level code generated by Claude AI. Create React components, SwiftUI prototypes, HTML+CSS pages, Tailwind styles with custom prompts. Preview for responsiveness and export fully working code to Cursor and Xcode. It's free with your own API keys
0:29

My Figma to AI Code plugin is live Turn your designs into production-level code generated by Claude AI. Create React components, SwiftUI prototypes, HTML+CSS pages, Tailwind styles with custom prompts. Preview for responsiveness and export fully working code to Cursor and Xcode. It's free with your own API keys

Meng To

76,017 görüntüleme • 1 yıl önce

Today is the day! Our most requested feature, design → code generation, is live: Go from idea → design → code in under a minute. You can now export generated UI designs to Tailwind CSS with Galileo. The fastest way to bring your ideas to life. 🚀
0:27

Today is the day! Our most requested feature, design → code generation, is live: Go from idea → design → code in under a minute. You can now export generated UI designs to Tailwind CSS with Galileo. The fastest way to bring your ideas to life. 🚀

Stitch by Google

26,134 görüntüleme • 2 yıl önce

You can now type "&" in the Claude Code CLI to start a task in the background and teleport it to Claude Code Web!
0:30

You can now type "&" in the Claude Code CLI to start a task in the background and teleport it to Claude Code Web!

Thariq

97,553 görüntüleme • 9 ay önce

How to hide the claude code sidebar in cursor without exiting it! now you can use the claude code extension in cursor and toggle it off when you need some space to code without an AI agent 😱
2:41

How to hide the claude code sidebar in cursor without exiting it! now you can use the claude code extension in cursor and toggle it off when you need some space to code without an AI agent 😱

Ian Nuttall

22,322 görüntüleme • 1 yıl önce

🎨 Introducing Genspark Design The next-gen AI for design and creation, powered by Claude Opus 4.7. From rough idea to professional design, no design background needed. - One tool for everything you design. UI prototypes, videos, HTML animations, posters — all in one place and production-ready. - Stay on-brand with your own design system. Upload your Figma files or save your designs, reuse them across every project, and share them with your team. - Ship it, don't just mock it. Turn any app or website design into working code with one click, built on Genspark Code. Start building at our launch price 👉
1:23

🎨 Introducing Genspark Design The next-gen AI for design and creation, powered by Claude Opus 4.7. From rough idea to professional design, no design background needed. - One tool for everything you design. UI prototypes, videos, HTML animations, posters — all in one place and production-ready. - Stay on-brand with your own design system. Upload your Figma files or save your designs, reuse them across every project, and share them with your team. - Ship it, don't just mock it. Turn any app or website design into working code with one click, built on Genspark Code. Start building at our launch price 👉

Genspark

179,614 görüntüleme • 2 ay önce

Claude Code is terrible at UI design and everyone knows it so this guy fixed it by building an MCP that gives Claude its own AI design tool instead of going back and forth between a design platform and your code editor, Claude now creates the designs itself and drops them straight into your codebase the MCP has full context of your existing design system and project so everything it generates actually matches what you already have. one command to set up and it installs the MCP and skill files so Claude instantly knows how to use it if you're tired of the same Inter font, purple gradient, card grid layout on every project, this is definitely worth trying
0:58

Claude Code is terrible at UI design and everyone knows it so this guy fixed it by building an MCP that gives Claude its own AI design tool instead of going back and forth between a design platform and your code editor, Claude now creates the designs itself and drops them straight into your codebase the MCP has full context of your existing design system and project so everything it generates actually matches what you already have. one command to set up and it installs the MCP and skill files so Claude instantly knows how to use it if you're tired of the same Inter font, purple gradient, card grid layout on every project, this is definitely worth trying

Om Patel

401,101 görüntüleme • 4 ay önce

Claude Code is CRACKED at design now and I don't think people understand how BIG this is. There is now one tool that takes you from a rough idea to fully designed, agency-tier, App Store-ready screens in minutes. One design system, every screen, real native code. Most builders hand design to Claude Code, get AI-default screens, and wonder why their app looks like every other vibe coded project. This is the 3-step workflow that fixes it: (full breakdown in the article)
0:37

Claude Code is CRACKED at design now and I don't think people understand how BIG this is. There is now one tool that takes you from a rough idea to fully designed, agency-tier, App Store-ready screens in minutes. One design system, every screen, real native code. Most builders hand design to Claude Code, get AI-default screens, and wonder why their app looks like every other vibe coded project. This is the 3-step workflow that fixes it: (full breakdown in the article)

Prajwal Tomar

105,989 görüntüleme • 1 ay önce

Nobody is writing 90% of their code using AI. Here's the uncomfortable truth: The real productivity gain from using AI to write code is closer to 10%, nowhere near the 90% people claim. Sundar Pichai said in 2024 that 30% of the new code at Google was AI-generated. However, he went on to admit, during Lex Friedman's podcast, that engineering velocity had only increased by about 10%. AI-generated code isn't free code. It still has to be reviewed, tested, and made production-ready. Optimizing a single step (code generation) doesn't boost output if bottlenecks shift elsewhere (code reviews). It doesn't matter how much code you generate if you can't keep up the review process. The solution: Automate as much as you can the review and verification of your code. I'm working with Sonar, who is sponsoring this post, and they will take care of the code quality and security analysis of your code: • They review over 300B lines of code every single day • They cover reliability, security, and maintainability for your code • You can integrate them into your CI/CD pipeline • You can install them in your IDE (I use their VSCode extension) • Support for more than 30 languages Here is a link so you can check them out:
4:42

Nobody is writing 90% of their code using AI. Here's the uncomfortable truth: The real productivity gain from using AI to write code is closer to 10%, nowhere near the 90% people claim. Sundar Pichai said in 2024 that 30% of the new code at Google was AI-generated. However, he went on to admit, during Lex Friedman's podcast, that engineering velocity had only increased by about 10%. AI-generated code isn't free code. It still has to be reviewed, tested, and made production-ready. Optimizing a single step (code generation) doesn't boost output if bottlenecks shift elsewhere (code reviews). It doesn't matter how much code you generate if you can't keep up the review process. The solution: Automate as much as you can the review and verification of your code. I'm working with Sonar, who is sponsoring this post, and they will take care of the code quality and security analysis of your code: • They review over 300B lines of code every single day • They cover reliability, security, and maintainability for your code • You can integrate them into your CI/CD pipeline • You can install them in your IDE (I use their VSCode extension) • Support for more than 30 languages Here is a link so you can check them out:

Santiago

296,637 görüntüleme • 11 ay önce

Omg... you can turn Claude Code into a pro designer? Apparently you can turn any Figma Board into a Claude Skill... If you want early access to the web app... Reply below 👇 we will DM.
1:48

Omg... you can turn Claude Code into a pro designer? Apparently you can turn any Figma Board into a Claude Skill... If you want early access to the web app... Reply below 👇 we will DM.

Vibecode

74,754 görüntüleme • 8 ay önce