Interface Lab
登录
Knowledge Resource Map

资源地图

设计知识库的来源分级、主题覆盖、采集标准和扩库方法。

设计知识库资源地图

这份资源地图说明 Interface Lab 设计知识库如何采集、筛选和扩充。知识条目只保留可执行设计判断：能转化为 Agent 指令、能影响界面生成结果、有明确适用和避免场景，并能用中英文 query 检索。

来源分级

主题地图

  • Visual Foundations：视觉层级、布局密度、真实媒体、对象详情、比较布局、字体索引式品牌系统、图表可读性、dashboard 分诊、空状态构图。
  • Typography Color Accessibility：字体层级、对比度、颜色语义、OKLCH/感知色阶、forced-colors、高对比、焦点状态、非文本对比、表单标签、错误摘要、状态消息、图标可访问名称、减少重复输入。
  • Interaction Responsive Motion：键盘导航、弹窗焦点、批量操作、筛选状态、空状态恢复、移动端行动栏、骨架屏、AI 生成进度、沉浸式 3D 叙事关卡、撤销、拖拽替代路径。
  • Design Systems Page Patterns：设置页、列表详情、价格比较、搜索分面、设计系统文档、token 编辑器、概念驱动案例导航、组件治理、社区投稿和审核流。
  • Frontend Implementation：primitive 选择、copy-in 组件治理、前端 token 映射、加载/骨架/进度状态契约、状态矩阵、键盘路径、自动化可访问性测试、背景纹理 CSS/fallback、组件升级策略。
  • Resource Licensing：字体、图标、插画、图案/纹理、背景生成器、Lottie、UI kit 和组件资源的授权元数据、商用判断、归因、下载/接入方式。
  • Data Visualization：图表选择、数据关系、视觉编码、图表可访问性、Canvas/SVG 替代说明、数据源和更新时间。

