The Best Design Tool for AI Coding - Figma

Why Talk About This?

Actually, this article is about sharing some insights from using AI to code recently. The title came to me while showering - I'll explain why later.

Recently I used Cursor to write a Chrome Extension and two Figma Plugins, all of which I'm trying to publish. I hope to complete the entire process.

I was really happy during this process. It felt like playing a game - watching my requirements get implemented and finally seeing it work gave me such high satisfaction.

What I tried were still very simple tools, but I still have some small insights.

1. Mindset: Pretend You're the First to Make It

Regardless of whether this tool already exists in the market - since I'm just starting to code, I can't make anything too complex. But I know many simple tools might already exist, and I was afraid finding them would affect my motivation to challenge myself.

So I executed with a "I'm the first to make this tool" mindset, which made the sense of achievement even greater. It's just trying anyway - don't limit yourself too much from the start.

2. Process: Make Good Use of Google and AI

For environment setup and development processes, Googling might be faster since these are relatively fixed and mature things. Asking AI might lead to more detours.

Once the process is determined, writing with Cursor is very fast. If there's anything I don't understand during the process, like which file to put the code in, I just ask directly. Most of the time I get answers.

3. Key Point: Figma is the Best Assist

Back to the title - Figma has always been a design tool I really like. I've been sharing free tutorials recently and plan to do live courses, sharing the benefits of Figma for graphic design.

These past few days I discovered another benefit: if you want the UI of programs written with AI to look better, learning some Figma is definitely right.

Because Figma itself has many ready-made UI assets. You don't need to know design - just know how to piece things together. Like the interface in my image was pieced together.

After piecing it together, you can right-click in Figma to copy CSS, paste the code to Cursor, and it can complete a good-looking UI interface accordingly.

Conclusion

Figma is free for personal use. It's great for making social media graphics, article images, and UI. Now combined with various AI tools, I alone am a whole team.

By now you should understand why I titled it this way. If you're also interested in Figma, I'll be doing live courses for individual creators, sharing how to make IG graphics. In the future, I'll probably also share how to simply make UI interfaces yourself.