TKMD/ReftrixMCP

**Web design knowledge base platform -- layout analysis, motion detection, and quality evaluation via MCP tools.**
> For frontend engineers, designers, and AI-agent builders who want to analyze real websites and retrieve reusable UI patterns via Claude or any MCP client.
Japanese / 日本語の概要
ReftrixMCPは、Webデザインパターンをベクトル検索(pgvector HNSW)と
RAGで検索可能なナレッジベースに集約し、MCPツール経由でClaude等の
AIエージェントと統合するプラットフォームです。
**主要機能**: レイアウト分析 / モーション検出 / 品質評価 / セマンティック検索 / 横断検索 / 画像類似検索 / レスポンシブ解析 / 嗜好プロファイリング / パーツ分析 / レート制限 / 検索キャッシュ / BullMQ UI / SBOM
** 40 のMCPツール**を提供: Layout(5) / Motion(2) / Quality(1) / Page(4) / Narrative(1) / Background(1) / Responsive(2) / Preference(3) / Part(3) / Style(1) / Brief(1) / System(1) / Search(2) / Design(5) / Data(2) / Audit(1) / Embedding(1) / Accessibility(1) / Performance(1) / Report(1)
詳細な日本語ドキュメント: docs/README.ja.md
What it does
- **Layout analysis** -- auto-detect sections (hero, feature, CTA, etc.), extract grid/typography, and generate React/Vue/HTML code
- **Motion detection** -- discover CSS/JS animations with frame capture (15 px/frame video mode), CLS detection via Pixelmatch
- **Quality evaluation** -- score designs on three axes (originality, craftsmanship, contextuality) with anti-AI-cliche detection
- **Semantic search** -- find layout, motion, narrative, background, and responsive patterns via pgvector HNSW hybrid search
- **Preference profiling** -- learn user design preferences through feedback sessions and personalize search results via reranking (GDPR-compliant)
- **Part-level analysis** -- extract 16 UI part types (button, icon, heading, etc.) with DINOv2 visual embeddings for visual similarity search
- **Vision integration** -- Ollama llama3.2-vision for richer layout, motion, and narrative understanding
- **Section post-processing** -- auto merge/split sections by type, heading, and height (Rule 1-4) for optimal structure
- **Multi-tile capture** -- split large sections (>viewport height) into tiles for complete DINOv2 visual coverage
- **Blank image detection** -- detect lazy-loading unrendered sections and re-capture via Playwright for full coverage
- **Code generation** -- convert analyzed sections to React, Vue, or plain HTML with matched motion patterns
- **Unified search** -- cross-service search across layout, part, motion, background, and narrative patterns in a single query
- **Image similarity search** -- find visually similar designs via DINOv2 embeddings from Base64/URL input (RRF 3-source)
- **Rate limiting** -- Token Bucket + Redis Lua (CWE-770 DoS prevention), 3-tier (analysis 10 RPM / search 120 RPM / default 60 RPM)
- **Search cache** -- LRU in-memory cache (lru-cache v11) with TTL-based natural expiry (5 min)
- **BullMQ UI** -- Bull Board dashboard for monitoring async page.analyze jobs (port 21080)
- **SBOM** -- CycloneDX 1.6 auto-generation for EU CRA vulnerability reporting compliance
Why ReftrixMCP
| | |
| -------------------- | ----------------------------------------------------------------------------------------------------------- |
| **Layout-aware** | Sections, grids, and typography extracted as structured data -- not just screenshots |
| **Motion-aware** | CSS static analysis + frame-by-frame video capture for real animation behavior |
| **Quality-aware** | Three-axis scoring with actionable improvement suggestions |
| **Searchable** | 768-dim multilingual embeddings (e5-base) with HNSW index and hybrid RRF ranking |
| **Preference-aware** | User preference profiling with feedback-driven reranking across all search tools |
| **Part-aware** | 16 UI part types extracted with DINOv2 visual embeddings for cross-site component comparison |
| **MCP-native** | 40 tools purpose-built for Claude Desktop and MCP Client CLI |
Quickstart
> Run page.analyze on any URL in under 5 minutes.
Prerequisites
Node.js 20+, pnpm 10+, Docker & Docker Compose, Ollama