Original video in Chinese.
Key Takeaway
- I introduce two ways to use Cursor for UI design: a free method that generates JSON configuration with a general-purpose LLM, and a paid method using the v0 model API.
- General-purpose LLMs are not great at generating UI directly, but accuracy and efficiency improve significantly when you feed them structured data like JSON.
- The v0 model is trained specifically for UI and front-end development, and connecting it to Cursor through the API gives you better UI generation results.
- After finishing the UI, you can add animations with tools like Framer Motion or Reactbits to improve the user experience.
- A modern front-end UI development toolbox includes React, Radix UI, Tailwind CSS, and Framer Motion.
Full Content
I have two of the simplest and most effective ways to use Cursor for UI—one free, one paid. Whether you’re making a website UI or an app UI, both work.
Why not just use the model in Cursor directly? Because those models are really bad at drawing UI, even Claude 4 isn’t that great.
For example, this is the UI I drew for my second product using Keynote. I exported the image, pasted it into Cursor, used MAX mode, selected the strongest model available right now, Claude Opus 4, and asked it to generate something based on that.
You can see the final result—it’s really pretty bad. For example, the big title was split into two lines; the Submit button wasn’t centered; and in the How It Works section, there were clearly three containers, but one of them ended up below.
When I was working on my previous product, Prompt House, I ran into a situation where the model just couldn’t draw the UI well no matter what. It was extremely frustrating. In the end, I had no choice but to have it tell me the exact code locations, and I manually adjusted them.
What I’m sharing today is something I learned in the last few days. Let’s start with the free method.
When you have a UI image, don’t put it directly into Cursor. You can open Gemini, ChatGPT, or Claude—any of them works. For example, I’m using Gemini here, and I turned on the Canvas feature.
I pasted the image in and asked it to generate a JSON-format design system configuration file based on what the image looks like. This JSON output includes things like the overall design style, structural elements, and layout principles.
Then, paste that JSON configuration into Cursor and let the model output everything strictly according to it. You see, isn’t the result much better? It’s basically identical.
So why does this method work?
Because although models have no problem understanding natural language, once the task involves precise, structured, unambiguous data input, a structured data format like JSON allows the model to understand more accurately, process more efficiently, and produce more stable output.
OK, that’s the first method, completely free, but a little more cumbersome. If your UI work needs are stronger—for example, if you need to iterate back and forth a lot—then I recommend directly calling the v0 model through the API.
The v0 model is launched by Vercel and is trained specifically for UI and front-end development. So for this kind of work, v0 is better and more suitable than general-purpose LLMs like Claude.
I used to often use the v0.dev website to generate UI. But if you want to call the model through the API, you need a subscription, which is $20 a month. I usually just subscribe for one month when I need it and batch-complete all the front-end work.
After subscribing, go to the dashboard and generate an API Key. Back in Cursor, in the model settings, choose the API Keys option, and there you can use your own key.
Because the v0 API follows the OpenAI spec, we turn on the Override OpenAI Base URL option. Change the middle part of the URL to v0.dev. Enter the v0 API Key, then select Verify and you’re done.
When we want to use it, we can choose an OpenAI model like GPT-4o. Although it shows GPT-4o, it actually goes through the v0 channel, so what’s being called is the v0 model. That way, we can complete all the work directly in Cursor.
Finally, one more thing. After finishing the basic UI, we can add some animation effects to improve the user experience. For example, we can have Cursor add Framer Motion. I used it in Prompt House, both on the web and Mac versions, and the whole thing feels much smoother.
Or you can also use sites like Reactbits, copy and paste the animation code into Cursor, and let the model integrate it.
Just like I said in the community, the entire front-end UI involves these four parts: React is the project manager and architect; Radix UI is the functional engineer; Tailwind CSS is the visual designer; Framer Motion is the motion designer. Together, they form a very modern and powerful front-end UI development toolbox. You can combine them as needed when developing.
OK, that’s all for this episode. If you want to talk AI, want to become a super individual, and want to find like-minded people, come join our newtype community. See you next time!