50 Designers used Claude Code to Design a Layout

DesignCourse · Beginner ·🧠 Large Language Models ·4mo ago

Key Takeaways

The video discusses the results of a challenge where 50 designers used Claude Code to design a layout for a fictional AI home inspection business, with a focus on the similarities and differences in their designs and the role of prompting in determining the outcomes.

Full Transcript

All right. So, this is wild. I asked a bunch of designers a couple days ago to create a fictional landing page using claude code. All AI code only prompting. And take a look at these results. All right. Kind of just, you know, mid if you will. Then this one. All right. A little similar, right? Okay. I think we're seeing a like a theme playing out here. What is going on? Look at all these. You would think they're using the same exact prompt. So, I'm going to talk about why the heck some of these are so freaking similar. You know, like the AI slop, like, "Hey, that looks like it was generated by I AI." But also, I'm going to show you some of the better ones. And before I do that, this came from this challenge that I'm currently running at designcourse.com. You can take it now. And the idea is we learn AI/design through a number of fun community challenges where you can like raid each other and stuff. So, here's like one of the first challenges. uh you can just go through, you can raid people, you can see which ones I've done a video response to. Anyways, enough of that spam, but we're going to talk about why. Why are some of those designs so freaking similar? And this all comes down to prompting and the deterministic nature of these LLMs. So, just take a look at one of the part of the prompts from one of these submissions on the right. Create a fictional but sophisticated UI animation that simulates a scanning effect over a house. Use a deep navy electric emerald gold palette. Output this as clean, yada yada yada. How about another one? Um, on the right should be an illustration of a house with icons and text for an AI defect detection, crawl space, roof analysis, etc. And then how about one more before I get to my point. The right side visual, a mockup of a dashboard showing AI defect detection, bounding boxes on roof cracks, foundation issues, blah blah blah blah. Okay, so there's a couple reasons why those particular results were so similar. And really, it comes down to context, right? What you're feeding into it. A part of their prompt was this thing right here. This is uh the AI inspection business. This came as a part of the challenge that you get when you join that challenge. So, computer vision analyzes crawl space roof foundation images for common defects and autogenerate standardized inspection reports. So people pasted that in along with their prompts. And together those two factors, them kind of just having the same idea, but also including this prompt right here, computer vision, which is what the bounding boxes are, gives you very similar results. Now, I'm going to show you a few results that I thought were actually pretty good and unique in and of themselves. So here's one by Sandro. So let me get this expanded here. And this is actually pretty solid based on the prompt. Um, and I think it only took in three prompts. And this gets the idea away, you know, pretty good. And the UI, you know, fundamentals are all there. Um, and then if we just open this up real quick, we can see right here, this is the actual prompt that he used. And one of the interesting things, this is just three prompts right here, is uh the f the final prompt just said, "Good. Instead of the front of the house, open it up. I want an internal view of the house. And it did a really good job of doing, you know, like an internal view of a house. And the takeaway here is just be specific. Don't just give it whatever it spits out back at you without doing revisions. This one's nice as well, and it's not all that similar to the other ones. Yeah, there's still like a house, but it's a floor plan. It's a little bit more unique. And again, all the other fundamentals are pretty much there for the most part uh with this entry. Then here's another one. Although I think this person used Nano Banana for this image just to generate something unique and then you know have the rest of this stuff up top. Kind of reminds me of the old school Apple. This one by Sky is really solid here for the most part. Um there's some issues with like uh color contrast and all that, but at least it's way more different. And what's really telling is what this person said. When I initially started working on this, I got the same overall design that a lot of people seem to have gotten. to me it didn't feel premium enough and I freaking 100% agree. So that's why you need to follow up. This isn't just a one or two threep prompt process. You want to get the most out of it and you want to try to be unique. Here's a final entry and this is kind of like an honorable mention. There's one big issue with the type in the middle. It's not really something that contrasts well with that background but still everything else. It has a nice unique aesthetic and he didn't really follow you know the same sort of two column playbook. Now, there's a bunch more that you can actually just browse by clicking the link here. You can join up. It's free. It just requires an email and that's it. And you can also participate in these. So, tomorrow I'm going to be releasing the next one and it's going to be another unique challenge of some sort where we use AI in conjunction perhaps with our handdriven skills. We have a lot of fun ones coming up. I hope to see you join.

Original Description

Take the challenge: https://designcourse.com/app/foundations/2026-uiux Level up your coding skills: https://scrimba.com?via=designcourse (Get 20% off) -- A few days ago, I tasked designers to create a landing page for the same fictional business (AI Home Inspection Business). Many of them look very similar, despite the instructions telling them to make it unique and infuse their own sense of design. Why were so many of them similar? What did the unique ones do better? Let's LOOK! #ai #claude #vibe Take the challenge, it's free: https://designcourse.com/app/foundations/2026-uiux - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS! Learn UI/UX: https://designcourse.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Designcourse.com. Come to my discord server or add me on social media and say Hi!
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from DesignCourse · DesignCourse · 0 of 60

