Using AI to Generate Design System Components
Lately, I’ve been experimenting with AI to support my workflow as a product designer, especially when it comes to building and evolving design systems. One recent task: creating a button component — one of the most fundamental elements in any design system.
Reading Time
5 Minutes
Focus
Design Systems
Date
May 2025
The Prompt
For fairness, I used the exact same prompt in all four tools.
View the full prompt here
Curser
Besides Cluade, Curser was amazing.
✅ Used Roboto font as specified in the prompt.
✅ Fast and accurate component output.
✅ Interaction behaviors were correct, with an amazing hovering effect.
❌ Lack of accessibility for the icons of the button.
Polymet
Polymet attempted to structure the component, but several key details didn’t align with the prompt.
❌ Layout was broken.
❌ Sizes were incorrect.
❌ Used different colors than those specified in the prompt.
❌ Used DM Sans font instead of Roboto.
Claude
Claude was hands-down the most impressive
✅ Interaction behaviors were mostly correct.
✅ Clean and readable code with clear comments.
✅ Proper ARIA attributes for all states.
✅ Built with React and styled with Tailwind CSS.
✅ Clean component's layout.
❌ Only hover state was missing.
Result's link
Lovable
Lovable’s approach was friendly and design-first.
✅ Interaction behaviors matched the prompt well.
✅ Provided variants and responsive behavior.
✅ Clean component's layout.
✅ ARIA attributes for screen readers.
❌ Sizes were not accurate.
Result's link
🧩 Bringing It All into Figma
Once I had the HTML/CSS structure finalized, I used the HTML to Design plugin to get things to Figma.
✨ Benefits of Using AI in Design System Creation:
Speed: What used to take hours of back-and-forth between design and code took minutes with AI.
Real-Time Testing: Unlike Figma, where interactivity is limited to prototypes, working with actual HTML/CSS allowed me to test the components live in the browser — hover states, click behaviors, and responsiveness — before bringing them into design tools.
Documentation: Some tools also generated documentation-ready descriptions and guidelines.
Code Generation & Handoff: Most of these tools generated usable HTML, CSS, or even React code. This made it much easier to collaborate with engineers — I could hand off working code snippets or base components instead of just static mockups. It also reduced the ambiguity in translation between design intent and engineering implementation.
Thanks for reading until the end 😊