{"componentChunkName":"component---src-templates-section-tsx","path":"/prompt-ui-ai-model-for-ux-and-ui-design","result":{"data":{"section":{"title":"AI Model for UX and UI Design","subtitle":"A practical guide to choosing between Claude 4, GPT-4.1, o3, and more for smarter, faster UI creation","slug":"prompt-ui-ai-model-for-ux-and-ui-design","videoDuration":406,"releaseDate":null,"tags":["ai ui design","ui design with ai","ai models","ai workflow","aura app","image to html","design automation","layout generation","no code design","design inspiration","design productivity","creative ai"],"contentful_id":"1UxiELB5iVvTAqvPdfdLD1","isFree":false,"illustration":null,"source":null,"colors":null,"chapter":[{"title":"Master AI Prompting for Stunning UI","slug":"prompt-ui","hoursOfVideo":10,"description":{"description":"Learn how to leverage AI tools like Aura for creating beautiful designs, working with templates, and experimenting with advanced prompts. A concise guide for designers and developers to level up their skills."},"logos":[{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/7bIHb2z3qClO9GfyPwj6nP/4cb3a08cdc0d34645540b1295f96dc67/Logo_React.png?w=400&q=50"}},{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/7bIHb2z3qClO9GfyPwj6nP/4cb3a08cdc0d34645540b1295f96dc67/Logo_React.png?w=400&q=50"}}],"instructors":[{"name":"Meng To","slug":"instructor/meng","avatar":{"fluid":{"src":"//images.ctfassets.net/ooa29xqb8tix/1legcDgYFWKJm5NXFxARCj/6a5061ad1691687a7729678860e39114/_9_0Nd2X_400x400-2.png?w=200&h=200&q=50"}}},{"name":"Sourasith Phomhome","slug":"instructor/sourasith","avatar":{"fluid":{"src":"//images.ctfassets.net/ooa29xqb8tix/RT4K7gHu4GNH7HT0R8knc/ec8d1deed85d162f5f99f10da6e08bff/Sourasith.jpg?w=200&h=200&q=50"}}}],"illustration":{"file":{"url":"//images.ctfassets.net/ooa29xqb8tix/6oY7TXpBjmrftJEYGpkYkc/a48e154bc700c0cd0da04e8f2f0d17c6/prompting-ui.svg"}},"illustrationConverted":{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/4Cfr22cMQqNivvDPAM13Si/797261ec95e4ae9859e3650c855fdeea/prompting-ui.png?w=400&q=50"}},"colors":["#0C0C0C","#1A1A1A"],"sections":[{"title":"A Practical Guide to Prompting for UI","subtitle":"A step-by-step guide for designers and developers to harness AI tools like Aura","slug":"prompt-ui-intro","videoDuration":2656,"releaseDate":null,"tags":["design prompts","prompt builder","UI Design prompts","codepen prompts","tailwind prompts","modern ui prompts"]},{"title":"Mastering Remixing, Tailwind, and Animated Backgrounds","subtitle":"Add your personal touch and make use of advanced features like remixing templates, shaders, and Tailwind utilities","slug":"prompt-ui-mastering-remixing","videoDuration":2665,"releaseDate":null,"tags":["remixing ai prompt","tailwindcss prompt","threejs shader","shadertoy","reactbits"]},{"title":"Master Image to HTML with AI","subtitle":"Transform your design workflow with AI and free resources","slug":"prompt-ui-master-image-to-html-with-ai","videoDuration":1282,"releaseDate":null,"tags":null},{"title":"Customize your UI for 10x Conversion","subtitle":"Transforming AI-Generated Designs into Stunning, Personalized UI. How to break free from cookie-cutter AI designs.","slug":"prompt-ui-customize-your-ui-for-10x-conversion","videoDuration":1723,"releaseDate":null,"tags":null},{"title":"Remix Templates with Aura","subtitle":"How I built a new way to design and code with AI","slug":"prompt-ui-remix-templates-with-aura","videoDuration":3489,"releaseDate":null,"tags":null},{"title":"Compose UI with References","subtitle":"Three powerful features that let you create beautiful landing pages in minutes","slug":"prompt-ui-compose-ui-with-references","videoDuration":3293,"releaseDate":null,"tags":null},{"title":"Using GPT 5.1 for Creating UIs","subtitle":"GPT-5.1 just dropped and it's a game-changer for web design","slug":"prompt-ui-using-gpt-5-1-for-creating-uis","videoDuration":1867,"releaseDate":null,"tags":null},{"title":"Gemini 3 Changes Everything for Web Design","subtitle":"We're living in what I call the \"golden era\" for AI-powered web design","slug":"prompt-ui-gemini-3-changes-everything-for-web-design","videoDuration":2235,"releaseDate":null,"tags":null},{"title":"Design and Code with Aura Introduction","subtitle":"Master UI/UX Design with AI — A Practical Modern Course","slug":"prompt-ui-design-and-code-with-aura-introduction","videoDuration":352,"releaseDate":null,"tags":null},{"title":"Prompt Builder","subtitle":"How to Use Aura's Prompt Builder to Create and Animate UI Designs","slug":"prompt-ui-builder","videoDuration":790,"releaseDate":null,"tags":null},{"title":"Animation Prompting","subtitle":"How AI Is Changing the Way We Design Animated Interfaces","slug":"prompt-ui-animation-prompting","videoDuration":1032,"releaseDate":null,"tags":null},{"title":"Animation Code Integration in Aura","subtitle":"Add real JavaScript animations into your design using tools like Vanta.js, CodePen and tsParticles without writing a single line of code","slug":"prompt-ui-animation-code-integration","videoDuration":619,"releaseDate":null,"tags":null},{"title":"Design Mode in Aura","subtitle":"How to edit your UI using design mode in Aura","slug":"prompt-ui-design-mode-in-aura","videoDuration":315,"releaseDate":null,"tags":["aura design","design mode","AI-UI","UI design","web design tools","prototyping","no code design","figma alternative","AI-UX","interface design"]},{"title":"Customize Fonts in Aura","subtitle":"Easily manage fonts across your entire project with Aura’s Global Font Panel — perfect for fast, consistent, and beautiful UI design","slug":"prompt-ui-customize-fonts","videoDuration":83,"releaseDate":null,"tags":["Aura design","typography design","font pairing","ui design tips","design workflow","global styles","no code tools","design efficiency","ux design","web typography"]},{"title":"Selection Colors and Theme Modes","subtitle":"Customize your entire color system and toggle light/dark mode instantly with aura’s selection colors, no manual updates needed","slug":"prompt-ui-selection-colors-and-theme-modes","videoDuration":102,"releaseDate":null,"tags":["Aura design","UI color themes","dark mode design","light mode design","design system","color management","no code design","UI design tups","theme switcher","accessible design"]},{"title":"Animated Assets with Spline","subtitle":"Bring your UI to life with animated spline assets in aura — no code, just one click to add motion, depth, and polish to your design","slug":"prompt-ui-animated-assets-with-spline","videoDuration":164,"releaseDate":null,"tags":["motion design","spline 3d","ui animation","no code tools","animate without code","design with motion","dynamic UI","UX enhancement","UI prototyping"]},{"title":"Custom Images and Responsive Preview","subtitle":"Add custom images and preview your design on all screen sizes","slug":"prompt-ui-custom-images-and-responsive-preview","videoDuration":195,"releaseDate":null,"tags":["responsive design","image assets","mobile preview","web design tips","design workflow","Midjourney assets","UI inspiration","creative prototyping"]},{"title":"Image to HTML","subtitle":"Learn how to turn any image into a fully functional HTML layout","slug":"prompt-ui-image-to-html","videoDuration":218,"releaseDate":null,"tags":["image to html","design inspiration","Dribbble"]},{"title":"Gradient Colors in Aura","subtitle":"Add depth and style using gradient colors","slug":"prompt-ui-gradient-colors","videoDuration":343,"releaseDate":null,"tags":["gradient colors","linear gradient","radial gradient","conic gradient"]},{"title":"Midjourney to Aura","subtitle":"How to add motion by integrating Midjourney into your UI with Aura","slug":"prompt-ui-midjourney","videoDuration":436,"releaseDate":null,"tags":["Midjourney v7","animated backgrounds","no code motion","ui animation","motion design","video integration","creative workflow"]},{"title":"Embed and Fonts","subtitle":"How to use Midjourney and Aura to turn a music app into a unique, minimalist design that feels personal and custom-built","slug":"prompt-ui-embed-and-fonts","videoDuration":353,"releaseDate":null,"tags":["ui design","midjourney","aura design","ai tools","music app","creative workflow","minimal design","design inspiration","custom ui","ai design","design mode","no code","visual design"]},{"title":"Add Sections and Quick Edit Prompt ","subtitle":"How I created 3 different UI designs in 20 minutes using Aura’s Image to HTML, Add Section, and Quick Edit Prompt features","slug":"prompt-ui-add-sections-and-quick-edit-prompt","videoDuration":523,"releaseDate":null,"tags":["ui deisgn","image to html","design workflow","quick edit prompt","no code tools","creative automation","fast design","design mode","add section","Claude 4","o3 model","ai productivity","build with ai","Midjourney ui"]},{"title":"AI Model for UX and UI Design","subtitle":"A practical guide to choosing between Claude 4, GPT-4.1, o3, and more for smarter, faster UI creation","slug":"prompt-ui-ai-model-for-ux-and-ui-design","videoDuration":406,"releaseDate":null,"tags":["ai ui design","ui design with ai","ai models","ai workflow","aura app","image to html","design automation","layout generation","no code design","design inspiration","design productivity","creative ai"]},{"title":"Aura to Figma","subtitle":"How I combine the speed of Aura with the flexibility of Figma to refine and share my designs","slug":"prompt-ui-aura-to-figma","videoDuration":635,"releaseDate":null,"tags":null},{"title":"One-Shot Landing Page with ChatGPT-5","subtitle":"How to create a complete landing page in a single prompt","slug":"prompt-ui-how-to-create-a-complete-landing-page-in-a-single-prompt","videoDuration":424,"releaseDate":null,"tags":null},{"title":"Creating Mobile App UI","subtitle":"How to turn screenshots into functional app designs with aura","slug":"prompting-ui-creating-mobile-app-ui","videoDuration":324,"releaseDate":null,"tags":null},{"title":"Replace Components","subtitle":"Replace Components in Aura: A Game-Changing Update for Designers","slug":"prompting-ui-replace-components","videoDuration":307,"releaseDate":null,"tags":null},{"title":"Remix Feature","subtitle":"How to Use Aura’s Remix Feature to Adapt Any Template","slug":"prompt-ui-remix-feature","videoDuration":224,"releaseDate":null,"tags":null},{"title":"Image to HTML Section","subtitle":"How to Replace Sections with Image-to-HTML in Aura","slug":"prompt-ui-image-to-html-section","videoDuration":227,"releaseDate":null,"tags":null},{"title":"Layers Explorer and Public Components","subtitle":"Exploring Aura’s new features to manage layers and share components with ease","slug":"prompt-ui-layers-explorer-and-public-components","videoDuration":306,"releaseDate":null,"tags":null},{"title":"From Prompt to Polished","subtitle":"How to Get Better Results Using Inspiration and Structure","slug":"prompt-ui-from-prompt-to-polished","videoDuration":316,"releaseDate":null,"tags":null},{"title":"Editing with Tailwind Classes","subtitle":"How to duplicate, adapt, and polish AI designs without wasting prompts","slug":"prompt-ui-editing-with-tailwind-classes","videoDuration":260,"releaseDate":null,"tags":null},{"title":"Building Multi-Page","subtitle":"How to Keep Consistency, Link Pages, and Publish with a Subdomain","slug":"prompt-ui-building-multi-page","videoDuration":377,"releaseDate":null,"tags":null},{"title":"Full Design Process","subtitle":"Learn how to generate a full layout without design experience","slug":"prompt-ui-full-design-process","videoDuration":294,"releaseDate":null,"tags":null},{"title":"Remix Full Template","subtitle":"Learn how to edit a full template and easily add a Unicorn background with a Project ID","slug":"prompt-ui-remix-full-template","videoDuration":216,"releaseDate":null,"tags":null},{"title":"Edit Animated Layouts","subtitle":"How to Edit Scrolling and Modal Layouts with Play Mode","slug":"prompt-ui-edit-animated-layouts","videoDuration":163,"releaseDate":null,"tags":null},{"title":"Fix Span Text in Code","subtitle":"Understanding span in Headings and How to Fix Common Issues","slug":"prompt-ui-fix-span-text-in-code","videoDuration":196,"releaseDate":null,"tags":null},{"title":"Aura-Using Element IDs for One-Page Navigation","subtitle":"Learn how to connect your navigation menu to different sections of the same page using Element IDs and when to choose one-page vs multi-page","slug":"prompt-ui-aura-using-element-ids-for-one-page-navigation","videoDuration":300,"releaseDate":null,"tags":null},{"title":"Image Generation and Remove Background","subtitle":"Create custom logos and edit image in just a few clicks with Image-to-Image","slug":"prompt-ui-image-generation-and-remove-background","videoDuration":310,"releaseDate":null,"tags":null},{"title":"Add Animations Using Code Snippets","subtitle":"Bring your mobile layout to life with fade-in and slide-in animations using pre-made code snippets no coding experience required.","slug":"prompt-ui-add-animations-using-code-snippets","videoDuration":287,"releaseDate":null,"tags":null},{"title":"Turn Any Web Layout into Mobile Layouts with a Simple Prompt","subtitle":"Learn how to instantly transform any web design into mobile layouts using the Remix Template feature and a single, well-structured prompt.","slug":"prompt-ui-turn-any-web-layout-into-mobile-layouts-with-a-simple-prompt","videoDuration":222,"releaseDate":null,"tags":null},{"title":"Add Entrance and Scroll Animations","subtitle":"How to Add Entrance and Scroll Animations Using the Code Snippet Feature","slug":"prompt-ui-add-entrance-and-scroll-animations","videoDuration":376,"releaseDate":null,"tags":null},{"title":"Border Gradient with CSS","subtitle":"How to Create a Border Gradient with CSS and Customize It Like a Pro","slug":"prompt-ui-border-gradient-with-css","videoDuration":330,"releaseDate":null,"tags":null},{"title":"Edit Your Design Faster with Edits","subtitle":"A smarter way to refine your designs without wasting time or too many prompts","slug":"prompt-ui-edit-your-design-faster-with-edits","videoDuration":315,"releaseDate":null,"tags":null},{"title":"Create a Unicorn Background","subtitle":"Learn how to create a Unicorn Studio background the easy way using presets, color controls, and motion settings for your website in minutes.","slug":"prompting-ui-create-a-unicorn-background","videoDuration":527,"releaseDate":null,"tags":null},{"title":"Integrate a Unicorn Background into Aura Build","subtitle":"Learn how to export, clean, and embed your Unicorn Studio background directly into Aura Build—no coding experience required","slug":"prompting-ui-integrate-a-unicorn-background-into-aura-build","videoDuration":209,"releaseDate":null,"tags":null},{"title":"One-Shot Design Using Reference","subtitle":"Build a full landing page in minutes by referencing templates, components, and previous chats — all in one shot","slug":"prompt-ui-one-shot-design-using-reference","videoDuration":407,"releaseDate":null,"tags":null},{"title":"How to Use Aura’s Image Generation Feature","subtitle":"Create, modify, and remix visuals directly inside your design panel, no Midjourney required","slug":"prompt-ui-how-to-use-auras-image-generation-feature","videoDuration":321,"releaseDate":null,"tags":null},{"title":"Mastering the New Alpha Mask & Z-Index","subtitle":"Learn how to create smooth fades, frosted backgrounds, and clean layering directly from the Design panel no code or prompts needed","slug":"prompt-ui-mastering-the-new-alpha-mask-and-z-index","videoDuration":302,"releaseDate":null,"tags":null}],"releaseDate":"2025-07-09","isFreeCourse":false,"isFeatured":true,"tags":["UI Prompting","Code Generation","Site Builder","Component Builder Course","Aurachat","v0","bolt.new","lovable","figma make"],"promoUrl":null,"contentType":"Course","source":null}],"author":[{"name":"Sourasith Phomhome","jobTitle":"UI Designer","twitterHandle":null,"biography":{"biography":"Designer at Design+Code"},"avatar":{"fluid":{"src":"//images.ctfassets.net/ooa29xqb8tix/RT4K7gHu4GNH7HT0R8knc/ec8d1deed85d162f5f99f10da6e08bff/Sourasith.jpg?w=200&h=200&q=50"}},"location":"Terrebonne, Quebec","slug":"instructor/sourasith","chapter":[{"title":"Master AI Prompting for Stunning UI","slug":"prompt-ui","hoursOfVideo":10,"description":{"description":"Learn how to leverage AI tools like Aura for creating beautiful designs, working with templates, and experimenting with advanced prompts. A concise guide for designers and developers to level up their skills."},"logos":[{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/7bIHb2z3qClO9GfyPwj6nP/4cb3a08cdc0d34645540b1295f96dc67/Logo_React.png?w=400&q=50"}},{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/7bIHb2z3qClO9GfyPwj6nP/4cb3a08cdc0d34645540b1295f96dc67/Logo_React.png?w=400&q=50"}}],"releaseDate":"2025-07-09"},{"title":"Figma Handbook","slug":"figma-handbook","hoursOfVideo":6,"description":{"description":"A comprehensive guide to the best tips and tricks in Figma. Not affiliated with or endorsed by Figma, Inc."},"logos":[{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/5X8HW6RyHdZRKbzp8MsvIp/b20e44a78f747d70836fcf1db1960d36/The_Figma_Handbook-.png?w=400&q=50"}},{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/6ml4Ii6ZJ3CSnDM5boThH6/3b2551cdf07316c9c82f09b83b2f64b8/figma-logo.png?w=400&q=50"}}],"releaseDate":"2020-10-12"},{"title":"SwiftUI Fundamentals Handbook","slug":"swiftui-fundamentals-handbook","hoursOfVideo":2,"description":{"description":"A comprehensive guide to mastering Swift programming fundamentals, designed for aspiring iOS developers. This handbook provides a structured approach to learning Swift's core concepts, from basic syntax to advanced programming patterns. Through carefully sequenced chapters, readers will progress from essential programming concepts to object-oriented principles, building a solid foundation for SwiftUI development. Each topic includes practical examples and clear explanations, ensuring a thorough understanding of Swift's capabilities. This handbook serves as both a learning resource and a reference guide, covering fundamental concepts required for modern iOS development. Topics are presented in a logical progression, allowing readers to build their knowledge systematically while gaining practical programming skills."},"logos":[{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/4bWEQMRsA6PzjiHljsxryp/55d78d84da072e9c22caddbccd67396b/swift-logo.png?w=400&q=50"}},{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/6MFFWO1k38yxTrLKRZ26e8/2c07fa6c2c4653bfae00dd87625d6e56/swift-logo.png?w=400&q=50"}}],"releaseDate":"2025-02-28"},{"title":"Design Multiple Apps with Figma and AI","slug":"design-multiple-apps-with-figma-and-ai","hoursOfVideo":4,"description":{"description":"In this course, you’ll learn to design multiple apps using Figma and AI-powered tools, tackling a variety of real-world UI challenges. Each week, a new episode will guide you through a different design, helping you master essential UI/UX principles and workflows"},"logos":[{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/0cjyplK9nhXoHTHN3XfTr/0e1edc5106a4c99ca2de7eeaaa772603/ui-logo.png?w=400&q=50"}},{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/6juoPj4aiabGla63SQ1Vuk/2590bfb5fa2758afb9df3a0c7d04f456/ui-logo.png?w=400&q=50"}}],"releaseDate":"2025-02-28"},{"title":"Design and Code User Interfaces with Galileo and Claude AI","slug":"galileo-and-claude-ai","hoursOfVideo":4,"description":{"description":"In this course, you’ll learn how to use AI tools to make UI/UX design faster and more efficient. We’ll start with Galileo AI to create basic designs, providing a solid foundation for your ideas. Next, we’ll refine these designs in Figma to match your personal style, and finally, we’ll use Claude AI to turn them into working code—eliminating the need for traditional prototyping."},"logos":[{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/0cjyplK9nhXoHTHN3XfTr/0e1edc5106a4c99ca2de7eeaaa772603/ui-logo.png?w=400&q=50"}},{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/6juoPj4aiabGla63SQ1Vuk/2590bfb5fa2758afb9df3a0c7d04f456/ui-logo.png?w=400&q=50"}}],"releaseDate":"2024-12-10"},{"title":"Design and Prototype for iOS 18","slug":"design-and-prototype-for-ios-18","hoursOfVideo":3,"description":{"description":"Design and Prototype for iOS 18 is an immersive course that equips you with the skills to create stunning, user-friendly mobile applications. From mastering Figma to understanding iOS 18's latest design principles, you'll learn to craft two real-world apps - a Car Control interface and an AI assistant."},"logos":[{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/0cjyplK9nhXoHTHN3XfTr/0e1edc5106a4c99ca2de7eeaaa772603/ui-logo.png?w=400&q=50"}},{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/6juoPj4aiabGla63SQ1Vuk/2590bfb5fa2758afb9df3a0c7d04f456/ui-logo.png?w=400&q=50"}}],"releaseDate":"2024-08-20"},{"title":"Master Responsive Layouts in Figma","slug":"figma-responsive-layouts","hoursOfVideo":2,"description":{"description":"Creating responsive layouts is a must-have skill for any UI/UX designer. With so many different devices and screen sizes, designing interfaces that look great and work well on all platforms is necessary. Mastering this skill will make you stand out in the field. In this course, we'll start from scratch to create this beautiful design using Figma. You'll learn how to make layouts that are easy to use and work well on any device. We'll cover key concepts and tools to help you master responsive design in Figma."},"logos":[{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/mTZWH1XgUw19Ugg2Ul3i0/bdca1f9dbb6ef3c80de5010fb97de4fd/ui-logo.png?w=400&q=50"}},{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/6juoPj4aiabGla63SQ1Vuk/2590bfb5fa2758afb9df3a0c7d04f456/ui-logo.png?w=400&q=50"}}],"releaseDate":"2024-06-02"},{"title":"UI UX Design with Mobbin and Figma","slug":"mobbin-design","hoursOfVideo":2,"description":{"description":"Mobbin is a powerful tool for UI/UX designers seeking inspiration and innovative design solutions. This platform offers a vast collection of real-world mobile app designs, providing a treasure trove of UI elements and layouts."},"logos":[{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/0cjyplK9nhXoHTHN3XfTr/0e1edc5106a4c99ca2de7eeaaa772603/ui-logo.png?w=400&q=50"}},{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/0cjyplK9nhXoHTHN3XfTr/0e1edc5106a4c99ca2de7eeaaa772603/ui-logo.png?w=400&q=50"}}],"releaseDate":"2024-04-18"},{"title":"Design and Prototype Apps with Midjourney","slug":"midjourney","hoursOfVideo":8,"description":{"description":"A comprehensive course on transforming Midjourney concepts into interactive prototypes using essential design techniques and AI tools"},"logos":[{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/6ml4Ii6ZJ3CSnDM5boThH6/3b2551cdf07316c9c82f09b83b2f64b8/figma-logo.png?w=400&q=50"}},{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/6ml4Ii6ZJ3CSnDM5boThH6/3b2551cdf07316c9c82f09b83b2f64b8/figma-logo.png?w=400&q=50"}}],"releaseDate":"2023-04-25"},{"title":"3D UI Interactive Web Design with Spline","slug":"spline-ui","hoursOfVideo":3,"description":{"description":"Learn to create 3D designs and UI interactions such as 3D icons, UI animations, components, variables, screen resize, scrolling interactions, as well as exporting, optimizing, and publishing your 3D assets on websites"},"logos":[{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/0cjyplK9nhXoHTHN3XfTr/0e1edc5106a4c99ca2de7eeaaa772603/ui-logo.png?w=400&q=50"}},{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/6juoPj4aiabGla63SQ1Vuk/2590bfb5fa2758afb9df3a0c7d04f456/ui-logo.png?w=400&q=50"}}],"releaseDate":"2023-11-28"},{"title":"Design and Prototype for iOS 17 in Figma","slug":"ios17","hoursOfVideo":6,"description":{"description":"Crafting engaging experiences for iOS 17 and visionOS using the Figma design tool. Learn about Figma's new prototyping features, Dev Mode, variables and auto layout."},"logos":[{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/0cjyplK9nhXoHTHN3XfTr/0e1edc5106a4c99ca2de7eeaaa772603/ui-logo.png?w=400&q=50"}},{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/6juoPj4aiabGla63SQ1Vuk/2590bfb5fa2758afb9df3a0c7d04f456/ui-logo.png?w=400&q=50"}}],"releaseDate":"2023-07-28"},{"title":"iOS Design with Midjourney and Figma","slug":"app-ui","hoursOfVideo":1,"description":{"description":"Learn the fundamentals of App UI design and master the art of creating beautiful and intuitive user interfaces for mobile applications"},"logos":[{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/6ml4Ii6ZJ3CSnDM5boThH6/3b2551cdf07316c9c82f09b83b2f64b8/figma-logo.png?w=400&q=50"}},{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/6ml4Ii6ZJ3CSnDM5boThH6/3b2551cdf07316c9c82f09b83b2f64b8/figma-logo.png?w=400&q=50"}}],"releaseDate":"2023-03-22"},{"title":"UI Design for iOS, Android and Web in Sketch","slug":"sketch-design","hoursOfVideo":1,"description":{"description":"Create a UI design from scratch using Smart Layout, Components, Prototyping in Sketch app"},"logos":[{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/376Z8DIpxe3i7TFWMw9fBl/db2db0b05b31cd62bdbc8a00377ed518/logo-sketch.png?w=400&q=50"}},{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/376Z8DIpxe3i7TFWMw9fBl/db2db0b05b31cd62bdbc8a00377ed518/logo-sketch.png?w=400&q=50"}}],"releaseDate":"2023-02-16"},{"title":"UI Design a Camera App in Figma","slug":"ui-camera","hoursOfVideo":1,"description":{"description":"Design a dark, vibrant and curvy app design from scratch in Figma. Design glass icons, lens strokes and realistic buttons. \n"},"logos":[{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/0cjyplK9nhXoHTHN3XfTr/0e1edc5106a4c99ca2de7eeaaa772603/ui-logo.png?w=400&q=50"}},{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/6juoPj4aiabGla63SQ1Vuk/2590bfb5fa2758afb9df3a0c7d04f456/ui-logo.png?w=400&q=50"}}],"releaseDate":"2022-10-26"},{"title":"UI Design for iOS 16 in Sketch","slug":"ios16","hoursOfVideo":3,"description":{"description":"A complete guide to designing for iOS 16 with videos, examples and design files"},"logos":[{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/376Z8DIpxe3i7TFWMw9fBl/db2db0b05b31cd62bdbc8a00377ed518/logo-sketch.png?w=400&q=50"}},{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/376Z8DIpxe3i7TFWMw9fBl/db2db0b05b31cd62bdbc8a00377ed518/logo-sketch.png?w=400&q=50"}}],"releaseDate":"2022-08-31"},{"title":"UI Design Quick Websites in Figma","slug":"ui-websites","hoursOfVideo":1,"description":{"description":"Learn how to design a portfolio web UI from scratch in Figma"},"logos":[{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/0cjyplK9nhXoHTHN3XfTr/0e1edc5106a4c99ca2de7eeaaa772603/ui-logo.png?w=400&q=50"}},{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/0cjyplK9nhXoHTHN3XfTr/0e1edc5106a4c99ca2de7eeaaa772603/ui-logo.png?w=400&q=50"}}],"releaseDate":"2022-04-11"},{"title":"UI Design Android Apps in Figma","slug":"quick-apps-android-figma","hoursOfVideo":2,"description":{"description":"Design Android application UIs from scratch using various tricks and techniques in Figma"},"logos":[{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/0cjyplK9nhXoHTHN3XfTr/0e1edc5106a4c99ca2de7eeaaa772603/ui-logo.png?w=400&q=50"}},{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/6juoPj4aiabGla63SQ1Vuk/2590bfb5fa2758afb9df3a0c7d04f456/ui-logo.png?w=400&q=50"}}],"releaseDate":"2022-03-31"},{"title":"Prototyping in Figma","slug":"prototyping-figma","hoursOfVideo":1,"description":{"description":"Learn the basics of prototyping in Figma by creating interactive flows from custom designs"},"logos":[{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/0cjyplK9nhXoHTHN3XfTr/0e1edc5106a4c99ca2de7eeaaa772603/ui-logo.png?w=400&q=50"}},{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/0cjyplK9nhXoHTHN3XfTr/0e1edc5106a4c99ca2de7eeaaa772603/ui-logo.png?w=400&q=50"}}],"releaseDate":"2022-06-30"},{"title":"UI Design Quick Apps in Figma","slug":"quick-apps-figma","hoursOfVideo":12,"description":{"description":"Design application UIs from scratch using various tricks and techniques in Figma"},"logos":[{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/0cjyplK9nhXoHTHN3XfTr/0e1edc5106a4c99ca2de7eeaaa772603/ui-logo.png?w=400&q=50"}},{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/0cjyplK9nhXoHTHN3XfTr/0e1edc5106a4c99ca2de7eeaaa772603/ui-logo.png?w=400&q=50"}}],"releaseDate":"2022-02-28"}]}]},"en":{"title":"AI Model for UX and UI Design","subtitle":"A practical guide to choosing between Claude 4, GPT-4.1, o3, and more for smarter, faster UI creation","excerpt":{"markdown":{"html":"<p>Since I added AI to my workflow, I’ve learned how to work much faster and stay focused on what really matters which is user interface design. Using AI in Aura has made it easier to create layouts, test ideas, and explore different versions without switching tools or starting from scratch every time. But one thing I’ve learned is that the model you choose really matters. Each one Claude 4, GPT-4.1, or o3 has its strengths depending on the task. Some are better for layout structure, others for UX logic or UI polish. In this section, I’ll show you how I use each model inside Aura to design smarter and faster.</p>","excerpt":"Since I added AI to my workflow, I’ve learned how to work much faster and stay focused on what really matters which is user interface design…"}},"content":{"markdown":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"Search for Inspiration"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The first thing I do before starting a design is look for inspiration. I usually go on Dribbble or Behance and scroll through UI shots not full pages, just small, clean components that I can use as a starting point. Instead of picking a full hero section or a complex layout, I focus on "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"minimalist sections"}]},{"type":"text","value":" like a card, pricing table, form, or sidebar. These are easier for AI to understand and recreate in Aura without breaking the structure. Once I find something I like, I save the image and upload it directly into Aura. "}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"//images.ctfassets.net/ooa29xqb8tix/3qutuXYu4hKb9UhzlKBfBr/3bfad5ddc580ff6256d376cba33b438e/Screenshot-202025-07-23-20at-204.42.18-E2-80-AFPM.png","alt":"Screenshot-202025-07-23-20at-204.42.18-E2-80-AFPM"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Define the Product"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The goal isn’t to copy the original image, because o3 will recreate everything exactly as it appears—including the text. That’s why it’s important to start with a clear idea of the product or brand before jumping into design. In a real design workflow, we usually begin with UX research, define what kind of product we’re building, who the target audience is, map out user flows, create wireframes, and then decide on colors, fonts, and overall style. With AI, I do less of that upfront, but even having a fictional brand still helps guide the direction and makes the design feel more intentional. You can ask Aura to update the brand name, text, and tone—or use your own real idea if you have one. For example, the image I used was a hero section about melodies to help you stay focused. From that, I imagined I was designing for an online courses platform. Having that idea gave me a clear theme, so I could choose the right visuals, write better copy, and keep the design consistent across all the sections."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"For Image-to-HTML Structure: Use "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"o3"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The o3 model is perfect when you need to turn a UI image into a working layout. It does a great job at detecting structure, spacing, alignment, and section hierarchy from screenshots or mockups, then quickly recreates a clean HTML and CSS version that closely matches the visual reference. It’s fast, reliable, and gives me a solid base to start designing—way better than starting from scratch. While it’s not built for adding logic or thinking about user experience, that’s totally fine—o3 is the best model for building the visual foundation of your UI fast."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"//images.ctfassets.net/ooa29xqb8tix/2LTYC63Z5VuWZgRbmT1seB/d2ab070e25ba61ddb6c262f0173e2d1c/Screenshot-202025-07-23-20at-204.41.36-E2-80-AFPM.png","alt":"Screenshot-202025-07-23-20at-204.41.36-E2-80-AFPM"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"For UX: Use "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Claude 4"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When it comes to user experience, "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Claude 4"}]},{"type":"text","value":" is honestly the most reliable model I’ve tested. Let me show you a quick example. This page is for booking a car, and as you can see, the version generated by "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"o3"}]},{"type":"text","value":" doesn’t really work for UX—it’s missing important details and doesn’t feel like a real booking flow. But that’s okay, because what I needed from o3 was just the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"structure"}]},{"type":"text","value":", and it did a good job at that."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now let’s bring in "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Claude"}]},{"type":"text","value":" to improve it. I’ll ask it to change the brand, add key details, and make the layout feel more complete. What I love about Claude is that it really thinks like a product designer. You don’t need to explain the full user flow—it just understands what makes sense for the user."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Claude 4"}]},{"type":"text","value":" gives much more "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"structured"}]},{"type":"text","value":" and "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"thoughtful"}]},{"type":"text","value":" results. It doesn’t just design something that looks good—it understands "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"why"}]},{"type":"text","value":" it works. I also use Claude when I want to add "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"interactions"}]},{"type":"text","value":", "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"hover states"}]},{"type":"text","value":", or "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"animations"}]},{"type":"text","value":" like smooth entrances. It’s super helpful when your design needs logic and motion—not just visuals."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"For UI Visual Polish & Copy: Use "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"GPT-4.1"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Sometimes, you don’t need a full layout—you just want to improve the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"visual quality"}]},{"type":"text","value":" or wording. That’s where "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"GPT-4.1"}]},{"type":"text","value":"is helpful. It’s creative, polished, and gives suggestions that sound natural and friendly."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I use GPT-4.1 for:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Writing button labels, titles, tooltips"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Improving contrast, spacing, or hierarchy"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Suggesting style updates (rounded corners, soft shadows)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Copywriting for forms, empty states, or onboarding"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"While it’s not as structured as Claude or as fast as o3, GPT-4.1 is great when you want your design to "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"feel more human"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"What About Gemini 2.5 Pro?"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Honestly, I don’t really use "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Gemini 2.5 Pro"}]},{"type":"text","value":" in my design workflow. It’s fast and helpful for things like summarizing docs, writing blog posts, or brainstorming ideas. But when it comes to actual design work in "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Aura"}]},{"type":"text","value":", it doesn’t really work well."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For anything UI or UX related, I stick with "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Claude 4"}]},{"type":"text","value":", "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"o3"}]},{"type":"text","value":", and "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"GPT-4.1"}]},{"type":"text","value":". They’re just more reliable when it comes to building layouts and refining real interfaces."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"My Workflow: How I Use All Three Together"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Here’s a simple breakdown of how I use models inside Aura depending on the design phase:"}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tagName":"table","properties":{},"children":[{"type":"element","tagName":"thead","properties":{},"children":[{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"th","properties":{},"children":[{"type":"text","value":"Task"}]},{"type":"element","tagName":"th","properties":{},"children":[{"type":"text","value":"Model"}]}]}]},{"type":"element","tagName":"tbody","properties":{},"children":[{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Convert image to layout"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"o3"}]}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Add logic and animations"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Claude 4"}]}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Polish copy and visuals"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"GPT-4.1"}]}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Example"}]},{"type":"text","value":":"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"I find a clean UI section on Dribbble."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"I upload it to Aura and run "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"o3"}]},{"type":"text","value":" to get the layout."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"I switch to "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Claude 4"}]},{"type":"text","value":" to add interaction, animation, and behavior."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"I use "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"GPT-4.1"}]},{"type":"text","value":" to refine text and make the design feel more polished."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This combo lets me go from "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"inspiration to production-ready UI in under 20 minutes"}]},{"type":"text","value":", without opening Figma."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"Conclusion"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"AI builders like Aura are powerful—but only if you know how to use the models wisely. Each one serves a different purpose:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"o3"}]},{"type":"text","value":" for fast structure"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Claude 4"}]},{"type":"text","value":" for UX intelligence"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"GPT-4.1"}]},{"type":"text","value":" for polish and clarity"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Instead of switching apps, I switch models. That’s how I keep full creative control and move fast—without losing design quality."}]}],"data":{"quirksMode":false}}}}},"contentfulChapter":{"test":null,"metadata":{"title":"Master AI Prompting for Stunning UI","slug":"prompt-ui","description":"Learn how to leverage AI tools like Aura for creating beautiful designs, working with templates, and experimenting with advanced prompts. A concise guide for designers and developers to level up their skills.","keywords":"ui design, ai prompt, generate ui, figma make, v0, lovable, aurachat, bolt.new","image":"https://www.dropbox.com/scl/fi/773je2ciz7rmhvoeepyjk/Prompt-Builder2.jpg?rlkey=wsax3ymwwqbaa3br4l10xhv1n&st=4xc6wqdp&dl=0"}},"contentfulMetadata":{"title":"Claude Code Crash Course on Agentic Workflows","slug":"claude-code","description":"This course teaches you how to use Claude Code efficiently with slash commands, hooks, parallel workflows, and more. You’ll learn the mindset of working with AI, simplify repetitive tasks and connect tools into one unified agentic workflow.","keywords":"claude code, agentic workflow, slash command, hooks, parallel workflows, ","image":"https://www.dropbox.com/scl/fi/nlvmlv8l7ss5wr2blrwzk/claude-code.jpg?rlkey=blzzwn00ujon53e0xlwwswxa6&dl=0"}},"pageContext":{"slug":"prompt-ui-ai-model-for-ux-and-ui-design","contentType":"Courses","isCourse":true,"isLivestream":false,"isTutorial":false,"chapterSlug":"prompt-ui"}}}