The Problem
AI tools can generate UI mockups, but the results are generic. Ask an AI to "design a dashboard" and you get the same layout every time — the same fonts, the same color scheme, the same card-based grid. The output lacks the intentionality of real design work.
The bottleneck is not generation speed — it is design intelligence. AI tools do not know that a healthcare app needs different visual patterns than a fintech dashboard, or that a SaaS landing page follows different layout principles than an e-commerce storefront. They generate fast but without informed direction.
I wanted to build a system that gives AI tools the design knowledge they lack — so that prototyping starts from an informed position, not a blank prompt.
Brief
Project description
BM25 Search
67 styles · 96 palettes
Design Direction
Tokens + rules + anti-patterns
Generation
Mockups + assets
Components
Production-ready code
Approach: Knowledge Before Generation
Rather than fine-tuning a model or relying on expensive AI calls for design decisions, I built a searchable design knowledge base — a curated library of styles, color palettes, typography pairings, UX guidelines, and layout patterns, all stored as structured data.
The search engine uses BM25 text ranking — a fast, deterministic, offline algorithm. No API calls, no token costs, no latency. When you describe a project ("beauty spa landing page" or "enterprise analytics dashboard"), the system returns informed design recommendations grounded in curated data, not hallucinated by a model.
Four-Phase Prototyping Pipeline
Design Intelligence
Search the knowledge base for style direction, color theory, typography, and UX patterns matched to the project type. A reasoning layer applies category-specific rules — what works for healthcare is different from what works for fintech.
Full-Screen Mockups
Generate high-fidelity mockups with design tokens, responsive variants, and accessibility analysis — informed by the design direction from step one.
Asset Generation
Hero imagery, backgrounds, and visual assets generated with style consistency maintained across the project.
Production Components
Convert approved designs into typed, implementation-ready UI components with accessibility and responsive breakpoints built in.
Key Findings
Design quality improves when AI has informed constraints, not unlimited freedom.
Giving the AI a specific style direction, curated palette, and layout pattern produced significantly better results than open-ended prompting. Constraints are a feature, not a limitation.
Deterministic search is the right tool for design knowledge retrieval.
BM25 search over curated data is faster, cheaper, and more predictable than asking a language model to 'suggest a color palette.' The model's value is in generation, not in curation — so the knowledge layer should be separate.
Anti-patterns are as valuable as best practices.
The reasoning layer includes product-specific anti-patterns: what to avoid for healthcare apps, what does not work for dashboards. Preventing bad design decisions is as important as suggesting good ones.
Architectural Decision: Master + Page Overrides
The system generates a hierarchical design document: a global master (design tokens, color palette, typography scale) with per-page overrides. This mirrors how professional design teams work — global consistency with intentional per-screen variations.
The output is persisted as markdown files rather than ephemeral chat responses. This means the design direction survives across sessions and can be shared with collaborators or referenced during implementation.
flowchart TB
subgraph input [User Input]
A[Project Brief]
B[Industry Context]
end
subgraph knowledge [Knowledge Base]
C[(67 Styles)]
D[(96 Color Palettes)]
E[(57 Font Pairings)]
F[(99 UX Guidelines)]
end
subgraph search [BM25 Search Engine]
G[Query Parser]
H[Ranking Algorithm]
I[Reasoning Layer]
end
subgraph output [Generated Output]
J[MASTER.md]
K[pages/home.md]
L[pages/dashboard.md]
end
A --> G
B --> G
G --> H
C --> H
D --> H
E --> H
F --> H
H --> I
I --> J
I --> K
I --> L Constraints & Reflections
This tool lives inside the Cursor IDE and is designed for my personal workflow. It is not a standalone product. The knowledge base reflects my curation and biases — another designer would curate differently, and the system's recommendations would shift accordingly.
The BM25 search works well for structured queries but struggles with ambiguous briefs. A hybrid approach — BM25 for precise lookups, with a small model for query expansion on vague inputs — would improve coverage without significantly increasing cost.
I have not yet conducted formal usability testing with other designers. My evaluation has been based on my own use across client and personal projects. Broadening the user base would reveal whether the curated guidelines generalize or are too tailored to my preferences.