Ferd.Ai
Ferd.Ai
Client
Client
Phoenux.design
Phoenux.design
Scope
Scope
Web App
Web App
Service
Service
UI UX Design
UI UX Design
Explore My Work
Overview
Ferd AI converts brand preferences into production-ready components, enabling designers to assemble screens and developers to ship faster.
My role
I led FERD.ai’s end-to-end design from research and competitor analysis to user journeys and UI audits working with stakeholders and developers to keep the product clear, usable, and scalable.
Team
1 product designer (me) , 2 engineers
1 product designer (me) , 2 engineers
Recognized as Top 50 Semi-Finalist at GITEX 2024 (among 1,800+ global startups).
Recognized as Top 50 Semi-Finalist at GITEX 2024 (among 1,800+ global startups).
file:.icon-item:
{ display: flex;
align-items: center;
background-color: #fff;
Embed
file:.icon-item:
{ display: flex;
align-items: center;
background-color: #fff;
Embed
The Problem
👉 Designers and developers often struggle to keep design systems consistent. Updates get lost, components drift apart, and the handoff process takes too long. Existing tools are either too technical for designers or too limited for developers. Teams waste time fixing the same issues instead of building new things.
👉 Designers and developers often struggle to keep design systems consistent. Updates get lost, components drift apart, and the handoff process takes too long. Existing tools are either too technical for designers or too limited for developers. Teams waste time fixing the same issues instead of building new things.
"I need AI to handle foundations but want final say on brand expressions”
"I need AI to handle foundations but want final say on brand expressions”
-CO-FOUNDER
-CO-FOUNDER
-CO-FOUNDER
Solution
FERD.ai uses AI to simplify how design systems are created and maintained. It checks for inconsistencies, suggests improvements, and helps export clean, ready-to-use code. My design focused on making these complex features easy to follow clear navigation, quick actions, and a dashboard that shows exactly what needs attention.
Choose Industry
Choose Industry
Goals
Cut design system creation time by 85% (from 21 days to 2.5 hours).
Ensure 100% consistent, production-ready components.
Enable seamless integration for designers and developers.
Showcase Ferd AI at GITEX 2025 to drive 5,000+ business adoptions and global recognition.
87%
87%
faster design system setup (3 weeks → 2 hours)
faster design system setup (3 weeks → 2 hours)
83%
83%
fewer design-dev handoff errors
fewer design-dev handoff errors
$2.3M
$2.3M
seed funding secured
seed funding secured
Results
Select Region
Select Region
Select Moodboard
Select Moodboard
Goals
Goals
Process
Process
Design Process
Research Methods
Interviewed 6 designers + 3 developers.
Analyzed tools (Figr, Supernova, Figma Tokens) for gaps.
I led the end-to-end design process for FERD.ai, starting with research and stakeholder interviews to understand workflow challenges. After analyzing competitors like Figr and Supernova, I defined core pain points and mapped user journeys. to uncover gaps between design and development. From there, I structured the information architecture, created wireframes, and refined the interface in Figma. Throughout, I collaborated with developers and stakeholders to validate flows, run UI audits, and ensure the final design was both scalable and technically sound.
Identify pain points → User Research → Competitor analsysis → User Flows → Prototypes → Usability Study
Identify pain points → User Research → Competitor analsysis → User Flows → Prototypes → Usability Study
Team waste 68% of system setup time on repetitive tasks.
Team waste 68% of system setup time on repetitive tasks.
-RESEARCH OUTPUT
-RESEARCH OUTPUT
-RESEARCH OUTPUT
Button
GENERAL
Market
Dashboard
Active Bids
PRO
Mathew
75
75
74
74
73
73
72
72
71
71
70
70
69
69
68
68
67
67
66
66
65
65
64
64
63
63
62
62
61
61
60
60
59
59
58
58
57
57
56
56
55
55
54
54
53
53
52
52
51
51
50
50
49
49
48
48
47
47
46
46
45
45
44
44
43
43
42
42
41
41
40
40
39
39
38
38
37
37
36
36
35
35
34
34
33
33
32
32
31
31
30
30
29
29
28
28
27
27
26
26
25
25
24
24
23
23
22
22
21
21
20
20
11
11
10
10
9
9
8
8
7
7
6
6
5
5
4
4
3
3
2
2
1
1
div>
div>
div>
div>
button>
button>
1x
1x
<button type
<button type
="button"
="button"
class
class
="rounded-lg text-xs leading-6 font-semibold px-2 ring-2 ring-inset ring-slate-500 text-slate-500
="rounded-lg text-xs leading-6 font-semibold px-2 ring-2 ring-inset ring-slate-500 text-slate-500
dark:text-slate-100
dark:text-slate-100
dark:ring-0
dark:ring-0
dark:bg-slate-500
dark:bg-slate-500
"
"
>
>
button>
button>
svg>
svg>
<path d
<path d
="M18 6v12"
="M18 6v12"
stroke
stroke
="currentColor"
="currentColor"
stroke-width
stroke-width
="2"
="2"
stroke-linecap
stroke-linecap
="round"
="round"
stroke-linejoin
stroke-linejoin
="round"
="round"
/>
/>
<path d
<path d
="M14 12 6 6v12l8-6Z"
="M14 12 6 6v12l8-6Z"
fill
fill
="currentColor"
="currentColor"
stroke
stroke
="currentColor"
="currentColor"
stroke-width
stroke-width
="2"
="2"
stroke-linecap
stroke-linecap
="round"
="round"
stroke-linejoin
stroke-linejoin
="round"
="round"
/>
/>
<svg width
<svg width
="24"
="24"
height
height
="24"
="24"
fill
fill
="none"
="none"
>
>
<button type
<button type
="button"
="button"
class
class
="hidden sm:block lg:hidden xl:block"
="hidden sm:block lg:hidden xl:block"
aria-label
aria-label
="Next"
="Next"
>
>
button>
button>
svg>
svg>
<path d
<path d
="M19 5v3.111c0 .491-.398.889-.889.889H15"
="M19 5v3.111c0 .491-.398.889-.889.889H15"
stroke
stroke
="currentColor"
="currentColor"
stroke-width
stroke-width
="2"
="2"
stroke-linecap
stroke-linecap
="round"
="round"
stroke-linejoin
stroke-linejoin
="round"
="round"
/>
/>
<path d
<path d
="M17.509 16.95c-2.862 2.733-7.501 2.733-10.363 0-2.861-2.734-2.861-7.166 0-9.9 2.862-2.733 7.501-2.733 10.363 0 .38.365.711.759.991 1.176"
="M17.509 16.95c-2.862 2.733-7.501 2.733-10.363 0-2.861-2.734-2.861-7.166 0-9.9 2.862-2.733 7.501-2.733 10.363 0 .38.365.711.759.991 1.176"
stroke
stroke
="currentColor"
="currentColor"
stroke-width
stroke-width
="2"
="2"
stroke-linecap
stroke-linecap
="round"
="round"
stroke-linejoin
stroke-linejoin
="round"
="round"
/>
/>
<svg width
<svg width
="24"
="24"
height
height
="24"
="24"
fill
fill
="none"
="none"
>
>
<button type
<button type
="button"
="button"
aria-label
aria-label
="Skip 10 seconds"
="Skip 10 seconds"
>
>
<div class
<div class
="flex-auto flex items-center justify-evenly"
="flex-auto flex items-center justify-evenly"
>
>
button>
button>
svg>
svg>
<rect x
<rect x
="20"
="20"
y
y
="4"
="4"
width
width
="4"
="4"
height
height
="24"
="24"
rx
rx
="2"
="2"
/>
/>
<rect x
<rect x
="6"
="6"
y
y
="4"
="4"
width
width
="4"
="4"
height
height
="24"
="24"
rx
rx
="2"
="2"
/>
/>
<svg width
<svg width
="30"
="30"
height
height
="32"
="32"
fill
fill
="currentColor"
="currentColor"
>
>
<button type
<button type
="button"
="button"
class
class
="bg-white text-slate-900
="bg-white text-slate-900
dark:bg-slate-100
dark:bg-slate-100
dark:text-slate-700
dark:text-slate-700
flex-none -my-2 mx-auto w-20 h-20 rounded-full ring-1 ring-slate-900/5 shadow-md flex items-center justify-center"
flex-none -my-2 mx-auto w-20 h-20 rounded-full ring-1 ring-slate-900/5 shadow-md flex items-center justify-center"
aria-label
aria-label
="Pause"
="Pause"
>
>
div>
div>
button>
button>
svg>
svg>
<path d
<path d
="M5 5v3.111c0 .491.398.889.889.889H9"
="M5 5v3.111c0 .491.398.889.889.889H9"
stroke
stroke
="currentColor"
="currentColor"
stroke-width
stroke-width
="2"
="2"
stroke-linecap
stroke-linecap
="round"
="round"
stroke-linejoin
stroke-linejoin
="round"
="round"
/>
/>
<path d
<path d
="M6.492 16.95c2.861 2.733 7.5 2.733 10.362 0 2.861-2.734 2.861-7.166 0-9.9-2.862-2.733-7.501-2.733-10.362 0A7.096 7.096 0 0 0 5.5 8.226"
="M6.492 16.95c2.861 2.733 7.5 2.733 10.362 0 2.861-2.734 2.861-7.166 0-9.9-2.862-2.733-7.501-2.733-10.362 0A7.096 7.096 0 0 0 5.5 8.226"
stroke
stroke
="currentColor"
="currentColor"
stroke-width
stroke-width
="2"
="2"
stroke-linecap
stroke-linecap
="round"
="round"
stroke-linejoin
stroke-linejoin
="round"
="round"
/>
/>
<svg width
<svg width
="24"
="24"
height
height
="24"
="24"
fill
fill
="none"
="none"
>
>
<button type
<button type
="button"
="button"
aria-label
aria-label
="Rewind 10 seconds"
="Rewind 10 seconds"
>
>
button>
button>
svg>
svg>
<path d
<path d
="M6 6v12"
="M6 6v12"
stroke
stroke
="currentColor"
="currentColor"
stroke-width
stroke-width
="2"
="2"
stroke-linecap
stroke-linecap
="round"
="round"
stroke-linejoin
stroke-linejoin
="round"
="round"
/>
/>
<path d
<path d
="m10 12 8-6v12l-8-6Z"
="m10 12 8-6v12l-8-6Z"
fill
fill
="currentColor"
="currentColor"
stroke
stroke
="currentColor"
="currentColor"
stroke-width
stroke-width
="2"
="2"
stroke-linecap
stroke-linecap
="round"
="round"
stroke-linejoin
stroke-linejoin
="round"
="round"
/>
/>
<svg width
<svg width
="24"
="24"
height
height
="24"
="24"
fill
fill
="none"
="none"
>
>
<button type
<button type
="button"
="button"
class
class
="hidden sm:block lg:hidden xl:block"
="hidden sm:block lg:hidden xl:block"
aria-label
aria-label
="Previous"
="Previous"
>
>
button>
button>
svg>
svg>
<path d
<path d
="M7 6.931C7 5.865 7.853 5 8.905 5h6.19C16.147 5 17 5.865 17 6.931V19l-5-4-5 4V6.931Z"
="M7 6.931C7 5.865 7.853 5 8.905 5h6.19C16.147 5 17 5.865 17 6.931V19l-5-4-5 4V6.931Z"
fill
fill
="currentColor"
="currentColor"
stroke
stroke
="currentColor"
="currentColor"
stroke-width
stroke-width
="2"
="2"
stroke-linecap
stroke-linecap
="round"
="round"
stroke-linejoin
stroke-linejoin
="round"
="round"
/>
/>
<svg width
<svg width
="24"
="24"
height
height
="24"
="24"
>
>
<button type
<button type
="button"
="button"
aria-label
aria-label
="Add to favorites"
="Add to favorites"
>
>
<div class
<div class
="flex-auto flex items-center justify-evenly"
="flex-auto flex items-center justify-evenly"
>
>
<div class
<div class
="bg-slate-50 text-slate-500
="bg-slate-50 text-slate-500
dark:bg-slate-600
dark:bg-slate-600
dark:text-slate-200
dark:text-slate-200
rounded-b-xl flex items-center"
rounded-b-xl flex items-center"
>
>
div>
div>
div>
div>
div>
div>
div>
div>
<div class
<div class
="text-slate-500
="text-slate-500
dark:text-slate-400
dark:text-slate-400
"
"
>
>
75:50
75:50
div>
div>
24:16
24:16
<div class
<div class
="text-cyan-500
="text-cyan-500
dark:text-slate-100
dark:text-slate-100
"
"
>
>
<div class
<div class
="flex justify-between text-sm leading-6 font-medium tabular-nums"
="flex justify-between text-sm leading-6 font-medium tabular-nums"
>
>
div>
div>
div>
div>
div>
div>
<div class
<div class
="w-1.5 h-1.5 bg-cyan-500
="w-1.5 h-1.5 bg-cyan-500
dark:bg-cyan-400
dark:bg-cyan-400
rounded-full ring-1 ring-inset ring-slate-900/5"
rounded-full ring-1 ring-inset ring-slate-900/5"
>
>
<div class
<div class
="ring-cyan-500
="ring-cyan-500
dark:ring-cyan-400
dark:ring-cyan-400
ring-2 absolute left-1/2 top-1/2 w-4 h-4 -mt-2 -ml-2 flex items-center justify-center bg-white rounded-full shadow"
ring-2 absolute left-1/2 top-1/2 w-4 h-4 -mt-2 -ml-2 flex items-center justify-center bg-white rounded-full shadow"
>
>
div>
div>
div>
div>
<p class
<p class
="text-slate-900
="text-slate-900
h2>
h2>
Scaling CSS
Scaling CSS
<h2 class
<h2 class
="text-slate
="text-slate
>
>
p>
p>
128
128
<abbr title
<abbr title
="Episode"
="Episode"
>
>
<p class
<p class
="text-black-500
="text-black-500
<div class
<div class
="min-w-0
="min-w-0
<img src
<img src
="/full-stack
="/full-stack
loading
loading
="lazy"
="lazy"
/>
/>
<div class
<div class
="flex items
="flex items
<div
<div
class
class
="bg-white border
="bg-white border
>
>
Design System Overview
Design System Overview
Tokens
Tokens
Generate Design System
Generate Design System
