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.

here’s CSS GUI ( by Components AI) using GPT-4 to create website markup from a prompt and then expose the styles to be edited generatively

harley turan

13,016 subscribers

17,328 views • 3 years ago •via X (Twitter)

Science & Technology Education

Anya Rossi• Live Now

Private livecam show

3 Comments

gongqing3 years ago

@components_ai Looks great 👍

Salim Faraji Nyendwa3 years ago

@components_ai @SaveToNotion #tweet

End Feminism3 years ago

@components_ai it's good but instead of clicking the reload button to see different titles just show me all of them. The entire page can only have so many reasonable combinations. NO footer, footer, side bar left/right. Show thumbnails for all iterations and let users pick.

Related Videos

How to adjust starting prompt and switch to using GPT-4.

How to adjust starting prompt and switch to using GPT-4.

Mckay Wrigley

31,650 views • 3 years ago

With ChatGPT Images 2.0 we can now create an image from prompt, then with GPT 5.4 Pro convert it to a CAD model using ForgeCAD. > Prompt: Make a detailed wood gong fu tea tray.

With ChatGPT Images 2.0 we can now create an image from prompt, then with GPT 5.4 Pro convert it to a CAD model using ForgeCAD. > Prompt: Make a detailed wood gong fu tea tray.

Ruben Kostandyan

747,303 views • 2 months ago

From image to live website using GPT-4 vision and Replit ⠕ in less than a minute. Things are about to get so interesting. 🔥

From image to live website using GPT-4 vision and Replit ⠕ in less than a minute. Things are about to get so interesting. 🔥

Pietro Schirano

1,217,215 views • 2 years ago

3/ Create a dynamic video using Fliki AI tool Go to Fliki and paste the text generated by Chat GPT into the tool. This will create a video with a professional avatar presenting the product comparison. Here’s an example of a final video you can create in just 10 minutes:

William | IA

242,159 views • 1 year ago

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

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 views • 1 year ago

AI Makes It Dead Easy To Create Beautiful Landing Pages You can easily make an amazing-looking website with a simple prompt using the playground feature

AI Makes It Dead Easy To Create Beautiful Landing Pages You can easily make an amazing-looking website with a simple prompt using the playground feature

Bindu Reddy

38,069 views • 1 year ago

"This is how GPT-4 sees and hears itself" I used GPT-4 to describe itself. Then I used its description to generate an image, a video based on this image and a soundtrack. Tools I used: GPT-4, Midjourney, Kainber AI, Mubert, RunwayML This is the description I used that GPT-4 had of itself as a prompt to text-to-image, image-to-video, and text-to-music. I put the video and sound together in RunwayML.

"This is how GPT-4 sees and hears itself" I used GPT-4 to describe itself. Then I used its description to generate an image, a video based on this image and a soundtrack. Tools I used: GPT-4, Midjourney, Kainber AI, Mubert, RunwayML This is the description I used that GPT-4 had of itself as a prompt to text-to-image, image-to-video, and text-to-music. I put the video and sound together in RunwayML.

Kris Kashtanova

1,233,410 views • 3 years ago

GPT-5.2-high by OpenAI is off to a strong start in the Code Arena. ⚡️ If you’re new here: Code Arena is where AI models build full web apps, tools, and interactive sites — all from a single prompt. Watch the video to see GPT-5.2-high in action, then try your own prompt and reply with your creation below. ⬇️

GPT-5.2-high by OpenAI is off to a strong start in the Code Arena. ⚡️ If you’re new here: Code Arena is where AI models build full web apps, tools, and interactive sites — all from a single prompt. Watch the video to see GPT-5.2-high in action, then try your own prompt and reply with your creation below. ⬇️

Arena.ai

246,337 views • 6 months ago

Now in your stack: Storefront Web Components 🧩 Add commerce blocks to any website: • Integrate with embeddable building blocks • Customize using CSS

Now in your stack: Storefront Web Components 🧩 Add commerce blocks to any website: • Integrate with embeddable building blocks • Customize using CSS

Shopify Developers

44,465 views • 1 year ago

changed how I design with AI. I show how to build faster by adding a design system directly into the prompt, importing any website URL to get a strong starting point, then polishing everything in my own style. I also mix it with components and skills to keep the design consistent and more unique. GPT-5.5 cloning websites is honestly crazy good. The result can get very close to the original, then you can refine it and make it your own. Full breakdown in the comments.

changed how I design with AI. I show how to build faster by adding a design system directly into the prompt, importing any website URL to get a strong starting point, then polishing everything in my own style. I also mix it with components and skills to keep the design consistent and more unique. GPT-5.5 cloning websites is honestly crazy good. The result can get very close to the original, then you can refine it and make it your own. Full breakdown in the comments.

