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 panelimageDataUrl— PNG export at 2× of the frame boundstextContent— 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