How AI is Transforming the Product Design Workflow
Overview
- This is a summary of a presentation I gave at the Second Stage of AI and Design on April 9, 2025. Some content and images have been modified.
- I talked about how the 1st product designer of a cyber security startup called GMO Flatt Security is using generative AI in practice.
Contents of the speech
Hi Hal (@hrtnde ), I'm a product designer at GMO Flatt Security.
On April 7, we released Takumi, our security AI agent, to early access users. It was one month after we planned it. The other authorization diagnostic function we released in February was also one month from planning to release. It was developed by just two people, a senior engineer and myself. In this era of rapidly evolving generative AI, we believe that "speed of development" is more important than ever.
Hope and Threats with Generative AI
Recently, I often see posts on social networking sites that say, "I am a non-engineer, but I was able to build a service in N days!" The progress of technology is truly remarkable and exciting.
In fact, I am also developing a coffee app on weekends. I wrote a requirement definition in Claude.md and had them implement it, and they implemented what I wanted to make to some extent. On the other hand, I have some misgivings about this trend.
As a designer and now as someone who works for a security company, I am much more sensitive to the risks behind "anyone can easily create something" than before. Making a product "secure," or safe, is actually very specialized and difficult. There is no end to the number of cases where easily created services become the target of malicious attackers.
Recently, I saw a sad post on X about a SaaS built with "Vibe Coding" that was attacked and its information was leaked. Unfortunately, we are also hearing stories of generative AI being abused to create sophisticated malware and used in attacks.
Attitude Required of Designers in the Era of Generative AI
Generative AI is a wonderful technology that extends our creativity. However, if used in the wrong way, it can also be a major threat to society.
Takumi," which I introduced at the beginning of this article, actually discovered a vulnerability hidden in widely used tools such as Vim and Next.js. What does this fact mean on the flip side? It means that if someone with malicious intent were to create a similar AI tool, systems around the world could be exposed to unprecedented threats.
I believe that it is the "creators," especially us designers, who have been seriously considering and facing what value we can offer to users, who have the responsibility to deeply understand generative AI and utilize it for a better future. We felt that we must deliver this "Takumi" like protective sidekick to the world faster than any malicious group. Such urgent thoughts were behind the uncommonly fast development of the product, which was released only three weeks after the planning.
As a designer, I am also aiming for both "value delivered to users" and "development speed" by actively utilizing generative AI. I would like to introduce five examples of how I use generative AI in my daily work to achieve both value and speed.
Code-First Design: Streamlining Frontend Implementation with AI Tools
The first case study I would like to introduce is the one I would like to convey most today.
It is " Let's design in Code with the help of generative AI. In conclusion, I feel that an environment in which designers can easily design with Code is now in place. I will now talk about that case study.
In my team, I, as a designer, am sometimes fully involved in front-end implementation. This is because in some cases, especially in situations where speed is required, it is faster to do it myself.
The image on the screen now shows a function released in February that deals with incomplete authorization, and I was in charge of the entire front-end implementation of it.
Actually, I was assigned to implement it due to an engineer's reckless decision. Since I joined the company, I've been making a lot of PRs and I've gained a mysterious trust in the company. However, I am not an engineering expert. So, I utilize NotebookLM and Cursor.
NotebookLM is an AI-powered note-taking tool provided by Google. I load API documents and other documents into NotebookLM. How do I use this API? What do these parameters mean? NotebookLM understands the content of the document and explains it in an easy-to-understand manner. This is very efficient because you can learn the necessary information with pinpoint accuracy without having to read through thick documents.
Next, let's use Cursor, an AI-assisted coding editor that generates basic code based on what you have learned in NotebookLM. Of course, the generated code may not be perfect, but it is much faster to implement than writing from scratch. Even when an error occurs, you can ask, "What caused this error?" and it will give you hints on how to solve it.
We even had a generative AI create sample data based on the backend data structure that the engineers were designing and run it in Storybook.
I had Cursor rewrite the code nicely before asking the engineer to review it, and the engineer praised the implementation, so I think I was contributing to the development. Thanks to these AI tools, even someone with a design background like myself, the hurdle for front-end implementation has been greatly lowered, allowing me to contribute more to the overall development process.
Enhanced Research: Accelerating Hypothesis Building with Deep Research
As a second example, I mainly use ChatGPT's Deep Research during the research phase.
For example, after planning your research, but before actually doing the research, ask Deep Research what you want to clarify; Deep Research's answers will not necessarily be correct, but they will help you brush up on your hypothesis.
When considering the billing system for our other most recently released AI agent, we researched overseas papers to find out what kind of change in willingness to buy would occur when a "point or credit system" is used.
The efficiency of information gathering and idea generation in the early stages of research was greatly improved by the use of ChatGPT. In a previous article I wrote, I mentioned the importance of reading blogs and books before researching to create a map of the overall picture of the business in one's mind. Generative AI can greatly reduce the time it takes to get the chutzpah up to speed. After that, we consider what kind of interviews we should conduct, and conduct interviews and usability tests as needed.
Smart Requirements: AI-Powered Specification Development
Generative AI can also be fully utilized when generating ideas and defining requirements based on information obtained through research.
What I often do is to "let the generative AI create the basis for defining requirements. For example, I have Deep Research research the best practices and anti-patterns of SaaS initialization in the world, and then I have it write a user story based on the research. Then, you can brush up on it while tweaking it to organize the requirements at a high speed.
It is also easy to create various scenario patterns and diverge them to explore the possibilities in a short period of time.
Also, when we, as non-engineers, want to add a new feature on a large code base, it is very helpful to understand the difficulty level of implementation as a wall-check before planning how many man-hours it will take to implement the feature. We also feel that AI interaction is very effective in preventing conflicts of understanding among the parties involved.
AI-Driven UI Design: Leveraging v0 and Devin for Rapid Prototyping
Generative AI can also be fully utilized in UI design.
I once implemented a Variables-like function on Shisho Cloud byGMO, which we are developing. In that case, I verbalized the specifications of the component in v0, had it implemented, and shared it with the engineers to confirm their understanding of the specifications. We brushed up our UI design ideas by looking at the output of the v0 implementation.
We also employ Devin, an AI engineer who is an AI agent developed by Cognition and can autonomously perform development-related tasks.
Since our product team consists of about 10 engineers and I am the only product designer, I cannot be in charge of all UI design, so I have Devin implement the UI and I do the reviews.
In this case, it is very important to have documents that are easy for AI to understand in a place where AI can access them. Tobi-san of Cybozu wrote a nice article on this subject, so please read it.
Automated Design Enhancement: Streamlining Design System Integration
Next, we introduce a case study of design improvement using Devin, which solves issues that designers want to work on but are often put on the back burner due to development priority issues.
For example, Devin can replace existing components with components created by the design system.
He is also good at improving multilingual support. In this way, designers can actively utilize AI agents such as Devin for minor front-end modifications, as they can check the implementation afterwards.
Now that even generative AI can design, how will our work change?
Now that I have introduced several case studies, I would like to summarize. I hope that the examples introduced today have given you some sense of the reality of how generative AI can now be used to design. Now that even generative AI can design, how will our work change? I would like to end today's talk with my own opinion on this question.
I see two major changes: First, people will be able to spend more time doing what they are passionate about. I have more time to streamline my research and spend more time on the issues that people are facing, and being closer to the code allows me to focus on the details of the features that are released, albeit in a startup environment. This would not have been possible without the help of Generation AI.
Also, while detail-oriented design may no longer be necessary on Figma, I believe that designers are more likely to be detail-oriented when they are closer to the code. We believe that our expertise will make it easier for us to focus on the final product and raise the level of design even higher.
I am here today because I hope to see a world where those of us who believe in the value of design for the betterment of society can actively utilize generative AI.