← Previous Next →
1 Photoshop Pen Tool Tutorial (Tattoo Design)
Photoshop Pen Tool Tutorial (Tattoo Design)
DesignCourse
2 How to Design the Microsoft Logo in Photoshop
How to Design the Microsoft Logo in Photoshop
DesignCourse
3 Photoshop Gradients Video Tutorial
Photoshop Gradients Video Tutorial
DesignCourse
4 Your Guide to Layer Styles
Your Guide to Layer Styles
DesignCourse
5 Layer Masks in Photoshop
Layer Masks in Photoshop
DesignCourse
6 iOS App Icon Design Tutorial in Illustrator CS6
iOS App Icon Design Tutorial in Illustrator CS6
DesignCourse
7 Illustrator CS6 Logo Design Tutorial - Archfold
Illustrator CS6 Logo Design Tutorial - Archfold
DesignCourse
8 Photoshop CS6 3D Tutorial - Magic Tent Illustration
Photoshop CS6 3D Tutorial - Magic Tent Illustration
DesignCourse
9 How to Design a Tshirt Tutorial - Adobe Illustrator
How to Design a Tshirt Tutorial - Adobe Illustrator
DesignCourse
10 Types of Logos - Lettermark & Monogram Logo Type
Types of Logos - Lettermark & Monogram Logo Type
DesignCourse
11 Banner Design in Photoshop CS6
Banner Design in Photoshop CS6
DesignCourse
12 How to Design a Logo in Illustrator CC
How to Design a Logo in Illustrator CC
DesignCourse
13 Designing a Logo in Photoshop CC
Designing a Logo in Photoshop CC
DesignCourse
14 1. Launch & Market a Web Based Business - Introduction
1. Launch & Market a Web Based Business - Introduction
DesignCourse
15 2. Launch & Market a Web Based Business - Logo Design
2. Launch & Market a Web Based Business - Logo Design
DesignCourse
16 3. Home Page Mockup in PS : Part 1
3. Home Page Mockup in PS : Part 1
DesignCourse
17 4. Home Page Mockup in PS : Part 2
4. Home Page Mockup in PS : Part 2
DesignCourse
18 5. Home Page Mockup in PS : Part 3
5. Home Page Mockup in PS : Part 3
DesignCourse
19 6. Home Page Mockup in PS : Part 4
6. Home Page Mockup in PS : Part 4
DesignCourse
20 7. Home Page HTML & CSS - Part 1
7. Home Page HTML & CSS - Part 1
DesignCourse
21 8. Home Page HTML & CSS - Part 2
8. Home Page HTML & CSS - Part 2
DesignCourse
22 Using Photoshop to Showcase Mobile Projects
Using Photoshop to Showcase Mobile Projects
DesignCourse
23 Flat Icon Design Tutorial in Illustrator CC
Flat Icon Design Tutorial in Illustrator CC
DesignCourse
24 Illustrator CC Logo Design Tutorial - A Logo That "Pops"!
Illustrator CC Logo Design Tutorial - A Logo That "Pops"!
DesignCourse
25 Logo Design Follow Along 1: Emblem Logo Design
Logo Design Follow Along 1: Emblem Logo Design
DesignCourse
26 Showcasing Logos in 3D with Blender
Showcasing Logos in 3D with Blender
DesignCourse
27 How to Design an Effective Lettermark Logo
How to Design an Effective Lettermark Logo
DesignCourse
28 Squeeze Page Design Tutorial in Photoshop (Part 1)
Squeeze Page Design Tutorial in Photoshop (Part 1)
DesignCourse
29 Squeeze Page Design Tutorial in Photoshop (Part 2)
Squeeze Page Design Tutorial in Photoshop (Part 2)
DesignCourse
30 Mobile GUI Element Design in Adobe Photoshop CC (Part 1)
Mobile GUI Element Design in Adobe Photoshop CC (Part 1)
DesignCourse
31 Mobile GUI Element Design in Adobe Photoshop CC (Part 2)
Mobile GUI Element Design in Adobe Photoshop CC (Part 2)
DesignCourse
32 Flat Mobile App Design in Photoshop CC - Weather App
Flat Mobile App Design in Photoshop CC - Weather App
DesignCourse
33 Create Reflective 3D Text in Blender (Beginner)
Create Reflective 3D Text in Blender (Beginner)
DesignCourse
34 Animating a Logo with Adobe After Effects CC (Beginner)
Animating a Logo with Adobe After Effects CC (Beginner)
DesignCourse
35 Design a Game Website Mockup in Photoshop CC (Part 1)
Design a Game Website Mockup in Photoshop CC (Part 1)
DesignCourse
36 Design a Game Website Mockup in Photoshop CC (Part 2)
Design a Game Website Mockup in Photoshop CC (Part 2)
DesignCourse
37 Photo Manipulation Tutorial in Photoshop CC (Beginner)
Photo Manipulation Tutorial in Photoshop CC (Beginner)
DesignCourse
38 Advertising Illustration Tutorial in Photoshop CC
Advertising Illustration Tutorial in Photoshop CC
DesignCourse
39 Perspective Warp Tool Tutorial in Photoshop CC
Perspective Warp Tool Tutorial in Photoshop CC
DesignCourse
40 Free Giveaway Contest.  (WiseBanner Banner Maker).
Free Giveaway Contest. (WiseBanner Banner Maker).
DesignCourse
41 Design an Animated Loading/Download Icon (GIF)
Design an Animated Loading/Download Icon (GIF)
DesignCourse
42 Contest Winners (WiseBanner)
Contest Winners (WiseBanner)
DesignCourse
43 Model & Animate a 3D Push Button in Blender (Beginner)
Model & Animate a 3D Push Button in Blender (Beginner)
DesignCourse
44 Mega Tutorial - iPhone Breathalyzer - Project Introduction
Mega Tutorial - iPhone Breathalyzer - Project Introduction
DesignCourse
45 Part 1 - iPhone Breathalyzer - Blender
Part 1 - iPhone Breathalyzer - Blender
DesignCourse
46 Part 2 - iPhone Breathalyzer - Rendering & GUI Design
Part 2 - iPhone Breathalyzer - Rendering & GUI Design
DesignCourse
47 Part 3 - iPhone Breathalyzer - UI Animation in After Effects
Part 3 - iPhone Breathalyzer - UI Animation in After Effects
DesignCourse
48 Part 4 - iPhone Breathalyzer - Website Design in Photoshop CC
Part 4 - iPhone Breathalyzer - Website Design in Photoshop CC
DesignCourse
49 Part 5 - iPhone Breathalyzer - HTML Part 1
Part 5 - iPhone Breathalyzer - HTML Part 1
DesignCourse
50 Part 6 - iPhone Breathalyzer - HTML/CSS Part 2
Part 6 - iPhone Breathalyzer - HTML/CSS Part 2
DesignCourse
51 Part 7 - iPhone Breathalyzer - HTML/CSS Part 3
Part 7 - iPhone Breathalyzer - HTML/CSS Part 3
DesignCourse
52 Part 7 - iPhone Breathalyzer - Finishing Touches
Part 7 - iPhone Breathalyzer - Finishing Touches
DesignCourse
53 Square Space Logo Maker - C'mon People.
Square Space Logo Maker - C'mon People.
DesignCourse
54 Design a Bloody Knife in Photoshop CC
Design a Bloody Knife in Photoshop CC
DesignCourse
55 Typographic Poster Design Tutorial in Illustrator (Part 1)
Typographic Poster Design Tutorial in Illustrator (Part 1)
DesignCourse
56 Typographic Poster Design Tutorial in Illustrator (Part 2)
Typographic Poster Design Tutorial in Illustrator (Part 2)
DesignCourse
57 Modern Business Card Design in Illustrator CC (Part 1)
Modern Business Card Design in Illustrator CC (Part 1)
DesignCourse
58 Modern Business Card Design in Illustrator CC (Part 2)
Modern Business Card Design in Illustrator CC (Part 2)
DesignCourse
59 Parallax Tutorial using Parallax.JS
Parallax Tutorial using Parallax.JS
DesignCourse
60 Interview: Andrew Price of BlenderGuru.com
Interview: Andrew Price of BlenderGuru.com
DesignCourse

The video teaches the importance of prompting in AI-generated design and how to craft effective prompts to achieve unique and premium design outcomes. It also highlights the deterministic nature of LLMs and how context and input can influence design results.

Key Takeaways
  1. Join the design challenge at designcourse.com
  2. Use Claude Code to design a layout for a fictional AI home inspection business
  3. Analyze the results and identify similarities and differences in design outcomes
  4. Craft effective prompts to achieve unique and premium design outcomes
  5. Revise and refine designs based on feedback and analysis
💡 The deterministic nature of LLMs means that small changes in prompting can result in significantly different design outcomes, and that context and input can greatly influence the results.

Related Reads

Up next
5 Levels of AI Agents - From Simple LLM Calls to Multi-Agent Systems
Dave Ebbelaar (LLM Eng)
Watch →