Designing with AI

Overview

A Creative Playground for Prototyping, Data Art & Visual Storytelling — this project is my space to explore emerging technologies and rethink how designers collaborate with AI. I'm committed to understanding how AI can amplify creativity, streamline workflows, and unlock new modes of expression. Through interactive HTML prototyping, data-driven chart design, generative artwork, and narrative-driven visuals, I’m experimenting with AI-powered tools to push the boundaries of design.

More than just a case study, this is an evolving experiment—a testing ground where I merge creativity with automation, design with development, and data with storytelling to future-proof my design practice.

Goal

Faster Iteration: AI-powered tools expedite the prototyping process, enabling rapid design iterations and seamless adjustments.

Improved Accuracy: Identify inconsistencies and usability issues early, ensuring more precise and user-friendly prototypes.

Increased Efficiency: Automating tasks like wireframing, content generation, and testing allows designers to focus on higher-level strategy.

Faster Testing and Validation: Accelerates the identification of design flaws during early testing, ensuring a more reliable and refined final product.

Ideation & Rapid Prototyping |  Interactive HTML Prototype | AI-Augmented Workflow | Design-to-Code Automation | Data Visualisation

Interactive Prototype

FocusFlow is a modern productivity app inspired by the Pomodoro Technique—a time management method that breaks work into focused intervals (typically 25 minutes) followed by short breaks, helping users maintain clarity, momentum, and long-term focus. Designed for today’s multitaskers, FocusFlow features an intuitive interface and is built with scalability in mind, offering the potential for AI-powered enhancements to support deep work and sustainable productivity.

This is a self-initiated experimental case study aimed at exploring how AI tools can enhance the UI/UX design process—from early ideation and prototyping to front-end development and testing. By leveraging Cursor, ChatGPT, and Claude, I experimented with AI-assisted workflows to speed up development, refine designs, and bridge communication between design and engineering. The resulting interactive HTML prototype includes key functional features that simulate real-world app behavior and serve as a practical foundation for early-stage development.
FocusFlow Timer
9:41

FocusFlow

Focus
Short Break
Long Break
25:00
Focus Time

Today's Tasks

Research competitors
1/4 Pomodoros
Check emails
2/2 Pomodoros
Prepare presentation
0/3 Pomodoros

Settings

Pomodoro Duration
25 min
Short Break Duration
5 min
Long Break Duration
15 min
Auto-Start Breaks
On
Auto-Start Pomodoros
Off
Sound
Classic Bell
Notifications
On
Theme
Default
Sync Across Devices
Off
Export Data

Statistics

16
Today's Pomodoros
6.5h
Focus Time
85%
Completion Rate
5
Tasks Completed
Weekly Summary
May 1-7
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Most Productive Hours
This Month
6-8
8-10
10-12
12-14
14-16
16-18
18-20
Pomodoro Completed!
Great job! You've completed 1 pomodoro for "Research competitors".
Short Break
Take a moment to recharge
3:15
Break Time
Break Suggestions
  • Drink some water
  • Rest your eyes
  • Take a short walk
  • Listen to relaxing music

Welcome to FocusFlow

Your personal productivity assistant to help you stay focused and manage your time effectively.

Let's Set You Up

Tell us a bit about yourself to personalize your experience.

4
6
8
10

Visualization

As a UI/UX product designer, I am continuously exploring new ways to enhance digital experiences through data visualization. Interactive graphs, charts, and diagrams play a crucial role in making complex information accessible, engaging, and insightful for users.

This case study collection highlights my work with HTML and SVG-based visualizations, showcasing their potential in modern product design. Additionally, I focus on data and complex information analysis, along with research, and leverage AI tools to create meaningful visual representations that drive decision-making and user understanding.
London Income Trends

AI-Generated Presentations

Created presentation slides using prompts + template logic

Stay tuned—this AI playground is growing!