OpenAI's Greatest Weapon In Designing

How do you know which design tools are actually worth using when a new one drops every week? The problem is there are new tools being released every day, all promising quality, but most of them are just hype. During our testing of tools, we found out a few that actually delivers what they promise and fit well in our workflow. One of our team members was working on a product landing page for a car with a 3D animation in the hero section. The source code to this website and all the features used are available in AIABS Pro. For those who don't know, it's our recently launched community where you get ready to use templates, prompts, all the commands, and skills that you can plug directly into your projects for this video and all previous ones. If you found value in what we do and want to support the channel, this is the best way to do it. Links in the description. So, the first step to building a website like this is having a good asset. And for that, I use Tripo 3D, the AI powered 3D object generator. When I signed in, I got around 300 credits, which was more than enough for around 10 generations. Now, I needed an image to convert to 3D. I had an image of the car for the hero section, but the background interfered with the model generation because background and foreground identification is hard for tools like this, and I didn't want to waste credits on a bad output. So, I removed the background using the background remover tool from Canva, but you can also use remove BG, which is a free alternative. Once the background was removed, I went to Trio 3D and gave it that image as a reference. It took around 1 minute to generate the model and it matched the image to a great extent. I was able to check all the views from every angle and the model consistently resembled the object from all sides. Once the 3D model was ready, I exported it. On trio, you only get 15 exports on the free plan. So, I made sure I was satisfied with the generation and out of two attempts downloaded the one that worked best. I set the resolution to 4K and exported it. Once the GB file was downloaded, I added it to the public directory of a newly initialized Nex.js. JS app so it could be accessed easily. The reason for exporting as GB instead of other formats is because GB contains textures and materials in a single file instead of having them separately and it's a native web format so it integrates easily with web libraries. Once the GB file was ready, it was time to implement it in the web app. For building the landing page, I chose the Codeex app which was recently released and is only available on Mac OS. Now you might be thinking even though we already have Claude Code, why are we using Codeex in this video? With the launch of their new product, they're offering extended limits and a generous quotota even on free plans. So, right now is actually the best time for you guys to make the most out of it. But you can use the same process in any agent of your choice. I downloaded Codex and opened the project folder in it. The interface is similar to anti-gravity's agent manager to a great extent, but more focused on agents rather than code. The skills feature was the part we liked the most. In other agents, whenever you need to create your own skill, you have to get an open-source skill creator and build it from there. But Codex already has a skill creator built in and a lot of common readyto-use skills that come with installation and that wasn't available in other agents. To simplify the 3D animation process, I used the skill creator and provided a detailed description of how it should construct the animation along with the libraries it should use. It asked a few questions and once those were answered, it ran the scripts contained in the skill creator, built the skill and made it ready to use. Now, there was one thing that was different. Normally agents install skills in their aagent orclaude folder, but Codeex installed it in the root folder. So I moved it to the aagent folder manually, but it did follow the same pattern as the open-source agent framework laid out by Claude, containing scripts, references, and all the assets for adding capabilities to the skill. It also included a YAML file with the generic prompt that acts as a reference for the agent to know what user prompts will trigger the skill. I gave Codex the task of setting up the animations using the skill that was just created, including all the required details in the prompt. It started the implementation and ran the install commands. After a considerable amount of time, it completed the task, but it said it couldn't install the dependencies because of a timeout on the command in the environment. So, I asked it to write the dependencies into the package.json instead. When I ran the install command manually, I got errors because of dependency mismatches, because of different versions of libraries in the project. I had to debug it with Codeex multiple times until the animation on the hero section was finally working the way I wanted. Now, Codeex was taking a lot of time to complete individual features. So, I broke the tasks down into four subtasks. Each task contained one feature of the landing page and was isolated from the others and contained the objectives, requirements, and constraints. I used the multi- aent feature of Codeex and had each agent work on one of the tasks. Since all of them were working on the same landing page, I had them work in separate work trees instead of all making changes on the main branch because agents working on the same section causes conflicts in the code. Almost all of the agents finished their tasks in a similar time frame. I merged the outputs and got all of the features implemented together without any conflicts, but significantly faster given how slow codeex was on its own. Now that the website was ready and had the required components, everything except the hero section didn't have any animations and looked flat. So I turned to Gap for that. Gap is the JavaScript animation library used by a lot of professionals and it delivers consistent performance. Since the dependencies were conflicting earlier and I got that timeout error, I went to the terminal and installed GAP ahead of the implementation using the npm install command. I gave Codeex a highly detailed prompt containing instructions for adding animations and specifically told it not to touch the hero section since it was already in a good state. I added specific instructions on how and where to add animations. It took a long time to perform this task. There were a few minor errors which I reiterated by giving the error message back to Codeex. After that, the animations were implemented and the hero section stayed exactly as it was. But scroll triggered animations were added to all other sections and that made a noticeable difference in how the site felt overall. Now, even though the website had animations, the components still looked flat compared to the hero section. So I went to as eternity UI and chose components from there because acetity components come with a lot of built-in micro interactions and animations that are ready to plug into a project. I went to codeex and asked it to replace the existing components with aceternities while keeping the animations the same. After the implementation I noticed it had added gradients that didn't match the app's theme. So I gave it a screenshot and pointed out that the gradients were going against the existing theme and after that it switched them to colors that matched. But when I looked at the animations, the components it had implemented were static and didn't have the micro interactions that aceternity components normally come with. So I told Codeex that there are acetity components with built-in micro interactions like tilt on hover effects and asked it to use those instead of the plain ones. After that, the components had hover tilt and interaction effects built in and the site felt noticeably more interactive. To further improve the visuals, I used a public repository called post-processing which is available as an npm package. It's a post-processing animation layer that gets applied after effects when using React 3 fiber. Through this, we can use image processing features like gamma correction and other refinements for high performance results. I gave Codeex a prompt to use this library to create subtle lighting effects and asked it to guide me through the process. It didn't get it right at first and there was no visible difference in the output. I had to debug it multiple times by prompting it again until it finally got the effect right and added a subtle glow to the 3D model and that gave the whole section a more finished look with warm lightning on the hero section. That brings us to the end of this video. If you'd like to support the channel and help us keep making videos like this, you can do so by using the super thanks button below. As always, thank you for watching and I'll see you in the next one.