正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

1. Convert UI design to front-end code Prompt: Convert this design into a react component using tailwind css

Robin Delta

87,098 subscribers

41,075 次观看 • 2 年前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

9 条评论

Robin Delta 的头像

Robin Delta2 年前

7 ChatGPT-4o prompts that will turn you into a Superhuman. [Save it for later]:👇

Robin Delta 的头像

Robin Delta2 年前

2. Understand complex equations Prompt: What is this equation for? Explain how to use it

Robin Delta 的头像

Robin Delta2 年前

3. Extract text from images Prompt: Extract this recipe to a JSON file

Robin Delta 的头像

Robin Delta2 年前

4. Generate a recipe from a dish Prompt: Suggest a recipe for this dish

Robin Delta 的头像

Robin Delta2 年前

5. Recommend style improvements Prompt: What 3 things should I add to my deck? I want it to be modern and welcoming

Robin Delta 的头像

Robin Delta2 年前

6. Transcribe handwritten notes Prompt: Transcribe this white board for my meeting notes. Start with "Whiteboard notes"

Robin Delta 的头像

Robin Delta2 年前

7. Understand objects and how they're used Prompt: What is this and what is it used for?

Robin Delta 的头像

Robin Delta2 年前

Get your free gift: The ChatGPT Mastery Course. by joining my newsletter today. 👇

Kanishk Vashisht 的头像

Kanishk Vashisht2 年前

what does the end product look like?

相关视频

