Introduction
Since I started publishing articles on Dev.to, I've been working on a personal project to transform my old blog website—which is no longer actively maintained—into a portfolio site♻️
As part of that project, I recently started learning Figma and UI design🎨 When I discovered Figma MCP, I imagined a future where generative AI could automatically create polished, modern, and visually appealing designs for me with minimal effort😎
Unfortunately, reality turned out to be quite different.
This article is a reflection on that experience and a reminder to my future self about what I learned along the way📝
TL;DR
- I wanted to design a portfolio website in Figma, but quickly realized that UI design was more difficult than I expected.
- I wondered whether using Codex and Figma MCP would allow me to outsource the design process to AI, so I decided to try it.
- I couldn't magically generate the polished design I had imagined while also maintaining a well-structured Figma file with globally managed variants and reusable components.
- I learned that defining design rules first and building components step by step helped produce results that were much closer to my original vision.
- Even then, the process was not dramatically easier than expected, so I eventually decided to keep things simple and build my portfolio around the design principles already provided by shadcn/ui.
What I Tried with Figma MCP🎨
While planning the UI design for my portfolio website, I initially created simple wireframe-like layouts in Figma to explore the overall page structure and component placement before working on detailed designs.
At first, I wanted to keep things simple.
However, as I continued working on the project, I found myself wanting something more polished, more modern, and ultimately more impressive.
The problem was that I have very little confidence in my design skills. I'm an in-house IT engineer, not a professional developer or designer, so I often struggle to judge what makes a design truly good.
That led me to a simple idea:
What if I could let AI handle the design work for me?
While researching possible solutions, I discovered that Codex could interact with Figma through Figma MCP. By connecting the two, Codex could actually edit Figma files and create designs based on my instructions.
That sounded promising.
So I decided to give it a try.
Doesn't Everyone Dream at First?🎰
Before using it for my real portfolio project, I wanted to answer a few questions:
- Can Codex really create designs directly in Figma?
- Can it generate polished and visually appealing layouts?
- How accurately can it turn a Figma design into a real web page?
Since it was also my first time using Codex, I decided to run a quick experiment.
My test process looked like this:
- Install the Codex application.
- Set up the Figma integration so Codex could write design data to Figma.
- Create a blank Figma design file.
- Create a local test project.
- Send a simple prompt to Codex and verify whether it could generate a design inside Figma.
- Ask Codex to build a web page from the generated design and evaluate how closely the implementation matched the design.
There are already plenty of great articles from DEV Community members explaining the setup process in detail, so I won't cover it here😂
The prompt I used was surprisingly simple:
Create a stylish portfolio website design.
(Screenshot of the generated Figma design)
(Screenshot of the web page generated from the Figma design)
And honestly?
The results were far better than I expected😮
The generated design looked great.
The generated web page closely matched the design.
For a moment, it genuinely felt like magic.
Reality Hits🪄
Encouraged by the results of my initial experiment, I decided to use the same approach for my actual portfolio project.
This time, I asked Codex to create a Figma design based on a homepage concept image generated by ChatGPT.
However, the results were very different from what I had expected.
At first glance, the generated design looked somewhat reasonable. But once I looked more closely, it lacked consistency. Component sizes, spacing, and layout rules all felt disconnected from one another.
It seemed as though the AI had focused only on the overall "polished feeling" of the image while missing the underlying structure that made the design work.
As a result, the entire page ended up feeling cluttered and disorganized.
To be honest, my only reaction was:
"Wait... how did it end up like this?"
Because my earlier experiment had produced surprisingly good results, I had assumed the same thing would happen with my real project.
Reality turned out to be much less forgiving.
It was at this point that I finally realized I had misunderstood something important.
The Problem Wasn't AI🔎
My first thought was:
"Maybe AI just isn't smart enough yet."
But the more I worked on the problem, the more I realized that the issue was somewhere else.
I had only provided the AI with a finished design image.
What I had not provided were the rules behind that design.
For example:
- A color palette
- Typography rules
- Spacing guidelines
- Component variants
- A layout grid
None of those things had been defined.
A human designer might be able to infer some of those details from an image.
However, an AI generating designs through Figma MCP needs more than just a visual reference. It has to translate that image into actual components, layouts, and reusable design patterns.
In other words, I was essentially saying:
"Make it look like this image."
without having any design system in place.
Looking back, it's no surprise that the results were disappointing.
Starting Over with Small Steps🚶♂️
So I changed my approach.
Instead of generating an entire page from the start, I decided to build the foundation first.
I began by creating a design specification file and defining things such as:
- Colors
- Typography
- Spacing
- Border radius values
- Shadows
Next, I created small reusable components, including:
- Buttons
- Cards
- Tags
- Navigation elements
I then defined variants such as:
- Primary
- Secondary
- Outline
Only after those pieces were in place did I move on to creating the page design itself.
The results were dramatically better.
The design was no longer chaotic, and the overall structure felt much more consistent.
Communication with the AI also became smoother, and providing feedback or requesting changes became significantly easier.
It Still Wasn't Magic👻
There was, however, one thing that surprised me.
The design was definitely better.
But the feeling I had during my first experiment—
"Wow, this is the future!"
—was gone.
In the end, I still needed to:
- Organize design tokens
- Design components
- Define variants
- Think through layouts
AI hadn't eliminated those tasks.
Instead, I realized something different:
The better your design system is, the more effectively you can use AI.
That felt much closer to reality.
What I Ended Up Doing🤖
Eventually, I decided to base my portfolio design on shadcn/ui, which had been my original plan from the beginning.
The reason was simple.
A lot of work had already gone into defining:
- Component architecture
- Variant patterns
- Design consistency
and those decisions had been validated by a large community of developers.
To be clear, I still think Figma MCP and Codex are incredibly interesting technologies.
Using them made it obvious that the gap between design and implementation is getting smaller.
But the biggest lesson I learned was this:
AI is not a replacement for a design system.
AI can be an excellent assistant.
However, it is not a magical tool that can automatically generate a complete and well-structured design from a vague idea alone.
At least, not in the way I was hoping to use it.
What I Learned✨
This experience taught me three important lessons:
- Think about your design system before asking AI to generate pages.
- Design components before designing entire pages.
- Good results require clear rules and constraints.
AI can create designs.
But it cannot magically create a design system for you.
Although the experience was a little frustrating, it ultimately helped me understand the importance of design systems far better than before.
Top comments (0)