{"componentChunkName":"component---src-templates-section-tsx","path":"/galileo-and-claude-ai-build-your-project-knowledge","result":{"data":{"section":{"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,"contentful_id":"BXrxPHz0vCsr2T10XVvqf","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":"Build Your Project Knowledge","subtitle":"Streamline Your Workflow with Powerful AI-Assisted Project Management","excerpt":{"markdown":{"html":"<p>AI tools like Claude can help you organize, plan, and execute projects more efficiently. In this guide, we’ll explore how to create a project, leverage Project Knowledge, and set up custom instructions to optimize your workflow. Whether you’re a UI/UX designer, developer, or project manager, these steps will save you time and effort.</p>","excerpt":"AI tools like Claude can help you organize, plan, and execute projects more efficiently. In this guide, we’ll explore how to create a…"}},"content":{"markdown":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"What is Project Knowledge?"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Project Knowledge acts as a centralized digital notebook within Claude AI. This feature allows you to store all project-related information, such as notes, research, and design specifications, in one place. It also enhances Claude’s ability to give contextually accurate responses tailored to your project needs. Learn more about Claude AI "},{"type":"element","tagName":"a","properties":{"href":"https://www.anthropic.com/claude"},"children":[{"type":"text","value":"here"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{},"children":[{"type":"text","value":"Key Benefits:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Centralized storage of project data"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Enhanced AI context understanding"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Customizable instructions for tailored interactions"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"Step 1: Create a New Project"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To get started:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Create a new project in Claude AI."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Name and describe your project clearly."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Access the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Project Knowledge"}]},{"type":"text","value":" panel on the right-hand side."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This panel will serve as your repository for all project-related documents and details."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"Step 2: Set Custom Instructions"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Custom instructions allow you to define how Claude interacts with you based on your project’s requirements. For example, if you’re a UI/UX designer, you can specify your role, tools, and expertise."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{},"children":[{"type":"text","value":"Example Prompt:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You are an expert UI/UX designer and full-stack developer with 5+ years of experience in creating innovative mobile and web applications. You are skilled in tools like Figma, Adobe XD, and Sketch, and proficient in HTML, CSS, JavaScript, Swift, Kotlin, and Python. You also use AI tools to streamline workflows and optimize performance."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This helps Claude understand your goals and provide more relevant suggestions. If you’re unsure what to include, ask Claude to assist in creating a custom instruction."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{},"children":[{"type":"text","value":"How to Ask Claude for Help:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Can you help me create a custom instruction and act as an expert UI/UX designer and full-stack developer?"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Copy the generated content and paste it into the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Custom Instructions"}]},{"type":"text","value":" panel."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"Step 3: Add Project Documentation"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To make the most out of Project Knowledge, include detailed documents like design specifications. For example, if you’re working on a UI/UX project, you can describe design elements such as layout, font, and color schemes."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{},"children":[{"type":"text","value":"Example Design Specification:"}]},{"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":"Component Name:"}]},{"type":"text","value":" CalendarView"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Layout:"}]},{"type":"text","value":" Main container with spacing and padding"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Font:"}]},{"type":"text","value":" Roboto, 16px"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Color Scheme:"}]},{"type":"text","value":" #FFFFFF (background), #000000 (text)"}]},{"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":"Code Snippet:"}]},{"type":"text","value":" "}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".calendar-view"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"display"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" flex"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"padding"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 20px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #FFFFFF"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #000000"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"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":"p","properties":{},"children":[{"type":"text","value":"Ask Claude to help write documents or generate CSS for each component. "}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"Step 4: Extract Code from Design Tools"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you’re using tools like Figma, switch to developer mode to copy the code directly. For example, when working on a "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"CalendarView"}]},{"type":"text","value":" component:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Copy code snippets for layout and style from Figma."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Return to Claude and ask it to create a CSS artifact for the component."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{},"children":[{"type":"text","value":"Example Prompt:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Create a CSS file for the CalendarView component with the following details:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Layout: Main container with padding and spacing"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Color Scheme: White background, black text"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Font: Roboto, 16px"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Download the completed document and add it to your Project Knowledge."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"Step 5: Repeat for Additional Components"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For a large project, work component by component. For instance:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Complete the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Header"}]},{"type":"text","value":" and "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"CalendarView"}]},{"type":"text","value":" components."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Save each artifact and update your documentation."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By breaking the project into smaller tasks, you stay organized and ensure accuracy."}]},{"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":"Using Claude AI’s Project Knowledge and custom instructions can significantly improve project management. By centralizing information, defining clear AI roles, and automating documentation, you can focus on creativity and execution rather than manual tasks. Whether you’re on the free or pro version, these tips will help you get started efficiently."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For more on Figma’s developer mode, check "},{"type":"element","tagName":"a","properties":{"href":"https://help.figma.com/hc/en-us/articles/360040514473-Inspect-and-export-code"},"children":[{"type":"text","value":"here"}]},{"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-build-your-project-knowledge","contentType":"Courses","isCourse":true,"isLivestream":false,"isTutorial":false,"chapterSlug":"galileo-and-claude-ai"}}}