I built a free Figma to React plugin used by Lovable! In 1 click you can convert your Figma design into React + Tailwind CSS code They said it had better code gen than even paid plugins like Anima, Builderio, Framer, etc. but no one knew about it :( ✅ Try Figroot (it's completely free) Like + comment to help me share it 🫶

I built a free Figma to React plugin used by Lovable! In 1 click you can convert your Figma design into React + Tailwind CSS code They said it had better code gen than even paid plugins like Anima, Builderio, Framer, etc. but no one knew about it :( ✅ Try Figroot (it's completely free) Like + comment to help me share it 🫶

patti

16,274 次观看 • 5 个月前

Introducing Component Grab SuperDesign.Dev Chrome extension allows you to grab any UI component in browser We turn messy DOM into clean tailwind code pixel perfectly Paste into Superdesign AI native canvas to vibe design Or paste into Claude code/Cursor Free forever:

Introducing Component Grab SuperDesign.Dev Chrome extension allows you to grab any UI component in browser We turn messy DOM into clean tailwind code pixel perfectly Paste into Superdesign AI native canvas to vibe design Or paste into Claude code/Cursor Free forever:

Jason Zhou

78,413 次观看 • 6 个月前

UI Components Handbook Collection of popular user interface components with guides on how to use them, Figma design samples & code snippets (HTML/Tailwind CSS)

UI Components Handbook Collection of popular user interface components with guides on how to use them, Figma design samples & code snippets (HTML/Tailwind CSS)

Nick Babich

120,191 次观看 • 2 年前

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. 🚀

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,103 次观看 • 2 年前

as a design engineer I often get pinged for tiny front-end changes at the Cursor hackathon we used background agents to automatically convert design system updates into PRs 🎨✨ ft nathan Chamod Gamage Fate

as a design engineer I often get pinged for tiny front-end changes at the Cursor hackathon we used background agents to automatically convert design system updates into PRs 🎨✨ ft nathan Chamod Gamage Fate

mathurah

118,851 次观看 • 9 个月前

We've been ramping up usage of AI tools on our design team at Coinbase 🛡️ Two examples: 1. Write a text prompt and get a figma mockup as a starting point for your design 2. Click a button and turn any figma design into front-end code The front-end code it generates adheres to our design system, and is trained on our library of UIs Shout out to 🛡️ tali krakowsky apel🛡️ Blair McKee and the team pushing this forward.

We've been ramping up usage of AI tools on our design team at Coinbase 🛡️ Two examples: 1. Write a text prompt and get a figma mockup as a starting point for your design 2. Click a button and turn any figma design into front-end code The front-end code it generates adheres to our design system, and is trained on our library of UIs Shout out to 🛡️ tali krakowsky apel🛡️ Blair McKee and the team pushing this forward.

Brian Armstrong

520,346 次观看 • 2 年前

Today we’re launching an experimental @Figma plugin that will convert your design into runnable code. Generate a Repl directly from Figma, and instantly share a static React app with your team. Then, use Replit AI to add functionality and get your code production-ready.

Today we’re launching an experimental @Figma plugin that will convert your design into runnable code. Generate a Repl directly from Figma, and instantly share a static React app with your team. Then, use Replit AI to add functionality and get your code production-ready.

Replit ⠕

524,398 次观看 • 2 年前

Introducing HeroUI v3 🔥 A complete rewrite for React. A brand-new library for React Native. 🌐 Web → 75+ components, 21 new 📱 Native → 37+ components, built from scratch 🎨 Styling → Tailwind CSS v4, CSS variables, OKLCH, BEM ⚡ Performance → CSS animations, no JS runtime ♿ Accessibility → React Aria Components 🧩 Architecture → Compound components, headless-ready 🤖 AI → MCP Server, Agent Skills, LLMs.txt 📎 Figma Kit v3 with 1:1 component parity One design system. Beautiful everywhere.

HeroUI

530,440 次观看 • 2 个月前

you can steal react components from any website without source code most people screenshot UIs and ask AI to recreate them. but with react fiber, you can extract the exact component 1:1 - same styling, props, design system, component structure

you can steal react components from any website without source code most people screenshot UIs and ask AI to recreate them. but with react fiber, you can extract the exact component 1:1 - same styling, props, design system, component structure

david fant

323,395 次观看 • 5 个月前

Convert any image into an animated 3D model for your web or app design!

Convert any image into an animated 3D model for your web or app design!

Jan Mraz

41,270 次观看 • 7 个月前

Raydian 2.0 is live 🎉 Vibe-design your app, and we'll convert it into a working product autonomously. Go give it a spin, the design stage is free to use.

Raydian 2.0 is live 🎉 Vibe-design your app, and we'll convert it into a working product autonomously. Go give it a spin, the design stage is free to use.

Raydian

24,677 次观看 • 3 个月前

shadcn/ui patterns. No React. No build. Just Rails. Maquina Components gives you the same component architecture — ERB partials + StimulusJS + Tailwind CSS v4. Claude skill for AI-assisted dev: #Rails #RubyOnRails

shadcn/ui patterns. No React. No build. Just Rails. Maquina Components gives you the same component architecture — ERB partials + StimulusJS + Tailwind CSS v4. Claude skill for AI-assisted dev: #Rails #RubyOnRails

Mario Alberto Chávez

29,719 次观看 • 4 个月前

Have you tried the Replit Design Canvas yet? 👀 1. Generate multiple design variants 2. Convert your design into app 3. Fine tune designs with design controls 4. Sketch your idea & make it real 5. Collaborate with your team on designs

Have you tried the Replit Design Canvas yet? 👀 1. Generate multiple design variants 2. Convert your design into app 3. Fine tune designs with design controls 4. Sketch your idea & make it real 5. Collaborate with your team on designs

Replit ⠕

54,600 次观看 • 2 个月前

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

299,227 次观看 • 3 个月前

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.

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,593,302 次观看 • 8 个月前

Grok 4.3 beta’s front-end capabilities are totally insane I just put only this prompt: “design a website for kids toys” It generated a super clean UI that actually looks premium and very interesting

Grok 4.3 beta’s front-end capabilities are totally insane I just put only this prompt: “design a website for kids toys” It generated a super clean UI that actually looks premium and very interesting

X Freeze

877,556 次观看 • 1 个月前

Product Launch 📢✨ Introducing "Tailwind CSS Notion Handbook" ↳ Tailwind CSS Basics ↳ 30 Tailwind CSS Tips ↳ 10 Bonus Tips ↳ Production Checklist ↳ UI Kits & Templates ↳ 20+ Tools & Resources Launch Price: $9 for 24 hours ⏰ Code: LAUNCH75 👉

Product Launch 📢✨ Introducing "Tailwind CSS Notion Handbook" ↳ Tailwind CSS Basics ↳ 30 Tailwind CSS Tips ↳ 10 Bonus Tips ↳ Production Checklist ↳ UI Kits & Templates ↳ 20+ Tools & Resources Launch Price: $9 for 24 hours ⏰ Code: LAUNCH75 👉

Surjith S M ✪

93,727 次观看 • 3 年前

Struggling to make your UI stand out? CSSnippets – A collection of modern, reusable UI components! ✨Ready-to-use with HTML, CSS, React & Tailwind CSS ✨No frameworks, just pure CSS ✨Clean, minimal, and beautiful 🔗 Explore now: Save it for later! 🔖

Struggling to make your UI stand out? CSSnippets – A collection of modern, reusable UI components! ✨Ready-to-use with HTML, CSS, React & Tailwind CSS ✨No frameworks, just pure CSS ✨Clean, minimal, and beautiful 🔗 Explore now: Save it for later! 🔖

Shefali

22,953 次观看 • 1 年前

Don't know what it's called but made this component with React and Tailwind in 1 hour

Don't know what it's called but made this component with React and Tailwind in 1 hour

Sam ☕

527,958 次观看 • 7 个月前