Tailwind Dark Mode
A professional dark UI inspired by the Tailwind CSS color palette and spacing system.
Design
tailwind
dark-mode
saas
modern
slate
indigo
MCP Tool
render_wireframe
Output Type
Design
Input Examples
Copy
Describe the screen (e.g. "a project management dashboard" or "a user profile settings page")
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-tailwind-dark-mode/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-tailwind-dark-mode.Related skills
Slack Block Kit Interface
Design screens that mimic the Slack desktop client using standard Block Kit components
Creative Workspace Canvas
A clean, vibrant, and functional design inspired by the Canva web application interface.
Terminal Console Style
A high-contrast command-line interface aesthetic with monospaced typography
Anthropic Style
A clean, academic-inspired design with a warm neutral palette and sophisticated typography.
Support
Videos
