How I Made a Searchable Illustrations Database

OpenAI vision API + bunny.net + Cursor + Supabase + Vercel

👋 Get weekly insights, tools, and templates to help you build and scale design systems. More: Design Tokens Mastery Course / YouTube / My Linkedin

---

In this post, I’ll cover:

1. How to move illustrations from Figma and use AI to rename them automatically

2. Where to upload illustrations to create a searchable database

3. How to use the Cursor to build the interface

4. How and why to use Vercel

Let's dive in 👇

---

We have 1000+ illustrations in one Figma file. 🫠 Since the illustrators are outsourced, illustrations are only grouped and categorized in one huge Figma frame. When I need to find the proper illustration, it takes A LOT of time to go through. I also tried exporting to a folder, but it still took a lot of time.

I got fed up and built my illustration inventory system.

Here's my exact stack:

• bunny.net (The global edge platform) → Used it for storing illustrations

• Supabase → Create this after your images are stored; it holds the searchable metadata

• OpenAI API → Script that uses OpenAI vision and tags everything automatically

• Cursor → The AI-powered editor that accelerates building the connecting interface

• Vercel → Hosts Next.js application with automatic deployments from GitHub

The Migration Process for 1000 Illustrations

The Process Flow: Export from Figma → AI scan and rename → Upload to bunny.net → Set up Supabase → Build interface with Cursor → Deploy to Vercel

Step 1: Export illustrations from Figma
Export Everything as SVG. I organized illustrations in folder, so it wil be easier to find them.

Step 2: OpenAI Vision API
Then came the clever part: I created a script that used OpenAI's vision API to scan each image and automatically rename the files based on their visual content.

Step 3: Challenges

This wasn't without challenges. Some illustrations were branded versions of common objects (think a rabbit wearing our company colors instead of natural brown), which confused the AI initially. The system would identify "rabbit" but miss the context that this rabbit is playing guitar or games. I had to refine the prompts and manually add missing details for these edge cases. It was still way faster than doing everything manually.

Bulk import to bunny.net

Step 4: Upload to bunny.net

Once the files were named correctly and tagged, I used bunny.net's library API to bulk upload everything. Their CDN ensures fast loading regardless of where your team is located.

bunny.net interface

Step 5: Supabase for Search

With all images safely stored in bunny.net, I set up a Supabase account to handle the metadata. This PostgreSQL database stores all the searchable information—titles, descriptions, tags, and image URLs.

Step 6: Build Interface with Cursor

Using Cursor's AI assistance, I “vibe-coded”:

• A responsive grid interface for browsing illustrations

• Advanced search functionality that queries tags and descriptions

• Filtering by colors, themes, and styles, tags, title

• Bulk upload capabilities for future additions

• Simple authentication to keep the inventory private

• Downloadble assets

Step 7: Deploy with Vercel

The final step was getting everything live. Vercel's seamless integration with Next.js made deployment effortless. Just connect your GitHub repo, and it handles the rest automatically.

What You Get

✅ Smart Search → Find by any keyword/category
✅ Auto-tagging → AI identifies themes, styles, elements
✅ Bulk Import → Migrate entire Figma frames to bunny.net
✅ Downloadable assets with preview

Search "emoji" → Get relevant results 😊

My illustration database vs Figma

• We could use Figma and frame and name every illustration, but it is impossible to use it for someone who doesn't have a Figma account

• bunny.net API can be used by anyone who wants to store new illustrations (and illustrations are then automatically shown in the database)

Worth the Investment?

YES! Building this system took some upfront time, but it's already paid dividends in reduced frustration and faster project turnaround.

What would have taken weeks of traditional coding was completed in a few days. Cursor understood the context of connecting bunny.net's CDN with Supabase's database and generated most of the boilerplate code automatically. I could focus on the user experience rather than wrestling with API integrations.

Sometimes the best tool is the one you build yourself (well, for my team as well.) ✌️
Let me know if you have any questions. 🙌

— If you enjoyed this post, please tap the Like button below 💛 Thank you.

---

---

💎 Community Gems

Summer AI inspiration links for designers

🔗 Link

One of the most viral Veo3 prompts (with the video)

🔗 Link