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
39の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
