My Note App

Vibe-coded writing tool for creative minds

My Note App is a vibe-coded writing app that embraces the beautiful chaos of creative thinking. Designed for the minds that wander, from artists to ADHD thinkers, it turns scattered thoughts into sparks of inspiration, helping users reconnect with forgotten ideas in surprising ways. For this project, I drafted the PRD, built the design system, and iterated on prototypes to capture the app's free-flowing and intuitive rhythm. Every element, from the 3D ceramic bird refresh to the gentle motion cues, was vibe-coded to make writing into an act of discovery and creative play.

Role

Founder and designer

Team

This is a project I designed and vibe-coded on my own.

Deliverable

Product Requirements Document, High-fidelity prototype, Design System, MVP 1.0

Timeline

July - Aug 2025

Problems

Traditional note apps rely on rigid structures, making it hard for creative and neurodivergent minds to explore ideas freely.

Precious ideas are easily lost without a system to revisit and rediscover their value.

The Solution

I designed and vibe-coded My Note App, where users can revisit past notes, drag ideas into their writing, and get prompts to spark new connections.

Discovery Prototyping

Before starting vibe coding, I spent a long time prototyping in Figma. I explored multiple layouts, visual styles, and interaction ideas, iterating through several versions until I captured the right feeling for the app. Each prototype was refined based on feedback, which allowed me to experiment freely and discover what worked best before moving into vibe-coded development.

I drew inspiration from my desk and designed skeuomorphic items, like old TV-style video frames and vinyl players for music, to give the app a tangible feel.

The first version mimicked a messy desktop to capture the chaos of a real creative space.

I explored various features and styles to find a workflow that fits creative and neurodivergent minds. Here are just a few examples:

Feature Development

I recognized several drawbacks in my early prototypes. For instance, the 3D note timeline would be difficult to code, and skeuomorphic items could quickly clutter the screen as notes accumulated. I realized it was time to narrow my exploration and focus on features that captured the app's core purpose while still allowing for vibe coding.

I co-wrote the PRD with ChatGPT, defined four core features for the app, and developed frameworks and prompts to guide the vibe-coding tools.

After the PRD, I took a more practical approach and designed features that feel familiar yet slightly new to users, drawing inspiration from existing apps.

Design Iterations

I returned to low-fidelity prototyping to focus on interactions and user flow. Using a pure black-and-white palette helped me concentrate on functionality. I also revisited my original intention for My Notes App: minimizing hierarchical organization and enabling users to rediscover past ideas.

I designed two ways for users to rediscover past ideas: browsing a grid of quotes from journal entries or viewing single quote cards one at a time.

To help users draw inspiration from past ideas, I designed a drag-and-drop feature that lets them easily reference old quotes and seamlessly integrate them into their writing.

I set the design system to be minimalistic, clear, and modern, with subtle pops of color to guide attention and add a playful energy.

Feature Details Presentation

I vibe-coded the design system, stored the backend in Git, and iteratively developed the fully functional My Note App.

Grab inspiration from grid or single card view

Easily revisit past ideas by browsing quotes in a flexible grid or one card at a time.

Drag and drop note cards into writing

Seamlessly pull old ideas into your current work to spark creativity and build on past thoughts.

Edit quotes and shuffle cards

Customize your quotes and shuffle them to discover new connections and perspectives.

Upload written work with images

Add your own writing and images to the app, keeping all creative content in one place.

Final Takeaway & Feedback

I reflected on my whole design and vibe coding process.

Feedback from the first ten users revealed diverse use cases and showed that the future of My Note App is full of exciting possibilities