MCP server with 40 tools for web design analysis — layout extraction, motion detection, quality scoring, accessibility audit, Core Web Vitals, design comparison, and semantic search via Playwright, pgvector, ONNX Runtime, and Ollama.
Setup
Choose your client, copy the config, then fill in any required environment variables.
claude mcp add reftrixmcp --env DATABASE_URL='<DATABASE_URL>' -- npx -y @reftrixmcp/mcp-server~/.codex/config.toml
[mcp_servers.reftrixmcp]
command = "npx"
args = ["-y", "@reftrixmcp/mcp-server"]
env = { DATABASE_URL = "<DATABASE_URL>" }
# codex mcp add reftrixmcp --env DATABASE_URL='<DATABASE_URL>' -- npx -y @reftrixmcp/mcp-server~/.cursor/mcp.json
{
"mcpServers": {
"reftrixmcp": {
"command": "npx",
"args": [
"-y",
"@reftrixmcp/mcp-server"
],
"env": {
"DATABASE_URL": "<DATABASE_URL>"
}
}
}
}.vscode/mcp.json
{
"servers": {
"reftrixmcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@reftrixmcp/mcp-server"
],
"env": {
"DATABASE_URL": "<DATABASE_URL>"
}
}
}
}~/.gemini/settings.json
{
"mcpServers": {
"reftrixmcp": {
"command": "npx",
"args": [
"-y",
"@reftrixmcp/mcp-server"
],
"env": {
"DATABASE_URL": "<DATABASE_URL>"
}
}
}
}claude_desktop_config.json
{
"mcpServers": {
"reftrixmcp": {
"command": "npx",
"args": [
"-y",
"@reftrixmcp/mcp-server"
],
"env": {
"DATABASE_URL": "<DATABASE_URL>"
}
}
}
}.trae/mcp.json
{
"mcpServers": {
"reftrixmcp": {
"command": "npx",
"args": [
"-y",
"@reftrixmcp/mcp-server"
],
"env": {
"DATABASE_URL": "<DATABASE_URL>"
}
}
}
}Environment variables
DATABASE_URL
Replace the placeholders with your own credentials and keep them out of version control.