{"componentChunkName":"component---src-templates-section-tsx","path":"/galileo-and-claude-ai-publishing-an-artifact","result":{"data":{"section":{"title":"Publishing an Artifact","subtitle":"A step-by-step guide to sharing and building on creations using Claude AI","slug":"galileo-and-claude-ai-publishing-an-artifact","videoDuration":117,"releaseDate":null,"tags":null,"contentful_id":"8B24KSEZAr304y3ThbMkm","isFree":false,"illustration":null,"source":null,"colors":null,"chapter":[{"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"}}],"instructors":[{"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/4U8T5fUeWOhwI36DEuqdeV/fe2889c60e91d5ca8cc4cd52be981cc7/galileo-ai.svg"}},"illustrationConverted":{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/6hHEr9xmrp3kMwb98fiSp9/5f138e7f29cb2f8ec02df3051bf945da/galileo-ai.png?w=400&q=50"}},"colors":["#0C0D10","#1B1D22"],"sections":[{"title":"Transform Your UI Design Workflow with AI","subtitle":"Make Your Design Process Faster and Smarter","slug":"galileo-and-claude-ai-transform-your-ui-design-workflow-with-ai","videoDuration":123,"releaseDate":null,"tags":null},{"title":"Generate UI Design with Galileo AI","subtitle":"Revolutionize Your Design Process Using AI Tools","slug":"generate-ui-design-with-galileo-ai","videoDuration":783,"releaseDate":null,"tags":null},{"title":"Customize Design with Figma","subtitle":"Create professional calendars, segmented controls & task layouts for a refined design experience","slug":"galileo-and-claude-ai-customize-design-with-figma","videoDuration":663,"releaseDate":null,"tags":null},{"title":"Exploring Ideogram and Designing the Today Schedule Page","subtitle":"Blending AI innovation with user-centered design","slug":"galileo-and-claude-ai-exploring-ideogram-and-designing-the-today-schedule-page","videoDuration":609,"releaseDate":null,"tags":null},{"title":"How to Create Responsive Task Cards in Figma","subtitle":"A Step-by-Step Guide to Flexible and Reusable UI Components","slug":"galileo-and-claude-ai-how-to-create-responsive-task-cards-in-figma","videoDuration":481,"releaseDate":null,"tags":null},{"title":"Mastering Responsive Layouts in Figma","subtitle":"Creating Cohesive and Intuitive Designs with Figma's Auto Layout","slug":"galileo-and-claude-ai-mastering-responsive-layouts-in-figma","videoDuration":546,"releaseDate":null,"tags":null},{"title":"Create a Responsive Progress Ring Layout in Figma","subtitle":"Mastering Auto Layout, Frames, and the Arc Tool for Stunning Designs","slug":"galileo-and-claude-ai-create-a-responsive-progress-ring-layout-in-figma","videoDuration":603,"releaseDate":null,"tags":null},{"title":"Exploring the New Figma UI 3: A Designer’s Guide","subtitle":"Discover the features of the newly released Figma UI 3 and how they can enhance your designing experience","slug":"galileo-and-claude-ai-exploring-the-new-figma-ui-3-a-designers-guide","videoDuration":567,"releaseDate":null,"tags":null},{"title":"Components Properties","subtitle":"Learn how to complete our UI design through a combination of component property configuration and tab bar implementation","slug":"galileo-and-claude-ai-components-properties","videoDuration":568,"releaseDate":null,"tags":null},{"title":"Introduction to Claude AI","subtitle":"Discover the features, models, and pricing of Claude AI, a powerful assistant designed to simplify your tasks and boost efficiency","slug":"galileo-and-claude-ai-introduction-to-claude-ai","videoDuration":470,"releaseDate":null,"tags":["Claude ai"]},{"title":"Functional Design with Claude AI","subtitle":"Skip Prototyping in Figma by Making Your Design Functional","slug":"galileo-and-claude-ai-functional-design-with-claude-ai","videoDuration":525,"releaseDate":null,"tags":["AI development","figma","design export","prototyping","interactive design","Claude AI"]},{"title":"Publishing an Artifact","subtitle":"A step-by-step guide to sharing and building on creations using Claude AI","slug":"galileo-and-claude-ai-publishing-an-artifact","videoDuration":117,"releaseDate":null,"tags":null},{"title":"Build Your Project Knowledge","subtitle":"Streamline Your Workflow with Powerful AI-Assisted Project Management","slug":"galileo-and-claude-ai-build-your-project-knowledge","videoDuration":517,"releaseDate":null,"tags":null},{"title":"Building Project Knowledge with Claude AI","subtitle":"A Guide to Adding Design Specifications","slug":"galileo-and-claude-ai-building-project-knowledge-with-claude-ai","videoDuration":761,"releaseDate":null,"tags":null},{"title":"Introduction to v0 Vercel","subtitle":"Discover how V0 by Vercel simplifies UI design with AI-driven prompts and sleek modern features","slug":"galileo-and-claude-ai-introduction-to-v0-vercel","videoDuration":193,"releaseDate":null,"tags":null},{"title":"Create a Second Artifact for Interaction","subtitle":"How to Build the Second Artifact for Interaction","slug":"galileo-and-claude-ai-create-a-second-artifact-for-interaction","videoDuration":375,"releaseDate":null,"tags":null},{"title":"Creating Interactions with two artifacts","subtitle":"Combining Artifacts and Adding Interactions","slug":"galileo-and-claude-ai-creating-interactions-with-two-artifacts","videoDuration":361,"releaseDate":null,"tags":null},{"title":"Designing a New Event Modal","subtitle":"Learn how to design a functional new event modal in Figma using Auto Layout","slug":"galileo-and-claude-ai-designing-a-new-event-modal","videoDuration":603,"releaseDate":null,"tags":["figma","ui design","modal design","auto layout","event management","apple design","user interface","task management","design tutorial ","design systems","component design","design principles","responsive design","interaction design"]},{"title":"Ignore Auto Layout and Constraints","subtitle":"Learn about the Ignore Auto Layout (Absolute Position) Feature and Constraints","slug":"galileo-and-claude-ai-ignore-auto-layout-and-constraints","videoDuration":521,"releaseDate":null,"tags":["figma","auto layout","ui design","constraints","layer organization","design tools","layout design","responsive design","design workflow","toggle switch","user interface","design elements","design architecture","design components"]},{"title":"Building the Schedule Page","subtitle":"How to Design and Build a Functional Schedule Page Using Figma and Claude AI","slug":"galileo-and-claude-ai-building-the-schedule-page","videoDuration":523,"releaseDate":null,"tags":["schedule interface","modal design","task management","interactive design","dark mode","calendar design","navigation design","design implementation","interface development","design export","user experience","responsive design"]},{"title":"Tailwind CSS and Custom Color Configuration","subtitle":"Understanding Tailwind CSS Colors and How to Customize Them","slug":"galileo-and-claude-ai-tailwind-css-and-custom-color-configuration","videoDuration":449,"releaseDate":null,"tags":["tailwind css","color configuration","web design","css framework","custom colors","color palette"]},{"title":"Exploring Tailwind Configuration and Building a Timeline with Tailwind CSS","subtitle":"How to effectively configure Tailwind CSS and use pre-built libraries to create a functional timeline","slug":"galileo-and-claude-ai-exploring-tailwind-configuration-and-building-a-timeline-with-tailwind-css","videoDuration":522,"releaseDate":null,"tags":["tailwind css","timeline components","ui libraries","web development","css framework","design implementation"]},{"title":"Building an Event Modal with Tailwind CSS and Functional Interactions","subtitle":"Creating a fully functional event modal with Tailwind CSS, including date and time pickers","slug":"galileo-and-claude-ai-building-an-event-modal-with-tailwind-css-and-functional-interactions","videoDuration":590,"releaseDate":null,"tags":null},{"title":"Linking the Calendar Schedule Page to the Event Modal","subtitle":"Learn the essential steps to integrate your Calendar Schedule page with the Event Modal for a streamlined and user-friendly experience","slug":"galileo-and-claude-ai-linking-the-calendar-schedule-page-to-the-event-modal","videoDuration":388,"releaseDate":null,"tags":null},{"title":"Interactive Animations with Claude AI","subtitle":"Exploring the creative potential of Claude for app design and animations","slug":"galileo-and-claude-ai-interactive-animations-with-claude-ai","videoDuration":593,"releaseDate":null,"tags":null},{"title":"Search Field Animation","subtitle":"Creating Smooth and Engaging UI Interactions","slug":"galileo-and-claude-ai-search-field-animation","videoDuration":576,"releaseDate":null,"tags":null},{"title":"Conclusion","subtitle":"Reflecting on Designing a Task Management App and Prototyping with AI","slug":"galileo-and-claude-ai-conclusion","videoDuration":195,"releaseDate":null,"tags":null}],"releaseDate":"2024-12-10","isFreeCourse":false,"isFeatured":true,"tags":["ai tools","ui design","ux design","galileo ai ","figma","Claude ai","swift ui","prototyping","code generation","web design","mobile design","workflow optimization","design process","design automation","productivity"],"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":"Publishing an Artifact","subtitle":"A step-by-step guide to sharing and building on creations using Claude AI","excerpt":{"markdown":{"html":"<p>Publishing and remixing artifacts with Claude AI lets you easily share your work and inspire others. This guide walks you through the process, from publishing artifacts to remixing them for new creations.  </p>","excerpt":"Publishing and remixing artifacts with Claude AI lets you easily share your work and inspire others. This guide walks you through the…"}},"content":{"markdown":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"Publishing Your Artifact"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Claude AI simplifies the process of making your creations public. Follow these steps:  "}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Finalize Your Artifact"}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nSpend time with Claude AI refining your project. If you're unhappy with the initial output, ask Claude to make adjustments (e.g., making the frame responsive, adding navigation, or including a status bar).  "}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"javascript"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Example of a responsive frame"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div style"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"width: 100%; max-width: 1200px; margin: auto;\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n   "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"h1"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"My Responsive Artifact"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"h1"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"div"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note: Adjustments may take time, especially if you request multiple changes.  "}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Publish Your Artifact"}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nOnce satisfied, click the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Publish"}]},{"type":"text","value":" button. Claude will generate a public link to your artifact, which you can share with others.  "}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Only the artifact itself is published—your conversations with Claude remain private.  "}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"View the Published Artifact"}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nThe artifact will be accessible on a separate website via the link provided.  "}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"Remixing Published Artifacts"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Remixing allows you to build on existing artifacts, fostering collaboration and creativity. Here’s how:  "}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Access the Artifact"}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nView a published artifact and click the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Remix Artifact"}]},{"type":"text","value":" button. "}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Start a New Conversation"}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nThis will begin a new session with Claude AI. You can now modify, expand, or draw inspiration from the artifact.  "}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Use Remix Suggestions"}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nClaude provides three suggestions on how to remix the artifact. You can choose one or provide your own direction.  "}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"python"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-python"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-python"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"# Example of expanding an artifact with additional functionality"}]},{"type":"text","value":"\ntasks "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"Add status bar\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"Include navigation\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"Optimize responsiveness\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"for"}]},{"type":"text","value":" task "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"in"}]},{"type":"text","value":" tasks"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":"\n   "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"print"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string-interpolation"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"f\"Working on: "}]},{"type":"element","tagName":"span","properties":{"className":["token","interpolation"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"task"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]}]}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"Tips for Free Version Users"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The free version of Claude AI has usage limits, so you may need to spread your project over several days.  "}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Take advantage of Claude's suggestions and refine your artifact incrementally.  "}]},{"type":"text","value":"\n"}]},{"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":"Publishing and remixing artifacts with Claude AI is an excellent way to share your creativity and collaborate with others. Whether you’re using the free or premium version, the platform offers a fun and intuitive way to build and expand on projects.  "}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Get started with Claude AI here: "},{"type":"element","tagName":"a","properties":{"href":"https://www.anthropic.com/index/claude"},"children":[{"type":"text","value":"Claude AI by Anthropic"}]},{"type":"text","value":".  "}]}],"data":{"quirksMode":false}}}}},"contentfulChapter":{"test":null,"metadata":null},"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":"galileo-and-claude-ai-publishing-an-artifact","contentType":"Courses","isCourse":true,"isLivestream":false,"isTutorial":false,"chapterSlug":"galileo-and-claude-ai"}}}