How do I use design-knowledge-mcp?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@design-knowledge-mcp audit conversion of my landing page" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

design-knowledge-mcp

by rznies

Overview Schema Related Servers Score Discussions

TypeScript

Hybrid

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

Related MCP server: UX MCP Server

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

This server cannot be installed

license - not found

quality - not tested

maintenance

How are these scores calculated?

Maintenance

–Maintainers

–Response time

–Release cycle

–Releases (12mo)

Commit activity

Resources

GitHub Repository

Need Help?

Related Servers

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Latest Blog Posts

Your AI Chatbot Just Exposed Your CEO's Salary to an Intern
By Om-Shree-0709 on July 2, 2026.
Agent Identity
MCP Security
OAuth Delegation
Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)
By Om-Shree-0709 on June 30, 2026.
Agentic Ai
Prompt Injection
WebAssembly
Lightport: Open-Sourcing Glama's AI Gateway
By punkpeye on April 27, 2026.
OpenAI
open source

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/rznies/design-knowledge-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server