{"componentChunkName":"component---src-templates-section-tsx","path":"/prompt-ui-building-multi-page","result":{"data":{"section":{"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,"contentful_id":"5MimmdqD9hvK5EsRdsvqZO","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":"Building Multi-Page","subtitle":"How to Keep Consistency, Link Pages, and Publish with a Subdomain","excerpt":{"markdown":{"html":"<p>For a long time, AI design tools felt limited to single-page layouts. But now, multi-page design is finally here — and it changes everything. With this feature, you can build full websites, not just landing pages, while keeping consistency across every page. In this article, I’ll walk you through my process of creating multiple pages, linking them, and polishing the final result before publishing.</p>","excerpt":"For a long time, AI design tools felt limited to single-page layouts. But now, multi-page design is finally here — and it changes everything…"}},"content":{"markdown":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"Starting with a Clean Landing Page"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I began with a monochrome landing page, adding just a pop of color on the button. The header navigation was in place, but the links didn’t work yet. That’s because multiple pages needed to be created first."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To create a page:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Go to the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Page section"}]},{"type":"text","value":" next to the chat."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Click "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Create Page"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Name it the same as the link in your header (e.g., “About”)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Adapt the new page to match your main design."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"Ask Aura to Adapt the Sections"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Here’s the best part: when I create a new page, I don’t need to redesign everything from scratch."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I just ask Aura to "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"adapt the section"}]},{"type":"text","value":" for the new page."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Aura will automatically keep the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"same background, colors, fonts, and overall design style"}]},{"type":"text","value":" from the first page."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This keeps everything consistent, so I don’t have to worry about it. I can focus only on the new content I want to show."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This is what makes the multi-page feature so powerful — it saves you hours of repetitive styling work."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"Building Consistency Across Pages"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When you create multiple pages, AI automatically keeps the same:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Background color"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Fonts"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Overall style"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This ensures everything looks consistent without extra work. For example, when I made my “About” page, I didn’t need to restyle anything — the layout matched the landing page automatically."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"But remember: AI isn’t always perfect. For example, my “Contact” page felt too tight. That’s when you step in to adjust spacing and polish manually."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"Linking Your Navigation"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Navigation only works if you set it up on each page:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Click on a header link (like “Work” or “Services”)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Open the link option and connect it to the correct page."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Repeat this for every page in your header."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Tip:"}]},{"type":"text","value":" Don’t forget the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"brand logo"}]},{"type":"text","value":" — link it back to the homepage for easy navigation."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"At first, I did this one by one, but then I realized you can "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"copy and paste"}]},{"type":"text","value":" the header with links into each page. It’s much faster and saves time."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"Use Copy & Paste to Move Faster"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"At first, I was confused by all the “paste” options — "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Paste Into"}]},{"type":"text","value":", "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Paste After"}]},{"type":"text","value":", "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Paste to Replace"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I was doing everything manually until I realized how easy it is to "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"copy and paste sections between pages"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This is a game changer. Instead of recreating layouts, I just duplicate my favorite sections and place them where I need."}]},{"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":"Paste Into"}]},{"type":"text","value":" adds a section inside another container."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Paste After"}]},{"type":"text","value":" places it directly after the selected section."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Paste to Replace"}]},{"type":"text","value":" swaps it with the existing one."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Just pick the one that fits your layout — and you’re done."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"Don’t Forget to Save"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It sounds simple, but it’s super important:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Save your work often."}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Sometimes I forgot, and I lost everything — even my credits."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"So now, I always remind myself: "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"save, save, save!"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"Publishing with a Subdomain"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Once everything is linked, you can publish your project with a subdomain."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"A subdomain is a smaller web address connected to the main domain."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Example: if the main domain is "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"aura.build"}]},{"type":"text","value":", your subdomain could be "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"myproject.aura.build"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This makes it easy to share your work, take screenshots, and showcase your polished designs."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"Adding Animation for Style"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To make my design unique, I tried something different from the usual “blind” or “unicorn” background animations. Instead, I added a "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"line animation"}]},{"type":"text","value":" component. It gave the page a clean, modern touch while still fitting my monochrome style."}]},{"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":"The new multi-page feature makes AI design far more powerful. By creating separate pages, linking them properly, and publishing with a subdomain, you can now build full websites — not just single landing pages."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"AI gives you the structure and consistency, but the final polish comes from your own design choices: refining layouts, fixing sections, and adding unique animations."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Multi-page design is here, and it’s a game-changer. Start experimenting with it, and you’ll see how much more complete and professional your projects become."}]}],"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-building-multi-page","contentType":"Courses","isCourse":true,"isLivestream":false,"isTutorial":false,"chapterSlug":"prompt-ui"}}}