Interface Lab
Login
Knowledge Resource Map

Resource Map

Source tiers, theme coverage, curation standards, and expansion method for the design knowledge base.

Design Knowledge Resource Map

This resource map explains how the Interface Lab design knowledge base is collected, filtered, and expanded. A knowledge item is kept only when it becomes executable design judgment: it can become an Agent directive, change generated UI, has clear apply and avoid contexts, and can be retrieved with English and Chinese queries.

Source Tiers

Theme Map

  • Visual Foundations: hierarchy, density, real media, object detail, comparison layouts, typographic index brand systems, chart readability, dashboard triage, and empty-state composition.
  • Typography Color Accessibility: type hierarchy, contrast, semantic color, OKLCH/perceptual scales, forced-colors, high contrast, focus states, non-text contrast, form labels, error summaries, status messages, icon accessible names, and reduced redundant entry.
  • Interaction Responsive Motion: keyboard navigation, modal focus, bulk actions, filter state, empty-state recovery, mobile action bars, skeleton loading, AI generation progress, immersive 3D storytelling gates, undo, and drag alternatives.
  • Design Systems Page Patterns: settings pages, list-detail workflows, pricing comparison, search facets, design system docs, token editors, concept-led case navigation, component governance, community contribution, and review flows.
  • Frontend Implementation: primitive selection, copy-in component governance, frontend token mapping, loading/skeleton/progress state contracts, state matrices, keyboard paths, automated accessibility testing, background texture CSS/fallbacks, and component upgrade policy.
  • Resource Licensing: license metadata, commercial-use judgment, attribution, download methods, and integration paths for fonts, icons, illustrations, patterns/textures, background generators, Lottie, UI kits, and component resources.
  • Data Visualization: chart selection, data relationships, visual encoding, chart accessibility, Canvas/SVG alternatives, data source, and last-updated metadata.

Case Evidence Layer

  • Awarded websites prove how a theory appears in production, but they do not become rules by themselves. Awwwards, CSS Design Awards, and similar platforms are case signals; each item must explain why layout, color, motion, interaction, or conversion path works.
  • Recent awarded cases should be converted into executable patterns: Shed proves how type, index, and menus can carry brand navigation; The Power of Storytelling proves 3D/WebGL narratives need gates, copy anchors, and fallbacks; The Agency of Love & Logic proves a brand concept must map to services, cases, menus, and CTAs.
  • Real product flows prove component and workflow patterns. Mobbin, Pageflows, and related sources should be summarized by task, state, control, and copy, not copied as brand visuals.
  • Design system cases prove token scope, component states, and governance. Radix Themes, Material Design, Carbon, Polaris, NHS.UK / NHS App, and similar sources should be translated into semantic tokens, state matrices, component boundaries, license boundaries, and service-flow rules.
  • Public-service cases prove that trustworthy services are not a visual style but a structure of official identity, responsible organization, legal links, task titles, semantic forms, error recovery, review/confirmation, and anti-impersonation boundaries. USWDS, GOV.UK, NHS.UK, and similar sources should become official/non-official context decisions, banner/identifier boundaries, privacy/accessibility/FOIA links, form error summaries, field anchors, focus recovery, and confirmation numbers.
  • Frontend implementation cases prove how component libraries, modern CSS, and token pipelines enter the local system. Radix Primitives, React Aria Components, shadcn/ui, Headless UI, Spectrum CSS, Spectrum Design Data, Color.js, Culori, Material Color Utilities, and similar sources should become behavior contracts, token mappings, state matrices, fallbacks, and upgrade policies.
  • Accessibility-tool cases prove how automated testing becomes reproducible defects. axe-core, Storybook a11y, Pa11y, Lighthouse, Accessibility Insights, WAVE, and similar sources should become tool layering, run conditions, severity, selectors, user-task impact, and manual retest steps.
  • Data-visualization cases prove chart type, encoding, and accessible alternatives. FT Visual Vocabulary, From Data to Viz, D3, Observable Plot, Observable Framework, Vega-Lite, ECharts, Chart.js, Recharts, visx, deck.gl, MapLibre GL JS, USWDS Data Visualizations, and similar sources should become chart/map briefs, encoding rules, library boundaries, geodata attribution, data source/update metadata, and table alternatives.
  • Pattern and texture cases prove how assets enter real interfaces. Hero Patterns, GeoPattern, CSS Pattern, css-doodle, fffuel, ambientCG, and similar sources should become license records, seed/export parameters, tokenized texture parameters, readability tests, forced-colors/print fallbacks, and optimized self-hosting strategies.
  • Retail ecommerce cases prove that conversion paths are continuous decision systems. Baymard, NN/g, Shopify Polaris, Mobbin, Pageflows, and similar sources should become product discovery, search/filter/sort, PDP decision blocks, add-to-cart feedback, cart review, guest checkout, address/payment recovery, order summaries, mobile sticky actions, and do-not-copy brand-asset boundaries.
  • Food and quick-commerce cases prove how expressive visuals still serve transaction paths. Awwwards Food & Drink, restaurant sites, and real ordering pages should become first-viewport product objects, menu entries, price/nutrition/ingredient proof, stable CTAs, cart/order state, motion fallbacks, and do-not-copy brand-asset boundaries.
  • Font and icon cases prove asset delivery and license governance. Fontsource, Bunny Fonts, LXGW WenKai, Fraunces, Lucide, Radix Icons, Iconoir, Octicons, Simple Icons, SVG Repo, and similar sources should become font loading matrices, fallbacks, privacy boundaries, primary icon-set rules, per-resource licensing, brand trademark notes, and accessible naming.
  • Illustration and empty-state cases prove how friendly assets enter empty states, onboarding, and explainers. Carbon, Atlassian, PatternFly, Open Doodles, Open Peeps, Humaaans, IRA Design, unDraw, and similar sources should become state type, cause, primary recovery action, secondary action, license/attribution, alt/decorative decisions, frontend state condition, static fallback, and brand-sameness risk records; assets must not replace reason copy or next action.
  • Loading-state cases prove that wait feedback must be classified by task before visual treatment. NN/g, Carbon Loading, Carbon Inline Loading, Material / Android progress indicators, and similar sources should become skeleton / inline loading / spinner / determinate progress / stage feedback boundaries, aria-busy, progressbar/live-region semantics, reduced motion, stale refresh, layout shift, and error/success/cancel handoff rules.
  • Motion implementation cases prove animation-library choice, scroll boundaries, interactive state machines, and reduced-motion governance. Motion.dev, GSAP, Lenis, Scrollama / IntersectionObserver, Anime.js, Rive runtimes, CSS scroll-driven animations, and similar sources should become motion inventories, library-choice matrices, step-trigger contracts, state-machine inputs, performance-property audits, scroll briefs, fallbacks, and desktop/mobile evidence.
  • 3D implementation cases prove how runtime code, helpers, generated components, compression, and assets must stay separate. Three.js, React Three Fiber, drei, gltfjsx, KTX-Software, meshoptimizer, glTF Transform, model-viewer, and similar sources should become scene briefs, asset provenance records, performance budgets, reduced-motion/static fallbacks, and visual QA evidence.
  • Every case-study knowledge item must include theory, small points, design judgment, implementation notes, counterexamples/risks, case analysis, and source links.

