{"componentChunkName":"component---src-templates-section-tsx","path":"/prompt-ui-image-to-html-section","result":{"data":{"section":{"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,"contentful_id":"7MfBzSq3RsLnimECxxRYXO","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":"Image to HTML Section","subtitle":"How to Replace Sections with Image-to-HTML in Aura","excerpt":{"markdown":{"html":"<p>Sometimes AI-generated templates don’t turn out exactly as you want. A section might fail to render correctly or feel too generic. Instead of settling for it, Aura gives you a powerful trick: Image-to-HTML, section by section.</p>","excerpt":"Sometimes AI-generated templates don’t turn out exactly as you want. A section might fail to render correctly or feel too generic. Instead…"}},"content":{"markdown":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"With this feature, you can take inspiration from any design you admire—like a card, a feature block, or a “How it Works” section—and transform a screenshot into a live, editable section that fits your brand. The best part? It’s quick, precise, and keeps your workflow creative without copying an entire design."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"Pick a Reference Section"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Go to one of your favorite sites for design inspiration. For example, Framer has plenty of beautiful templates. Choose "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"just one section"}]},{"type":"text","value":" you like—maybe a card layout, a pricing block, or a single feature row."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Avoid taking full landing pages (respect creators)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Focus on the details of one section that stands out."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Take a "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"screenshot"}]},{"type":"text","value":" of that section."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"Go Back to Aura"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In your project, make sure you’re in "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Design Mode."}]},{"type":"text","value":" Identify the section you want to replace—like a row of cards or a feature grid."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Keep the parts you want (e.g., header or title)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Select only the elements you want to swap out."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"Replace with Image-to-HTML"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Click "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Replace"}]},{"type":"text","value":" on the selected section and upload your screenshot. Aura uses AI (powered by GPT-5) to convert that image into a coded, editable section."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To ensure it blends with your project:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Add a short instruction like "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"“Adapt this to my brand style”"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The AI will automatically match fonts, colors, and structure."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"Review the Result"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The output is often surprisingly accurate. For example, three out of four cards may look perfect on the first try, with details faithfully reproduced."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If one element needs polishing, refine it manually."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Re-run with clearer instructions if needed."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Sometimes, AI may reinterpret the layout. A feature section might become a “How It Works” section—but this is part of the creative process."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"Adjust the Content"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Don’t stop at visuals—make sure the text matches your project."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Replace placeholder copy with your own headlines and descriptions."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Keep the structure but give the content your brand’s voice."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If needed, prompt the AI again to rewrite the text."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"Save Multiple Versions"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Always save your progress. Each iteration gives you a new variation you can revisit later. Over time, your design will evolve, and having multiple versions makes it easier to experiment and play."}]},{"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":"Image-to-HTML in Aura is a "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"game-changer for designers"}]},{"type":"text","value":" who want to refine sections quickly without starting from scratch. By screenshotting a reference, uploading it, and letting AI convert it into editable HTML, you can replace any weak section with something fresh, branded, and beautiful."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Instead of copying full designs, you’re remixing one piece at a time—learning from great references while keeping your work unique. So the next time a section doesn’t look right, try the Image-to-HTML trick and watch your design transform."}]}],"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-image-to-html-section","contentType":"Courses","isCourse":true,"isLivestream":false,"isTutorial":false,"chapterSlug":"prompt-ui"}}}