Command Palette

Search for a command to run...

UnylyUnyly
Весь каталог

Design Knowledge

БесплатноНе проверен

MCP server with 12 tools for design, UX, conversion, and product knowledge from Frontend Masters courses by Paul Boag and Sarah Drasner, enabling audits, access

GitHubEmbed

Описание

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

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

from github.com/rznies/design-knowledge-mcp

Установка Design Knowledge

У этого сервера нет опубликованного пакета — он собирается из исходников. Открой репозиторий и следуй инструкции в README.

▸ github.com/rznies/design-knowledge-mcp

FAQ

Design Knowledge MCP бесплатный?

Да, Design Knowledge MCP бесплатный — установка в пару кликов через Unyly без оплаты.

Нужен ли API-ключ для Design Knowledge?

Нет, Design Knowledge работает без API-ключей и переменных окружения.

Design Knowledge — hosted или self-hosted?

Self-hosted: сервер запускается локально на твоей машине командой из раздела установки.

Как установить Design Knowledge в Claude Desktop, Claude Code или Cursor?

Открой Design Knowledge на unyly.org, выбери вкладку своего клиента (Claude Desktop, Claude Code, Cursor) и нажми Install — конфиг сгенерируется автоматически, без правки JSON.

Похожие MCP

Compare Design Knowledge with

Не уверен что выбрать?

Найди свой стек за 60 секунд

Автор?

Embed-бейдж для README

Похожее

Все в категории design