What is ReftrixMCP?
ReftrixMCP is a web design knowledge base platform that provides layout analysis, motion detection, and quality evaluation via MCP tools. It is built for frontend engineers, designers, and AI‑agent builders who want to analyze real websites and retrieve reusable UI patterns through Claude or any MCP client. The system uses PostgreSQL 18 with pgvector for vector search, Redis for caching and job queues, and ONNX Runtime for multilingual and visual embeddings.
How to use ReftrixMCP?
Clone the repository, install dependencies with pnpm, set up Docker containers for PostgreSQL and Redis, run database migrations and seed, build the project, install Playwright and download the DINOv2 and e5‑base models, then configure the MCP server in your Claude or MCP client config. Start the server with the command node /path/to/ReftrixMCP/apps/mcp-server/dist/index.js and provide environment variables for database, Redis, and Ollama.
Key features of ReftrixMCP
- Layout analysis: auto‑detect sections and generate React/Vue/HTML code
- Motion detection: discover CSS/JS animations with frame capture and CLS detection
- Quality evaluation: score designs on originality, craftsmanship, and contextuality
- Semantic search: pgvector HNSW hybrid search for layout, motion, and more
- Preference profiling: learn user design preferences via feedback and reranking (GDPR‑compliant)
- Part‑level analysis: extract 16 UI part types with DINOv2 visual embeddings
Use cases of ReftrixMCP
- Analyze a web page’s layout, motion, and quality in a single async call (page.analyze)
- Search for UI patterns across multiple sites by natural‑language query
- Compare UI parts side by side (styles, layout, interaction) with part.compare
- Generate code for detected sections (React, Vue, plain HTML)
- Personalize design recommendations based on user preference profiles
评论