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: SIN-Code-Frontend-Design-Skill

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

Install Server

license - not found

quality

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.

Tools

View all tools

Related MCP Servers

UX MCP Server
Design Tools Developer Tools Testing & QA Tools
elsahafy
A
license
B
quality
B
maintenance
An MCP server that provides comprehensive UX best practices covering accessibility, usability, UI patterns, design systems, performance, and more, enabling clients to analyze and generate UX-optimized code and recommendations.
Last updated 2026-04-01
23
103
24
MIT
SIN-Code-Frontend-Design-Skill
Design Tools Developer Tools
OpenSIN-Code
F
license
A
quality
C
maintenance
Provides 8 MCP tools for frontend design: load design system, generate components, scaffold pages, review consistency, extract tokens, check WCAG 2.2 AA, test responsiveness, and export to Figma.
Last updated 2026-07-13
8
seo-gaca-mcp
Marketing Browser Automation Testing & QA Tools
gacabartosz
A
license
-
quality
D
maintenance
A comprehensive MCP server for SEO, performance, GEO, and UX audits with 37 tools covering technical SEO, Lighthouse performance, AI search optimization, content analysis, accessibility, security, and more.
Last updated 2026-03-03
1
MIT
UI Toolkit MCP Server
Design Tools Developer Tools Testing & QA Tools
elsahafy
A
license
-
quality
C
maintenance
Comprehensive MCP server for end-to-end UI development, offering tools to generate components, manage design tokens, audit accessibility, autofix issues, inspect live pages, compare screenshots, and more across multiple frameworks.
Last updated 2026-06-24
19
MIT

View all related MCP servers

Related MCP Connectors

Agentic Platform
Free MCP tools: the only MCP linter, health checks, cost estimation, and trust evaluation.
noteit-mcp
MCP server for AI agent profiles and smart notes. 60+ coding prompt packs with expert personas.
royal-mcp
Security-first WordPress MCP server. 129 tools for Claude, ChatGPT, Gemini. Free on wp.org.

View all MCP Connectors

Latest Blog Posts

Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)
By Om-Shree-0709 on July 25, 2026.
mcp
Agent Identity
OAuth 2.1
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

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