Leveraging GenAI to build a Chinese character tracing App
It gave me the confidence to try, and when I did, it made me feel that I could create such a program. It then guided me step by step to turn my idea into reality.
Last year, I used ChatGPT 3.5 to create a simple JavaScript game where players tap on falling keys to remove them (Try here: x.yingyingz.com/exp/keys). ChatGPT had just become popular, and I was looking for something fun to do. Working with ChatGPT felt like having a very patient, expert software engineer by my side, which greatly improved my productivity.
The game only needed three files - HTML, CSS, and JavaScript - and took about three days to finish. I was very proud of the result. I have a computer science background, so I understand the basics, but I've never really enjoyed programming. The detailed aspects of coding and algorithms often felt tedious to me. While I could read code, I hadn't written any in years. Without ChatGPT, I doubt I would ever have tried coding again.
This year, AI capabilities have advanced incredibly quickly. From coding to creating images and videos, it seems like there's a new breakthrough every few days. Impressive tools are appearing in many different fields.
When I made that small game last year, I would tell ChatGPT what I wanted, and it would create the code. Then I had to copy that code into an editor and debug it. There was also a limit on how much code it could generate at once, so I had to copy it in parts. Although ChatGPT really helped me work faster, all the copying and pasting was quite tedious.
Recently, a new programming tool called Cursor AI came out. It combines regular programming tools with GenAI. While you're coding, it can look at your current file and use GenAI to suggest changes or offer advice based on what you need.
A React App for tracing Chinese characters
I had an interesting idea in mind and wanted to try out Cursor AI, so I got started with it. I ended up creating a web-based React App for tracing Chinese characters. In this app, you can see a random Chinese character, trace it stroke by stroke, watch an animation of how to write it, hear how it's pronounced, or move to the next character. If you're curious about a character, you can click a link to read about it on Baidu Baike. You can try the app at x.yingyingz.com/exp/tracechar.
I'm very grateful for the open-source Hanzi Writer library - I couldn't have made this app without it.
It took me about ten hours to create this interesting little project. What’s worth noting is that I had never made a React app before and knew almost nothing about it, including any related packages or commands. Without GenAI, I probably wouldn't have taken the time to learn React from scratch, let alone write an app. The fact that I could do this in just ten hours is amazing and shows how powerful GenAI can be.
Using GenAI tools
I used two GenAI tools for this project. First, I used Claude AI from Anthropic to develop my idea. Then I used Cursor AI to turn that idea into a real React App.
Claude AI can now show previews of code and even build a React App in its system. After I described what I wanted, it created the code right on the page, letting me see how it would work. I used Claude AI to get a rough version of what I wanted, then took that code to Cursor AI to make my own React App.
My experience with Cursor AI was similar to making the previous game - it was like having a very patient and knowledgeable software engineer helping me. It solved important coding problems, answered my questions, gave suggestions, and improved my code.
When I didn't know how to start a React App, it guided me step by step. It gave me commands to install what I needed and explained which files the App required and what changes to make. Even though it could only see the code on the current page, it would tell me things like, "In your React App's folder, you'll find a file called package.json. You need to change this file in the following ways." Finally, it taught me how to deploy the App online, what to change in the settings after uploading it via FTP, so I could successfully open the link and see my small program working on the internet.
Its guidance was incredibly helpful, and I'm amazed at how great this experience was.
Interesting moments while building the App
When I first started using Cursor AI, I wanted to see what would happen if I just accepted all its suggestions without thinking. So after telling it what I wanted, I blindly accepted every suggestion, letting it change the code directly.
However, when I started incorporating the Hanzi Writer open-source Chinese character library, it suddenly loaded too many characters. This caused the browser to run out of memory and crash after each time it tried to compile. As a result, I couldn't automatically compile after each time I saved the code. In the end, the code became so messy that I couldn't even fix it - I had to start over from the beginning.
After this, I decided to really understand what GenAI was suggesting each time it gave me code advice. I realized its suggestions weren't always the best solution; sometimes they were incomplete or had strange errors. Starting over, I became more careful. Each time it had a new suggestion, I would test it, undo it if it didn't work, and then tell it that the code it gave me had problems. It would then help me think of another solution. By going back and forth like this, we actually finished the App faster.
What I like about Cursor AI
Cursor AI has some features that I really enjoy:
When I first created the React App, I needed to use npm install and many other commands in the Command Line Interface (CLI). I didn't understand any of this. For each command the AI gave me, it explained what it did and let me run it directly in the AI chat box, without needing to copy it to the CLI.
If GenAI gave me new code and I didn't want to manually copy it into my original code line by line, I could click 'Apply' directly from the chat box. This would add the new code to the original and show me a comparison. Then, I could look at the changes and choose to accept them one by one or all at once.
I think whoever designed Cursor AI must really understand what programmers need. Programmers want to change code efficiently, with as few steps as possible, preferably without even moving the mouse. I feel like Cursor AI was designed with exactly this goal in mind. I'm very impressed.
Final thoughts
From making a simple JavaScript game last year to creating a React App this year, GenAI has turned what seemed impossible for me into something possible.
It was "impossible" because I don't code regularly, and with my limited time and energy, learning JavaScript and React from scratch just to make a few small programs would have taken too long. But it gave me the confidence to try, and when I did, it made me feel that I could create such a program. It then guided me step by step to turn my idea into reality.
Also, like last year, when making this character tracing program, I didn't draw anything on paper. I made it directly on the computer, so I didn't need to do any UI design separately. The result was an interactive program that could be used right away. This feels incredibly amazing to me, and it's what I see as going from "impossible" to "possible".
Thinking about future possibilities:
As a user experience designer, I often work with product managers and software engineers. We all have parts of our jobs that can be tedious - designers sometimes need to move things around in design tools, and software engineers have to make various small adjustments. As a designer, especially in a complex field, we sometimes struggle to explain our ideas to our partners. Even when we draw our ideas, it's not always clear enough.
With GenAI, we can create interactive design prototypes more easily. This means designers can show their colleagues exactly how something should work, rather than just describing it or drawing it. It's much clearer and helps everyone understand if an idea will actually work in practice.
After creating these two small programs, I've realized that if a designer can harness GenAI, they can get a lot more done in less time. This means new design ideas can be shared and tested much faster than before.
GenAI is really changing how we turn ideas into real products. I think we'll see big changes in how we solve problems and come up with new ideas. For me, going from a simple JavaScript game to a React app so quickly is just the start. I'm excited to see what else this technology will allow us to do, and how it will help people with different skill levels create new things.