Back to work
    Design & Research

    Vibe Coding

    AI-assisted programming experiments translating design concepts into functional code—from Figma layouts to working applications, exploring design-to-code transformations.

    Role

    Designer & Developer

    Platform

    Web Applications

    Team

    Solo Creator

    Kidney Compass web application showing health metrics dashboard with data visualization
    Context

    Introduction

    In my portfolio's 'Vibe Code' section, I showcase AI-assisted programming experiments where I translate design concepts into functional code. This includes converting Figma layouts into working applications and exploring various AI tools that facilitate design-to-code transformations.

    Problem

    The Challenge

    These projects represent early prototypes and serve as a playground for me to learn, experiment, and grow my knowledge in integrating design with code using emerging AI tools.

    Collaboration

    My Role

    As a designer-developer hybrid, I leverage AI coding assistants to rapidly prototype applications, bridging the gap between design vision and functional implementation.

    Tools

    Cursor.app, Lovable.dev, Three.js, HTML5, CSS, JavaScript, OpenAI, Gemini AI

    Features

    Key Features

    Kidney Compass App Design

    Kidney Compass App Design

    This Lovable App prototype radiates a calm, professional vibe through its clean, card‑based layout, muted blue accents, and friendly iconography. It balances clarity and warmth—making complex kidney health metrics feel approachable and easy to navigate.

    View Project
    Quiz Maker

    Quiz Maker

    A web-based tool built in Cursor.app that lets users register as teachers or students to design, share, and take quizzes on any topic via an intuitive interface featuring community-sourced questions and personal progress analytics.

    View Project
    Prongo Game Rebuilds

    Prongo Game Rebuilds

    Native React rebuilds of educational quizzes and games for the redesigned Prongo.com—replacing legacy WordPress H5P embeds with mobile-friendly experiences built in the platform redesign.

    View Project
    Simple Design and Color App

    Simple Design and Color App

    A browser-based digital art tool featuring customizable brushes, layer management, and intuitive tools like brush, smudge, text, and crop. Users can draw, edit, and export artwork directly in the browser with real-time previews and smooth interactions.

    View Project
    Rubik's Cube Experiment

    Rubik's Cube Experiment

    An interactive 3D Rubik's Cube built using Three.js and Tween.js to explore real-time animations, 3D object manipulation, and user interaction. Features scramble and solve functions, draggable cube rotations, and custom UI.

    View Project
    App Design Experiment

    App Design Experiment

    Leveraging AI to transform a Figma mockup into a functional code prototype. This test project reflects an ongoing journey of learning and exploration, where innovative technology meets creative design.

    View Project
    Experimental Home Page Design

    Experimental Home Page Design

    A sleek, two-column layout where a stylish text overlay introduces the designer using modern fonts and a refined color palette, while an interactive Three.js canvas displays a dynamically rotating torus knot with textured details.

    View Project
    3D Planet Design Experiment

    3D Planet Design Experiment

    An interactive 3D solar system simulation built using HTML, CSS and Three.js. Features dynamic animations, smooth camera transitions and intuitive controls with a planet selection sidebar and adjustable speed slider.

    View Project
    Kinetic Quiz

    Kinetic Quiz

    A vibe-coded quiz maker on warriorbug.com that lets teachers sign up to build custom quizzes and gives students a unique QR code or alphanumeric access code for seamless test entry. Integrated with OpenAI's ChatGPT and Google's Gemini AI.

    View Project
    Output

    What I Designed

    Tools

    Cursor.app, Lovable.dev, Three.js, HTML5, CSS, JavaScript, OpenAI, Gemini AI

    Approach

    Key Solutions

    • 01

      Kidney Compass App - calm, professional health metrics dashboard built with Lovable.dev

    • 02

      Quiz Maker - web-based tool for creating and sharing quizzes built with Cursor.app

    • 03

      Kinetic Quiz - AI-powered quiz platform with QR code access

    • 04

      3D experiments using Three.js including Rubik's Cube and Solar System simulations

    • 05

      Figma to code translations using AI assistants

    • 06

      Rapid prototyping with natural language prompts

    Impact

    Results

    • •

      Successfully built functional prototypes from design concepts

    • •

      Expanded knowledge in AI-assisted development

    • •

      Demonstrated design-to-code workflow efficiency

    • •

      Created reusable templates for future projects

    • •

      Developed multiple interactive 3D web experiences

    View all projects