While experimenting extensively with AI services—specifically ChatGPT, Claude, Gemini, Perplexity, Cursor, v0 and Lovable—since last month, I’ve been considering ways to improve my workflow as a product designer. Here are four major areas that I use AI when I design:
1. Producing Design Systems
AI excels at systemizing rule-based tasks, making it ideal for automating design system production. Here are a few tasks I’ve performed using AI. For design systems, I primarily use Claude or v0, as they consistently deliver the best results. Whenever I mention AI in this context, I’m referring to these two tools.
1.1 Designing Icons
I was surprised to discover AI’s capability to create icons. These tools generate icons along with code snippets that can be directly integrated into Figma or React. For instance, when I requested “UI icons for a music player,” they provided a React prototype with usable icons. In contrast, ChatGPT (4.0) and Gemini (2.0-flash) only produced distorted, abstract images resembling icon sheets.
1.2 Producing Color Palettes
If your brand color palette is limited, you can use AI to generate color shades for design systems. I’ve found Claude and v0 to excel at this, while results from ChatGPT (4.0) and Gemini (2.0-flash) were subpar and unusable.
1.3 Creating React Components
Both Claude and v0 generate effective React components for design systems. I prefer v0 because it can create a Storybook project to showcase the components. However, for simple copy-paste components, both tools perform well.
2. Rapid Prototyping
v0 enables rapid front-end prototyping for Next.js applications. You just describe your needs, and its AI does the rest. While the quality depends on your prompts and designs, the results are generally impressive. Pro tip: Use AI like ChatGPT to draft product requirements and prompts.
Lovable is another promising service for front-end prototypes from prompts. It focuses on refined, opinionated UI design. While v0 is better for handling source code and integrating with Vercel, Lovable is more appealing for designers prioritizing UI design over code management.
I prefer Lovable for its better usability and prototype quality. However, for improved code structure or easier deployment, I download Lovable’s code and import it into v0. Both services produce similar-quality code, depending on the project type.
3. Creating Custom Apps
Last week, I spent an hour creating a functional product, an Obsidian plugin that converts Media Links to HTML tags. More time went into figuring out how to publish it on the Obsidian community marketplace (still under review).
I used v0 to generate the project structure and then downloaded it to refine with Cursor, a VSCode-based text editor that integrates various AI tools. Claude (3.5-Sonnet) was my main assistant in Cursor, with occasional help from ChatGPT (4.0-mini) and Gemini (2.0-flash-exp).
Gemini is great if you want free API integration. It is the only option that provides free API service. 2.0 flash is still a bit behind the competitors but better than previous versions.
Alternatively, VSCode with Cline plugin is the best bet if you prefer open source options. Keep in mind that you would need a good amount of manual settings to use Cline.
Some might criticize the code quality, but considering it was created with minimal instructions, it’s impressive. Even the documentation was AI-generated. With more effort, I could achieve cleaner code by allocating additional tokens for code optimization.
4. Assisting My Writings
AI has also been helpful in improving and streamlining my writing tasks. Here are some examples:
- Brainstorming new product ideas
- Competitive analysis / finding competitors
- Producing UX research or user interview questions
- Writing product requirements documents (PRD)
- UX writing
- Creating product documentations and tutorials
These use cases are extensive and deserve a separate article to articulate fully. I might cover them in detail later. In a nutshell, README files are what AI can write the best. Ask AI to write them if you didn’t try yet.
Conclusion
If you’re a designer, it’s worth trying AI tools for design systems. They can significantly streamline tasks in various ways.
If you want to a good-looking, functional prototype, try Lovable. I loved the output a lot.
For those who prefer to code, v0 and Cursor combination is an excellent choice. This pairing simplifies project setup and refinement, enabling efficient and effective development.
In any cases, don’t forget to utilize it while writing anything.