Загрузка видео...

Не удалось загрузить видео

На главную

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

heyrobinai's profile picture

Robin Delta

87,098 subscribers

41,075 просмотров • 2 лет назад •via X (Twitter)

LIVE

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 🫶
0:58

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:
1:58

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)
0:20

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. 🚀
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,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
0:41

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.
1:52

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.
0:45

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,418 просмотров • 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.
1:15

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,875 просмотров • 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
0:54

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!
0:22

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.
3:18

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

25,662 просмотров • 4 месяцев назад

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
1:48

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,721 просмотров • 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
0:54

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.
0:54

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,379 просмотров • 4 месяцев назад

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,594,044 просмотров • 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
0:25

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,834 просмотров • 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 👉
0:31

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! 🔖
2:08

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 год назад

It's finally here! Untitled UI React is live ✨ Untitled UI React is the world’s largest collection of open-source React components built with Tailwind CSS v4.1 and React Aria. Just copy, paste, and build. 👇
1:02

It's finally here! Untitled UI React is live ✨ Untitled UI React is the world’s largest collection of open-source React components built with Tailwind CSS v4.1 and React Aria. Just copy, paste, and build. 👇

Jordan Hughes

243,721 просмотров • 11 месяцев назад