I Got Tired of Explaining Bugs, So I Built note'd

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 2: Side Hustle.

I've noticed that one of the frustrating parts of building software is explaining things that would be easier to show.

You're reviewing your app and notice something wrong. You take a screenshot, switch to your editor or chat, and explain where the problem is.

It's even worse with clients and testers. Someone says a feature isn't working. You ask what happened, where they clicked, and what they expected. A few messages later, you're still trying to understand the issue.

I wanted a simpler way to handle this. Point at something in a running app, explain what needs changing, and give the developer or coding agent enough context to act on it.

So I built note'd.

What I Built

note'd turns feedback on a running web application into structured development tasks.

You select an element, describe what needs changing, and note'd captures the relevant technical context automatically.

An open-weight model uses that information to prepare an actionable task for your coding agent.

The current build includes:

• Element capture: Press Alt+Shift+N or click Start capture to select an element and collect its dimensions, styles, contrast, viewport information, and other relevant details.
• Local task workspace: A service running on 127.0.0.1 saves feedback and captured context in SQLite.
• AI task generation: Gemma 2 2B, running through Ollama, turns feedback and browser measurements into structured tasks with acceptance criteria.
• Cursor integration: An MCP server lets Cursor retrieve approved tasks, inspect their context, update their status, and request verification.

Who would pay for it?

Freelancers and small agencies building websites for clients.

Client feedback often comes through screenshots, calls, and messages that leave out important details.

I want note'd to make that process as simple as sharing a running application and letting someone point at what needs attention.

The personal version is free. Hosted previews and team collaboration are the planned paid features.

Demo

Website: https://notedgo.vercel.app

Interactive demo: https://notedgo.vercel.app/demo

The demo runs in your browser without an account or installation.

Click Upgrade on the sample page and describe what needs changing. note'd captures its dimensions and generates a task with measurable acceptance criteria.

For example, it can identify that the button is only 32px tall and recommend increasing its target size.

The public demo uses browser-based rules to generate the task. The local application uses Gemma through Ollama.

To run the local workflow:

pnpm install
pnpm build
pnpm noted

In another terminal:

pnpm dev:stack

With gemma2:2b available through Ollama, note'd uses the model to generate tasks. You can also set NOTED_SYNTHESIS=agent to skip model synthesis and hand the captured context directly to Cursor.

Code

GitHub: https://github.com/abdushakurob/noted

The project is MIT licensed.

How I Built It

note'd has three main components.

1. Browser capture

The capture script collects information the browser already knows about an element: its selector, dimensions, computed styles, contrast ratio, viewport position, accessibility name, and relevant browser errors.

It can also capture component information from React and Vue applications.

2. Local service and MCP

A Hono server runs on 127.0.0.1:3737 and stores tasks in SQLite.

An MCP server connects those tasks to Cursor, allowing the agent to retrieve context, work on approved requests, and check the affected elements again.

3. Open-weight AI

This is where Gemma comes in.

Consider feedback like:

This button is too small and hard to find.

The browser captures facts such as:

{
  "element": "button.cta-primary",
  "width": 100,
  "height": 32,
  "contrastRatio": 2.1,
  "viewportWidth": 390,
  "belowFold": true
}

Gemma uses the developer's feedback and these measurements to produce a structured task containing a summary, intent, acceptance criteria, suggested changes, confidence, and assumptions.

For example, the resulting task can include:

• Increase the interactive target height to at least 48px.
• Improve text contrast to meet WCAG AA.
• Make the primary action visible at the target mobile viewport.

The agent receives something measurable rather than a vague instruction.

The model is gemma2:2b, served locally through Ollama. The model can be changed using NOTED_OLLAMA_MODEL.

Tech stack: TypeScript, Hono, SQLite, Zod, MCP, Ollama, Gemma 2 2B, React, Vue, Vite, and esbuild.

Why Does Open Innovation Matter?

A developer reviewing a real application might be working with customer records, invoices, private dashboards, or other sensitive information.

That context is useful for understanding feedback, but it's also information I want developers to have control over.

With Gemma running locally through Ollama, note'd can process feedback and technical context on the developer's machine.

The model turns observations into structured tasks without requiring a remote AI inference service. Developers can also swap models depending on their hardware and requirements.

Another advantage is cost. Local inference removes per-request model API charges, which makes sense for a personal development tool that someone might use repeatedly throughout the day.

The developer can review and approve a task before making it available to their coding agent.

For note'd, open-source AI makes the context-processing layer flexible, local, and controlled by the developer.

Prize Categories

Best Use of Gemma

note'd uses Gemma 2 2B through Ollama to turn human feedback and browser measurements into structured development tasks.

What's Next?

The next major feature is hosted previews.

I want a developer to be able to share their localhost with a teammate or client, let them interact with the application, and receive their feedback directly on their machine.

I'm also working toward a more complete verification workflow, where note'd can measure the affected element again after an agent makes changes.

We've built plenty of tools to make writing code faster. I think communicating what needs to change deserves the same attention.

That's what I'm building with note'd.

Build where it happens.