TimeSource

Welcome to TimeSource, a completely conceptual e-commerce website for a luxury watch brand! This project served as an exciting playground to test out modern AI design tools like Relume and Figma’s built-in AI image generation. By leveraging these powerful tools, I was able to generate a customizable design system, map out section layouts, and complete the entire site concept in just a matter of days. It proved to be a fantastic starting point for a lightning-fast workflow.

SKILLS USED

Figma Design
Design System
Figma Prototype
AI Design

PROJECT DATE

2026

Research

Ideas for Design

The main driving force behind this experiment was to put the AI mockup application, Relume, to the test. I’d read a ton of buzz about its capabilities and wanted to see exactly how much it could truly speed up a traditional UX workflow.

Relume

For those who don’t know, Relume is an incredibly smart AI platform. You simply describe your project, and it generates comprehensive wireframes and fully designed mockups. Even better, it builds a complete, foundational design system around your project that you can directly import into Figma!

Shopify

I knew Relume could handle basic websites, but I wanted to push its limits and test its e-commerce capabilities. Before diving in, I analyzed several top-performing Shopify stores to gather inspiration for the specific sections and user flows I wanted to include in my mockups.

Key Site Requirements

To ensure the experiment stayed on track, I established a few core requirements:

  • E-commerce Luxury
    The design needed to mirror the structure of a high-end Shopify site, specifically tailored for luxury watches.
  • Typography & Colors
    The color palette and typography had to exude wealth, sophistication, and a truly expensive look and feel.
  • Product, Collection, About and Contact pages
    The site needed to include a fully fleshed-out Product page, Collections page, About page, and Contact page.
  • Figma Design System
    I required a robust design system to manage the brand identity and all website components.
Relume AI

Design System and Layout

The process with Relume was surprisingly magical! After signing up, I simply described the luxury watch website I envisioned, picked a color palette, selected my fonts, and chose an overall style category.

Relume instantly generated an editable sitemap and section plan for every page. I quickly trimmed away the sections I didn’t need, and the AI handed me a complete, structural wireframe of the entire site. From there, it was a breeze to swap out specific sections using their massive library of over 100 different component variations.

Once the layout was looking sharp, I imported the entire project directly into Figma with a single click. Inside Figma, I took full control—tweaking the design system, UI components, typography styles, spacing, and shadows. The import even included Relume’s full library of templated sections, making future adjustments incredibly easy. Best of all? The generated design system came pre-loaded with mobile variations for every section, alongside built-in light and dark modes!

Assets

Image and Copy Generation

With a solid wireframe in place, it was time to bring the concept to life with high-fidelity assets. I turned to Figma Make and Google Gemini to generate all the necessary imagery and copywriting. This dynamic duo helped me create stunning product hero shots, aspirational lifestyle imagery, detailed group product photos, and engaging, descriptive text to fill out every page.

Responsiveness

Desktop to Mobile

Ensuring the site looked flawless on smaller screens was a walk in the park. Because Relume’s generated design system inherently understands mobile responsiveness, all I had to do was copy the desktop content over to new mobile frames. By simply toggling the appearance variables to “mobile,” I was able to effortlessly generate accurate mobile mockups for every single page.

Prototyping

Multiple Simple Prototypes

With the static desktop and mobile designs fully fleshed out, the final step was to bring the experience to life. I focused on building out simple, interactive prototypes in Figma, allowing stakeholders to seamlessly click and walk through the various user journeys across the site.

Results

Fully Designed Site Within Hours

The results of this AI-driven workflow were absolutely stellar. Utilizing Relume allowed me to design an entire conceptual e-commerce platform in just a few hours—a process that normally takes weeks!

Having a completely customized design system out of the box, paired with the ability to rapidly swap pre-defined sections, supercharged the entire design process. The seamless transition between desktop and mobile variables also made responsive testing incredibly straightforward. While AI might not replace the nuanced eye of a designer, this workflow provides an unbeatable starting point and is an incredible tool for rapidly generating wireframes and mockups for any web project!