Brand Hub

Use-Case Posts

Show a connector by the job it does. Each card pairs the user's request with UI from the apps involved, inside a fixed frame: toolkit backdrop, steps trace, and a powered-by footer. No headline on the image; the post copy carries the pitch.

agent.json
Stripe → Gmail use-case card, stack layout
stack·Stripe → Gmail

“Find every invoice 30+ days overdue and draft a friendly nudge for each.”

PNG Input JSON
Linear → Slack use-case card, flow layout
flow·Linear → Slack

“What shipped yesterday and what's blocked? Post it in #eng before 10.”

PNG Input JSON
HubSpot → Gmail use-case card, fan layout
fan·HubSpot → Gmail

“Draft follow-ups for every deal that hasn't heard from us in two weeks.”

PNG Input JSON
Calendar + HubSpot + Gmail use-case card, focus layout
focus·Calendar + HubSpot + Gmail

“Brief me on everyone in my 2pm and pull our last thread with them.”

PNG Input JSON
GitHub → Notion use-case card, split layout
split·GitHub → Notion

“Turn this week's merged PRs into release notes.”

PNG Input JSON
GitHub → Slack use-case card, flow layout
flow·GitHub → Slack

“When the webhook fix merges, let Acme know in their shared channel.”

PNG Input JSON

Layouts

stack
One app, one result. Steps pill on the panel's top edge, prompt off its corner.
flow
Two apps: read from one, act in the other. Exactly two surfaces.
fan
One run, several outputs, like a batch of drafts. Up to three surfaces.
focus
One rich panel, enlarged and bleeding off the right edge. Prompt and steps on the left.
split
Steps column on the left, panel at natural size on the right.

Surfaces

slack
channel, members, messages[{ author, time, text, bot, items }]
gmail
to[], subject, body[], status
linear
team, view, issues[{ id, title, status, priority, assignee }]
calendar
date, startHour, hours, events[], guests[]
github
repo, title, number, state, author, base, checks[], additions, deletions
notion
breadcrumb, title, properties[], heading, todos[], bullets[]
table
app, title, meta, columns[], rows[][], highlight (CRMs, billing, sheets)

Make one

Copy an example JSON, change the prompt, steps (1–3, each an app slug and a label) and surfaces, then POST it to /api/chart for a 2400×1350 PNG, or render locally with node standalone/capture.mjs --json your-post.json. Logos resolve from the toolkit slug.

The frame, surfaces and layouts live in standalone/renderers/use-case.js; run node standalone/gen.mjs after editing it.