When a developer going by umitomo-lab on DEV.to decided to rebuild an old blog into a portfolio site, they figured Figma MCP would handle the heavy lifting. Connect Codex to Figma, send some prompts, and out comes polished UI ready for implementation. The reality? Far messier than the demos suggested.
The Magic Moment That Fooled Me
The first experiment went suspiciously well. A simple prompt—"Create a stylish portfolio website design"—yielded results that actually looked decent. The generated Figma file translated closely to an actual web page, and for a brief moment, it felt like the future had arrived early. But this was a controlled test with low stakes, not a real project.
When Reality Hit
Applying the same approach to the actual portfolio project produced drastically different results. Using a ChatGPT-generated concept image as input, Codex created designs that looked reasonable at first glance but fell apart under scrutiny. Component sizes were inconsistent. Spacing felt arbitrary. Layout rules contradicted each other across frames. The polished aesthetic from the reference image was there, but without any underlying structure holding it together. The core issue: umitomo-lab had provided the AI with a finished design image but no design system to work from. No color palette. No typography scale. No spacing tokens. No component variants defined. A human designer might infer some of these details from context, but Codex and Figma MCP were essentially being asked to reverse-engineer consistency from a single visual reference—something they're not equipped to do reliably.
Building the Foundation Changed Everything
After hitting this wall, the approach shifted. Instead of generating complete pages upfront, umitomo-lab started by defining design tokens: colors, typography rules, spacing values, border radius guidelines, and shadow specifications. Small reusable components followed—buttons, cards, tags, navigation elements—with variants for primary, secondary, and outline states. The difference was immediate. Communication with the AI became smoother because there were concrete constraints to work within. Feedback loops tightened. The resulting designs no longer felt chaotic because the underlying rules kept everything coherent. But here's the thing: it still wasn't magic. All those foundational tasks remained—organizing tokens, designing components, defining variants, planning layouts. AI hadn't eliminated them; it had just become more useful once they existed.
Why shadcn/ui Won in the End
Despite the improved results from the systematic approach, umitomo-lab ultimately decided to build the portfolio using shadcn/ui instead of continuing with Figma MCP-generated designs. The reasoning was pragmatic: the component architecture and design consistency had already been worked out by a large community of developers. Starting fresh meant repeating decisions that others had already validated. This isn't a knock on the technology. Figma MCP and Codex represent genuine progress in bridging design and implementation. But they expose something important about how AI-assisted tools actually work in practice: they're force multipliers for existing structure, not replacements for foundational thinking.
The Three Lessons That Matter
First, define your design system before prompting AI to generate pages—without consistent rules, you're just getting expensive wireframes. Second, build components before composing full layouts—the same principle that applies to code architecture applies to design scaffolding. Third, clear constraints produce better outputs than vague ambitions; telling an AI "make it look good" is a prompt that will disappoint every time. AI can absolutely assist with UI design. But it's not going to hallucinate a coherent design system for you from nothing. That's still on us—and honestly, probably should be.