Screenshots, Penpot Frames, and API Creds Wired In

Three things landed in the Design Feedback workflow this session.

Browserless screenshots in vault notes. The workflow now POSTs to /screenshot on the browserless container, gets a PNG back, and writes it inline into the Obsidian vault note alongside the HTML. The node takes the rendered HTML string, sends it as the request body, and base64-encodes the response before writing. No separate file path to track — the image lives in the note.

Penpot frame output node. Extended the workflow with a final node that takes the approved HTML output and creates a Penpot frame via the API. Right now it maps the layout dimensions and background color; component-level fidelity comes later. This gives the workflow a concrete design artifact at the end instead of just markdown.

Penpot API token in n8n credential store. Added the Penpot access token as a named credential (penpot-api) under n8n’s HTTP Header Auth type. Both the frame output node and any future Penpot workflows reference that credential by name rather than hardcoding the header.

What this unblocks. The workflow now produces three artifacts per run — a vault note with an embedded screenshot, a Penpot frame, and the raw HTML. That’s enough to wire up a review loop. Once the accent color drift is patched, the refine pass output will be stable enough to feed directly into the Penpot node without manual color correction.