案例证据层

  • 获奖站点案例用于证明理论如何落地，但不能直接成为规则。Awwwards、CSS Design Awards 等平台只作为案例信号，条目必须说明布局、配色、动效、交互或转化路径为什么有效。
  • 最新获奖案例入库时优先转成“可执行模式”：例如 Shed 证明字体/索引/菜单如何共同承担品牌导航，The Power of Storytelling 证明 3D/WebGL 叙事需要关卡、文案锚点和 fallback，The Agency of Love & Logic 证明品牌概念要映射到服务、案例、菜单和 CTA。
  • 真实产品流案例用于证明组件和流程模式。Mobbin、Pageflows 等平台应按任务、状态、控件和文案提炼，不复制品牌视觉。
  • 设计系统案例用于证明 token、组件状态和治理方式。Radix Themes、Material Design、Carbon、Polaris、NHS.UK / NHS App 等来源应转译为语义 token、状态矩阵、组件使用边界、授权边界和服务流程规则。
  • 公共服务案例用于证明可信服务不是视觉风格，而是官方身份、责任机构、法定链接、任务标题、语义表单、错误恢复、复核确认和不可冒充边界。USWDS、GOV.UK、NHS.UK 等来源应转译为官方/非官方语境判断、banner/identifier 使用边界、privacy/accessibility/FOIA 链接、表单错误摘要、字段锚点、焦点恢复和确认编号。
  • 前端实现案例用于证明组件库、现代 CSS 和 token 管线如何进入本地系统。Radix Primitives、React Aria Components、shadcn/ui、Headless UI、Spectrum CSS、Spectrum Design Data、Color.js、Culori、Material Color Utilities 等来源应转译为行为契约、token 映射、状态矩阵、fallback 和升级策略。
  • 可访问性工具案例用于证明自动化测试如何变成可复现缺陷。axe-core、Storybook a11y、Pa11y、Lighthouse、Accessibility Insights 和 WAVE 等来源应转译为工具分层、运行条件、严重度、selector、用户任务影响和人工复测步骤。
  • 数据可视化案例用于证明图表类型、视觉编码和可访问替代路径。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 等来源应转译为 chart/map brief、编码规则、库选择边界、地理数据归因、数据来源/更新时间和数据表替代。
  • 图案/纹理案例用于证明素材如何进入真实界面。Hero Patterns、GeoPattern、CSS Pattern、css-doodle、fffuel、ambientCG 等来源应转译为授权记录、seed/导出参数、token 化纹理参数、可读性测试、forced-colors/print fallback 和优化后的自托管策略。
  • 零售电商案例用于证明转化路径是连续决策系统。Baymard、NN/g、Shopify Polaris、Mobbin、Pageflows 等来源应转译为商品发现、搜索/筛选/排序、PDP 决策块、加购反馈、购物车审阅、访客结账、地址/支付恢复、订单摘要、移动 sticky 行动和不可复制品牌资产边界。
  • 食品/快商案例用于证明高表现力视觉如何仍然服务交易路径。Awwwards Food & Drink、餐厅官网和真实下单页应转译为首屏产品对象、菜单入口、价格/营养/食材证据、稳定 CTA、购物车/订单状态、动效降级和不可复制品牌资产边界。
  • 字体和图标案例用于证明素材交付与授权治理。Fontsource、Bunny Fonts、LXGW WenKai、Fraunces、Lucide、Radix Icons、Iconoir、Octicons、Simple Icons、SVG Repo 等来源应转译为字体加载矩阵、fallback、隐私边界、主图标集规则、逐资源授权、品牌商标和可访问命名。
  • 插画和空状态案例用于证明友好素材如何进入空状态、onboarding 和说明页。Carbon、Atlassian、PatternFly、Open Doodles、Open Peeps、Humaaans、IRA Design、unDraw 等来源应转译为状态类型、原因、主恢复行动、次行动、授权/署名、alt/装饰判断、前端状态条件、静态 fallback 和品牌同质化风险；素材不能替代原因说明或下一步行动。
  • 加载状态案例用于证明等待反馈必须先按任务分类再做视觉表现。NN/g、Carbon Loading、Carbon Inline Loading、Material / Android progress indicators 等来源应转译为 skeleton / inline loading / spinner / determinate progress / stage feedback 的选择边界、aria-busy、progressbar/live region、reduced-motion、stale-refresh、layout shift 和错误/成功/取消交接规则。
  • 动效实现案例用于证明动效库选择、滚动边界、交互状态机和 reduced-motion 治理。Motion.dev、GSAP、Lenis、Scrollama / IntersectionObserver、Anime.js、Rive runtimes、CSS scroll-driven animations 等来源应转译为 motion inventory、库选择矩阵、步骤触发契约、状态机输入、性能属性审计、滚动 brief、fallback 和桌面/移动验证证据。
  • 3D 实现案例用于证明 runtime 代码、helper、生成组件、压缩工具和素材授权必须分层治理。Three.js、React Three Fiber、drei、gltfjsx、KTX-Software、meshoptimizer、glTF Transform、model-viewer 等来源应转译为场景 brief、素材 provenance、性能预算、reduced-motion/静态 fallback 和视觉 QA 证据。
  • 每个案例型知识条目必须包含“理论、小知识点、设计判断、实现建议、反例/风险、案例分析、来源链接”。

素材库边界

  • 知识库不直接收录素材文件；开源字体、图标、图案、插画、Lottie、UI kit 和色彩工具进入 designResourceCatalog，供素材页和未来 RAG 检索。
  • 素材条目必须记录名称、类别、授权、商用判断、来源链接、仓库/许可证链接、安装方式、适用场景、风险提示和 RAG 关键词。
  • Texture/noise/material 资源暂归入 Pattern 类，通过 usage、license、installHint 和 RAG keywords 区分；必须记录导出格式、修改权、再分发、归因、压缩/裁切历史和商用条件。
  • 聚合平台必须按具体资源确认授权，例如 Iconify 按 icon set，Google Fonts 按字体家族，LottieFiles 按单个动画文件。
  • 字体交付必须记录来源、字体级 license、weights/styles/subsets、加载方式、自托管/CDN 判断、fallback stack 和性能预算；Fontsource、Bunny Fonts、Google Fonts 等平台不能替代具体字体授权。
  • 图标资源必须区分主 UI 图标集、聚合 SVG、品牌 logo 和 icon-only 控件；Simple Icons、SVG Repo、Iconify 等来源必须逐资源确认授权、商标/品牌指南和可访问名称。
  • 组件/代码资源也按素材治理：记录源码来源、许可证、复制方式、依赖 primitive、token 映射、后续升级策略和 API/runtime 边界。react-dropzone、Uppy、FilePond、tus-js-client 等上传资源还必须记录选择路径、服务端校验责任、隐私/数据流说明、进度/错误状态、可恢复上传、cleanup 和移动端 fallback。
  • 数据可视化和地图资源必须区分图表运行时代码、地图瓦片/地理数据、样式、glyph/sprite 和数据来源；MapLibre 等开源 runtime 不替代 provider attribution、OSM/商业数据条款或可访问替代表格。
  • 3D runtime 和资产管线资源必须区分 renderer 代码、helper 包、生成组件、模型/贴图授权、压缩工具、运行时 decoder、归因、GPU 预算、poster fallback 和移动端验证证据。
  • 动效/滚动资源必须记录库授权、是否自定义许可、运行时依赖、SSR/cleanup 要求、reduced-motion 路径、性能属性、滚动/锚点/键盘风险和适用页面类型；Scrollama 类 step trigger 必须保留静态内容顺序并清理 observer，GSAP 按自定义标准许可治理，Lenis 只在滚动叙事或 WebGL 同步确有价值时推荐。
  • 交互式矢量动画资源必须区分 runtime 授权和 .riv/动画素材授权；Rive 等状态机动画需要记录输入、状态、WASM/自托管、CORS、低端设备性能和静态 fallback。
  • 插画、emoji 和 Lottie 等友好素材进入空状态、无结果和反馈状态时，必须同时记录状态类型、主行动、授权/署名、alt/装饰判断、静态 fallback 和 reduced-motion 路径；素材不能替代原因说明或下一步行动。
  • AI 生成素材必须记录 provenance：工具/模型、生成时间、prompt 摘要、参考输入、输入权利、编辑历史、C2PA/水印信号、使用角色和风险标记；不能只写“AI generated”。
  • CC BY、CC BY-SA、自定义许可和品牌 logo 资源必须保留归因要求；不确定时标记为“按资源确认”。

