Log in
Agent skills

Design WireframePro Agent Skills

Download ready-to-use agent skills for Claude Code, Cursor and other AI assistants. Skills for MockFlow via MCP to generate flowcharts, whiteboards, tables, diagrams and more.

Page 1 of 1 (Showing 40 skills)

Library

Skills your agent can use today.

Download a skill for Claude Code, Cursor or another assistant, and it draws on your MockFlow board through MCP.

Start exploring

X Platform Style A high-contrast dark mode design system inspired by the X social platform Design Notion Workspace Style Minimalist digital document and productivity tool aesthetic following Notion's visual language Design Food Delivery Mobile UI System Modern food delivery mobile UI system featuring restaurant listings, food cards, cart, checkout, delivery tracking, promotions, and user account screens with a clean orange-accented design. Design Healthcare Management System UI Transforms wireframes into modern healthcare, hospital management, clinic administration, patient management, and medical dashboard interfaces using a professional blue healthcare design system. Design OTT Streaming Website Generator Create modern OTT streaming platform websites with movie catalogs, hero banners, content carousels, subscription plans, user profiles, watchlists, and responsive layouts. Design Blocks CSS Wireframe A playful, high-contrast UI style based on solid black borders and thick shadows. Design OTT Streaming Mobile App Designer Generates modern OTT streaming mobile app designs with movie browsing, content discovery, video playback, watchlists, subscriptions, and personalized recommendations. Design Salesforce Lightning Design System Professional enterprise application style based on the Salesforce Lightning Design System Design SAP Fiori Enterprise Style Professional enterprise UI style based on the SAP Fiori design system Design Atlassian Design System Screens styled with the clean, structured, and collaborative look of Atlassian products like Jira and Confluence. Design Shopify Polaris Admin Screens styled with the Shopify Polaris design system for admin extensions and web components Design WordPress Plugin Dashboard A clean, functional UI style modeled after the WordPress admin interface for plugin development and settings. Design Forest Nature Theme A grounded, organic design style using earthy greens and natural wood tones. Design Slack Block Kit Interface Design screens that mimic the Slack desktop client using standard Block Kit components Design Creative Workspace Canvas A clean, vibrant, and functional design inspired by the Canva web application interface. Design Terminal Console Style A high-contrast command-line interface aesthetic with monospaced typography Design Anthropic Style A clean, academic-inspired design with a warm neutral palette and sophisticated typography. Design Soft Pastel Theme A gentle and modern design system using soft pastel tones and rounded components. Design Apple TV Design Style Screens styled like the tvOS interface for large-screen living room applications Design Tailwind Dark Mode A professional dark UI inspired by the Tailwind CSS color palette and spacing system. Design Neumorphic Mobile UI A soft, tactile design style using light and shadow to create extruded plastic-like surfaces for mobile. Design Salesforce Lightning Design System Professional enterprise UI following the Salesforce Lightning Design System (SLDS) guidelines Design SAP Fiori Enterprise Style Enterprise-grade layouts based on SAP Fiori design principles for business applications Design Sketchy Wireframe UI Generate low-fidelity, sketch-style wireframes that mimic hand-drawn UI layouts. Focuses on structure, layout blocks, and rough UI representation similar to whiteboard or pencil sketches. Design Sci-Fi Cinematic UI A high-contrast, data-heavy interface style inspired by futuristic movie displays. Design Retro Skeuomorphic Mac Aqua A nostalgic design system inspired by early 2000s desktop operating systems with glossy buttons and pinstripe textures. Design VisionOS Spatial Style Screens styled with the glassmorphism and rounded aesthetics of Apple visionOS Design Outline Wireframe UI A clean, high-contrast wireframe style using distinct outlines and a grayscale palette. Design Apple watchOS Style Screens designed for the Apple Watch interface with high-contrast dark backgrounds and rounded elements. Design Automotive HMI Infotainment High-contrast, dark-mode screens designed for in-car infotainment systems and EV displays. Design Retro Windows 98 A classic 90s desktop aesthetic with gray bevels and pixel-perfect borders Design Bootstrap 5 Classic Standard web layouts using the iconic Bootstrap 5 framework aesthetic Design Accessible WCAG-First A high-contrast, clear layout designed for maximum readability and accessibility compliance. Design Shadcn UI Style Clean, accessible, and modern UI based on the popular Radix and Tailwind CSS design system Design Windows Fluent UI Professional screens based on the Microsoft Fluent 2 design system Design Wireframe Blueprint Style A technical architectural look with blueprints blue and white drafting lines Design Cyberpunk Retro UI A high-contrast dark interface featuring neon accents and retro-futuristic digital displays. Design Material 3 Design System Clean, functional layouts following Google's Material 3 design language with tonal palettes and rounded shapes. Design Tailwind CSS Default Theme Clean, modern interfaces using the default Tailwind CSS color palette and spacing system. Design Apple Liquid Glass Premium iOS style featuring soft gradients, high-gloss surfaces, and rounded glass elements Design
1

Showing 40 of 40 skills

Get started

Connect your agent to MockFlow.

MCPBrainstorm with MockFlow MCP

Add MockFlow as an MCP connector in Claude, Cursor, or any MCP-compatible AI assistant to generate flowcharts, mindmaps, architecture diagrams, and 16 types of visualizations.

Desktop App MCP Powerful
CLI Web MCP Developer
Loginless Web MCP Easiest

Built into the MockFlow Desktop App. AI creates visuals directly on your open canvas — no URLs, no waiting.

1
Open Desktop App → open a MockFlow project
2
In Claude Code / Cursor, run:
claude mcp add --transport http -s user mockflow-ideaboard http://localhost:21193/mcp
3
Ask: "Create a flowchart for..."

Best for: Designers, product teams, daily MockFlow users.

Download Desktop App →

Install from npm, log in via browser (OAuth), and boards are saved to your MockFlow account.

1
npm install -g @mockflow/ideaboard-mcp
2
mockflow-ideaboard-mcp login
3
mockflow-ideaboard-mcp

Best for: Developers using Claude Code, Cursor, or VS Code Copilot.

npm Package →

Add MockFlow as a connector in Claude.ai or ChatGPT. No installation, no account required. A new board is created and you get a shareable URL.

1
Open Claude.ai → Settings → Connectors
2
Paste this URL: https://app.mockflow.com/ideaboard/mcp
3
Ask Claude to create a flowchart — done!

Best for: Managers, marketers, anyone using Claude.ai or ChatGPT in the browser.

Welcome back

Don't have an account? Sign up

Faster ways in

Sign in with an account you already use.