# 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

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

Or if installed globally:
```bash
npm install -g design-knowledge-mcp
```
```json
{
  "mcpServers": {
    "design-knowledge": {
      "command": "design-knowledge-mcp"
    }
  }
}
```

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

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

## Development

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

## Deploy HTTP Server

### Railway (recommended)
```bash
railway init
railway up
```

### Docker
```bash
docker build -t design-knowledge-mcp .
docker run -p 3000:3000 design-knowledge-mcp
```

### Any Node.js host
```bash
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 |