Hey everyone,
If you’ve been following the channel for a while, you know I test a lot of AI tools. I get comments every single day asking for specific recommendations, and while I love doing deep dives in my videos, sometimes you just need a quick search to find a tool right away.
So, I built a solution: An online directory of the best AI tools for UI/UX, reviewed and curated by me. It’s currently live as a draft, and I’m working on the content. I want you guys to be the first to play around with it. Check out the interactive "Tooltip" cards, the tools info and the website as a whole. Leave a comment on the youtube video to let me know what features or info you want me to add next.
How I Built It
As a product designer, I had incredibly strict requirements for this project. I needed a site that was:
Easy to update: It had to have a CMS (Content Management System), so fully AI-generated sites wouldn't work.
SEO-Optimized: I wanted deep technical control over page structure to rank on Google.
Pixel-Perfect: I needed 100% control over the UI design.
I ended up using Framer. More specifically, I used their new AI feature called Workshop. It allows you to generate completely custom, interactive components using AI, while keeping the ability to plug them directly into a CMS.
The workflow I came up with took a lot of trial and error, and I haven't seen anyone else doing it exactly like this. So, I put together a mini-guide for you.
Build a Smart AI Component
If you want to level up your product building skills this week, try this workflow. It’s the exact method I used to build AI components with CMS:
1. Map Your Data
Before you touch any AI, figure out exactly what data needs to change for each item in your directory. Create a table. For my tool cards, I mapped out: Tool Name, Logo, Summary, Difficulty Level, and Cost.
2. Prompt Framer Workshop AI
Open Framer, go to Workshop, and upload a rough visual mockup of your component. Write your prompt.
The Secret Sauce: If you have multiple-choice fields (like Difficulty: Easy, Medium, Pro), tell the AI to build them as Number Fields (1, 2, 3) rather than standard option fields. This is the only way the AI component will natively understand the logic when you connect it to your CMS later.
3. Build the CMS & Connect
Grab a free directory template in Framer, delete what you don't need, and set up your CMS database to match the table you made in Step 1. To connect your new AI component, you have to create "Variables" inside the component first, and then map those variables to your CMS fields.
Use this code for a free month of Framer Pro: TOOLTIP1
Watch the Full Step-by-Step Breakdown
If Step 3 sounds a bit confusing, don't worry. There is a very specific trick to making the AI component talk to the CMS without breaking.
I just published a full, step-by-step video tutorial showing my screen, exactly what prompts I used, how I created the AI Components, and how I tied it all together with a CMS for free.
If you want to build a dynamic website with AI that is effortless to maintain, you need to watch this workflow.
Drop a comment on the video and let me know if you have any questions and what you think of the new website.
Cheers,
Jad
