Vai al contenuto principale

[verdetto][prompt curato][fonte: skribbl.dev]

Posso vibecodare Skribbl?

// si costruisce in un weekend, ma restano buchi veri

La canvas è la metà facile: React Flow più xterm.js più node-pty ti danno pan, zoom e una mezza dozzina di terminali di agent dal vivo in un weekend. I buchi stanno nello strato noioso sotto — capire quando un agent è bloccato, tenere in vita le sessioni dopo un crash, contare i token.

confidenza: media

cos’è: Canvas infinita dove i coding agent girano come nodi-terminale dal vivo, che colleghi disegnando

Indice di costruibilità · gioco editoriale

  • Prezzo 8,25 $/mese peso: più 1
  • Tempo un weekend per il canvas, più giorni per le parti che lo rendono affidabile peso: più 2
  • Categoria strumenti per sviluppatori non pesa
  • Moat qualità di esecuzione · integrazioni peso: meno 2
  • Confidenza media peso: zero
  • Cosa perdi 4 voci peso: meno 2
  • Sito skribbl.dev (si apre in una nuova scheda) non pesa
Indice: meno 1. in bilico

Si pareggiano. È il caso in cui decide quanto ti sta antipatico l’abbonamento.

Gioco editoriale: il verdetto dice se un agente può, l’indice se conviene.

Cosa costruisci

Far partire shell vere come nodi trascinabili su una canvas con pan e zoom, far girare un coding agent dentro ciascuno e guardarne diversi lavorare fianco a fianco.

cosa ti serve

  • Node 20 e i build tool nativi per node-pty
  • una CLI di un coding agent già installata e autenticata
  • tmux, se vuoi che le sessioni sopravvivano a un riavvio

Un «quasi» onesto · la canvas è un weekend, la supervisione dei processi che ci sta sotto no.

Il prompt

Un weekend con un agente di coding. I buchi che restano sono qui sotto, in «cosa perdi».

Prompt one-shot EN
Build me a canvas for running several coding agents at once, like Skribbl. Requirements:

- Electron plus React, with React Flow for the pan/zoom canvas and xterm.js plus
  node-pty for the terminals. No web version, this is a desktop app.
- Each node is a real shell in its own process, spawned with node-pty in a working
  directory I pick per node. Double click empty canvas to add one, and let me type in
  it exactly like a normal terminal.
- Node position, size, title and cwd persist to a JSON file in the Electron userData
  folder, restored on launch. The shells themselves do not survive, say so in the UI
  rather than pretending they do.
- Spawn each shell inside `tmux new-session -A -s <nodeId>` so a crashed window can
  reattach to the running agent instead of killing it. Budget real time for this, the
  reattach and scrollback restore is the fiddly part of the whole build.
- Drag from one node to another to draw a link, and store the links with a direction.
  Right click a link to delete it. Links are just recorded relationships for now, no
  message passing between agents.
- A top bar counting tokens per node, parsed from each agent CLI's own usage output.
  Keep input, output, cache write and cache read as four separate counters, never sum
  them into one number, a cache read costs about a tenth of an input token.
- Out of scope: multiplayer, cloud sync, code signing, and any status indicator you
  would have to infer by scraping terminal output. Guessing wrong there is worse than
  showing nothing.
- README with the node-pty rebuild step for your Electron version, which is the one
  thing that will break on a fresh machine.

Prompt curato: scritto e rivisto a mano per questa app. In inglese di proposito — è la lingua in cui gli agenti di coding rendono meglio.

Cosa perdi

  • lo stato dell'agent guidato dagli hook: senza, un agent bloccato è identico a uno inattivo
  • la sopravvivenza delle sessioni a riavvii e crash
  • un contatore dei token accurato: le letture da cache non costano affatto come i token di input
  • una build Mac firmata e notarizzata: senza, Gatekeeper blocca quello che consegni a chiunque altro

Perché pagano ancora

Non per la canvas. Per lo strato che tiene in riga dodici processi figli: uno stato che arriva dall'agent stesso invece che da output raschiato, sessioni che tornano dopo un riavvio e un numero di spesa abbastanza accurato da poterci agire prima che arrivi il conto.

moat: Qualità di esecuzione Integrazioni cos’è un moat

supervisione dei processi, durabilità delle sessioni, contabilizzazione per singolo agent

Chi l’ha già costruito

Partire da qui è vibecoding lo stesso: il prompt serve quando lo vuoi esattamente a modo tuo.

Sei d’accordo?

La bilancia dei voti

Ancora nessun voto: il tuo è il primo.

Nessun voto ancora — il primo pesa.

App correlate

Da brief confuso a UX/UI completa Un brief vago diventa un’app navigabile. Spot prodotto da una foto Una foto diventa uno spot animato, senza codice. Far guardare i video a Claude Claude guarda i tuoi video e li trasforma in testo. Higgsfield in Claude Code Genera immagini e video mentre programmi in Claude Code. Da un Loom a una pagina web Un video schermo diventa una pagina web, senza codice. Video Shorts con NotebookLM Le tue fonti diventano uno short verticale. Landing luxury su Lovable Landing page di lusso con un solo prompt. Excalidraw in locale Excalidraw gratis sul tuo computer, senza codice. Mistral OCR nel flow Estrai testo dai documenti con Mistral OCR. Claude SEO nel terminale 25 skill SEO gratis dentro Claude Code. Google Search Console dentro Claude Code I dati di Search Console dentro il terminale. Routine di Claude Code Claude che lavora da solo, a computer spento. Clonare una landing in React con v0 Clona una landing reale in codice React. Context economy con Claude Lavora leggero e non bruciare i limiti di Claude. Dal prompt alla skill auto-evolutiva Skill Claude che imparano dai tuoi errori. Da NotebookLM a Canva: presentazioni Slide da NotebookLM, finalmente editabili in Canva. La mappa per capire ogni tool AI 12 categorie per incasellare qualsiasi tool AI. PNG trasparenti con ChatGPT PNG con trasparenza reale, non la scacchiera finta. Infografiche animate con Gemini Infografiche che si animano in loop con Gemini. Ricerca di mercato con Deep Research Deep Research come tuo analista di mercato. Farti citare dai motori AI (AEO) Diventa una fonte che ChatGPT e Perplexity citano.