SyncingBoard (Cross-Tool Sync Engine)

SyncingBoard is a production-grade, open-source sync engine that connects design tools (Figma, Penpot) directly to collaborative whiteboards (Miro, FigJam) with in-place updates and zero server persistence.

This case study documents how The Three Pillars of the Studio of Two were applied in practice to design and build the entire system from concept to production.

The Three Pillars Pairing Model

+-----------------------------------------------------------------------------+
| PILLAR 1: THE HUMAN DOMAIN (Biology & Intent)                               |
| The Architect: Mental models, user ergonomics, product intuition, UX triage |
+--------------------------------------┬--------------------------------------+
                                       |
                                       v
+-----------------------------------------------------------------------------+
| PILLAR 2: THE BRIDGE (Context Design)                                       |
| The Protocol: Markdown specs, AGENTS.md rules, normalized schemas, contracts|
+--------------------------------------┬--------------------------------------+
                                       |
                                       v
+-----------------------------------------------------------------------------+
| PILLAR 3: THE AGENT DOMAIN (Execution & Symbiosis)                          |
| The Engine: Strict typing, edge-case probing, WebSocket pipelines, runtime  |
+-----------------------------------------------------------------------------+

Pillar 1: The Human Domain (Biology & Intent)

The Human Domain represents the biological partner: intuition, ergonomics, edge-case sensitivity, and user-centric priorities that algorithms cannot infer from training sets alone.

In SyncingBoard, human intent established the non-negotiable architectural boundaries:

1. Identifying Cognitive Friction (The Canvas Clutter Problem): Traditional design sync tools duplicate images onto the canvas. The human partner identified that this destroys spatial organization, severs Miro comment threads, and breaks arrow connectors. The mandate: All image updates must be non-destructive and occur strictly in-place.

2. Privacy & Security Boundaries: Design assets often contain confidential unreleased product UI. The human partner mandated that zero design bytes or user tokens may ever persist on a backend database or cloud storage bucket.

3. Domain Triage (Open-Source Ergonomics): Recognizing that Penpot is frequently self-hosted behind enterprise VPNs, the human partner realized that requiring OAuth client registration per custom domain would create immense adoption friction. The mandate: Build a zero-config companion extension that rides existing authenticated browser sessions.

Pillar 2: The Bridge (Context Design)

The Bridge is the translation protocol. It turns human intuition and product requirements into dense, structured, unambiguous context representations that an AI agent can execute against without hallucination or context degradation.

In SyncingBoard, The Bridge was structured through four explicit mechanisms:

1. The Normalized Interface Contract (DesignPayload): Instead of allowing the agent to write entangled spaghetti code connecting each source to each target, The Bridge defined a decoupled schema:

   export interface DesignPayload {
     sourceId: 'figma' | 'penpot';
     frameId: string;
     frameTitle: string;
     svgContent?: string;
     imageUrl?: string;
     bounds: { width: number; height: number };
     pairingHash: string;
   }

2. Documenting Runtime & DOM Constraints: The human partner documented Penpot’s internal ClojureScript behavior (viewport.cljs active-page DOM unmounting, Rum component lifecycles) in structured markdown specs. This provided the agent with the precise technical boundaries needed to build the programmatic router bridge.

3. Plan -> Execute Verification Protocols: Complex refactors (such as the Miro widget snapshot+restore retry loop) were mapped into step-by-step phases with strict rollback criteria before touching code.

Pillar 3: The Agent Domain (Execution & Symbiosis)

The Agent Domain represents the synthetic partner: relentless type rigor, rapid algorithmic exploration, mathematical precision, and exhaustive code generation across multiple SDKs.

In SyncingBoard, the agent executed across the entire stack:

1. Geometry Preservation & Aspect-Ratio Formulas: The agent implemented the geometry calculation engine in MiroAdapter.ts, snapshotting canvas matrices, swapping foreign SVG payloads, and dynamically adjusting scale offsets to prevent widget distortion.

2. End-to-End Strict TypeScript & Zero-Any Typing: Generated strict interfaces across Next.js API routes, Ably WebSocket channels, and Upstash Redis handshakes with zero any types.

3. String Sanitization & Entity Parsing: Engineered the decodeHtmlEntities() pipeline and AST regex transformations in pairingId.ts to sanitize ClojureScript entity strings before writing Miro metadata tags.

4. Multi-SDK Adapter Implementation: Rapidly implemented adapter layers across Miro Web SDK v2, Penpot Plugin RPC, Figma REST API, and FigJam Plugin APIs adhering strictly to the normalized contract.

The Human-Bridge-Agent Matrix

Key Takeaways for Studio of Two Practitioners

1. Intent precedes Specification: Never ask an agent to build a feature until the human partner has isolated the core friction and established the non-negotiable boundaries.
2. Context is Code: High-fidelity architectural specs (The Bridge) prevent hallucinations and eliminate architectural drift.
3. Symbiotic Velocity: When the Bridge is well-designed, the agent executes with extreme velocity, producing robust, strictly-typed systems that work on the first compilation.

Explore the live project: SyncingBoard Overview or visit the Studio of Two Framework.