00:00:00AI design tools are evolving rapidly and while many promise to revolutionize your workflow,
00:00:04only a few actually deliver. I've spent considerable time testing different tools
00:00:08to separate what's genuinely useful from what's just noise. In this video, I'm sharing the tools
00:00:13that made a real impact on my design process. These range from planning and asset generation to
00:00:18animation and design conversion. Some are free, some are paid and a few have solid free alternatives
00:00:24that work just as well. Starting off with a truly powerful and essential planning tool that can
00:00:29transform your messy ideas into a structured technical blueprint. A product by builder methods
00:00:34called Design OS. It is literally the missing piece in your process. You can access the open source
00:00:39repository on GitHub from where you can download and use. Design OS is specifically designed to
00:00:44mimic the software development workflow. You act as the stakeholder while Design OS handles product
00:00:49planning, the design system and the requirement specifications. Finally, it confirms your software
00:00:54design plan after which you can export it. This tool is suitable for both technical and non-technical
00:00:59builders. It's compatible with all the popular AI tools like Claude Code, Cursor and Copilot.
00:01:05The installation is simple. Just copy the git clone command, paste it into your project folder
00:01:09and change the default name to your actual project name. Once installed, the project will have access
00:01:14to a series of specialized commands and design skills. When you navigate to localhost 3000,
00:01:19all the steps are listed one by one so you don't get confused about which command to follow first.
00:01:24It asks you a series of questions to identify every detail of your project idea. It refines the plan as
00:01:30it goes, providing outlines, asking for your approval midway and documenting everything
00:01:34in a way that is optimized for the AI model. It's a time-consuming process so you have to be patient
00:01:40and bear with the constant questioning to get the best results for your website. Once you've gone
00:01:44through all the sections, the plan will be ready to export. The exported plan contains instructions
00:01:49on how to use it along with data models, sample data and documentation. It also includes TypeScript
00:01:54types, CSS tokens and all the necessary design files. You can find instructions here on how to
00:02:00use the export to build the app, whether you choose the incremental method or a one-shot prompt. All in
00:02:05all, this is a really interesting tool that made the planning part of the design significantly easier
00:02:10and smoother. High quality assets are the backbone of any great website and if you're looking for a
00:02:15way to generate professional product visuals quickly, VSCOM is the tool you need to know about.
00:02:19It has an impressive ability to use prompts to generate stunning visual imagery, use sketches
00:02:24to create renders and even model them for you. It's packed with amazing tools and can provide
00:02:28animations as well. To use it, you simply provide a sketch and a description and the AI generates
00:02:33visuals based on your input. You can do a lot with it, including editing individual elements,
00:02:38using AI to modify them and downloading the results in 4k quality for your hero section visuals.
00:02:43VSCOM is a paid tool but you can start for free. The free tier is generous and provides useful
00:02:48features while the monthly plan offers even more capabilities. This makes it a great choice if you
00:02:53frequently need to model your products across different areas. But if you don't want to use
00:02:58paid tools, you can use an underrated Google project called Mixed Board. This is still in
00:03:02experimental phase so it's free for now. This tool lets you create mood boards and use the power of
00:03:07nano bananas impressive capabilities to generate images for your website. You can use prompts to
00:03:12modify images and it will generate new ones exactly as you want. You can also upload sample images and
00:03:17it will use its capabilities to generate matching visuals. You can create as many generations as you
00:03:22like and even build a full presentation to visualize your product concept all using nano banana. If you
00:03:28don't like an image, you can regenerate it, ask the model to create similar images, duplicate an image
00:03:33or even annotate it to give the model more direction. It will then generate all the details
00:03:38according to your specifications. This is pretty incredible because you can take these assets and
00:03:42download them for use directly on your website. It is always better to analyze how competitor websites
00:03:48structure their websites before diving into designing one for your own. For this purpose I
00:03:52used an extension called GoFullPage which captured a full page screenshot of any website. This allowed
00:03:58me to download complete website screenshots for reference. I then provided these screenshots to
00:04:02Claude along with a specialized prompt designed for extracting UI elements. This prompt instructed Claude
00:04:08to identify all the constraints, object placements and UI theme details from the images. When I gave
00:04:14Claude the screenshots with this specialized prompt, it extracted all of the UI style details
00:04:19comprehensively. Once I had the extracted style guidelines, I provided them to Claude code in the
00:04:24project folder containing the assets I had downloaded for use. Claude then generated the entire website
00:04:30applying all the styles and design guidelines it had extracted from the competitor analysis.
00:04:35Motion is key to user retention for which you can use AI powered Figma plugins to animate everything
00:04:40from logos to full interfaces in just a few clicks. Magic Animator is a really cool and powerful website
00:04:46that uses AI to animate all of your designs. It can animate everything from logos to social media
00:04:52posts to user interfaces creating micro interactions in your applications that help maintain user
00:04:57retention and interest. Magic Animator is available as a Figma plugin which allows you to easily add
00:05:03animations to your UI designs. When you run the plugin it automatically detects the layers in your
00:05:08UI and generates four animations for you to choose from. You can then export your chosen animation as
00:05:13a Lottie file which is a JSON format specialized for adding animations. Now Magic Animator is a paid
00:05:19tool but if you're looking for a similar alternative you can use Lottie files which is also available as
00:05:24a Figma plugin. It allows you to implement animations in your website designs and export them
00:05:29in multiple formats including various types of Lottie JSON files. You can even give the
00:05:34animation file to Claude code and it will apply the animation to your UI for you. If you don't want
00:05:39to design on Figma from scratch you can use the HTML to design plugin to convert any website in
00:05:44HTML into a fully editable Figma design. It's available on both free and paid plans and on the
00:05:49free plan you get up to 10 imports every 30 days. The cool part is that you can use it as an MCP and
00:05:55access the design capabilities of your AI agent directly within your Figma design. To do this you
00:06:00connect it to your AI tools like Claude or Cursor and configure the MCP by following the setup guide.
00:06:05Whenever you want to generate a design you simply prompt your AI agent and use the keyword send to
00:06:10Figma or send it to HTML to design. This generates a JSON containing the design and sends it to Figma
00:06:16once you approve it. You can then view the design in Figma and collaborate with your favorite AI tool
00:06:21to create stunning designs editing anything you don't like on the fly. Let's talk about Automata
00:06:25now. After teaching millions of people how to build with AI we started implementing these workflows
00:06:30ourselves. We discovered we could build better products faster than ever before. We help bring
00:06:35your ideas to life whether it's apps or websites. Maybe you've watched our videos thinking I have a
00:06:40great idea but I don't have a tech team to build it. That's exactly where we come in. Think of us
00:06:45as your technical co-pilot. We apply the same workflows we've taught millions directly to your project
00:06:51turning concepts into real working solutions without the headaches of hiring or managing a dev team.
00:06:57Ready to accelerate your idea into reality reach out at hello@automata.dev. That brings us to the
00:07:02end of this video. If you'd like to support the channel and help us keep making videos like this
00:07:07you can do so by using the super thanks button below. As always thank you for watching and I'll
00:07:12I'll see you in the next one.