콘텐츠로 이동

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

Inspect the callable tool inventory and identify Slack or Notion operations from their declared names, provenance, descriptions, and input schemas. Never guess an MCP server name or call a tool that is not present in the active session.

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.