Before/After Highlights

Previously, you had to write all UI components by yourself. Now, you can generate a ~90% UI component in <1 minute with stories and tests, and spend a few more minutes to fix the details. Unfortunately, it’s true only for standalone UI components, but not for pages.

Context of the comparison

Client project where we needed to build UI components from Figma designs quickly, with tests.

Goal

Implementing React (NextJS) UI components based on Figma design.

Guidance for Future

• Ask the AI in the chat to save your development workflow in its memory, like running unit tests, linter, type check, and prettier on each generated code, and iterate until errors occur.
• Use AI to generate standalone UI components. Attach a screenshot or a Figma link (turn on Figma MCP in this case) about the component. Generate unit tests as well. It helps if you list the required props, variants and behaviours as well in your prompt. If the component should use other components (own or 3. party), define these as well.
• Use Storybook in your project to check the generated UI components, ask the AI to generate stories for the components.
• Don’t try to generate a whole page with AI, it’s bad in this, even with Figma MCP. Instead, add the components by yourself to the page, and ask the AI to fix the design based on an attached screenshot.
• Ask the AI to check the result with Playwright MCP and fix the differences compared to the attached design.
• If you don’t use CodeRabbit, ask the AI to generate a PR description in md format that you can just copy to GitHub. It helps if you save a template PR description in the memory. Check the result, because it’s usually not 100%: it contains links that won’t work on GitHub, and it won’t include your manual changes, by default, it uses only the code that it generated. That’s why it’s better to create a git diff into a file, then copy its content to the prompt when you ask for the PR description.
• Open a new context in every PR.

Output

Hasn’t deployed yet.

Risks / Surprises

• It’s surprising that even with Figma MCP, Gemini couldn’t generate a simple page (login page) correctly. It hallucinated features and elements that were not on the design, even after I let it know about the mistakes. The main structure of the page looked fine at first glance, but the details were totally different from the Figma design.
• When you ask the AI to generate a PR description about the changes, it writes the description based on the code that it generated, and it doesn’t apply your manual code changes. So even if you correct something in the generated code, it writes the generated version in the description.

What Didn’t Work