Slack Block Kit Interface
Design screens that mimic the Slack desktop client using standard Block Kit components
Design
slack
block kit
messaging
enterprise
b2b
workspace
MCP Tool
render_wireframe
Output Type
Design
Input Examples
Copy
Describe a Slack integration (e.g. "an expense approval message in Slack" or "a project management dashboard within a Slack channel")
How to Use
1
Connect MCP Server
Add MockFlow WireframePro MCP to your AI assistant:
Desktop MCP
Web MCP
claude mcp add --transport http -s user mockflow-wireframepro http://localhost:21194/mcp
Requires MockFlow Desktop app running locally
npm install -g @mockflow/wireframepro-mcp && mockflow-wireframepro-mcp login && mockflow-wireframepro-mcp
Install CLI, login with your MockFlow account, then start the server
2
Install Skill
Download the SKILL.md file and place it in your skills directory:
~/.claude/skills/mockflow-slack-block-kit-interface/SKILL.md
3
Use the Skill
Claude Code will auto-detect when your prompt matches the skill. You can also invoke it directly with
/mockflow-slack-block-kit-interface.Related skills
Blocks CSS Wireframe
A playful, high-contrast UI style based on solid black borders and thick shadows.
OTT Streaming Mobile App Designer
Generates modern OTT streaming mobile app designs with movie browsing, content discovery, video playback, watchlists, subscriptions, and personalized recommendations.
Salesforce Lightning Design System
Professional enterprise application style based on the Salesforce Lightning Design System
SAP Fiori Enterprise Style
Professional enterprise UI style based on the SAP Fiori design system
Support
Videos
