CONTENT CREATION
Publish a living style-guide site from Figma variables on every design-system change
When a Figma design-system file is updated, pull its variable collections, generate a static style-guide site (colors, type, spacing, components), and deploy it to Vercel.
How it runs
The automated pipeline, trigger to output.
- TriggerFigma file updated (webhook)Figma
- ActionFetch variable collections and component metadataFigma
- LogicNormalize variables into token JSON (resolve aliases + modes)
- ActionRender token JSON into a static style-guide siteOpenAI
- ActionDeploy generated site to Vercel productionVercel
- OutputPost live URL and changed-token count to SlackSlack
What it does
Watches a Figma design-system file and, on every change, regenerates a public living style guide and ships it to Vercel. Designers edit variables once; the documentation site updates itself.
When to use it
Use it when your tokens live in Figma variable collections and you are tired of hand-updating a static style-guide page. Good for teams that want a single canonical URL for color ramps, type scale, spacing, and component swatches that never drifts from the source file.
How it works
- 1A Figma webhook fires when the design-system file is saved.
- 2The flow fetches all variable collections and modes (color, spacing, radius, type) plus component metadata.
- 3A logic step normalizes the raw variables into a token JSON (resolving aliases and light/dark modes).
- 4An OpenAI step renders the token JSON into a self-contained HTML/CSS style-guide page with copy-to-clipboard token names.
- 5A Vercel deploy step publishes the generated site to its production URL.
- 6A Slack message confirms the deploy with the live link and a count of tokens changed.
Set it up
What you configure once, before turning it on.
- 1Connect FigmaFiles, frames, comments, assets.
- 2Connect OpenAIModels, embeddings, files.
- 3Connect VercelDeploys, runtime logs, analytics.
- 4Connect SlackChannels, DMs, threads, mentions.
- 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
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.
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.
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.
Weekly: clip last week's top blog paragraph and post to socials
Runs on a weekly schedule, picks the highest-traffic paragraph from the past week's posts, generates one polished B-roll clip with Replicate.
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.
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.