{"componentChunkName":"component---src-templates-section-tsx","path":"/prompt-ui-full-design-process","result":{"data":{"section":{"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,"contentful_id":"30K3gMJKGE7kODkjmcDGKv","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":"Full Design Process","subtitle":"Learn how to generate a full layout without design experience","excerpt":{"markdown":{"html":"<p>In this guide, you’ll learn how to recreate a complete landing page from scratch using Aura’s design features. We’ll start by drawing inspiration from an existing layout, then walk step by step through capturing sections, generating HTML, and refining the design with Aura’s editing tools. By the end, you’ll know how to build a six-section layout — hero, showcase, testimonials, bento toolkit, pricing, and footer — even if you don’t have prior design experience.</p>","excerpt":"In this guide, you’ll learn how to recreate a complete landing page from scratch using Aura’s design features. We’ll start by drawing…"}},"content":{"markdown":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"Building a Beautiful Layout with Aura"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{},"children":[{"type":"text","value":"1. Start with Inspiration"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The goal isn’t to copy a layout exactly, but to use it as inspiration.\nI found a beautiful membership-based platform aimed at creative developers and designers, especially those working with animations, interactions, and modern web effects."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The layout is:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Modern"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Minimal and clean"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Full of beautiful interactions"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"From here, I’ll extract the sections I want Aura to generate."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{},"children":[{"type":"text","value":"2. Gather the Sections"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Take screenshots of the sections you’d like Aura to generate.\nFor my final build, I’ll be using six sections:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Hero section"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Showcase section"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Testimonial section with interaction"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Bento section (toolkit)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Pricing section"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Footer"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"👉 Rename screenshots properly and keep file sizes under 2MB."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{},"children":[{"type":"text","value":"3. Start the Design from Scratch"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Attach your screenshot file."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"By default, Aura selects the GPT-5 model."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Type something like \"create HTML\" and send your prompt."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Aura will analyze the screenshot and try to replicate it."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{},"children":[{"type":"text","value":"4. Editing the Layout"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Code Mode"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Edit directly in the HTML code."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Real-time updates."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Selecting a container highlights the corresponding code."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Clean, well-commented HTML with Tailwind."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Great for both building and learning."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Design Mode"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Edit tab: Inspector panel like a design tool."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Prompt tab: Target a container, type a prompt, and Aura updates only that element."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Saves time — no need to re-prompt the entire layout."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Quick Features"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Font Mode → adjust typography, size, spacing"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Color Mode → switch light/dark, use presets, or customize manually"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Assets Mode → replace images, add animated backgrounds (Spline, Unicorn Studio), tweak hue/blur/saturation/brightness"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{},"children":[{"type":"text","value":"5. Adding New Sections"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Select the parent container of the first section.\nOptions:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Duplicate and prompt changes"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Or click Add, attach the next screenshot, and use \"create HTML\""}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Repeat this flow:\nAttach image → Generate HTML → Edit → Compare → Refine"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Example:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Second screenshot → card section"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Third screenshot → testimonial section"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Fourth screenshot → bento layout"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Fifth screenshot → pricing"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Sixth screenshot → footer"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{},"children":[{"type":"text","value":"6. Final Touches"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"At this stage, we’ve built a complete six-section landing page.\nYou can:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Compare with the original design"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Add more interactions and animations via prompts"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Refine styles, colors, and assets"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{},"children":[{"type":"text","value":"7. Wrap-Up"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"That’s the full process of recreating a professional layout — even without prior design experience — using Aura’s features.\nAura combines inspiration + screenshot prompts + editing tools to let you build, refine, and customize layouts quickly."}]}],"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-full-design-process","contentType":"Courses","isCourse":true,"isLivestream":false,"isTutorial":false,"chapterSlug":"prompt-ui"}}}