Sep 15, 2025
Vibe Coding with Design Systems
A hands-on experiment showing how AI can build functional product experiences when guided by a design system.
AI
Vibe Coding
The Experiment
A quick proof of concept that explores how AI-generated design behaves when structured by a design system.
When AI meets systems thinking
I recently ran a small proof of concept that turned out better than expected. The goal was not to build a perfect product but to understand how AI workflows can reshape product design and development.
I built a simple task management app in about an hour. The idea was to see what happens when a design system guides the generation process. Instead of creating from scratch, the AI referenced pre-defined design tokens, components, and rules from a Figma-based system.
The Process
Building within boundaries; Connecting the AI generation process to an existing design system.
I started with the ui.shadcn.com UI Kit (maintained on Figma by Obra Studio) as the foundation. Once it was published and connected, every AI-generated screen referenced the same system. Typography, spacing, and components stayed consistent without any micromanagement.
In about an hour, using Figma Make and Supabase for the database, I built:
Authentication (Login and Signup)
A Kanban board with default and custom statuses for tasks
CRUD functionality for tasks with drag-and-drop for status and priority
A dashboard showing task distribution by status and priority
A profile page for updating a user’s photo, name, and password
The result was a cohesive product experience, created faster and with fewer manual design decisions.
The Insight
The real power of AI in design workflows lies in how it uses systems, not how it replaces designers.
The most interesting outcome was how naturally the design system shaped the results. Instead of focusing on pixels or layout, I could concentrate on workflows, logic, and experience. The boundary between design and development became much thinner.
This feels like where product design is heading. Design systems will define the rules, AI will execute within them, and teams will spend more time solving real problems instead of managing back-and-forth design tasks.
Try the prototype here: Figma Prototype
More Works
FAQ
01
What kind of projects have you worked on?
02
How do you usually collaborate on projects?
03
Do you take freelance or consulting projects?
04
What tools do you use?
05
How do you approach new projects?
06
Can you help set up a design system?
07
How can I get in touch?
Sep 15, 2025
Vibe Coding with Design Systems
A hands-on experiment showing how AI can build functional product experiences when guided by a design system.
AI
Vibe Coding
The Experiment
A quick proof of concept that explores how AI-generated design behaves when structured by a design system.
When AI meets systems thinking
I recently ran a small proof of concept that turned out better than expected. The goal was not to build a perfect product but to understand how AI workflows can reshape product design and development.
I built a simple task management app in about an hour. The idea was to see what happens when a design system guides the generation process. Instead of creating from scratch, the AI referenced pre-defined design tokens, components, and rules from a Figma-based system.
The Process
Building within boundaries; Connecting the AI generation process to an existing design system.
I started with the ui.shadcn.com UI Kit (maintained on Figma by Obra Studio) as the foundation. Once it was published and connected, every AI-generated screen referenced the same system. Typography, spacing, and components stayed consistent without any micromanagement.
In about an hour, using Figma Make and Supabase for the database, I built:
Authentication (Login and Signup)
A Kanban board with default and custom statuses for tasks
CRUD functionality for tasks with drag-and-drop for status and priority
A dashboard showing task distribution by status and priority
A profile page for updating a user’s photo, name, and password
The result was a cohesive product experience, created faster and with fewer manual design decisions.
The Insight
The real power of AI in design workflows lies in how it uses systems, not how it replaces designers.
The most interesting outcome was how naturally the design system shaped the results. Instead of focusing on pixels or layout, I could concentrate on workflows, logic, and experience. The boundary between design and development became much thinner.
This feels like where product design is heading. Design systems will define the rules, AI will execute within them, and teams will spend more time solving real problems instead of managing back-and-forth design tasks.
Try the prototype here: Figma Prototype
More Works
FAQ
01
What kind of projects have you worked on?
02
How do you usually collaborate on projects?
03
Do you take freelance or consulting projects?
04
What tools do you use?
05
How do you approach new projects?
06
Can you help set up a design system?
07
How can I get in touch?
Sep 15, 2025
Vibe Coding with Design Systems
A hands-on experiment showing how AI can build functional product experiences when guided by a design system.
AI
Vibe Coding
The Experiment
A quick proof of concept that explores how AI-generated design behaves when structured by a design system.
When AI meets systems thinking
I recently ran a small proof of concept that turned out better than expected. The goal was not to build a perfect product but to understand how AI workflows can reshape product design and development.
I built a simple task management app in about an hour. The idea was to see what happens when a design system guides the generation process. Instead of creating from scratch, the AI referenced pre-defined design tokens, components, and rules from a Figma-based system.
The Process
Building within boundaries; Connecting the AI generation process to an existing design system.
I started with the ui.shadcn.com UI Kit (maintained on Figma by Obra Studio) as the foundation. Once it was published and connected, every AI-generated screen referenced the same system. Typography, spacing, and components stayed consistent without any micromanagement.
In about an hour, using Figma Make and Supabase for the database, I built:
Authentication (Login and Signup)
A Kanban board with default and custom statuses for tasks
CRUD functionality for tasks with drag-and-drop for status and priority
A dashboard showing task distribution by status and priority
A profile page for updating a user’s photo, name, and password
The result was a cohesive product experience, created faster and with fewer manual design decisions.
The Insight
The real power of AI in design workflows lies in how it uses systems, not how it replaces designers.
The most interesting outcome was how naturally the design system shaped the results. Instead of focusing on pixels or layout, I could concentrate on workflows, logic, and experience. The boundary between design and development became much thinner.
This feels like where product design is heading. Design systems will define the rules, AI will execute within them, and teams will spend more time solving real problems instead of managing back-and-forth design tasks.
Try the prototype here: Figma Prototype
More Works
FAQ
What kind of projects have you worked on?
How do you usually collaborate on projects?
Do you take freelance or consulting projects?
What tools do you use?
How do you approach new projects?
Can you help set up a design system?
How can I get in touch?