YouTube Deep Summary

The UI design industry as we know it is dead. And if you're still hiring or planning to become a traditional UI designer in 2025, you're already falling behind. The workflows have been completely transformed due to revolutionary new models like Claude for Sonnet and Opus along with the incredible tools built on top of them. Claude Code, Cursor, and other agentic IDs. Here's what most people don't realize. The majority of designers and developers aren't using these new workflows that I'm about to show you today. And that's exactly what gives you the competitive edge. These workflows enable you to create amazing UI prototypes and transform them into completely functional applications that you can actually sell and build entire businesses around. Claude 4 has been available for some time now, and what I've enjoyed most about it is its ability to quickly and accurately generate exactly the designs I want. Whether you're using Claude code or any other agentic ID, Claude 4 never stops surprising me with its capabilities. Let me show you a perfect example. Apple has just introduced their new software design with the latest version of iOS and it's absolutely beautiful and amazing for mobile apps, especially iOS apps. It looks incredible. All the examples I'm seeing here actually made me think, why not build an app and try to implement this myself? As you know, you can create iOS apps yourself. You just need to get them approved and then you can actually sell them. So, that's exactly what I did. Right here, you can see the app I built. It's fully functional. The animations have been implemented directly and it features these beautiful iOS style transitions which look absolutely stunning and impressive. You can see the animations right here. And the amazing part is I can go ahead and upload it to the app store right away. Now in this video I'm going to show you how powerful Claude 4 is in UI workflows and how you can implement any type of app whether it's an iOS app or a web app using this workflow to build anything you want. Now the question arises, what should we use to build these amazing apps on this amazing device? And the answer is you can use pretty much anything you want. If you want to use cursor, you can use cursor. If you want to use claw code, then you can use claw code as well. It's honestly up to you and what you prefer. There are a few differences between them. Claude code has a larger context limit and uses API credits directly, but cursor has solved that with their new max mode, which allows you to use models with full context when enabled at their API pricing. So you get the full context limit without being restricted by cursor's previous context limitations. After that, it honestly comes down to your own preference. Some people like a certain type of UI because it's visually clearer, the files are easy to navigate, and it's more comfortable for them to code in that environment. Others, like me, prefer to have their coding sessions directly in the terminal, which is why I lean toward cloud code. Other than that, there aren't many major differences. Claude Code also now supports adding images, so that's been addressed, too. Not many distinctions remain at this point. Now let's take this diet app as an example. You can see that it has a beautiful UI. So if you wanted to clone this UI and turn it into a fully functional app, how would you do that? Well, let me show you how. You can clearly see that I gave it the image. And yes, this is another amazing feature. You can now just drop images directly into cloud code and it can use them. So I dropped the image and asked it to look at it and clone all the pages into an HTML file. I also specified that I wanted the pages displayed separately, not as a whole prototype app, and it just started working on it. Another amazing thing about Claude Code is that it creates its own to-do list and executes tasks one by one. This is something I really like about Claude Code. It doesn't require a separate task manager, unlike cursor where you often need external tools. In fact, in our own videos, we've shown how people try to make cursor follow a task list and then build something structured from that. You can see here it just started creating and crossed off one task after another. Eventually it generated a file called fitnessapp.html with all the screens in one file. Now let me actually show you how it cloned the UI which I think looks amazing. This is the UI it ended up generating and I think it looks great. This is just a prototype built purely using HTML and CSS. It's not functional yet. To make it functional, I actually went ahead and used cursor. As you know, this is on a paid plan and I have to pay per API usage. So for straightforward tasks like implementing already planned structures, I sometimes just use cursor. If the structure is already made, it executes it efficiently. I don't have to worry about flawed code due to its smaller context limit. It builds a solid structure without needing constant additional context. Now here in cursor you can clearly see that I opened the app and since my prototype was already available I simply asked it to convert the prototype into a next.js app. I also asked it to make sure the intended functionality was preserved which at this point was primarily just the navigation. Most of the other functionality hadn't been implemented yet. So that's what we focused on. As you can see it accurately cloned the UI and it looks really good. The navigation is fully functional. We have our pages in place. It even added a bit of animation as you can see right here. And overall, everything seems to be working well. Now, that was just a simple web app and I converted it into a Next.js app. But what if you want to build something functional like the iOS app I showed you at the beginning? Here's the process you're going to follow. The thing is, you don't need to learn any specific framework anymore. You can just go ahead and build these apps, but it's important to design the UI first so you don't run into issues after everything else has been set up. So I just initialized claude in my terminal. After it was initialized, I told it that I wanted to build a prototype of a recipes app and I sent it the details. I also mentioned that once the prototype was ready, I would like to implement it in Swift. Now you'll see there's this plan mode and you can use shift plus tab to cycle through the different modes. For example, there's the autoac accept edits mode which lets Claude autonomously work in your repo just like how cursor handles tasks for you. Then there's plan mode where you simply discuss your ideas and how you're going to implement them. You can use either this or chat GPT. I ended up using chat GPT to save tokens and I think that's a good best practice. Just chat in chat GPT, figure stuff out there and then come back and give your context here. The context matters and doing this saves you tokens while achieving the same effect. Now, let me show you what prompt I used to build the prototype and then how I converted that prototype into a Swift UI app. And finally, how I transformed that Swift UI app into an incredibly polished liquid UI version of the same app. If you like the content we're making, I'd really appreciate it if you could subscribe. Right now, we're also testing out memberships to support the channel. We've only launched the first tier, and for now, it offers priority comment replies, but subscribing helps us see how many of you are interested and want to support what we're doing. First of all, I just went to chat GPT and discussed how I was going to convert the HTML into an iOS app. Please ignore any errors you see. I wasn't using an AI transcriber. It was the native Mac OS transcription. But this prompt shows you that you need to discuss whatever you're trying to do with an LLM. And especially when working with external frameworks like Swift for iOS, it's important to ask it to perform a web search. Then it'll give you a comprehensive solution like in my case, how to convert HTML to Swift UI. Once it explained the process, I knew what I needed to do. After that, I created a prompt for the basic app I wanted to build. I shared the full functionality and the features the app would include. Based on that, it gave me a solid project overview for an app named kitchen recipes, which I later renamed. It provided the entire UI structure and Swift UI tags, which helped plot how the app's code should be structured, especially since it needed to be implemented in Swift UI. So, the process is simple. Go ahead and discuss your idea, especially how you plan to convert your basic prototype into a full app. For example, if you want to convert HTML into a React app, talk it through and see how feasible it is. If there's a straightforward approach, go ahead and plan your app. Once I had all that figured out, I gave the prompt to Claude Code, and this is what it came up with. It's a very basic version, but a really welldone prototype. You can see everything here is functional and works exactly as intended. The categories work. We can add a new recipe. all the fields function properly and it even added a favorites panel in the settings section on its own. Overall, it's a really nice and responsive design, an excellent prototype. And now that I'm satisfied and confident that I want to build my full app on top of this, I can move forward. Now, the next step is actually converting this HTML prototype into a fully functional Swift app. For that, I had to open up Xcode and initialize a new project. You can see right here that this project called Kitchen Delights was created in Xcode. These are template projects. You'll notice in Xcode you have predefined templates for iOS and Mac OS as well. This project is one of those templates. I also cloned a Mac app using the same process. So, if you're interested, feel free to check that video out. And if you'd like a tutorial on how Xcode functions in general, you can look that up, too. After setting up the template, I needed a file to guide Claude Code on how the conversion should be handled. For that, I created a file named convert.md. I went back into chat gpt and told it that the prototype was ready and now I needed to convert it. I instructed it to search the web and get the best practices for this kind of conversion so that when claude code started working, it would know exactly how to translate one format into the other. It gave me a pretty comprehensive set of rules which I then placed into the convert.md file. You can see the file right here. This is what directed claude code during the conversion process ensuring there were no mistakes. And now if I close this and show you the result, you can see I have a fully functional app. It looks exactly the same as the prototype and everything works. The navigation is functional. Dark mode works and I'm currently running this in an iPhone simulator. So this is exactly how it would appear and behave on a real device. So it's a solid app and it looks great right now. This is a fully working app that I can submit to the app store as soon as it passes review. But it's still missing the new UI that Apple has introduced and I'm not going to do anything manually to add it. So, how am I going to implement this completely new design using claude code? In order to implement the new UI, I needed to provide a visual reference as well as a clear structure of how it was supposed to look and behave, especially how it was supposed to be animated. I selected two images from Apple's official website. One showing the side panel, which displayed most of the card types and toggle buttons, and another showing the UI navigation bar that used the liquid texture font. These visuals represented the new Apple liquid glass design. I then went back to chat GPT, uploaded those images and explained that this was the new Apple liquid glass design. I asked it to give me a general overview of the design language. It was allowed to search the web and analyze the images to produce an accurate description. Once it gave me that, I requested a full design language report, one that explained not just how it looked, but how it was animated. Because this new liquid UI is heavily animationbased and I wanted to replicate that behavior as part of the final implementation. You can see that the exact prompt about how it looks and how it animates is right here. I gave it to Claude code along with the two reference images and told it that this was the visual reference. It immediately recognized that I wanted to implement the Apple liquid glass design and it started working on it. Again, it created its to-do list and began checking off tasks one by one. I must say it did take a little bit of time not just to build everything out but to actually test it as well. And once it was done there were still some elements that hadn't been fully addressed. So I asked it to make sure the design was applied across all components. There were also a few bugs. So I provided images highlighting the issues that really helped speed up the debugging process. I asked it to fix all the inconsistencies and polish everything. And the result is the amazing looking app you see right here. You can see it's the same app, but now it just looks so much better. Right now, it's running in a simulated environment, not an actual iOS device, so it's a bit laggy, but otherwise it looks incredible. You can see the categories right here. If I want to add a recipe, I can just go ahead and do that. The settings panel works, and dark mode is also supported. That beautiful glass effect looks especially cool in dark mode. The favorites feature works, too. So, overall, the app looks and feels so much better now, and it's fully functional. Anyone can use it to track their recipes. And if I wanted to, I could go ahead and submit it to the Apple App Store and actually sell it. That's the real beauty of this. Anyone can go ahead and start building their own apps. And these aren't just small demo apps. They're fully functional, beautifully designed apps. And you can build them using any framework you want following the exact workflow I just explained. Just remember, always provide full context when working with these LLMs, especially for conversions or tools they might struggle with. Honestly, they still struggle a bit with anything beyond Python, JavaScript, and their related frameworks. So, for other languages, be sure to guide them with proper context. And that's it. They do amazing work for you. You can even build entire businesses on top of this. That brings us to the end of this video. If you'd like to support the channel and help us keep making tutorials like this, you can do so by using the super thanks button below. As always, thank you for watching and I'll see you in the next one.