Duran Gezer 開發 Noktiq 視覺回饋工具，方便向編碼智能體説明 UI 修改

A small UI change should be simple to explain. But when working with coding agents, I kept spending time describing which button, heading, or card I meant.

That’s why I built Noktiq, a visual feedback tool for React and Vue.

Point. Note. Paste.

Noktiq runs on your development website:

Select the element you want to change.
Write a note describing the change.
Copy the request into your existing coding agent.

When available, the request includes the source file, line, and column, alongside a selector and page context.

Noktiq gathers the context. Your coding agent makes the code changes.

What does the copied request look like?

Instead of describing an element’s position from memory, you can give your agent something like this:

Source: components/sections/About/About.tsx:148:17
Page: http://localhost:3000/tr
Selector: #about a
Visible text: "View my CV"
Requested change: "Change the text to Download my CV."

This is a shortened example. Actual selectors may be more specific, especially when similar elements appear more than once.

Source locations point to the code that renders the element. They don't necessarily identify the CSS rule, translation file, or event handler that needs editing, so the agent still needs to verify the target.

React and Vue, the same workflow

Noktiq supports:

Individual elements, selected text, multiple elements, and area selection.
Numbered pins, target status, and rebinding notes to another element.
Copying individual notes or all notes together.
Compact, Standard, and Detailed output.
A draggable mascot and local browser note storage.

Documented integrations include Next.js, Nuxt, Vite, and Webpack. Compatibility depends on the framework version and project setup; the repository includes tested configurations and limitations.

Getting started

npm install -D noktiq

Installation alone doesn't display the toolbar. Add the React or Vue component and configure the source integration using the setup guide.

Keep the documented development condition so the toolbar stays hidden in production.

Noktiq doesn't require an AI account or API key, and it doesn't send your notes to an AI service. You review and copy the request into the coding tool you already use.

Why I’m building it

My goal is to reduce repeated explanations and unnecessary code searches when making visual changes.

That could also reduce token usage across a task, but I haven't measured the savings yet. A structured request can be longer than a short prompt—the potential benefit comes from avoiding clarification and correction rounds afterward.

Noktiq is available on npm, and the source code is on GitHub under the PolyForm Shield 1.0.0 license.

I'd love to hear your feedback. Would this fit into your workflow, and what would make it more useful?