Asset Library Boundary

  • The knowledge base does not store asset files directly. Open fonts, icons, patterns, illustrations, Lottie assets, UI kits, and color tools enter designResourceCatalog for the asset page and future RAG retrieval.
  • Each asset entry records name, category, license, commercial-use judgment, source link, repository/license link, install method, use cases, risk notes, and RAG keywords.
  • Texture, noise, and material resources currently enter the Pattern category and are separated through usage, license, installHint, and RAG keywords; records must include export format, modification rights, redistribution, attribution, compression/crop history, and commercial terms.
  • Aggregators require per-resource license checks: Iconify by icon set, Google Fonts by font family, and LottieFiles by individual animation file.
  • Font delivery records must include source, font-level license, weights/styles/subsets, loading method, self-hosting/CDN judgment, fallback stack, and performance budget; Fontsource, Bunny Fonts, Google Fonts, and similar platforms do not replace specific font licensing.
  • Icon resources must distinguish primary UI icon sets, aggregated SVGs, brand logos, and icon-only controls; Simple Icons, SVG Repo, Iconify, and similar sources require per-resource license, trademark/brand-guideline, and accessible-name checks.
  • Component and code resources are governed as assets too: record source, license, copy method, primitive dependency, token mapping, future upgrade policy, and API/runtime boundary. Upload resources such as react-dropzone, Uppy, FilePond, and tus-js-client must also record selection path, server-validation responsibility, privacy/data-flow notes, progress/error states, resumability, cleanup, and mobile fallback.
  • Data-visualization and map resources must distinguish chart runtime code, map tiles/geodata, styles, glyphs/sprites, and data sources; open runtimes such as MapLibre do not replace provider attribution, OSM/commercial data terms, or accessible alternative tables.
  • 3D runtime and asset-pipeline resources must distinguish renderer code, helper packages, generated components, model/texture licenses, compression tools, runtime decoders, attribution, GPU budgets, poster fallbacks, and mobile validation evidence.
  • Motion and scroll resources must record library license, whether terms are custom, runtime dependency, SSR/cleanup needs, reduced-motion path, performance properties, scroll/anchor/keyboard risks, and suitable page types; Scrollama-style step triggers must preserve static content order and cleanup observers, GSAP is governed under its custom standard license, and Lenis is recommended only when scroll storytelling or WebGL sync has clear value.
  • Interactive vector animation resources must distinguish runtime license from .riv/animation asset license; state-machine animation such as Rive needs input, state, WASM/self-hosting, CORS, low-end performance, and static fallback records.
  • Friendly assets such as illustration, emoji, and Lottie used in empty, no-results, and feedback states must record state type, primary action, license/attribution, alt/decorative decision, static fallback, and reduced-motion path; assets must not replace reason copy or the next action.
  • AI-generated assets must record provenance: tool/model, creation time, prompt summary, source references, input rights, edit history, C2PA/watermark signals, usage role, and risk flags; do not only write “AI generated.”
  • CC BY, CC BY-SA, custom-license resources, and brand logos must preserve attribution requirements; uncertain items should be marked as “check per resource.”

