{"componentChunkName":"component---src-templates-section-tsx","path":"/prompt-ui-selection-colors-and-theme-modes","result":{"data":{"section":{"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"],"contentful_id":"2S72rxCdTwpYCG20c7EGHb","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":"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","excerpt":{"markdown":{"html":"<p>Colors are one of the most important parts of UI design, right after layout. They affect the mood, guide the user’s attention, and help define the personality of your product. But as your design evolves, you might want to explore a new direction. In most tools, that means creating color variables, updating styles one by one, and spending lots of time trying to keep everything consistent. Aura makes this much easier.</p>","excerpt":"Colors are one of the most important parts of UI design, right after layout. They affect the mood, guide the user’s attention, and help…"}},"content":{"markdown":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this section of the video, I show you how to use the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Selection Colors"}]},{"type":"text","value":" panel in Aura. This tool lets you manage your entire color system from one place. You can switch between "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"preset color themes"}]},{"type":"text","value":", update individual color roles, and toggle between "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"light and dark mode"}]},{"type":"text","value":" with just one click."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"Color Themes"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Let me walk you through an example. I recently created a design using a background animation I got from CodePen (covered in my animation integration section). At first glance, the layout looked okay, but it was flat and something felt missing."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"That’s where the color panel comes in."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Just like fonts, Aura gives you a set of "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"ready-made color themes"}]},{"type":"text","value":" to start with. These themes, like Neutral, Indigo, or Green, instantly update your entire project. You don’t need to select each element. The colors for text, backgrounds, containers, hover states, and more are all applied automatically."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Want to customize your own palette? You can scroll down and get full control:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Background colors"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Text and accent colors"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Button styles and overlays"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Each color role is clearly labeled, and any changes are reflected across your layout instantly."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"Theme Mode"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Switching between "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"light"}]},{"type":"text","value":" and "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"dark mode"}]},{"type":"text","value":" is also super simple. Just one click updates your entire interface."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Here’s what I did. I switched from my animated design to a cleaner layout, where I created a base card, added a header, some navigation, a title, and a button. The design was in "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"light mode"}]},{"type":"text","value":" by default. With one click, I flipped it to "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"dark mode"}]},{"type":"text","value":" and the whole design changed right away. It was fast and gave the UI a totally different vibe."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Offering both themes is now a standard in most modern apps. Users expect it, and it helps with accessibility too. With Aura, you don’t need to duplicate screens or build complicated theme systems. You just toggle the mode, and Aura takes care of the rest."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"What You Can Do with Selection Colors"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Selection Colors"}]},{"type":"text","value":" panel gives you full control of your design’s color system. It helps you make big changes quickly, without needing to go element by element."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Here’s what you can do:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Instantly switch between "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"light and dark mode"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Choose from built-in themes like "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Neutral, Indigo, Gray, or Green"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Customize individual color roles like "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"text, background, and accent colors"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"See exactly "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"where each color is used"}]},{"type":"text","value":" in your design"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Preview your changes across "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"desktop, tablet, and mobile"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This makes it easy to try out new styles, fix color issues, or support accessibility, all from one place."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"Why This Improves My Workflow"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Before Aura, trying out new color ideas or switching themes took way too much time. I had to update styles manually and make sure everything still looked consistent."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now, with Selection Colors, I can experiment quickly, test different moods, and apply feedback right away without breaking the layout. I don’t need to design two versions just to support dark mode. Aura does that for me."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It saves time, keeps everything in sync, and helps me move faster, whether I’m designing for a course, a client, or just testing new ideas."}]}],"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-selection-colors-and-theme-modes","contentType":"Courses","isCourse":true,"isLivestream":false,"isTutorial":false,"chapterSlug":"prompt-ui"}}}