👆🏻 Click and interact with TWEMCO WT30 above showing current time
Building a Digital World Clock with AI
Recently, I explored how AI-assisted programming can accelerate the creative process using v0.dev, an AI-powered coding platform. Inspired by the TWEMCO WT30 flip clock, a classic Made-in-Hong-Kong flip clock, I wanted to create a functional digital version.
v0.dev is an AI-powered UI generator developed by Vercel. It leverages large language models (LLMs) to generate React, HTML, and CSS code from text descriptions or images.
With just an image from eBay, v0.dev automatically generated a working world clock displaying the current time in New York, London, Frankfurt, and Hong Kong—exactly the cities shown in the reference photo. From there, I refined the project with AI assistance, fine-tuning the layout, responsiveness, and features.
Steps: How to ask AI Created the Digital WT30
With v0.dev, creating a functional world clock was as easy as chatting with a programmer, no manual coding needed. Here’s how it worked:
- Image to Code
Uploaded the eBay image, and v0.dev generated a working world clock UI with the correct cities. - AI Refinement
Asked AI to improve the layout and fix details (like replacing the incorrect Hong Kong flag). - Feature Expansion
Added a dropdown menu for selecting additional time zones. - Optimization
Ensured the design was fully responsive across different devices. - Deployment
Hosted the project on Vercel.com for easy access. - Embedding
Finally, I asked v0.dev how to embed the clock on my site.
The entire process took about an hour, showcasing the power of AI in design and programming. This experiment highlights how AI tools like v0.dev can assist designers and developers in rapid prototyping and creative problem-solving.
This is just the beginning. More refinements can be made, but this quick experiment proves how AI-driven development can transform a simple idea into a working prototype in record time.
Here are the links related to his project:
🤖 v0.dev
📦 vercel.com