Reading Path

  • Start with accessibility standards: map WCAG principles for perceivable, operable, understandable, and robust interfaces to color, focus, forms, status messages, and keyboard paths.
  • Read platform guidance next: Apple HIG, Material, and Fluent help identify platform habits, touch target expectations, motion purpose, navigation structures, and system control conventions.
  • Study design systems after that: compare how GOV.UK, NHS.UK / NHS App, Carbon, Polaris, Atlassian, and Lightning explain component usage, errors, states, content style, license boundaries, and governance.
  • Then read implementation, licensing, modern color, accessibility testing, 3D, and data-visualization resources: translate Radix, React Aria, shadcn/ui, Headless UI, Spectrum CSS, Spectrum Design Data, react-dropzone, Uppy, FilePond, tus-js-client, Motion.dev, GSAP, Lenis, Scrollama, IntersectionObserver patterns, Anime.js, Rive, CSS scroll-driven animations, Leonardo, Radix Colors, Material Theme Builder, Color.js, Culori, axe-core, Storybook a11y, Pa11y, Lighthouse, Accessibility Insights, WAVE, Iconify, Google Fonts, Fontsource, Bunny Fonts, LXGW WenKai, Fraunces, Lucide, Radix Icons, Iconoir, Octicons, Simple Icons, SVG Repo, Hero Patterns, GeoPattern, CSS Pattern, css-doodle, fffuel, ambientCG, Open Doodles, Open Peeps, Humaaans, IRA Design, unDraw, Three.js, React Three Fiber, drei, gltfjsx, meshoptimizer, D3, Observable Plot, Observable Framework, Vega-Lite, ECharts, Chart.js, Recharts, visx, deck.gl, MapLibre GL JS, and similar sources into component choice, token mapping, upload-state contracts, motion triage, state-machine motion, scroll briefs, font loading, icon governance, color fallbacks, texture fallbacks, test triage, 3D asset governance, chart/map selection, data provenance, and license metadata.
  • Use community cases last: Mobbin, Pageflows, Figma Community, and Sourcy help discover real product flows, but only verifiable patterns are summarized. Screenshots, templates, and paid assets are not copied.

Curation Standard

  • The candidate must become an Agent directive, such as “after table row selection, show selected count, scope, risk, and completion feedback.”
  • It must include a positive and negative example or clear apply and avoid contexts.
  • It must affect generation output: layout, interaction, state, copy, accessibility, responsiveness, or component governance.
  • It must be findable through English and Chinese queries that include scenario terms, component terms, and user task terms.
  • Sources are archived as links and summarized as original guidance. Long quotes, screenshots, paid material, and unverifiable trends are rejected.

Reject Rules

  • Do not add pure inspiration images, trend lists, decorative visual fragments, or Dribbble-style effects without use context.
  • Do not add commercial downloads, template packs, icon packs, font packs, or resources that require paid login to verify to the knowledge base; open-source assets belong in the asset catalog with license metadata.
  • Reject texture generator outputs with unclear rights, commercial texture packs, background images used only as inspiration, resources whose exported-asset license cannot be verified, and high-frequency background textures without readability or fallback boundaries.
  • Do not add personal preference claims that cannot become executable UI constraints.
  • Do not add this Markdown resource page to Agent RAG. RAG retrieves only reviewed knowledge items and version content.

Expansion Method

  • Fill coverage across the seven themes first, then merge near-duplicates so the library does not accumulate the same rule under many names.
  • Use English kebab-case slugs, keep tags to 3 to 5 items, and include principle, design action, examples, apply and avoid contexts, Agent directive, retrieval queries, and source notes.
  • Chinese and English content must be original summarization, not copied or lightly translated external text.
  • Before publishing, run typecheck, seed generation, RAG evaluation, and manual page checks.