FHILY👑

57,007 views • 1 month ago

Paul Couvert Step 4: Tap the Emoji, and then tap Create to access DALL-E 3. Enter a prompt, and start generating AI images directly in any app!

Paul Couvert Step 4: Tap the Emoji, and then tap Create to access DALL-E 3. Enter a prompt, and start generating AI images directly in any app!

Rowan Cheung

29,922 views • 2 years ago

design tool experiments: ✍️ make design components graphically 🧑‍💻 generate code, using those components as a little design system (the idea is that you'll be able to build complicated interfaces by mocking them up in several artboards and 'attaching' them to your prompt)

design tool experiments: ✍️ make design components graphically 🧑‍💻 generate code, using those components as a little design system (the idea is that you'll be able to build complicated interfaces by mocking them up in several artboards and 'attaching' them to your prompt)

nate parrott

10,550 views • 1 year ago

.Andrew Mayne on: - creating the prompt engineering discipline - his journey from the circus to OpenAI (not a joke) - hitting the wall on AI progress - prompt engineering v2 - GPT-3 > GPT-5 ? - AI saving him from a shark Episode available at links below. Enjoy!

.Andrew Mayne on: - creating the prompt engineering discipline - his journey from the circus to OpenAI (not a joke) - hitting the wall on AI progress - prompt engineering v2 - GPT-3 > GPT-5 ? - AI saving him from a shark Episode available at links below. Enjoy!

Logan Kilpatrick

32,491 views • 2 years ago

The normies are beginning to get it - AI will change everything Start by vibe coding and build something using AI - a RAG chatbot - simple AI agent - front-end website A simple calorie tracker built with a single prompt!

The normies are beginning to get it - AI will change everything Start by vibe coding and build something using AI - a RAG chatbot - simple AI agent - front-end website A simple calorie tracker built with a single prompt!

Bindu Reddy

17,333 views • 1 year ago

Introducing Web to Design. Turn any website into an editable UI. Just paste a URL. Create new variants, different pages, or build components inspired by the original design. We’ve been using this internally a ton, it’s the fastest way to go from a raw idea to a prototype.

Introducing Web to Design. Turn any website into an editable UI. Just paste a URL. Create new variants, different pages, or build components inspired by the original design. We’ve been using this internally a ton, it’s the fastest way to go from a raw idea to a prototype.

Pietro Schirano

214,685 views • 3 months ago

Prompt: Create a rocket launch animation starting with engine ignition and heavy smoke, followed by a slow liftoff that accelerates, using HTML/CSS/JS in a single HTML file.

Prompt: Create a rocket launch animation starting with engine ignition and heavy smoke, followed by a slow liftoff that accelerates, using HTML/CSS/JS in a single HTML file.

Diego | AI 🚀 - e/acc

212,095 views • 6 months ago

GPT Engineer github: Specify what you want it to build, the AI asks for clarification, and then builds it. GPT Engineer is made to be easy to adapt, extend, and make your agent learn how you want your code to look. It generates an entire codebase based on a prompt.

GPT Engineer github: Specify what you want it to build, the AI asks for clarification, and then builds it. GPT Engineer is made to be easy to adapt, extend, and make your agent learn how you want your code to look. It generates an entire codebase based on a prompt.

AK

349,142 views • 3 years ago

I built a GPT-4 PaulGrahamAI to give you startup advice! No sign up required to use it! The chatbot uses the content on Paul Graham's website plus GPT-4 to provide answers with the sources. Built using

I built a GPT-4 PaulGrahamAI to give you startup advice! No sign up required to use it! The chatbot uses the content on Paul Graham's website plus GPT-4 to provide answers with the sources. Built using

Yasser

87,319 views • 3 years ago

FIFA World Cup 2026 cinematic stadium broadcast concept. Ultra-realistic live match atmosphere with global fan reaction cutaways. This video is made using the AI World Cup 2026 template by EaseMate AI Built using GPT Image 2. Animated and edited with Seedance on EaseMate AI_Official Designed to feel like a real FIFA/UEFA live broadcast experience. Prompt is in the Comment 👇 #EaseMateAI #FIFAWorldCup2026

FIFA World Cup 2026 cinematic stadium broadcast concept. Ultra-realistic live match atmosphere with global fan reaction cutaways. This video is made using the AI World Cup 2026 template by EaseMate AI Built using GPT Image 2. Animated and edited with Seedance on EaseMate AI_Official Designed to feel like a real FIFA/UEFA live broadcast experience. Prompt is in the Comment 👇 #EaseMateAI #FIFAWorldCup2026

Shami

160,372 views • 13 days ago