From Design to Working Products (with AI)
by Bazim Nubail
5th April, 2026
Overview
Most of my ideas used to stop at the design stage.
I would create detailed flows, UI screens, and even reusable systems in Figma (habit trackers, planners, and utilities) but they remained static. They looked complete, but they weren’t usable in real life. There was no persistence, no interaction, and no real feedback loop.
The gap was clear:
I could design systems, but I couldn’t actually use them.
With tools like ChatGPT and later Claude, I started exploring a different approach, using AI as a way to build, test, and refine ideas instead of letting them sit unfinished.
What drove this exploration
Moving beyond static design files
Frustration with unfinished ideas
Curiosity about how products actually work (data, storage, systems)
Using AI as a way to learn by building, not just studying
Personal To-Do Tracker (Initial Exploration & Study)
Context
Started as a simple list of tasks for personal needs and explored more with claude.
Problem
Tracking tasks inside notes or AI chats wasn’t reliable. Data wasn’t persistent, structured, or easy to revisit and update.
Key Decisions
Introduced a real database using Supabase
Built two separate interfaces
Input system (task tracker)
Output system (progress dashboard)
Used the same data across both views
Minimal 20-Min Timer (Pixel perfect design to code)
Context
Most AI/no-code tools I tried could generate functional outputs, but the design accuracy was inconsistent.
Problem
Even with a clear design, the output would only be partially accurate, visually drifting from the intended UI.
Key Decisions
Reduced scope to a single-purpose toolBuilt two separate interfaces
Focused on one goal: pixel-accurate execution
Broke down every element, animation, and interaction explicitly for AI
Link: 20 min timer
Forma (Personal Health Tracker)
Context
Started from a personal need to track weight and health data more effectively.
Problem
Physical logging → no visualization, hard to maintain
Notion → limited graphs and poor interconnection between data
No unified system to track related metrics (weight, calories, gym)
Key Decisions
Designed a modular system instead of a single tracker
Used date as a shared relational key across all modules
Built a structure where different data types can connect over time
4.Institute Tracker (Exploring simple & cheap alternatives)
Context
The Institutes me and my friend were tracking were all over the place, so I designed and shared a simple site for me & my friends.
At the same time, I wanted to explore more lightweight alternatives to the stack I had been using in previous projects.
Problem
No centralized source for admission tracking
Previous setup (Supabase + Netlify) required additional overhead for simple use cases
Needed a system that was easy to update and share without maintaining a full backend
Key Decisions
Used Google Sheets as a lightweight database instead of Supabase
Built a zero-backend frontend and hosted it on GitHub Pages instead of Netlify
Designed the system so updates could be made directly through the sheet without touching the code
What Changed for Me
I moved from designing screens to thinking in systems
I started understanding how data shapes user experience
I began using AI as a collaborator, not just a tool
I focused more on making ideas usable, not just presentable