Can I vibecode Guidde?

Build me a narrated step-by-step guide recorder to replace Guidde. Requirements:

- Two parts, TypeScript throughout: a Chrome extension (Manifest V3, built with esbuild) that records a
  workflow, and a Fastify server on http://localhost:4870 that stores and renders it. `npm start` runs the
  server; the README explains loading the unpacked extension.
- Recording: on every click the extension saves `chrome.tabs.captureVisibleTab` as PNG, the click
  position, the page URL and the accessible name of the clicked element, and sends them to the server.
- Storage: better-sqlite3 in ./data/guides.db for guides and steps (order, title, narration, blur boxes);
  screenshots and audio on disk in ./data/guides/<id>/.
- Editor page: steps as cards with the screenshot, editable title and narration, reorder, delete, and
  drawn blur rectangles that `sharp` applies when rendering.
- Script: an OpenAI-compatible endpoint from .env (LLM_BASE_URL, LLM_API_KEY, LLM_MODEL) writes a short
  title and one narration sentence per step from the element names and page titles only, never the
  screenshots. The README states exactly what is sent.
- Voice: TTS_PROVIDER=openai or piper in .env; one audio file per step, cached by a hash of the text.
- Render: ffmpeg builds an MP4 where each step shows its screenshot with a slow zoom toward the click
  point and a ring on the click, as long as its audio plus half a second. Also export Markdown + PNGs and
  a single-file HTML guide.
- Single user. No accounts, no telemetry, local-first: outbound calls only to your LLM and TTS endpoints.
- Out of scope: desktop or mobile capture, translations, team library, share links, voice cloning.
- README: installing ffmpeg and Piper, and a warning that screenshots can capture passwords and personal
  data, so blur before you export.

Opens your agent with the prompt filled in, you press enter. Or copy it and paste it into an empty folder.