I’ve always been the kind of designer who sketches out product ideas, prototypes them in Figma or Arduino, and dreams of making them real — only to stop right before the “code” part. This time, I decided to see what happens if I don’t stop there.

So, I built a Chrome Extension from scratch.
It’s called Swedish Sidekick — a little browser helper that lets me highlight Swedish words I don’t know, get instant explanations, and save them to my own flashcard deck.

The fun part? I did it all with the help of ChatGPT and Cursor, with just a sprinkle of my own CSS and JS tweaks.
In this post, I’ll share how I went from idea to MVP, what worked, what didn’t, and what I learned along the way.

Background: A Designer’s Curiosity

I work as a product designer and creative technologist— I spend my days thinking about usability, interaction flows, and visual details. I’ve worked with developers for years, but I’ve never been the one actually shipping code — connecting both front end and back end.

Still, I’ve always been curious about what’s behind the design handoff. Could I actually build something usable by myself? And more importantly, could AI help me cross that gap?

That’s how this experiment started — a small personal challenge to see if a designer (with basic coding experience) could create a real, working product using AI tools.

Why I wanted to build Swedish Sidekick

1. A tool tailored for my own learning style

I’m learning Swedish, and I struggled with how it was taught at language schools. My knowledge of Danish gives me a good foundation of reading and grammar, but I lack vocabularies. And I hate learning words by heart.

So I thought: what if I could just highlight a word when reading something, get an explanation right there within the context, and add it to my own flashcard deck?

That was the core idea for Swedish Sidekick — a simple, context-aware language companion for my everyday browsing.

2. A chance to prototype with AI

The second motivation was creative curiosity. I’ve been following how various AI tools are transforming product design, but I wanted to experience it first-hand:
Could I go from idea to MVP using ChatGPT and Cursor as my “virtual developer teammates”?

Spoiler: yes. And it was faster than I expected.

How I built it from scratch

Step 1: ChatGPT as my “Senior Engineer”

I started by simply describing what I wanted in ChatGPT:

“I want to build a Chrome Extension that helps me highlight Swedish words on any webpage, explain them, and add them to my personal flashcard list.”

Within minutes, it outlined the structure:

manifest.json for extension settings
content.js for handling text selection
popup.html for the UI
background.js for storing data

It even generated working code snippets for each file.

I followed its instructions step-by-step, asked follow-up questions whenever I got stuck, and iterated until the extension could appear in Chrome’s toolbar.
The first try didn’t give me fully what I wanted, but it’s a good start.

**The starting point.**

It didn’t add the word to the side bar.
UI and visuals are bare minimum.
LLM was not successfully connected.
It’s not responsive.
And more…

Step 2: Debugging & Iterating in Cursor

Once I had my first working draft, I moved everything into Cursor.

This was a turning point. Cursor could “see” my project files, track relationships between them, and even fix errors directly when I asked, and update the code in Github. I asked it how to tackle those issues by simply talking to it, for example:

“Why isn’t my popup showing up?”
“Which LLM to connect to for best context explaining? Is there API available?”
“Trigger this function after click. And make it responsive.”

It helped me find the missing pieces, rewrite functions, and explain why things broke.

That’s when I had my first AHA moment — Cursor is amazing at understanding technical requests, when I’m being very specific. By describing the request in the form of “do this, then that“, it broke down a task into tiny steps for me and reminded me what to look for in each step, which I found super helpful.

But there was also an OH NO moment — When I asked Cursor to “make the button look more elegant” or “add more spacing to the layout,“ it just couldn’t do it well. It handled logic like a champ, but UI changes? Not so much. That’s where visual tools like Figma or Lovable still win — because describing design in words rarely translates into the right pixels.

Step 3: Designing in code (CSS & JS tweaks)

Once the core logic worked, I went back into familiar territory — design.

I opened the CSS and JS files and started tweaking visual elements like:

