Checklist Design MCP Server (checklist-design-mcp)

⚡ Zero-Config Setup: Run npx checklist-design-mcp once and your AI assistant (Claude Desktop, Cursor, VS Code, Windsurf) is configured automatically with 120+ UI/UX checklists and slash commands!

checklist-design-mcp is an exhaustive Model Context Protocol (MCP) server package containing every checklist from Checklist Design (created by George Hatzis). It equips AI models and developers with structured, actionable UI/UX design checklists covering Websites, Web Apps, Mobile Apps, Design Systems, and User Flows.

⚡ Zero-Config Setup & Auto-Injection

Just run:

npx checklist-design-mcp setup

This single command automatically:

1. 🎯 Injects MCP Server Config into Claude Desktop (claude_desktop_config.json), Cursor (.cursor/mcp.json), and VS Code (.vscode/mcp.json).
2. 🤖 Installs AI Rules & Skills into .cursor/rules/checklist-design.mdc, .claude/rules/checklist-design.md, and .windsurfrules.
3. 💬 Enables Slash Commands directly in your AI chat environments (/checklist, /design-review, /design-spec).

📊 Complete Checklist Coverage (120+ Checklists)

Every single checklist from Checklist Design is included:

• Website (24 Checklists): Security, About, Privacy, Features, Testimonials, Affiliate, Compare, Status, Billing, Press/Media, Waitlist, Team, Cart, Search, Careers, Blog Post, Contact Us, Pricing, FAQ, 404, Login, Terms, Sign Up.
• Web App (30 Checklists): 2FA, Notification Settings, Account, Help Center, Billing Settings, User Management, Single Item Detail, Admin Panel, Empty State, Onboarding, Notifications, Public Profile, Timeline/Gantt View, Feed, API Keys, Search Results, Integrations, Version History, Comments, Multi-step Form, Kanban Board, Chat, Maintenance, Pricing, Login.
• Mobile App (24 Checklists): Gesture Navigation, Splash Screen, Checkout, Tab Bar Navigation, In-App Notifications, Action Sheet, Billing, Search, Camera, Map View, Onboarding Checklist, Paywall, Onboarding, Chat, Settings, In-App Browser, Cart, Login, Account, Invite.
• Design System (29 Checklists): Drawer, Typography, Date Picker, Spacing/Grid, Color System, Tokens, Accordion, Skeleton, Carousel, Banner, Slider, Toast, Tabs, Checkbox, Radio, Searchbar, Tooltip, Modal, Loading, Toggle, Input Field, Icon, Table, Card, Button, Badge, Avatar, Dropdown Menu.
• User Flows (13 Checklists): Adding to Cart, Uploading Media, Verifying Account, Canceling Subscription, Filtering Items, Saving Changes, Entering Promo Code, Showing Input Error, Resetting Password, Deleting Account, Contacting Support, Making a Card Payment, Submitting a Form.

💬 Slash Commands & AI Skills

Once setup is complete, you can use these shortcuts directly in your AI chat:

• /checklist <component>: Fetches exact Checklist Design guidelines (e.g. /checklist paywall, /checklist button, /checklist pricing).
• /design-review [file]: Automatically audits your active code file or layout specification against UX, WCAG accessibility, copy, and state guidelines.
• /design-spec <feature>: Generates a complete UI/UX specification and implementation checklist before you write code.

🛠️ Simple MCP Tools API

• list_checklists: List all 120+ checklists grouped by category or filtered by platform.
• get_checklist: Retrieve full checklist rules for any screen or component (e.g. Paywall, Button, Pricing).
• search_checklists: Search rules across all 120+ checklists by keyword or topic.
• review_design: Evaluate UI code or wireframe descriptions against Checklist Design criteria.

📦 Publishing to npm

To publish your package:

cd checklist-design-mcp
npm login
npm test
npm publish --access public

📄 License & Attribution

• License: MIT
• Data Source & Credit: Built with design rules inspired by Checklist Design created by George Hatzis.