AI Designer Studio
A directory and five shipped tools that move work between Figma, PowerPoint, and Premiere.
Design / Preproduction
- Figma
- Carbon Design System
Frontend / Logic
- TypeScript
- React
- Vite
- pdfjs-dist
- pptxgenjs
- JSZip
Motion / Compositing
- Premiere Pro CEP
- ffmpeg
AI Orchestration
- Claude
- Whisper
Infrastructure
- Express
Engineering challenge
A Figma plugin runs split across two sandboxes. Only the main thread can touch the figma.* API; only the UI iframe has Blob and DOM. Every tool has to cross that boundary, and which side does the heavy lifting inverts depending on which way the content is moving.
PDF to Figma parses in the iframe, because pdfjs needs DOM, then posts geometry across to the main thread to build layers. Figma to PowerPoint inverts it: the main thread walks the node tree, the iframe assembles the .pptx. Deck Restyler forked the import half and added Style Kit extraction on top, and PPTX Studio lifted that same core out of Figma altogether into a standalone browser app.
LLM orchestration
Claude was the build partner across the suite, drafting and iterating on implementation while architecture and review stayed with the author; Whisper runs locally inside AutoEdit Studio to drive silence-aware rough cuts.
- agent-workflow
- script-generation
- batch-inference
- assistive
Human in the loop: Every change was reviewed and run before landing. Whisper transcription executes entirely on the editor's own machine — no media leaves it.
AI Designer Studio is the front door to a set of internal tools for a design team: deck conversion, restyling, and video automation across Figma, PowerPoint and Premiere Pro. The directory itself is a Vite + React app on the Carbon Design System, and it does one thing carefully — it tells the truth about what exists and what state each tool is in.
Versions are not hand-maintained. A sync script reads each tool’s own source of
truth before every dev run and build: package.json for the four Figma and web
tools, and CSXS/manifest.xml for the Premiere panel, because CEP extensions
don’t use package.json at all. A repo that isn’t checked out next to the
directory is a warning rather than a failure — the last generated value stands.
The tools
- PDF to Figma — parses an uploaded PDF entirely in the browser and rebuilds each page as an editable Figma frame: separate text, image, and true vector layers at their original coordinates.
- Deck Restyler — forked from PDF to Figma. Extracts a reusable Style Kit (colors, fonts, logo) from a Design Deck and remaps a Content Deck onto it. v1 is restyle-only: every element keeps its original position and size.
- Figma to PowerPoint — the mirror image. Selected frames export to an editable
.pptxwhere text and simple shapes are real, selectable PowerPoint objects rather than a flattened screenshot. - PPTX Studio — the same conversion core, lifted out of Figma into a fully client-side web app. Uploaded decks never leave the browser.
- AutoEdit Studio — a Premiere Pro panel for automated rough cuts, backed by a local Express and ffmpeg service running Whisper transcription on the editor’s own machine.
Architecture
What I would change
The four Figma and web tools have no git history, no tags, and no changelog —
their package.json has read 1.0.0 since creation. The version sync script
is honest about this, but the numbers only start meaning something once those
repos actually version themselves.