Vibe Coding Design & Research

​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. These projects represent early prototypes and serve as a playground for me to learn, experiment, and grow my knowledge in integrating design with code.

“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.

Quiz Maker

Quiz Maker is 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 warriorbug.com/qm. Leveraging Cursor.app’s AI code editor, I rapidly prototyped the entire flow—from user authentication to quiz listing and detailed performance tracking—using natural language prompts and smart code generation to accelerate development.

“Create a Game a Day Challange”

As part of a self-imposed “Create a Game a Day” challenge—mirroring the rapid-prototyping ethos of making a game in one day outlined by Anthony at tunzor.github.io tunzor—I developed many interactive educational games for Prongo.com, spanning grades 1 through 8 in math quizzes, word puzzles, science explorers, and more. Leveraging Cursor.app’s AI-driven prototyping and low-code environment, I delivered a new quiz, game, or learning module each day, aligning with proven educational game design principles that emphasize engagement through problem-solving and narrativ. This daily cadence sharpened my rapid development workflow, UI/UX design, and curriculum-aligned content creation skills—resulting in a dynamic library that empowers teachers with ready-to-use, standards-based materials and fosters student curiosity and confidence

Simple Design and Color APP.

Vibe Coding’s Design and Color is 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

Rubix’s Cube Experiment 

This interactive 3D Rubik’s Cube was built using Three.js and Tween.js to explore real-time animations, 3D object manipulation, and user interaction. It features scramble and solve functions, draggable cube rotations, and a custom UI—serving as an experimental project to deepen my understanding of WebGL, physics-based motion, and spatial UX.

APP Design Experiment

Vibe Coding’s latest experiment leverages 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. By translating a design file into code, I’m gaining valuable insights into the potential of AI-assisted workflows and how they can streamline the transition from concept to execution. This early-stage experiment not only demonstrates a practical application of emerging tools but also serves as a stepping stone toward more sophisticated design solutions in the future.

Experimental Home page design 

This design features 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 on the right displays a dynamically rotating torus knot with textured details and responsive spark effects triggered by user interaction..

3D Planet Design Experiment

This project is an interactive 3D solar system simulation built using HTML, CSS and Three.js. It features dynamic animations, smooth camera transitions and intuitive controls. The project includes a planet selection sidebar and an adjustable speed slider that create an engaging immersive visual experience and demonstrate my design and coding skills.

Kinetic Quiz

KineticQuiz is 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 . I quickly prototyped the intuitive UI and core interactions using Cursor, an AI-powered code editor that streamlines natural language–driven development Cursor – The AI Code Editor. I leveraged OpenAI’s ChatGPT to generate dynamic question templates, feedback messages, and performance summaries with minimal manual editing OpenAI. Finally, I integrated Google’s Gemini AI to automate content refinement and analytical insights, creating a robust end-to-end quiz creation and grading workflow Gemini.