Overview

AI-First Lifestyle Widgets is a personal experimental project exploring how micro-interactions and AI logic can enhance everyday wellness experiences.

I designed and developed four responsive lifestyle widgets — SnackTime, SipUp, Breathe, and Gratitude, that each target a different aspect of daily balance. These were fully prototyped in Figma and then built using AI-assisted coding workflows (“vibe coding”) in VS Code and deployed via Vercel.

My role

End-to-end designer + front-end developer

• Concept development & visual design in Figma

• Prototyping UI interactions

• Implementing functional code with AI guidance

• Testing & deployment with Vite + React + TailwindCSS

Challenge

I wanted to explore how non-coders like me can leverage AI-assisted development to create meaningful digital experiences.

The main challenge was bridging the gap between design intent and code execution — ensuring the widgets looked as designed in Figma while remaining lightweight, interactive, and accessible.

Workflow

Concept & Sketch: Defined each widget’s intent — bite-sized digital companions for eating well, hydrating often, breathing deeply, and staying grateful.

Design & Structure: Built component systems and layout foundations in Figma, ensuring harmony across colors, typography, and hierarchy.

Code Integration: Used Figma Make to generate React components, then refined the UI and logic through AI-assisted “vibe coding” in VS Code.

Deploy & Test: Deployed each widget via Vercel, testing for responsive behavior and seamless interaction across devices.

UI Design Decisions

• Unified minimalism: Each widget feels distinct but cohesive through shared spacing, corner radius, and typography.

• Intent-based color:

  1. SnackTime — warm neutrals for comfort

  2. SipUp — calm blue for hydration

  3. Breathe — green for serenity

  4. Gratitude — soft beige for reflection

• Tactile hierarchy: Rounded buttons, soft shadows, and focus-driven color transitions encourage calm engagement.

• Micro-interactions: Smooth transitions and feedback states amplify user delight.

AI Logic

Each widget includes simple but meaningful AI logic:

• SnackTime 🍉 — Randomly generates snack suggestions for energy and focus.

• SipUp 💧 — Tracks small hydration goals and progress.

• Breathe 🌿 — Guides rhythmic breathing through timed animation cycles.

• Gratitude 🌻 — Rotates uplifting affirmations to boost mood.

  
  

AI helped bridge my no-code gap, generating starter logic, cleaning syntax, and explaining functionality in natural language.

Outcome

• Built four functional wellness widgets, combining UX clarity with AI-assisted development.

• Demonstrated how AI can empower designers to code and ship without traditional barriers.

• Developed stronger proficiency in React, Tailwind, and AI-aided prototyping.

• Shared on LinkedIn as part of my Vibe Coding series, sparking community discussion around AI in design.

Key Takeaways

• Designers can now code, with AI as a creative collaborator.

• Building small, shippable projects accelerates learning more than tutorials.

• True design innovation happens at the intersection of empathy and experimentation.

• The next era of design is not just AI-powered, but AI-co-created.