Stage 01 / 04 · Capture
Find meaningful states
An agentic layer navigates products and records meaningful interface states. Acquisition stays separate from later interpretation.
Product flow → captured state
Interface evidenceCase study · № 004 · AI design search
MOCKLY · search interfaces by intent
An AI-powered design reference platform that discovers real interface states, describes their structure, and retrieves them through natural design language.
AI search
The central idea
Search for the job an interface does.
01The challenge
Designers needed references from real product flows, not isolated concept shots. Keyword tags could not express layout intent, interaction patterns, or the difference between two visually similar screens serving different jobs.
Interactive field notes / system map
Explore the discovery pipeline
Conceptual walkthroughSelect a stage ↓
Stage 02 / 04 · Describe
Give the screen a vocabulary
An LLM pipeline describes hierarchy, components, flow purpose, tone, and interaction patterns using normalized language.
Screenshot → structured description
Consistent descriptorsStage 03 / 04 · Index
Keep the catalogue useful
De-duplication, resolution checks, and safety screening help protect catalogue quality before retrieval.
Descriptors → quality checks → index
Catalogue qualityStage 04 / 04 · Retrieve
Match intent to structure
Azure AI Search combines vectors, keywords, and semantic ranking so design language can retrieve interfaces by purpose and structure.
Query → hybrid search → references
Vector + keyword retrievalProduct flow · simplified for this case01 / 04
A screenshot needs context.
02The system
- An agentic capture layer navigates products, detects state changes, and records meaningful interface states.
- An LLM pipeline generates normalized descriptions for hierarchy, components, flow purpose, tone, and interaction patterns.
- Azure AI Search combines vector retrieval, keywords, and semantic ranking.
- De-duplication, resolution checks, safety screening, relevance tuning, and analytics protect catalogue quality.
03Decisions that mattered
01Acquisition and interpretation stay separate.
The crawler captures clean evidence; later systems decide what it means.
02Normalize language before scale.
A growing library becomes less useful if equivalent patterns drift into incompatible labels.
03Search the job, not the decoration.
Queries such as “card-based checkout” should match interface purpose and structure.
04Evidence boundary
The product architecture and Hashaam's design/front-end role are documented on his public case study. Source code, ingestion scale, latency, and search-quality metrics are not public, so this case focuses on product thinking and system shape rather than invented results.