Skip to content

Slack MCP integration

Use Slack MCP to broadcast design-ai outputs to a team channel: design review summaries, palette updates, audit reports, token version bumps.

Available tools (when Slack MCP connected)

After authenticating via mcp__plugin_design_slack__authenticate:

Tool What it does
send_message Post to a channel or DM
list_channels Find channels by name
find_user Look up user by name/email
upload_file Attach a file (image, doc)
update_message Edit a previously-sent message (for status updates)
react_to_message Add emoji reaction

Workflow A: post a design review summary

After running /design-review, post the summary to #design-reviews.

You: Review this Figma frame and post the summary to #design.
Agent:
  1. [optional: Figma MCP to read the frame]
  2. Apply commands/design-review.md.
  3. slack__list_channels(query="design") → find channel ID.
  4. slack__send_message(
       channel="C012ABC",
       text="*Design review: <frame name>*",
       blocks=<formatted summary>
     )

Workflow B: notify on token version bump

When tokens change, ping the design + frontend channels.

You: We just bumped tokens/source.json. Notify the team.
Agent:
  1. tools/audit/changelog-generate.py — diff vs last tag.
  2. Compose summary: which tokens changed, impact on components.
  3. slack__send_message(
       channel="#design-system",
       blocks=[
         { type: "header", text: "🎨 Tokens v1.5.0" },
         { type: "section", text: "Changed --color-primary from #1976D2 to #0D9488..." },
         { type: "actions", elements: [
           { type: "button", text: "View PR", url: "..." }
         ]}
       ]
     )

Workflow C: share a palette artifact

When generating a palette via /palette-from-brand, optionally share the result.

You: Generate a palette for "trustworthy + youthful" and post it to #design.
Agent:
  1. Apply skills/color-palette/PLAYBOOK.md.
  2. python3 tools/preview/render-tokens.py /tmp/palette.md
     [generates palette.preview.html]
  3. slack__upload_file(
       channels=["#design"],
       file=palette.preview.html,
       title="Trustworthy + Youthful palette",
       initial_comment="Generated by design-ai. Open the HTML to compare light/dark."
     )

Workflow D: weekly status post

Auto-generate a weekly status post.

[scheduled / on-demand]
Agent:
  1. python3 tools/audit/check-coverage.py — current numbers.
  2. tools/audit/changelog-generate.py — recent commits.
  3. Compose: components added, coverage %, audit results.
  4. slack__send_message(
       channel="#design-system",
       text="*Design system weekly: 2026-05-08*",
       blocks=[<formatted update>]
     )

Workflow E: ping responders on Critical audit findings

When skills/ux-audit finds Critical issues, alert the appropriate person.

You: Audit the new signup flow.
Agent:
  1. Apply skills/ux-audit/PLAYBOOK.md.
  2. If Critical findings:
     - slack__find_user(query="design-lead@company.com")
     - slack__send_message(
         channel="@<that user>",
         text="UX audit found 2 Critical issues in signup flow:..."
       )

Slack message formatting

Slack uses mrkdwn (slightly different from regular markdown) plus block kit for richer messages.

mrkdwn vs markdown

Feature mrkdwn regular MD
Bold *bold* **bold**
Italic _italic_ *italic*
Strikethrough ~strike~ ~~strike~~
Code `code` `code`
Code block ``` ```
Link <url\|text> [text](url)
Mention <@U123> —
Channel <#C123> —

Block kit (richer formatting)

For multi-section posts, use block kit JSON:

[
  {
    "type": "header",
    "text": { "type": "plain_text", "text": "🎨 Design review: Signup flow" }
  },
  {
    "type": "section",
    "text": { "type": "mrkdwn", "text": "*2 critical, 5 high, 3 medium*" }
  },
  {
    "type": "divider"
  },
  {
    "type": "section",
    "text": { "type": "mrkdwn", "text": "*Critical*\n• Contrast 3.2:1 on body text\n• Missing focus indicators on form" }
  },
  {
    "type": "actions",
    "elements": [
      { "type": "button", "text": { "type": "plain_text", "text": "View full report" }, "url": "..." }
    ]
  }
]

Setup

Authentication

# In agent:
mcp__plugin_design_slack__authenticate

OAuth → user grants Slack workspace access. Choose scopes: - chat:write (send messages) - chat:write.public (post to channels you're not in) - files:write (upload files) - channels:read (list channels) - users:read.email (find users by email)

Channel selection

Common channels for design-ai: - #design — general design conversation - #design-reviews — review posts - #design-system — design system updates, token bumps - #design-debt — audit findings

Confirm channel naming with the team before posting.

Privacy

  • Slack auth has access to channels the user can see. Audit per workspace.
  • Don't auto-post sensitive content (Figma URLs of unreleased designs, internal customer data) to public channels.
  • For private design discussions: post to a private design channel + notify via DM.
  • Slack messages are searchable indefinitely — assume public.

Common pitfalls

Pitfall Fix
Message rate limit (1 msg/sec/channel) Throttle. Don't post in tight loop.
Bot can't post to channel Add the bot to the channel: /invite @your-bot-name
User mention not pinging Use <@U123> (the user ID), not @username (the display name)
Block kit JSON malformed Use Slack's Block Kit Builder to validate before sending
Markdown not rendering Slack uses mrkdwn — check the conversion

When Slack MCP is unavailable

design-broadcast skill falls back to: - Outputting the message as plain text the user can copy/paste. - Or generating a Slack-shareable link to a Notion/GitHub page (via Notion/GitHub MCPs if available).

Cross-reference