CONTENT CREATION
Capture a product flow with Browserbase and auto-annotate each step
Walks a defined UI flow in a headless browser via Browserbase, captures a screenshot at every step, annotates each with a step number and the action label in Figma.
How it runs
The automated pipeline, trigger to output.
- TriggerManual run with flow definition and target locale
- ActionWalk the UI flow and capture per-step screenshotsBrowserbase
- ActionTranslate step action labels into target localeOpenAI
- ActionAnnotate each step in Figma and export numbered PNGsFigma
- OutputUpload ordered tutorial bundle to R2Cloudflare R2
What it does
Generates an entire step-by-step tutorial image set from a flow definition, with no manual screenshotting. Given an ordered list of URLs, clicks, and step labels, it drives a Browserbase session through the product, captures each screen, then annotates every shot in Figma with its step number and action caption translated into a target locale, and publishes the ordered set to R2.
When to use it
Use it when a tutorial covers a multi-step flow that changes often and you want fresh, consistently annotated screenshots regenerated on demand rather than recaptured by hand each release.
How it works
- 1You trigger the run with a flow definition (steps, selectors, labels) and a target locale.
- 2Browserbase opens a session and walks each step, capturing a screenshot after every action.
- 3OpenAI translates each step's action label into the target locale.
- 4Each screenshot is placed into the Figma callout template with its step number and translated label, then exported.
- 5The ordered, numbered image set is uploaded to R2 as a complete tutorial bundle.
Set it up
What you configure once, before turning it on.
- 1Connect BrowserbaseHeadless browsers, sessions, replays.
- 2Connect FigmaFiles, frames, comments, assets.
- 3Connect OpenAIModels, embeddings, files.
- 4Connect Cloudflare R2Object storage, S3-compatible.
- 5Set each agent's modelWe leave models unset so you pick the tier — fast + cheap, or top-quality.
- 6Tune it to your dataEdit the prompts, filters, and field mappings so it matches how your team works.
- 7Test, then turn it onRun once against a sample, confirm the output, then enable the trigger.
More Content Creation workflows
Build a Dropbox B-roll library from exported blog drafts
Triggers when a new blog draft file lands in a Dropbox folder, generates a Replicate B-roll clip for each paragraph.
Generate B-roll clips when a blog post is marked Ready in Notion
Watches a Notion blog database for posts flipped to 'Ready', splits the body into paragraphs, and generates a short B-roll video clip for each paragraph with Replicate.
On-demand: turn a blog URL into narrated B-roll clips
Accepts a blog URL via webhook, scrapes the article, generates a B-roll clip per paragraph with Replicate and a voiceover with ElevenLabs.
On-Demand Screenshot Freshness Report from a Slack Command
A writer requests a freshness check in Slack for a specific docs page; the workflow inspects every screenshot on that page, scores each by age and version gap.
Sync a Figma master frame into localized hero renders
Pulls the current master hero frame and its text layers from Figma, generates a localized image variant for each locale defined in Airtable.
Research-driven localized hero banners tuned per market
An agent researches cultural and seasonal cues for each target market, adapts the master hero concept to fit local context, generates a tailored image per locale.
Run it inside a business
This workflow drops into a full company template. Import the org, and this is one of the playbooks its agents run.
Run this workflow in your colony.
14-day trial. No DevOps. No Sales call. Provisioned in under a minute.