Plugin spec

One audit API. Three plugins.

The web app is the audit engine. Each design tool ships a thin plugin that lets designers select frames, export them, and post to the DesignLensOS API — then renders the report in a side panel.

Figma plugin

Manifest
manifest.json (plugin API v1)
Entry
code.ts (sandbox) + ui.html

Sketch plugin

Manifest
manifest.json (CocoaScript / JS API)
Entry
main.js · @skpm/sketch APIs

Adobe XD plugin

Manifest
manifest.json (XD plugin API)
Entry
main.js · scenegraph + uxp

1 · Selection contract

The plugin reads the host app's current selection. Only frames / artboards are accepted (any other selection shows a friendly hint). The plugin gathers, per frame:

  • name — frame name as shown in the layers panel
  • imageDataUrl — PNG export at 2× of the frame bounds
  • textContent — concatenated text from all text layers (top-down)
  • meta — width, height, fileKey, nodeId (for deep-linking)

2 · Audit request

POST /api/audit
Content-Type: application/json

{
  "frames": [
    {
      "name": "Persona — Eva",
      "imageDataUrl": "data:image/png;base64,...",
      "textContent": "Eva, 34, product manager...",
      "meta": { "fileKey": "abc", "nodeId": "12:34" }
    }
  ]
}

3 · Audit response

The same shape used by the web app — a list of categorized reports plus an overall score.

{
  "reports": [{
    "frameName": "Persona — Eva",
    "category": "persona",
    "confidence": 0.94,
    "summary": "...",
    "detected": ["name", "age", "goals", "pain points"],
    "strengths": ["..."],
    "gaps": ["No quote", "Missing tech savviness scale"],
    "recommendations": [
      { "title": "Add a representative quote", "detail": "...", "priority": "high" }
    ],
    "completeness": 72
  }],
  "overall": { "completeness": 72, "topActions": ["..."] }
}

4 · UI surface inside the plugin

  • Side panel (Figma: figma.showUI(__html__, { width: 420, height: 640 }))
  • Selection summary at the top with a "Run audit" button
  • Streaming status while the API responds
  • Per-frame report cards identical to the web app, with a "Jump to frame" link that selects + zooms (figma.viewport.scrollAndZoomIntoView)
  • "Add comment" action that drops the recommendation as a Figma comment on the frame

5 · Permissions & privacy

  • Frames leave the host app only when the designer clicks Run audit
  • No layer-level personal data is stored server-side; reports are returned synchronously
  • Optional team workspace mode persists reports under the team's account