MCP19toolsDIM768HNSWm=16RRF60/40

Structured knowledge from every web design

Layout analysis, motion detection, and quality evaluation — vectorized into 768-dimensional embeddings and searchable via 19 MCP tools with HNSW cosine similarity at 10.66ms P95.

10.66ms
vector search P95
768d
embedding space
37
database models
10
HNSW indexes
Begin survey
Chapter I

The terrain we survey

0
total embeddings
across 4 survey domains
01domain
0
section embeddings

Layout Topology

Every webpage has terrain. Hero sections rise like plateaus. Feature grids tile the valley floor. Footers anchor the southern boundary. We survey each formation and record its coordinates in 768-dimensional vector space -- indexed via HNSW for sub-millisecond retrieval.

hero / feature / cta / testimonial / pricing / footer / navigation / gallery -- classified via ONNX multilingual-e5-base, cosine similarity search at P95 10.66ms

192 section embeddings indexed14%
02domain
0
motion embeddings

Motion Seismography

CSS transitions ripple through the DOM like seismic waves. GSAP tweens pulse at specific frequencies. WebGL shaders paint at 60fps. We capture these vibrations across three detection channels -- their duration, easing curves, and trigger conditions.

CSS + JS (CDP + Web Animations API) + WebGL (frame-diff) -- 15px/frame capture at 30fps -- GSAP / Framer Motion / anime.js / Three.js / Lottie detection

799 motion embeddings recorded57%
03domain
0
background embeddings

Background Stratigraphy

Beneath the visible surface lie layers of gradients, textures, and color fields. Linear, radial, conic, mesh -- each geological layer tells the story of a design decision. We catalog the full depth across seven distinct strata types.

solid / linear / radial / mesh / conic / image / glassmorphism -- extracted from inline styles + <style> tags + external CSS

394 background embeddings cataloged28%
04domain
0
site narratives

Narrative Atmospherics

Every design carries weather. Some radiate professional calm. Others crackle with artistic energy. We measure the atmospheric pressure of mood, tone, and emotional register -- classifying each site into one of sixteen distinct atmospheric profiles.

16 mood categories (professional / playful / premium / tech / organic / minimalist / bold / elegant / artistic / trustworthy / ...) -- Vision LLM + CSS analysis

9 narrative embeddings mapped1%

Total: 1,394 embeddings across 9 analyzed sites. Each pattern encoded as a 768-dimensional vector (multilingual-e5-base), L2-normalized, indexed via HNSW (m=16, ef_construction=64). P95 search latency: 10.66ms. Section: 192 / Motion: 799 / Background: 394 / Narrative: 9.

9
sites
768
dimensions
10.66ms
P95
37
models
Chapter II

The instruments

Model Context Protocol
19 tools / Claude integration
Zod validation / StdIO transport

1 / 5 selected2,927 layouts / 3,739 motions / 2,944 bgs
THEODOLITE

Unified terrain survey in a single pass. Analyzes layout structure, motion patterns, background designs, and quality scores simultaneously. Vision analysis via Ollama (llama3.2-vision) is enabled by default. Supports async mode for heavy sites and auto_timeout for dynamic complexity detection.

reftrix mcp-server
$// The Theodolite
1await page.analyze({
2 url: "https://stripe.com",
3 layoutOptions: { useVision: true },
4 features: {
5 layout: true,
6 motion: true,
7 quality: true
8 }
9});
OUTPUT
-->sections: 24, motions: 87, backgrounds: 12, quality: 89/100
Chapter III

From raw data to navigable map

Four stages transform unstructured web pages into a searchable vector space -- a cartographic process of surveying, decomposing, encoding, and indexing across 37 models, 10 HNSW indexes, and 768-dimensional vectors.

01

Ingest

Capture the territory

37
DB models

Playwright captures full-page HTML and screenshots. DOMPurify 3.3 sanitizes with a 3-layer strategy. SSRF protection blocks private IPs and cloud metadata services. External CSS resolved and inlined.

PlaywrightDOMPurify 3.3SSRF ProtectionZod Validation
02

Extract

Separate the layers

19
section types
sectionshero / feature / cta / footer ...
motionsCSS + JS + WebGL patterns
backgroundsgradient / mesh / image styles

Sections classified by type (hero, feature, cta, pricing ...). Motion patterns detected via CSS static parsing, JS runtime (CDP + Web Animations API), and WebGL frame diff analysis. Video mode captures at 15px/frame scroll resolution. Background designs decomposed from inline styles and stylesheet sources.

SectionDetectorCDP ProtocolWeb Animations APIPixelmatch
03

Embed

Plot the coordinates

768
dimensional vectors

multilingual-e5-base via ONNX Runtime encodes each pattern into a 768-dimensional vector. L2-normalized for cosine similarity. Batch processing handles 100 patterns in under 10 seconds. Average embedding generation: 46ms.

ONNX Runtimemultilingual-e5-base768DL2-norm
04

Search

Navigate the map

10.66
ms P95 latency

pgvector HNSW indexes (m=16, ef_construction=64) deliver sub-11ms cosine similarity search across 10 indexed tables. Hybrid Search fuses 60% vector + 40% full-text via Reciprocal Rank Fusion.

pgvector 0.8HNSW m=16RRF FusionHybrid Search
37DB models
10HNSW indexes
14RLS policies
19MCP tools
PostgreSQL 18pgvector 0.8HNSW m=16 ef=64multilingual-e5-base768D cosineONNX RuntimePlaywrightDOMPurify 3.3RRF 60/40Zod validation
processvectordata flow
Chapter IV

Current readings

Live Instruments|
74%
14 RLS-enabled
DB Models
0/ 50

PostgreSQL 18.x schema models spanning Auth, RBAC, WebDesign, ML, and Studio domains

63%
WebDesign
MCP Tools
0/ 30

Reftrix WebDesign MCP tools: layout, motion, quality, narrative, background analysis

63%
m=16
HNSW Indexes
0/ 16

Vector indexes at m=16, ef_construction=64, cosine distance across all embedding tables

Vector Dimensions
0dDIMENSIONS
768d
050MAX

multilingual-e5-base embedding space, L2 normalized, cross-lingual search

Search Latency
P95 ACTUAL
0.00ms
10.66ms
050LOW

HNSW cosine similarity P95 across 768D vectors (target < 500ms)

Quality Target
0+
85+
050MAX

Overall score: originality, craftsmanship, contextuality via pattern-driven evaluation

PostgreSQL 18.x + pgvector 0.8.x0 MODELS / 0 TOOLS / 0 INDEXES768D HNSW m=16RRF 60/40 HYBRID
ALL SYSTEMS NOMINAL