推荐阅读路径

  • 先读可访问性标准：从 WCAG 的 Perceivable、Operable、Understandable、Robust 四类原则开始，再映射到颜色、焦点、表单、状态消息和键盘路径。
  • 再读平台指南：用 Apple HIG、Material 和 Fluent 理解平台习惯、触控尺寸、动效目的、导航结构和系统控件预期。
  • 然后读设计系统：比较 GOV.UK、NHS.UK / NHS App、Carbon、Polaris、Atlassian 和 Lightning 如何写组件用法、错误、状态、内容风格、授权边界和治理流程。
  • 接着读前端实现、资源授权、现代色彩、可访问性测试、3D 和数据可视化：把 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 等资源转成可执行的组件选择、token 映射、上传状态契约、动效分诊、状态机动效、滚动 brief、字体加载、图标治理、色彩 fallback、纹理 fallback、测试分诊、3D 素材治理、图表/地图选择、数据来源和授权元数据。
  • 最后看社区案例：用 Mobbin、Pageflows、Figma Community 和 Sourcy 发现真实产品流，但只提炼可验证模式，不复制截图、模板或付费素材。

采集标准

  • 必须能写成 Agent directive，例如“表格批量操作出现后显示选中数量、作用范围和风险反馈”。
  • 必须有正反例或适用/避免场景，避免只收录抽象审美判断。
  • 必须能影响生成结果，例如布局、交互、状态、文案、可访问性、响应式或组件治理。
  • 必须能被中英文 query 找到，条目应包含场景词、组件词和用户任务词。
  • 来源只做链接归档和观点归纳，不搬运长段文字、截图、付费资源或不可验证趋势。

拒收规则

  • 不收录纯灵感图、趋势列表、Dribbble 式装饰效果或没有使用场景的视觉片段。
  • 知识库不收录商业素材下载、模板包、图标包、字体包或需要付费登录才能验证的内容；开源素材只进入素材库 catalog，并保留授权元数据。
  • 拒收授权不清的纹理生成器输出、商业纹理包、只作灵感的背景图、无法确认导出资产许可的资源，以及不能提供可读性/fallback 边界的高频背景纹理。
  • 不收录只表达个人偏好、缺少可执行判断、无法转成 UI 约束的观点。
  • 不把资源页 Markdown 纳入 Agent RAG；RAG 只检索经过审核的知识条目和版本内容。

扩库方法

  • 先按七个主题补齐覆盖面，再合并相近条目，避免“同义不同名”的重复知识。
  • 每条使用英文短横线 slug，标签控制在 3 到 5 个，标题简短，正文包含原则、设计动作、正反例、适用/避免场景、Agent 指令、检索 query 和来源提示。
  • 中文和英文都必须是原创归纳，不直接翻译外部文章原文。
  • 发布前运行类型检查、知识库 seed 生成、RAG 评估和手动页面检查。