Adjusting font sizes, corner radius and button spacing
Adding hover and clicked states
Aligning popup elements to feel more balanced

It was surprisingly fun to see these changes come alive directly in the browser. I’d tweak something, reload the extension, and see it instantly reflected, straightforward and on-spot. It just took much more time to get it right (…sort of) than editing it visually in Figma or Lovable.

Step 4: Connecting to Google Drive & Google Docs

After the local flashcard feature worked, I wanted the option to save words to the cloud — ideally into Google Drive or a Google Doc the user controls. Letting users choose cloud storage made the extension genuinely useful across devices.

This step added a layer of complexity I hadn’t expected: authentication, consent screens, OAuth scopes, and privacy settings. I needed:

A Google Cloud project and OAuth client ID
A clear list of scopes (e.g., Drive file access, Docs editing) so users know what they’re allowing
A flow that opens Google’s consent screen, grants access, and returns a token the extension can use securely

Cursor helped a ton here. I leaned on it to:

Generate the basic OAuth flow code and manifest permission updates
Explain how to set redirect URIs and configure the consent screen
Troubleshoot errors like mismatched redirect URIs or missing scopes

The outcome

👍 What was successful:

Highlighted words are marked also in the original context
Added button states: clicked, hover, default
Click the “speaker“ icon to listen to its pronunciation
User can remove the card from the sidebar
User can either download the deck as text file to open the deck in Google Doc
Responsive design

🤔 What was not successful:

Nice micro animations while interacted
LLM connection is not fully there, so it didn’t generate examples where and how the word can be used

**Card added to Google Doc**

User can choose to view it now or later

**Added button states**

Default. Hover. Clicked.

My takeaways

This little side project taught me a lot — not just about code, but about the evolving relationship between design and AI.

1. Keep it simple and stupid

Before building Swedish Sidekick, I actually tried creating a full web-based app — complete with user accounts, a dashboard, and spaced repetition features. It quickly became overwhelming.
So I stepped back, refocused on the core need: helping myself learn and retain new vocabulary within context. Once I narrowed the scope, everything became clearer. Clarifying priorities not only made the build easier — it made the prototype possible.

2. AI is a fantastic help to build an MVP with

You don’t need to be an engineer to build something functional anymore. With clear prompts and curiosity, AI can take you from idea to working prototype in days or even hours. It’s an incredibly empowering feeling.

3. Cursor bridges the Designer–Developer gap

Cursor changed how I see coding. It turned what used to be a wall of text into an interactive conversation. Having version control and explanations built-in made it way less intimidating.

4. Make your own workflow strategically

ChatGPT was great for concept and generating structure; Cursor was better for debugging and file-level reasoning. We as humans need to learn how to direct the tools with intention so they serve us better. Mixing tools makes the workflow smoother — but it’s worth paying attention to data privacy and availability (especially if your project connects to APIs or uses user data).

5. Not pixel-perfect (yet)

The final version of the MVP looks and feels good enough for personal use — but it’s far from a polished product. To achieve true visual finesse, you’d still want to dive deeper into CSS or explore connecting Figma to code directly. That’s something I want to test next.

What’s next

Building Swedish Sidekick was more than just an experiment — it changed how I think about prototyping.

AI tools are starting to dissolve the boundaries between design and development. I can now go from idea → prototype → testable MVP almost entirely on my own. And that opens up an exciting space for designers to explore creative autonomy without worrying about their technical knowledge. In my case, knowledge of coding definitely helped, even it’s basic.

Next, I want to test tighter Figma→code flows and see if I can sync design tokens and layouts directly into Cursor, maybe even transfer micro interactions from Figma. Also — more polished UX around cloud integrations (privacy-first defaults, clearer consent UI) is something I’ll iterate on.

If you’re a designer curious about building your own tools, I can’t recommend this enough:
Start small, describe what you want clearly, and let AI do the heavy lifting and guide you through. Break things. Fix them. Learn by doing.

Building My First Chrome Extension with AI