Web design analysis with 26 MCP tools: layout, motion, quality, semantic search via pgvector
Connect Reftrixmcp to Claude, Cursor or any other MCP client and it stops being a tab you switch to. Web design analysis with 26 MCP tools: layout, motion, quality, semantic search via pgvector. The reftrixmcp mcp server is what makes that connection.
ReftrixMCPは、Webデザインパターンをベクトル検索(pgvector HNSW)と RAGで検索可能なナレッジベースに集約し、MCPツール経由でClaude等の AIエージェントと統合するプラットフォームです。
The toolset is worth reading before you wire it up, because it tells you what the integration is really for:
layout.ingest — - fetch a web page, take a screenshot, and extract section patternslayout.search — - semantic search over layout sections by natural-language querymotion.detect — - detect CSS/JS animations with video-mode frame capturequality.evaluate — - score design quality on originality, craftsmanship, and contextualitypage.analyze — - unified analysis: layout + motion + quality + responsive in one call (async via BullMQ), with opt-in Phase 7.5: accessibility audit, performanceresponsive.search — - search responsive analysis results by viewport and breakpointpreference.hear — - interactive preference hearing sessions with sample presentation and feedback collectionpreference.get — - retrieve preference profiles (with GDPR data portability support)preference.reset — - reset or permanently delete preference profiles (GDPR Right to Erasure)part.search — - semantic search over UI parts with visual (DINOv2) or text embeddingspart.inspect — - get detailed part info including computed styles, bounding box, and accessibilitypart.compare — - compare 2-5 parts side by side on styles, layout, and interactionSetup follows the usual MCP pattern — install or clone the server, register it in your client's configuration file, restart the client. The configuration blocks on this page cover the common clients.
Configuration is passed through the environment: DATABASE_URL, REDIS_URL, OLLAMA_BASE_URL, OLLAMA_HOST, ENABLE_SECTION_SCREENSHOT_FALLBACK, DINOV2_MODEL_PATH. Treat anything key-shaped as a real credential — scope it to the minimum the server needs, and rotate it if it ever lands in a shared config.
Node.js 20+, pnpm 10+, Docker & Docker Compose, Ollama
Among the cloud and infrastructure options, the useful question is rarely "what can it do" but "what does it cost you to run" — permissions, credentials, and how much of your context its toolset consumes. Reftrixmcp's toolset — layout.ingest, layout.search, motion.detect and 11 more — is a fair guide to whether it matches your workflow. It is maintained by TKMD; worth a glance at recent repository activity before you build anything load-bearing on it.
SyncDev reviews every entry in this directory against the project's own documentation before publishing, and revisits them as servers change.
| Tool | What it does |
|---|---|
| layout.ingest | - fetch a web page, take a screenshot, and extract section patterns |
| layout.search | - semantic search over layout sections by natural-language query |
| motion.detect | - detect CSS/JS animations with video-mode frame capture |
| quality.evaluate | - score design quality on originality, craftsmanship, and contextuality |
| page.analyze | - unified analysis: layout + motion + quality + responsive in one call (async via BullMQ), with opt-in Phase 7.5: accessibility audit, performance evaluation, and auto snapshot |
| responsive.search | - search responsive analysis results by viewport and breakpoint |
| preference.hear | - interactive preference hearing sessions with sample presentation and feedback collection |
| preference.get | - retrieve preference profiles (with GDPR data portability support) |
| preference.reset | - reset or permanently delete preference profiles (GDPR Right to Erasure) |
| part.search | - semantic search over UI parts with visual (DINOv2) or text embeddings |
| part.inspect | - get detailed part info including computed styles, bounding box, and accessibility |
| part.compare | - compare 2-5 parts side by side on styles, layout, and interaction |
| Prerequisites | Node.js 20+, pnpm 10+, Docker & Docker Compose, [Ollama](https://ollama.com/) |
| Setup | The Setup tool exposed by this server. |
{
"mcpServers": {
"reftrix": {
"command": "node",
"args": ["/absolute/path/to/ReftrixMCP/apps/mcp-server/dist/index.js"],
"env": {
"NODE_ENV": "development",
"DATABASE_URL": "postgresql://reftrix:change_me@localhost:26432/reftrix?schema=public",
"REDIS_URL": "redis://localhost:27379",
"OLLAMA_BASE_URL": "http://localhost:11434",
"OLLAMA_HOST": "http://localhost:11434",
"ENABLE_SECTION_SCREENSHOT_FALLBACK": "true"
}
}
}
}Configuration as documented by the project. Restart the client after saving.
Node.js 20+, pnpm 10+, Docker & Docker Compose, Ollama
| Variable | Description | Required |
|---|---|---|
| DATABASE_URL | Endpoint or connection string the server talks to. | Yes |
| REDIS_URL | Endpoint or connection string the server talks to. | Yes |
| OLLAMA_BASE_URL | Endpoint or connection string the server talks to. | Yes |
| OLLAMA_HOST | Endpoint or connection string the server talks to. | Optional |
| ENABLE_SECTION_SCREENSHOT_FALLBACK | Configuration value read at startup. | Optional |
| DINOV2_MODEL_PATH | Filesystem location the server is allowed to use. | Optional |
Manage your whole Supabase project in conversation — database, auth, storage, Edge Functions and branches.
Stop letting your assistant hallucinate n8n node parameters — this server hands it the real schemas, templates and validation.
AWS Labs' official server suite — current AWS docs, CDK guidance, cost analysis and service tools.
Cloud browsers for AI agents — automation sessions that run in Browserbase's fleet, not on your machine.
Workers, KV, R2 and D1 by conversation — Cloudflare's official remote servers for building and observability.
Dashboards, Prometheus and Loki queries, incidents and alerts — observability by conversation.