Design Principle
RAG quality depends not only on content depth but on whether entries can be recalled. Retrieval queries are signposts for future agents and must cover multiple phrasings and task intents.
Large Theory
Design knowledge has several vocabularies: a user says the knowledge base cannot scroll, an engineer says overflow hidden, a designer says scroll container ownership, accessibility guidance says WCAG Reflow, and a case study may call it scrolling interaction. If an entry only has one title, RAG can easily miss it. Healthy entries need retrieval query coverage: map one principle to user phrasing, theory concepts, component names, implementation symptoms, source/case language, and bilingual synonyms.
Small Points
- User phrasing: knowledge page cannot scroll, filters disappeared, cards feel too marketing-like.
- Theory terms: information scent, faceted navigation, progressive disclosure, visual hierarchy.
- Component/state terms: active filter chips, empty state, scroll container, batch action bar.
- Implementation-risk terms: overflow hidden, URL query state, focus trap, contrast regression.
- Case/source terms: Awwwards SOTD, Carbon pattern, NN/g, W3C, MDN, Polaris.
- Bilingual retrieval: include Chinese task words and English industry terms so Chinese briefs can recall English theory.
Design Judgment
The contract works when five different real task phrasings recall the same entry, and the entry tells the agent when to apply it, when to avoid it, and how to verify it.
Implementation Notes
The entry schema should include at least titleZh/En, summaryZh/En, category, tags, applyWhen, avoidWhen, agentDirective, retrievalQueriesZh/En, sourceLinks, and caseStudy. Before adding a new entry, write 8-12 realistic query phrases covering user symptom, designer term, frontend term, accessibility term, and source/case term. Periodically add queries from failed tasks and search logs, not only from article body text.
Counterexamples/Risks
The knowledge article is long but retrievalQueries only repeat the title; Chinese entries omit English professional terms; asset entries list only a brand name with no license/use case; case studies describe aesthetics but omit source language; an agent searching mobile filter tray only recalls a generic search-system entry.
Case Study
Awwwards Sites of the Day, case-study posts, and collections pages provide award/score, project narrative, and pattern labels. Carbon, MDN, W3C, and NN/g provide pattern, implementation, and accessibility vocabulary. When these sources become RAG entries, do not store only article summaries; convert source language into retrieval queries so future agents can reach the right knowledge from prompts such as build asset-library filters, overflow page cannot scroll, or find an Awwwards case proving motion storytelling.
Source Links
Awwwards Sites of the Day: https://www.awwwards.com/websites/sites_of_the_day/ Awwwards Case Study Blog: https://www.awwwards.com/blog/case-study/ Awwwards Storytelling Collection: https://www.awwwards.com/awwwards/collections/storytelling/ Carbon Patterns: https://carbondesignsystem.com/patterns/ NN/g Articles: https://www.nngroup.com/articles/
Agent Directive
Before adding any RAG entry, write retrieval query coverage for user symptoms, theory terms, component/state words, implementation-risk words, source/case words, and bilingual synonyms; do not rely only on title and tags.