Web Design: Html & AI-Assisted Web Design & Prototyping
01 Tomorrow, Maybe Used Claude to translate UX concepts into a responsive website prototype and iterated interactions through AI-assisted coding.
Web design: Tomorrow, Maybe
Project Overview
Tomorrow, Maybe is a web-based communication platform that encourages users to slow down and reflect before communicating. Instead of sending instant messages, users write a letter, personal goal, or reminder to themselves. Each letter remains locked for 24 hours before it becomes available to read. Once unlocked, the letter appears in both the sender's Private archive and the community Public feed. Other users can react using emojis, while the author can leave personal reflections or comments on their own letter, creating an ongoing record of thoughts and progress. To inspire daily writing, the platform features a Today's Prompt section. Every day, all users receive the same writing prompt, and an optional dice button provides additional prompts for those who need inspiration. By limiting users to one letter per day, FutureMail encourages thoughtful writing instead of constant posting, making each message feel more intentional.

Features
-
Write one personal letter, goal, or reminder each day.
-
Letters remain locked for 24 hours before they can be opened.
-
A Private section stores all of your own letters.
-
A Public section displays unlocked letters from the community.
-
Users can react to public letters with emoji reactions.
-
Authors can add personal reflections to their own letters after they are unlocked.
-
Today's Prompt provides a shared daily writing topic.
-
A dice button generates additional prompts for inspiration.
Design Purpose
Tomorrow, Maybe explores how time changes communication.
Today's social media encourages instant responses and endless scrolling. In contrast, Tomorrow, Maybe introduces waiting as part of the experience. By delaying access to each letter, users have time to reflect on what they wrote, while the moment of opening becomes more meaningful.
The project also encourages people to set small goals or write reminders to themselves. Writing only one letter per day helps users focus on a single intention rather than producing constant content. Over time, these letters become a personal archive of thoughts, goals, and growth.
02 Can Chaos Designed and developed an interactive website using Lovable, leveraging AI-assisted workflows for rapid prototyping and refinement.
Web design: Can Chaos
Concept
Can Chaos is an experimental interactive website inspired by MSCHF and Health-Ade Kombucha. Instead of creating a traditional product website, I wanted to build something playful, unexpected, and a little absurd. The project explores how an everyday consumer product can become an interactive experience through humor, storytelling, and random interactions.
The website encourages users to explore rather than simply browse. Every section introduces a different interaction, making the experience feel less like shopping and more like playing with the product.

User Experience
Section 01 — Build Your Own Can
The experience begins with the kombucha can broken into individual packaging elements, including the logo, flavor label, illustrations, and other graphics. Users are free to drag these pieces around the screen and interact with them in any way they like. As they scroll down, all of the scattered elements slowly move together and assemble into a complete Health-Ade Kombucha can. This interaction reveals how the packaging is constructed while creating a playful transition from chaos to order.
Section 02 — Real Stories Behind the Drink
Once the can is fully assembled, users can hover over it to discover three floating story cards. These stories are based on real Reddit discussions from Health-Ade Kombucha customers. The stories describe unexpected experiences, including bottles exploding because of carbonation, surprisingly strong vinegar flavors, and digestive reactions caused by probiotics. Instead of using traditional marketing copy, this section presents authentic user experiences to create a more honest and entertaining interaction.
Section 03 — The Website Becomes a Random Store
As users continue scrolling, the experience suddenly changes.
The website transforms into a strange online shop selling all kinds of cans—not just kombucha cans, but empty cans, damaged cans, and completely random containers. Users can click on the products, view larger images, and even add them to the shopping cart. This unexpected transition reflects the playful and unpredictable design language inspired by MSCHF. Rather than encouraging users to buy something, the store exists simply as a humorous space for exploration.
03 Little Relief Used Claude to translate UX concepts into a responsive website prototype and iterated interactions through AI-assisted coding.
Web design: Little Relief
Project Overview
Little Relief is an interactive web experience that transforms everyday stress-relief habits into playful digital interactions. Rather than focusing on productivity or goals, the website invites users to pause, explore, and enjoy ten tactile micro-experiences inspired by the small actions people often use to unwind—popping bubble wrap, listening to ambient sounds, shredding paper, drawing in sand, or simply pressing buttons.
The project explores how a website can become a calming, playful space instead of another source of information or distraction. Through sound, motion, and satisfying interactions, Little Relief encourages users to slow down and experience moments of relief through curiosity and touch.
Design Concept
The visual language is inspired by editorial web design and interactive digital art. Each room features one oversized interactive object, bold color blocking, expressive typography, and minimal interface elements. Although every room has its own personality and color palette, they all follow a consistent design system centered around one principle:
One Room. One Object. One Feeling.
Rather than explaining how to interact, each room presents a short contextual message inspired by everyday life, encouraging users to interpret and explore the experience in their own way.
Features
01. Bubble Pop
Pop a giant sheet of bubble wrap with satisfying sound effects. Special bubbles occasionally play musical notes, turning repetitive interaction into a playful rhythm.
02. Crumple
Stretch, twist, and crumple a translucent plastic sheet. Continued interaction gradually transforms it into a randomly generated origami figure.
03. Sound Room
Explore the sounds of different materials by tapping glass, ceramic, metal, wood, and other everyday objects arranged on a workbench.
04. Windows
Open windows to different environments—including rainy streets, forests, cafés, campfires, and beaches—and create personalized ambient soundscapes.
05. Smash
Pick up everyday objects and throw them against a wall, breaking them into satisfying fragments with material-specific sound effects.
06. Clean
Wipe away dirt from a foggy mirror or window, revealing a clean reflective surface through slow, satisfying gestures.
07. Switch
Interact with oversized switches, buttons, knobs, and levers, each providing unique mechanical sounds and tactile feedback.
08. Shredder
Feed different types of paper into an oversized paper shredder and enjoy realistic shredding animations and audio.
09. Sand
Rake patterns through a digital Zen sand garden accompanied by subtle sand textures and calming ambient sound.
10. Stretch
Pull, stretch, and release a soft translucent object that squashes and bounces naturally with responsive physics-inspired animation.










Figma project: Digital Space: The Infinite Lobby
The Infinity Lobby, Figma
The Infinite Lobby
Project Statement: The internet is not simply a space we observe. It is also a space that observes us.
The Infinite Lobby is an interactive prototype that explores waiting as a digital place rather than a temporary state.
Inspired by livestream waiting rooms, online queues, and loading screens, the project reimagines these familiar interfaces as a shared environment where nothing truly begins. Visitors enter expecting an event, yet remain suspended in an endless pre-start condition. As time stretches and the interface behaves unpredictably, the lobby gradually transforms from a passive tool into an active presence.
The project explores the reciprocal relationship between users and digital systems. Every action—clicking, waiting, refreshing, or typing is observed by the interface, which selectively responds, delays, or remains silent. Rather than functioning as a neutral platform, the lobby suggests that digital spaces actively shape our emotions, expectations, and behavior through both feedback and silence. Instead of asking users to accomplish a task, The Infinite Lobby invites them to experience anticipation itself. Live chat, timers, system messages, and interface glitches become the architecture of the place, revealing how collective waiting can evolve into a shared emotional and social experience.
Ultimately, the project asks: What happens when waiting becomes the destination rather than the transition?
And how do digital spaces shape our sense of agency by deciding when or if to respond?
Zine Design: Hidden Layers of The Desert




Zine design: Hidden Layers of The Desert
Internship: Product packaging design

High-end product packaging and brochures for Liaoning Sea cucumber products, Product Design Intern

Matte Icon Design
Email: yuxuandu7@gmail.com