What it does

The composer turns notes into pages that look made by hand: paper, tape, highlights and screenshots laid out like a real notebook spread. You paste labelled source text and up to three local screenshots, check how the text maps to the images, and it lays out the current page in the chosen template. Screenshots become large, editable evidence areas, and they are saved into the project’s assets.

Every page has one canonical coordinate system, 1536 × 2048. Zooming the editor never changes the coordinates stored in the page, which keeps layouts, exports and tests in agreement.

Pages export as PNG or JPG, including a 3× raster, and the export waits for and embeds the project’s own fonts. For Figma, the app writes a .visual-notebook-figma.json file and a local plugin rebuilds the page: the paper texture becomes a frame fill, each image its own rectangle, tape an image with editable text on top, and text stays text. Missing images and composite pieces the plugin doesn’t support yet are counted in its report rather than silently flattened.

What I worked on

I worked on the product, design and engineering: the template system, the input format and mapping check, the editor, the exports and the Figma plugin, using AI-assisted development. It began as an auto-layout study in July 2026 and became a full editor over 155 commits.

Two lessons from it are in my notes: ask the model for one record per line, not for coordinates, and a status has to be observed, not written as a slogan.

What has been checked

Two accepted golden pages, P3 and Chat Room, are rendered at the canonical 1536 × 2048 and compared with tracked baselines on every ordinary test run; more than 0.1% of pixels differing fails the test and writes the actual and diff images for review. The baselines change only through an explicit update command after a visual change has been reviewed. Continuous integration installs Chrome, then runs the focused checks, a production build and the full browser tests, with its own reviewed baselines because text rasterises differently on its runner.

What remains unproven

The golden tests establish that two reference pages render as accepted. They don’t cover every template or input, and the record doesn’t claim use beyond my own. The Figma plugin is a development plugin run from Figma Desktop, not a published Community plugin.

The repository is private. The case study in RIRRI’S shows the editor and exported pages from the end-to-end golden tests.