Prototype Feedback

Setup

Up and running in six steps.

This path is for the common case: you review a prototype and you build it in Claude Code. If someone else fixes the comments, see Reviewer and developer are different people.

  1. Add the extension

    Install Prototype Feedback from the Chrome Web Store and pin it to the toolbar. It's free and needs no account.

  2. Install the Claude Code plugin

    The pfb plugin needs Node.js 18 or newer. Check with:

    node --version

    Then run these two commands in a terminal, once per computer:

    claude plugin marketplace add leslurb/prototype-feedback-claude-plugin claude plugin install pfb@prototype-feedback

    Start a new Claude Code session afterwards so it loads the plugin. The extension shows the same command under Settings → Set up Claude Code.

  3. Pin your comments

    Open the page you're reviewing, click the extension and press Start feedback session. Click an element or drag a region, pick Fix, Change, Ask or Idea, and type what you want. "Fix it" is enough for a Fix.

  4. Press Send to Claude Code

    The extension saves your new comments as a ZIP in Downloads/prototype-feedback/inbox/. Nothing is uploaded.

    If Chrome asks where to save, choose Downloads/prototype-feedback/inbox, or turn off Ask where to save each file in Chrome's download settings. Why

  5. Type /pfb:feedback in your project

    Open Claude Code in the repo you're working on and type /pfb:feedback. The first time, Claude asks a few questions and writes .pfb/brief.md: your base branch, how to run the tests, and how branches should work. More about the brief

    Then Claude shows a plan grouped by page and waits for your OK. It fixes each comment as its own commit on a new branch, answers questions, writes short proposals for ideas, and asks when something isn't clear. It never merges for you.

  6. Watch the pins

    While that Claude Code session is open, the pins change colour as Claude works. Click a pin to read the reply, then Confirm it, Reopen it with a note, Reply, or say Do it to a proposal. Those go out with your next send.

    When you come back after a deploy, the extension offers to start the next round and bring the open items along.

Reviewer and developer are different people

Send to Claude Code works on one computer. When someone else fixes the comments:

  1. The reviewer opens Share with a person or More → Export ZIP for any LLM and sends the ZIP to the developer.
  2. The developer puts the ZIP in their Downloads/prototype-feedback/inbox/ folder and runs /pfb:feedback. Claude writes the results to a responses.json file and says where it is.
  3. The developer sends responses.json back. The reviewer opens More → Import status (responses.json)…, and the pins update.

No Claude Code at all? The ZIP has a README and instructions inside feedback.json, so other coding assistants can work from it too. For stakeholders, use the HTML report.

Advanced

Your Chrome download folder isn't Downloads

Tell the plugin where Chrome saves files: set PFB_DOWNLOADS to that folder (the one that contains prototype-feedback) before you start Claude Code. The extension shows the exact folder after a send.

$env:PFB_DOWNLOADS = "D:\My Downloads"; claude

That's PowerShell. In bash or zsh: PFB_DOWNLOADS="$HOME/My Downloads" claude.

Many reviewers: the companion server

If you collect feedback from several reviewers, an optional local server groups it by project and gives you a dashboard. It runs on your machine at 127.0.0.1. Turn on Connect to local server in the extension's Settings. Setup guide on GitHub

A development build of the extension

A copy loaded with Load unpacked has its own extension ID, and the plugin only answers the store extension by default. Add your ID before you start Claude Code:

$env:PFB_EXTRA_ORIGINS = "chrome-extension://YOUR_EXTENSION_ID"; claude

Stuck? See the help topics.