Design system for Wellness Stay
Context
What is Wellness Stay?
Wellness Stay is an experimental project to put new AI tools into practice within the process of creating and designing a digital product. It is a fictional marketplace for booking wellness retreats: yoga, mindfulness, detox, and more.
Objective
New AI tools in design processes
The purpose of this case study is to create a design system from scratch — foundations, tokens and components — so the interface can be built automatically with AI tools, along with the documentation needed to provide context and requirements.
- Understand the market and analyze the main flows and UI patterns
- Define the target user
- Build a visual foundation and a scalable design system (tokens + components)
- Implement the assets and documentation for development
- Build in a real environment with an IDE
- Push to the repository
- Create Storybook as the source of truth
Benchmark
Market research on holistic retreat platforms
I started by analyzing travel + wellness platforms currently on the market. I studied retreat booking flows and common UI patterns, and gathered competitors’ visual styles in order to choose a distinctive direction.
User persona
What is the profile of the person who books these services?
I identified two main user-persona segments, which I summarized in these two profiles:
Visual direction
Moodboard
Taking the user profile, competitor styles and product type into account, I developed a moodboard to define the visual direction:
Design system
Creating the design foundations
I started by establishing the foundations — the fundamental visual elements of the interface: color, typography, icons, grids, spacing (margins and paddings), corner radii and border widths.
Token architecture
I translated the foundations into a token architecture: color, typography, spacing, corner radii and border widths. Naming every visual decision makes it reusable and consistent in both Figma and code.
Component architecture
To build a unique, tailored interface, I designed the core components of an accommodation marketplace — search, cards, buttons and navigation — and brought them into the code editor through the Figma MCP. I first wrote specs for each element so the IDE had as much context as possible.
Documentation
Technical documentation
The next step was to generate README.md documentation for the project, explaining what it consists of.
Implementation
From design to code
Once the project file was set up, I integrated the work above to validate the design system in a real environment. I implemented it using Cursor as the IDE. I did not use frameworks; instead I chose an HTML, CSS and JavaScript implementation with the elements created beforehand.
Once the IDE had context — style foundations and documentation — I wrote specific prompts to generate the homepage sections:
- hero section (search and value proposition)
- featured
- main categories
- footer
I also generated Storybook as the source of truth for every interface element. It can be updated later as new product requirements appear.
Conclusion
Learnings from the project.
This project let me practice creating design systems and implementing them with AI so the interface and all of its elements can be generated in a systematic, consistent and effective way.
From this strategic, structured perspective, this workflow makes it possible to scale a product systematically and consistently.