MCP Servers

design-knowledge-mcp

MCP server with 12 tools for design, UX, conversion, and product knowledge from Frontend Masters courses by Paul Boag and Sarah Drasner, enabling audits, accessibility checks, layout recommendations, and more.

README

Design Knowledge MCP Server

MCP server with design, UX, conversion, and product knowledge from 12 Frontend Masters courses by Paul Boag and Sarah Drasner.

12 Tools

Tool	Purpose
`get_principles`	Principles from any domain (conversion, ux-research, product-design, visual-design, content)
`audit_conversion`	Score against 4 psychological pillars of conversion
`audit_content`	Headlines, copywriting, scannability audit
`audit_visual`	Layout, color, typography, imagery feedback
`check_accessibility`	Color contrast, readability, inclusive design
`get_testing_plan`	Testing methods by project phase
`get_ia_recommendations`	Card sorting, tree testing, navigation guidance
`get_design_process`	Phase guidance with checklists
`get_stakeholder_tips`	Presentations, objections, scope creep handling
`generate_headlines`	10 emotional trigger headline formulas
`recommend_layout`	CSS Grid/Flexbox by content type
`build_color_palette`	HSL palette with CSS variables

Knowledge Sources

Paul Boag: Websites That Convert, UX Testing, Product Design, Product Launch, Mastering the Design Process
Sarah Drasner: Design for Developers (7 sections: Layout, Color, Typography, Inspiration, Images, Prototyping)

Usage

Option 1: Local (stdio) — works with any MCP client

{
  "mcpServers": {
    "design-knowledge": {
      "command": "npx",
      "args": ["design-knowledge-mcp"]
    }
  }
}

Or if installed globally:

npm install -g design-knowledge-mcp

{
  "mcpServers": {
    "design-knowledge": {
      "command": "design-knowledge-mcp"
    }
  }
}

Option 2: Remote (HTTP) — deploy once, use everywhere

{
  "mcpServers": {
    "design-knowledge": {
      "url": "https://your-deployed-url.com/mcp"
    }
  }
}

Development

npm install
npm run build
npm run inspect          # test stdio transport
npm run start:http       # test HTTP transport

Deploy HTTP Server

Railway (recommended)

railway init
railway up

Docker

docker build -t design-knowledge-mcp .
docker run -p 3000:3000 design-knowledge-mcp

Any Node.js host

npm run build
PORT=3000 node dist/http.js

Environment Variables

Variable	Default	Description
`PORT`	`3000`	HTTP server port
`HOST`	`0.0.0.0`	HTTP server bind address

Recommended Servers

playwright-mcp

A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.

Official

Featured

TypeScript

Magic Component Platform (MCP)

An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.

Audiense Insights MCP Server

Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.

VeyraX MCP

Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.

Official

Featured

Local

graphlit-mcp-server

The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.

Official

Featured

TypeScript

Kagi MCP Server

An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.

Official

Featured

Python

E2B

Using MCP to run code via e2b.

Official

Featured

Neon Database

MCP server for interacting with Neon Management API and databases

Official

Featured

Exa Search

A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.

Official

Featured

Qdrant Server

This repository is an example of how to create a MCP server for Qdrant, a vector search engine.

Official

Featured