Skip to content

design-broadcast — playbook

Distribute a design-ai artifact (palette, spec, audit report) to the team via Slack and/or Notion. When MCPs are connected, posts directly. Without MCP, generates pasteable formatted content.

When to use

  • "Share this palette with the design team"
  • "Post the audit findings to #design-system"
  • "Add this spec to our Notion design library"
  • After running other skills — broadcast their output.

Inputs (ask if missing)

  1. Artifact: the file or content to share.
  2. Channel(s): Slack channel name, Notion page/database, or both.
  3. Audience: who should be tagged / notified?

Steps

1. Detect available MCPs

slack_available = mcp__plugin_design_slack is connected
notion_available = mcp__864aac7f-...__notion-* is connected

If neither: output formatted content the user can paste manually.

2. Determine artifact type

From the file name / content, identify:

Artifact Pattern
Palette examples/palette-*.md or content has token tables
Component spec examples/component-*.md or content has anatomy + API sections
UX audit / design review content has 🔴/🟠/🟡/🟢 severity sections
Design system bootstrap examples/dogfood-*.md or content has foundations sections
Coverage report knowledge/COVERAGE.md
Token diff / changelog content has CHANGELOG-style format

3. Compose audience-appropriate summary

Different audiences need different framings:

For #design Slack (designers)

  • Visual focus.
  • For palettes: include the preview image + key colors.
  • For specs: link to source, summarize "what this is + key API decisions".
  • For audits: "what we found + top recommendation".

For #frontend / #engineering Slack (developers)

  • Code focus.
  • For palettes: include the Tailwind config / CSS vars snippet.
  • For specs: link to component reference + Code Connect manifest.
  • For audits: severity + count + impact estimate.

For #design-system / #design-leadership

  • Higher-level focus.
  • Coverage stats, trend over time, what's blocking.

4. Format for the channel

Slack format (use Block Kit)

[
  { type: "header", text: { type: "plain_text", text: "🎨 New palette: B2C SaaS — violet" }},
  { type: "section", text: { type: "mrkdwn", text: "*Generated by design-ai* · Cited 4 knowledge files\n\nLight + dark, WCAG AA validated, Tailwind v4 + shadcn-ui formats." }},
  { type: "divider" },
  { type: "section", text: { type: "mrkdwn", text: "*Key tokens:*\n• Primary: `#7C3AED`\n• Accent: `#D97706`\n• Bg: `#FFFFFF`" }},
  { type: "actions", elements: [
    { type: "button", text: { type: "plain_text", text: "View full palette" }, url: "..." },
    { type: "button", text: { type: "plain_text", text: "Open Storybook" }, url: "..." },
  ]}
]

Cite docs/integrations/slack-mcp.md for Slack formatting rules (mrkdwn vs markdown).

Notion format

For "add to design library" pattern: - Create a page in the Notion database. - Convert markdown → Notion blocks (headings, lists, code blocks, tables). - Add metadata properties: status, area (color/typography/component), date.

Cite docs/integrations/notion-mcp.md for the conversion rules.

5. Post (with confirmation)

Show the user the formatted content before posting:

Agent: I'll post this to #design and create a Notion page in the Design System
       database. Confirm? [yes/no/edit]

User approves → execute via MCP.

6. Without MCP — output for manual paste

=== Slack message (paste into #design) ===
[formatted text or copy-pasteable JSON for Block Kit Builder]

=== Notion page content (paste into Notion editor) ===
[markdown that Notion will partially-convert]

=== Confirmation that you posted? [user replies] ===

7. Confirm + log

After posting (if MCP available): - Echo the URL of the Slack message and/or Notion page. - Optionally: react to the Slack message with 🤖 to mark "posted by agent" (transparency).

Verification phase (run before declaring done)

  • Did I detect MCP availability before composing?
  • Did I tailor the message to the audience (designer vs eng vs leadership)?
  • For Slack: did I use Block Kit (not plain text) for richer formatting?
  • For Notion: did I convert markdown to blocks correctly?
  • Did I show the user the message before posting?
  • Did I include source links (knowledge files, examples) for credibility?
  • Did I avoid leaking sensitive content (Figma file URLs, internal customer data) to public channels?

Source files this skill reads

Done when

  • Artifact posted (or formatted output ready for paste).
  • Audience-appropriate summary composed.
  • User explicitly confirmed before posting.
  • URL of posted content output for the user's reference.
  • Sensitive content checked + not leaked.
  • Verification phase passes.