Sreesha S.

Product Designer

01

context

02

research

03

approach

04

ideation

05

solution

06

reflection

Go to Top

Vibecoded a Chrome Plugin for Design Quality Assurance cutting QA time by 40%

Vibecoded a Chrome Plugin for Design Quality Assurance cutting QA time by 40%

Vibecoding

Cursor, Claude

Shipped

Role

Role

Designer & Builder-

solo, end-to-end

Duration

Duration

3 days

Stack

Stack

Cursor, Claude, Vercel, JSON

Cursor, Claude, Vercel, JSON

Team

Team

Solo Product Designers

Solo Product Designers

Here’s a 1 min TL;DR version

Here’s a 1 min TL;DR version

THE PROBLEM

Design QA requires screenshotting bugs into PowerPoints and recording Looms just to tell developers what's broken. It's a lot of effort!

MY VIBECODING PROCESS

MY VIBECODING PROCESS

1

Spot Friction

Frustrated with the Loom + PowerPoint QA workflow at work. No free tool existed.

2

Quick Research

Found Reddit and LinkedIn posts of designers sharing the exact same frustration.

3

PRD with Claude

Wrote a full PRD with Claude: defined the problem, features, edge cases, and data model before touching code.

4

Vibecode MVP

Built the MVP in Cursor with the core features. I directed, AI executed.

5

Test & Iterate

Tested on live websites. Caught what broke. Vibecoded fixes and new directions fast. Repeated until it felt right.

6

Ship MVP

Shipped in 3 days. Integrated directly into the OptionsPlay workflow.

SOLUTION OVERVIEW

SOLUTION OVERVIEW

A free Chrome plugin for Design QA!

A free Chrome plugin for Design QA!

Annotate directly on the live site

Annotate directly on the live site

Switch viewports and create unique annotations

Check off a QA list

Check off a QA list

Export one JSON file

Export one JSON file

Export one JSON file anyone can load

Export one JSON file anyone can load

Let’s start from the beginning

THE PROBLEM EXPLAINED

THE PROBLEM EXPLAINED

Designers screenshot bugs into PowerPoints and record Looms just to tell developers what's broken. Hours wasted, context lost.

Designers screenshot bugs into PowerPoints and record Looms just to tell developers what's broken. Hours wasted, context lost.

Spot an issue on the live site. Screenshot it. Open PowerPoint. Paste it. Write a description. Do that 15 more times. Record a Loom so the developer understands the context. Send it. Wait.

MARKET RESEARCH

MARKET RESEARCH

I looked for a tool but every option either costs money or doesn't provide all the features I needed for QA

I looked for a tool but every option either costs money or doesn't provide all the features I needed for QA

Dedicated QA tools exist. Built for enterprise teams, they cost money and need onboarding. For a startup where the designer is also the QA team; not realistic.

QUICK ITERATIONS ON CURSOR

QUICK ITERATIONS ON CURSOR

I explored three directions: a screenshot tool, a form logger, a live overlay. Only one solved both sides of the problem.

I explored three directions: a screenshot tool, a form logger, a live overlay. Only one solved both sides of the problem.

Before opening Cursor, I mapped out the MVP and different approaches which I then quickly vibecoded to test and see which answered the same question: does it keep context for the designer AND give the developer something structured?

Every major screen size like, 1280, 1440, 1920px is divisible by 8. Using 8-based spacing means components scale cleanly across breakpoints without half-pixel rendering artifacts.

For tight component internals where 8px is too large, multiples of 4 act as a sub-grid, keeping the system intact without sacrificing density in data-heavy fintech UIs.

Every major screen size like, 1280, 1440, 1920px is divisible by 8. Using 8-based spacing means components scale cleanly across breakpoints without half-pixel rendering artifacts.

For tight component internals where 8px is too large, multiples of 4 act as a sub-grid, keeping the system intact without sacrificing density in data-heavy fintech UIs.

IMPACT

IMPACT

I explored three directions: a screenshot tool, a form logger, a live overlay. Only one solved both sides of the problem.

I explored three directions: a screenshot tool, a form logger, a live overlay. Only one solved both sides of the problem.

Before opening Cursor, I mapped out the MVP and different approaches which I then quickly vibecoded to test and see which answered the same question: does it keep context for the designer AND give the developer something structured?

Every major screen size like, 1280, 1440, 1920px is divisible by 8. Using 8-based spacing means components scale cleanly across breakpoints without half-pixel rendering artifacts.

For tight component internals where 8px is too large, multiples of 4 act as a sub-grid, keeping the system intact without sacrificing density in data-heavy fintech UIs.

Every major screen size like, 1280, 1440, 1920px is divisible by 8. Using 8-based spacing means components scale cleanly across breakpoints without half-pixel rendering artifacts.

For tight component internals where 8px is too large, multiples of 4 act as a sub-grid, keeping the system intact without sacrificing density in data-heavy fintech UIs.

Problem spotted Friday. Shipped Monday. Here's what 3 days taught me.

Sreesha Suresh

I Design. I Ship. I Create.

I Design. I Ship. I Create.

let's connect

Resume

Resume

Email

sreesha24@gmail.com

Linkedin

Linkedin