ruttl

Promptfree, for everyone, and the only version there is

Copy the prompt for Claude CodeCopy the prompt for CodexCopy the prompt for Cursor

Copy

Build me the website commenting tool that replaces ruttl.

The idea worth copying is the second half: **not just 'this heading is wrong' but 'this heading should say that', handed over as a diff.** A comment starts an argument; a proposed change ends one.

STACK
- Node 20+ with Fastify, server-rendered HTML
- SQLite through better-sqlite3, WAL mode
- A small script on the reviewed page, vanilla JS
- Caddy in front

THE DATA MODEL
- pages: id, project_id, url, title, first_seen
- comments: id, page_id, selector, x_pct, y_pct, body, author, status, at
- edits: id, page_id, selector, property, before, after, author, at — **the diff, and the reason this exists**
- versions: id, page_id, captured_at, dom_hash

HOW TO REACH THE PAGE
- **An iframe will not work for most sites.** Anything with a sane security policy refuses to be framed, and that is the wall every tool in this category hits
- So: a small script the site includes on staging, or a browser extension. Say which you are building and why. The script is simpler and works for the site you control, which is the common case
- Never proxy and rewrite somebody's site to get around it: you break their scripts and their analytics, and you become a security problem

COMMENTING
- Click an element, a box opens where you clicked. Store the selector and the percentage position, so a pin survives a layout change approximately even when the selector does not
- Prefer a data attribute, then an id, then a short path. Never a generated class
- Threads with replies and a resolve, and a filter for unresolved

EDITING, WHICH IS THE PRODUCT
- Text: contenteditable on the element, storing before and after
- Style: a few properties only — colour, size, weight, spacing, and position by nudging. **Not a full design tool.** The point is to say what should change, not to redesign in the browser
- Every edit stored as a property with a before and an after, never as a screenshot
- **Nothing is saved to the site.** The edits live here and are handed over; a tool that writes to a live page is a tool that breaks one

HANDING OVER
- Export as a list a developer can act on: selector, property, from, to — plus the comment thread
- A preview mode that replays the edits over the live page, so anybody can see the proposal without reading a list
- A copy button for each change

WHAT MATTERS MOST
Being honest about the iframe wall, and storing edits as properties rather than pictures. One decides whether it works at all; the other is what makes the output usable by whoever has to implement it.