A breakdown of how I use AI to bring designs closer to coded prototypes.

Tools Used: ChatGPT, Datatodesign (by DivRiots), Apify, Figma

Ever wondered why creating a realistic data table is so painstakingly manual and time-consuming? I know I have.

By leveraging AI, it’s now possible to create prototypes that closely mimic real-world applications, making designs more robust and realistic. Here are a few ways I’ve used AI to enhance my prototyping process:

Generate Realistic (Fake) Data

When building applications that rely on extensive data visualizations, AI becomes an invaluable asset. For example, during a take-home assignment to create a dashboard for a digital asset platform, I wanted to showcase live transactions to simulate real-time trading activity.

To achieve this, I utilized AI in two key ways:

1. Generate realistic transaction data:

I had AI provide realistic conversions for traded assets.

2. Create a CSV file for input:

I prompted AI to generate a CSV that I could integrate directly into my designs.

Please create me a fake table that I can export as a CSV:
Column 1 header: Time
Column 2 header: Transaction Type
Column 3 header: Amount
Column 4 header: Sent
Column 5 header: Amount
Column 6 header: Received
Column 7 header: From
Column 8 header: To
Fill column 1 rows with times by amount in minutes starting with most recent - format like "1 minute ago"
Fill column 2 rows with transactions between: Bought, Sold, Traded
Fill column 3 with random amounts below 100 if row 4 contains “ETH” and 2 decimal max
Fill column 4 rows with assets: “bondETH”, “levETH”, “ETH” (only include ETH if column 2 contains Bought or Sold)
Fill column 5 with random amounts
Fill column 6 rows with assets: “bondETH”, “levETH”, “ETH” (only include ETH if column 2 contains Bought or Sold)
Fill column 7 rows with random crypto wallet IDs
Fill column 8 rows with random crypto wallet IDs BUT don't include if row 2 contains "redeem"
Use conversion ratio between assets:
1 ETH = 24.677485 bondETH
2 levETH = 12.191156 bondETH
Do not trade same asset for itself (ie ETH for ETH)
Fill 30 rows with info

This prompt generated a realistic CSV that I later used to populate the design with accurate data using the data.to.design plugin.

Import Data Sets to Figma with data.to.design

One of the most efficient tools I’ve found for handling large data sets in my designs is the data.to.design by DivRiots. It allows for seamless integration of large datasets directly into design files, meaning instead of manually changing and adding individual row items, you can edit a ton of them with the click of a button. Whether you’re populating tables, charts, or grids, this plugin enables quick imports and dynamic updates, heavily reducing manual work. I’ll be covering more about how this tool enhances workflows in another post!

Scrape Real Data for Prototyping

Here’s another use case for a YouTube homepage prototype. Using a web-scraping platform, I can extract real content data to input into my design.

I found a template from a platform called Apify that offers pre-built web scrapers. While the web scraper did work, it wasn’t perfect for my needs—I needed specific data like thumbnails and channel images, which weren’t included in the default output.

So I needed to…

Build a Custom Web Scraper with AI Assistance

Ok I know this gets a tiny bit technical but bear with me. I have zero, and I mean zero coding knowledge, but this is a great example of how AI enables designers like me to go beyond traditional boundaries. Apify’s platform allows users to build custom scrapers using their code builder. With no prior coding experience, I relied on ChatGPT to walk me through the process.

By screenshotting each step, I was able to ask ChatGPT for advice, adapt the code, and input it into Apify’s platform. It took me about an hour to get everything working, but without AI’s guidance, I would have given up early on. The code probably isn’t perfect, but as a user it really doesn’t matter. What matters is that I got exactly what I needed.

The Impact

By leveraging this AI-powered workflow, I’ve been able to dramatically improve the realism of my prototypes and communicate through more cohesive designs. As AI tools continue to advance, so will the ability for designers to deliver more polished, realistic prototypes—blurring the line between design and development.

Automating Workflows with AI: Enhancing Realism in Design