AI Training
AI Design System & Prompt Kit
Designed a Figma-native design system and custom prompt-engineering framework to automate layout generation and empower non-designers to build on-brand concepts in seconds.
Project Duration :
2026 - 6 weeks
Client :
Maltego, CERN
Industry :
Enterprise Software
Role :
Product Designer & Automation Engineer
Team size :
Solo
Tools :
Figma • Material UI (MUI) • Storybook • AI Prompt Frameworks
The spark
I wanted to find a way to automate repetitive layout tasks and make high-fidelity conceptual design accessible to non-designers. Product Managers, Developers, and Subject Matter Experts often need to quickly mock up ideas, but they struggle to stay aligned with brand guidelines.
My goal was to leverage the power of Figma alongside AI to let anyone generate compliant, on-brand UI concepts instantly.
The logic
The system relies on a highly structured source of truth. I adapted a Material UI (MUI) design system within Figma to serve as the visual foundation. I then extracted the underlying layout rules, structural CSS tokens, and Markdown guidelines from the library.
This turned the visual components into machine-readable data that an AI could easily interpret.
Try out my prototype right bellow:
Open Figma Prototype
The engine
I built a tailored prompt-engineering framework designed to ingest the system's CSS and Markdown rules. When a PM or Developer describes a concept, the prompt kit forces the AI to output layouts using only the approved MUI component properties and tone of voice.
This eliminates design drift and lets anyone generate accurate, production-ready concepts without having to touch a vector tool.
The outcome
To show how easily this system transitions to engineering, I shared the design system foundations with a student collaborator. I connected them with the right stakeholders so they could independently set up a Storybook repository to showcase live, developer-ready components.
This completed the automated pipeline, showing that a concept generated in seconds can be mapped directly to real, functional code.
More Projects
AI Training
AI Design System & Prompt Kit
Designed a Figma-native design system and custom prompt-engineering framework to automate layout generation and empower non-designers to build on-brand concepts in seconds.
Project Duration :
2026 - 6 weeks
Client :
Maltego, CERN
Industry :
Enterprise Software
Role :
Product Designer & Automation Engineer
Team size :
Solo
Tools :
Figma • Material UI (MUI) • Storybook • AI Prompt Frameworks
The spark
I wanted to find a way to automate repetitive layout tasks and make high-fidelity conceptual design accessible to non-designers. Product Managers, Developers, and Subject Matter Experts often need to quickly mock up ideas, but they struggle to stay aligned with brand guidelines.
My goal was to leverage the power of Figma alongside AI to let anyone generate compliant, on-brand UI concepts instantly.
The logic
The system relies on a highly structured source of truth. I adapted a Material UI (MUI) design system within Figma to serve as the visual foundation. I then extracted the underlying layout rules, structural CSS tokens, and Markdown guidelines from the library.
This turned the visual components into machine-readable data that an AI could easily interpret.
Try out my prototype right bellow:
Open Figma Prototype
The engine
I built a tailored prompt-engineering framework designed to ingest the system's CSS and Markdown rules. When a PM or Developer describes a concept, the prompt kit forces the AI to output layouts using only the approved MUI component properties and tone of voice.
This eliminates design drift and lets anyone generate accurate, production-ready concepts without having to touch a vector tool.
The outcome
To show how easily this system transitions to engineering, I shared the design system foundations with a student collaborator. I connected them with the right stakeholders so they could independently set up a Storybook repository to showcase live, developer-ready components.
This completed the automated pipeline, showing that a concept generated in seconds can be mapped directly to real, functional code.
More Projects
AI Training
AI Design System & Prompt Kit
Designed a Figma-native design system and custom prompt-engineering framework to automate layout generation and empower non-designers to build on-brand concepts in seconds.
Project Duration :
2026 - 6 weeks
Client :
Maltego, CERN
Industry :
Enterprise Software
Role :
Product Designer & Automation Engineer
Team size :
Solo
Tools :
Figma • Material UI (MUI) • Storybook • AI Prompt Frameworks
The spark
I wanted to find a way to automate repetitive layout tasks and make high-fidelity conceptual design accessible to non-designers. Product Managers, Developers, and Subject Matter Experts often need to quickly mock up ideas, but they struggle to stay aligned with brand guidelines.
My goal was to leverage the power of Figma alongside AI to let anyone generate compliant, on-brand UI concepts instantly.
The logic
The system relies on a highly structured source of truth. I adapted a Material UI (MUI) design system within Figma to serve as the visual foundation. I then extracted the underlying layout rules, structural CSS tokens, and Markdown guidelines from the library.
This turned the visual components into machine-readable data that an AI could easily interpret.
Try out my prototype right bellow:
Open Figma Prototype
The engine
I built a tailored prompt-engineering framework designed to ingest the system's CSS and Markdown rules. When a PM or Developer describes a concept, the prompt kit forces the AI to output layouts using only the approved MUI component properties and tone of voice.
This eliminates design drift and lets anyone generate accurate, production-ready concepts without having to touch a vector tool.
The outcome
To show how easily this system transitions to engineering, I shared the design system foundations with a student collaborator. I connected them with the right stakeholders so they could independently set up a Storybook repository to showcase live, developer-ready components.
This completed the automated pipeline, showing that a concept generated in seconds can be mapped directly to real, functional code.