Interface Lab
登录

Interface Lab 资源库

资源库素材232 项

素材页把真实视觉材料接入项目工作流。

素材页集中管理图片、链接、文档和视觉引用，让生成链路带着真实材料和明确区域角色继续工作。

技能119
网站设计系统93
PPT 风格55
素材232
素材

素材

素材输入层：把图片、链接、文档和视觉引用变成生成时可理解的上下文。

进入素材工作台
字体打开资源

Google Fonts

作为字体首选来源，用于 UI 正文字体、品牌展示字体、等宽字体和多语言 fallback。

授权Per-family open font license商用按资源确认风险需复核归因逐项确认资源：Google Fonts 授权：Per-family open font license 商用：按资源确认 风险：需复核 归因：逐项确认 获取：从具体字体 family 页下载或通过 next/font/google 接入；入库时记录 family、license、字重、子集和 fallback。 格式：TTF, WOFF2 注意：逐个字体确认授权，不要默认所有字体都同一许可证。google-fontsGoogle FontsFontFont-specific open licenses, commonly SIL OFL or Apache 2.0打开资源字体打开资源

Fontsource

当项目需要自托管、版本锁定、离线构建或避免运行时外部字体请求时，用 Fontsource 作为 NPM 字体交付入口。

授权Per-package font license商用按资源确认风险需复核归因逐项确认资源：Fontsource 授权：Per-package font license 商用：按资源确认 风险：需复核 归因：逐项确认 获取：安装具体字体包，例如 @fontsource/inter；入库时把 package 名、版本、font license 和导入的 weight/subset 写清。 格式：WOFF2 注意：授权仍按字体包确认，不要把 Fontsource 项目授权当作字体授权。fontsourceFontsourceFontFont package licenses vary; check each package README/license打开资源字体打开资源

Bunny Fonts

当产品需要 Google Fonts 兼容接入但更强调隐私、GDPR 和零追踪时，可作为外部字体 CDN 候选。

授权Per-font open licenses; check each family page商用按资源确认资源：Bunny Fonts 授权：Per-font open licenses; check each family page 商用：按资源确认 风险：未标注 归因：未标注 获取：Use the Bunny Fonts CSS endpoint only when external CDN use is allowed; otherwise self-host selected WOFF2 files. 注意：仍需逐字体确认授权和归因要求。bunny-fontsBunny FontsFontPer-font open licenses; check each family page打开资源字体打开资源

Inter

适合 SaaS、仪表盘、AI 工具和高密度正文 UI 的现代 sans 字体。

授权SIL Open Font License 1.1商用可商用资源：Inter 授权：SIL Open Font License 1.1 商用：可商用 风险：未标注 归因：未标注 获取：Use next/font/google, @fontsource/inter, or self-hosted WOFF2 files. 注意：中文需要 Noto、系统字体或其他 CJK fallback。inter-fontInterFontSIL Open Font License 1.1打开资源字体打开资源

Noto Sans / Noto CJK

适合中英日韩多语言产品、知识库、文档和需要稳定 fallback 的 UI。

授权SIL Open Font License 1.1商用可商用资源：Noto Sans / Noto CJK 授权：SIL Open Font License 1.1 商用：可商用 风险：未标注 归因：未标注 获取：Use Google Fonts or self-host subsetted WOFF2 files for required scripts and weights. 注意：字体文件很大，必须按语言、权重和字形范围控制加载。noto-sans-cjkNoto Sans / Noto CJKFontSIL Open Font License 1.1打开资源字体打开资源

Geist

适合开发者工具、AI 产品、文档、代码相关产品和 Next.js 项目。

授权SIL Open Font License 1.1商用可商用资源：Geist 授权：SIL Open Font License 1.1 商用：可商用 风险：未标注 归因：未标注 获取：Use the geist npm package, next/font/google, or self-hosted font files. 注意：品牌联想偏 Vercel/开发者生态，消费级产品需谨慎。geist-fontGeistFontSIL Open Font License 1.1打开资源字体打开资源

Mona Sans

适合开发者工具、AI 产品、作品集、现代 SaaS、数据故事和需要 weight、width、opsz、italic 多轴控制的品牌 UI。

授权SIL Open Font License 1.1商用可商用风险低风险归因保留许可声明资源：Mona Sans 授权：SIL Open Font License 1.1 商用：可商用 风险：低风险 归因：保留许可声明 获取：从 GitHub release 或 Google Fonts 下载具体 WOFF2/TTF；记录版本、OFL、字重/宽度/opsz 轴、Reserved Font Name 边界和 CJK fallback。 格式：WOFF2, TTF, variable font, @font-face 注意：GitHub 视觉联想较强，非开发者产品要评估品牌语气。mona-sansMona SansFontSIL Open Font License 1.1打开资源字体打开资源

Hubot Sans

适合技术品牌标题、AI/机器人/自动化产品、开发者营销页、功能大标题和需要几何技术感的展示文字。

授权SIL Open Font License 1.1商用可商用风险低风险归因保留许可声明资源：Hubot Sans 授权：SIL Open Font License 1.1 商用：可商用 风险：低风险 归因：保留许可声明 获取：下载 Hubot-Sans.woff2 或静态实例，记录版本、OFL、字重/宽度轴、Reserved Font Name 和与 Mona Sans 的搭配角色。 格式：WOFF2, TTF, variable font, @font-face 注意：不适合全站长正文或高密度表格正文。hubot-sansHubot SansFontSIL Open Font License 1.1打开资源字体打开资源

Public Sans

适合公共服务、政府、合规、文档、数据门户和需要中性高可读正文的产品。

授权SIL Open Font License 1.1商用可商用资源：Public Sans 授权：SIL Open Font License 1.1 商用：可商用 风险：未标注 归因：未标注 获取：Use @fontsource/public-sans, USWDS assets, Google Fonts when available, or self-host subsetted WOFF2 files. 注意：中文仍需 Noto CJK 或系统 fallback。public-sansPublic SansFontSIL Open Font License 1.1打开资源字体打开资源

IBM Plex

适合企业 SaaS、数据产品、开发者工具和需要 Sans/Serif/Mono 同源字体家族的品牌系统。

授权SIL Open Font License 1.1商用可商用资源：IBM Plex 授权：SIL Open Font License 1.1 商用：可商用 风险：未标注 归因：未标注 获取：Use @fontsource/ibm-plex-sans, @fontsource/ibm-plex-serif, @fontsource/ibm-plex-mono, Google Fonts, or self-hosted WOFF2 files by required family and script. 注意：IBM Plex 有明确 IBM 品牌联想，非企业/技术产品要评估语气。ibm-plexIBM PlexFontSIL Open Font License 1.1打开资源字体打开资源

Atkinson Hyperlegible

适合低视力友好界面、教育产品、阅读工具、表单错误恢复和需要强字形区分的正文 UI。

授权SIL Open Font License 1.1商用可商用资源：Atkinson Hyperlegible 授权：SIL Open Font License 1.1 商用：可商用 风险：未标注 归因：未标注 获取：Use Google Fonts, @fontsource/atkinson-hyperlegible, or self-hosted WOFF2 for accessibility-focused reading surfaces. 注意：原始家族权重较少，复杂品牌层级可能需要搭配 display 字体。atkinson-hyperlegibleAtkinson HyperlegibleFontSIL Open Font License 1.1打开资源字体打开资源

Lexend

适合教育产品、阅读工具、学习平台、长文知识库和需要可调阅读体验的辅助阅读模式。

授权SIL Open Font License 1.1商用可商用风险低风险归因保留许可声明资源：Lexend 授权：SIL Open Font License 1.1 商用：可商用 风险：低风险 归因：保留许可声明 获取：从 Google Fonts、Lexend 官网或 GitHub 下载；记录具体 family/axis、OFL、RevReading Lexend 保留名称、字重和 CJK fallback。 格式：TTF, WOFF2, variable font, @font-face 注意：不要声称能治疗阅读障碍；应描述为可读性/阅读偏好候选。lexend-fontLexendFontSIL Open Font License 1.1打开资源字体打开资源

Readex Pro

适合需要 Latin + Arabic 阅读友好字体的教育、公共服务、知识库和多语言产品界面。

授权SIL Open Font License 1.1商用可商用风险低风险归因保留许可声明资源：Readex Pro 授权：SIL Open Font License 1.1 商用：可商用 风险：低风险 归因：保留许可声明 获取：从 Google Fonts 或 GitHub 下载；记录 Readex Pro 版本、Latin/Arabic 脚本覆盖、OFL、RevReading Lexend 保留名称和 fallback。 格式：TTF, WOFF2, variable font, @font-face 注意：不要把它当作完整全球脚本覆盖；中文、日文、韩文仍需独立 fallback。readex-proReadex ProFontSIL Open Font License 1.1打开资源字体打开资源

B612

适合航空/交通/工业监控、地图坐标、关键状态、仪表盘、告警日志和需要小字号强区分的任务界面。

授权SIL Open Font License 1.1商用可商用风险低风险归因保留许可声明资源：B612 授权：SIL Open Font License 1.1 商用：可商用 风险：低风险 归因：保留许可声明 获取：从 Google Fonts 或 PolarSys GitHub 下载；记录字体文件 OFL、仓库 EPL/EDL 边界、版本、Sans/Mono 角色和 Airbus/B612 命名联想。 格式：TTF, WOFF2, @font-face, Google Fonts family 注意：它的航空/仪表语气很强，不适合生活方式品牌长正文。b612-fontB612FontSIL Open Font License 1.1 for font files; repository also includes EPL 2.0 and EDL 1.0 materials打开资源字体打开资源

JetBrains Mono

适合代码编辑器、开发者工具、AI prompt/code block、终端风格控件和技术文档。

授权SIL Open Font License 1.1商用可商用资源：JetBrains Mono 授权：SIL Open Font License 1.1 商用：可商用 风险：未标注 归因：未标注 获取：Use @fontsource/jetbrains-mono, Google Fonts, or self-hosted WOFF2; disable ligatures for code education when glyph transparency matters. 注意：代码教学或安全审查场景要确认连字不会隐藏真实字符。jetbrains-monoJetBrains MonoFontSIL Open Font License 1.1打开资源字体打开资源

Commit Mono

适合代码编辑器、终端、AI prompt/code block、文档代码截图和需要中性、不抢品牌风头的编程字体。

授权SIL Open Font License 1.1 for font files商用可商用风险低风险归因保留许可声明资源：Commit Mono 授权：SIL Open Font License 1.1 for font files 商用：可商用 风险：低风险 归因：保留许可声明 获取：用官网生成默认或自定义字体包；保存自定义设置、版本、OFL 字体许可和是否启用 calt/替代字形，网站源码 MIT 不等同于字体许可。 格式：OTF, TTF, WOFF2, editor font 注意：自定义字体包要保存设置，否则后续难以复现。commit-monoCommit MonoFontFont files: SIL Open Font License 1.1; website code: MIT打开资源字体打开资源

Monaspace

适合代码编辑器、开发者文档、AI 代码环境、实验型技术品牌和需要多种等宽语气可混搭的产品。

授权SIL Open Font License 1.1商用可商用风险低风险归因保留许可声明资源：Monaspace 授权：SIL Open Font License 1.1 商用：可商用 风险：低风险 归因：保留许可声明 获取：从 GitHub release 下载具体 Monaspace 家族；记录字体家族、weight/width/slant 轴、是否启用 calt texture healing/ligatures、版本和 OFL/Reserved Font Name。 格式：OTF, TTF, WOFF2, variable font 注意：Texture Healing/ligatures 在代码教学、审计和安全场景要谨慎启用。monaspaceMonaspaceFontSIL Open Font License 1.1打开资源字体打开资源

Source Sans 3

适合文档、知识库、企业信息架构、表单和需要中性 Adobe 开源 UI 字体的页面。

授权SIL Open Font License 1.1商用可商用资源：Source Sans 3 授权：SIL Open Font License 1.1 商用：可商用 风险：未标注 归因：未标注 获取：Use Google Fonts, @fontsource/source-sans-3, or self-hosted files; pair with Source Serif or Source Code only when those roles are needed. 注意：中文必须搭配 Source Han/Noto/system fallback。source-sans-3Source Sans 3FontSIL Open Font License 1.1打开资源字体打开资源

Source Han Sans

适合中日韩多语言界面、知识库、正式文档和需要 Pan-CJK 字形一致性的产品。

授权SIL Open Font License 1.1商用可商用资源：Source Han Sans 授权：SIL Open Font License 1.1 商用：可商用 风险：未标注 归因：未标注 获取：Self-host only selected language/region builds and weights, or use system/Noto fallback when full Pan-CJK delivery would exceed budget. 注意：文件体积很大，生产环境必须控制地区、字重、子集和 preload。source-han-sansSource Han SansFontSIL Open Font License 1.1打开资源字体打开资源

LXGW WenKai

适合中文叙事页、教育产品、文化内容、轻松说明页、手写语气空状态和需要温和中文标题的界面。

授权SIL Open Font License 1.1商用可商用资源：LXGW WenKai 授权：SIL Open Font License 1.1 商用：可商用 风险：未标注 归因：未标注 获取：Use selected TTF/WOFF2 builds or a trusted webfont package; load only needed weights and pair with a neutral sans fallback for UI controls. 注意：CJK 字体体积较大，生产环境要控制文件、子集、preload 和 fallback。lxgw-wenkaiLXGW WenKaiFontSIL Open Font License 1.1打开资源字体打开资源

Fraunces

适合编辑型标题、品牌页、作品集、数据故事开场、文化/食品/生活方式页面和需要 soft-serif 记忆点的首屏。

授权SIL Open Font License 1.1商用可商用资源：Fraunces 授权：SIL Open Font License 1.1 商用：可商用 风险：未标注 归因：未标注 获取：Use Google Fonts, @fontsource-variable/fraunces, or self-hosted variable WOFF2; reserve for display titles and pair with a readable sans/CJK fallback. 注意：主要适合作标题和短文案，不应默认作为密集 UI 正文字体。fraunces-fontFrauncesFontSIL Open Font License 1.1打开资源字体打开资源

Manrope

适合现代 SaaS、AI 工具、金融科技、数据看板和需要几何但不冷硬的高密度产品界面。

授权SIL Open Font License 1.1商用可商用资源：Manrope 授权：SIL Open Font License 1.1 商用：可商用 风险：未标注 归因：未标注 获取：Use next/font/google, @fontsource/manrope, or self-hosted WOFF2 files; pair with a CJK fallback such as Noto Sans CJK for Chinese UI. 注意：中文必须搭配 CJK fallback；不要让中英字重和 x-height 差异破坏行高。manrope-fontManropeFontSIL Open Font License 1.1打开资源字体打开资源

Space Grotesk

适合科技品牌、实验型作品集、数据故事、Web3/开发者页面、海报式首屏和需要 Space Mono 影子的 display sans。

授权SIL Open Font License 1.1商用可商用资源：Space Grotesk 授权：SIL Open Font License 1.1 商用：可商用 风险：未标注 归因：未标注 获取：Use Google Fonts, @fontsource/space-grotesk, or self-hosted WOFF2; reserve for headings, numbers, short labels, and tech/editorial hero typography. 注意：大段正文或中文混排不要全站使用；更适合作为 display/heading 字体。space-groteskSpace GroteskFontSIL Open Font License 1.1打开资源图标打开资源

Lucide Icons

当项目需要默认通用 UI 图标集且技术栈是 React/Next/Vite/shadcn 时，优先考虑 Lucide；输出具体图标名、导入语句、容器尺寸、strokeWidth、aria-label/装饰判断和品牌 logo 排除说明。

授权ISC License商用可商用风险低风险归因保留许可声明资源：Lucide Icons 授权：ISC License 商用：可商用 风险：低风险 归因：保留许可声明 获取：React/Next 项目优先用 lucide-react 按图标直接导入以保持 tree-shaking；只有图标名来自 CMS/数据库时才使用 dynamic icon imports，并要校验 iconName 和 fallback。复制 SVG 或使用 @lucide/icons 生成 SVG/data URI 时，保留 ISC notice；Lucide 官方不收 brand logos，品牌标识改用 Simple Icons 或官方品牌资源。 格式：SVG, TSX, Icon data, React component 注意：icon-only button 的可访问名称通常加在 button 上，不要只给内部 SVG 命名；装饰图标保持 aria-hidden。lucide-iconsLucide IconsIconISC打开资源图标打开资源

Heroicons

适合 Tailwind/shadcn 项目中的通用产品图标，尤其是按钮、菜单和空状态。

授权MIT商用可商用资源：Heroicons 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：npm install @heroicons/react; choose outline, solid, mini, or micro by density. 注意：与 Lucide 混用时要统一 stroke、端点和尺寸。heroiconsHeroiconsIconMIT打开资源图标打开资源

Iconify Icon Sets

当项目需要 Material Symbols、logos 以外的特定图标族、emoji 或技术图标时使用。

授权Per-icon-set open license商用按资源确认风险需复核归因逐项确认资源：Iconify Icon Sets 授权：Per-icon-set open license 商用：按资源确认 风险：需复核 归因：逐项确认 获取：只把 Iconify 当发现入口；下载前必须进入具体 icon set 页记录 license、author、license URL 和是否为品牌图标。 格式：SVG, JSON, SVG, React component 注意：授权按图标集变化，不能把 Iconify 总体授权当作图标授权。iconifyIconify Icon SetsIconVaries by icon set打开资源图标打开资源

Simple Icons

适合需要真实品牌 logo、技术栈标识、支付/社交/工具品牌入口的资源库，但必须按品牌逐个治理。

授权CC0 for project data; per-brand usage guidance商用按资源确认风险高风险归因逐项确认资源：Simple Icons 授权：CC0 for project data; per-brand usage guidance 商用：按资源确认 风险：高风险 归因：逐项确认 获取：仅用于真实品牌标识引用；每个品牌都要记录 icon card license、brand guideline、使用语境和不得暗示背书。 格式：SVG, JSON, SVG path, brand metadata 注意：CC0 不自动解决品牌商标、使用指南或第三方 logo 权利。simple-iconsSimple IconsIconProject data is CC0, but check each brand icon license and trademark guidelines打开资源图标打开资源

SVG Repo

作为缺口图标、轻量插画和特定 SVG 资源的搜索入口；入库时必须落到具体文件授权。

授权Per-resource license商用按资源确认风险需复核归因逐项确认资源：SVG Repo 授权：Per-resource license 商用：按资源确认 风险：需复核 归因：逐项确认 获取：只能下载具体资源页的 SVG；记录该资源页 license、作者、归因、Logo License/商标状态和修改权限。 格式：SVG, SVG 注意：授权类型混杂，聚合站授权页不能替代具体资源页。svg-repoSVG RepoIconVaries by resource, including Creative Commons, MIT, Apache, OFL, Logo License, and others打开资源图标打开资源

Material Symbols

适合 Material 风格 Web/Android 产品、设置页、系统状态和标准控件图标。

授权Apache 2.0商用可商用资源：Material Symbols 授权：Apache 2.0 商用：可商用 风险：未标注 归因：未标注 获取：Use Google Fonts icon font, Material Symbols npm packages, or exported SVG for selected icons. 注意：视觉语气强绑定 Material；与 Lucide/Tabler 混用时要统一尺寸和 stroke。material-symbolsMaterial SymbolsIconApache 2.0打开资源图标打开资源

Radix Icons

适合 Radix/shadcn 系 UI、紧凑表单、工具栏、菜单和 15px 视觉网格的小尺寸控件图标。

授权MIT商用可商用资源：Radix Icons 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：npm install @radix-ui/react-icons; import individual 15x15 React components for compact controls. 注意：不适合直接混入 24px/2px stroke 图标体系；需要统一尺寸容器和视觉重量。radix-iconsRadix IconsIconMIT打开资源图标打开资源

Tabler Icons

适合 SaaS、后台、医疗、金融和仪表盘里需要大量一致线性符号的界面。

授权MIT商用可商用资源：Tabler Icons 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：npm install @tabler/icons-react; import per icon to keep bundles small. 注意：图标集很大，必须按需导入。tabler-iconsTabler IconsIconMIT打开资源图标打开资源

Phosphor Icons

当页面需要同一图标语义在 outline、active、filled、duotone 状态之间变化时使用；先定全局 weight 策略，再为 selected/active/empty/illustrative 状态指定少量例外。

授权MIT License商用可商用风险低风险归因保留许可声明资源：Phosphor Icons 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：React 项目优先用 @phosphor-icons/react 按图标导入；静态 HTML 可只加载需要的 webfont weight。不要一次加载全部 6 个权重，除非页面确实需要并已计入字体/CSS 预算。复制 SVG 或修改图标时保留 MIT notice。 格式：SVG, React component, webfont, CSS 注意：同页权重不要过多，默认限定 1-2 个；Fill/Duotone 应用于 active、selected 或插画，不要滥用。phosphor-iconsPhosphor IconsIconMIT打开资源图标打开资源

Iconoir

当同一个图标体系要覆盖 Web、移动端、Figma/Framer 原型和轻量 SaaS UI 时使用；先设定 24px 容器、1.5 stroke、currentColor 继承和 icon-only 可访问名称，再按平台选择包。

授权MIT License商用可商用风险低风险归因保留许可声明资源：Iconoir 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：React 优先按图标从 iconoir-react 导入；原生 Web 可复制单个 SVG 或只加载需要的 CSS/icon font。跨 React Native、Flutter、Vue、Swift、Figma/Framer 使用时记录具体包、版本、24px optical size、1.5 stroke 和 MIT notice。 格式：SVG, React component, React Native component, Vue component 注意：与 Lucide、Feather、Tabler 等 2px 图标混用时要统一 stroke、圆角、端点和容器尺寸。iconoirIconoirIconMIT打开资源图标打开资源

Bootstrap Icons

适合 Bootstrap 生态、文档站、后台工具、表单辅助图标和需要稳定 MIT SVG 图标库的项目。

授权MIT商用可商用资源：Bootstrap Icons 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：npm install bootstrap-icons, then use individual SVGs, SVG sprite, icon font, or import paths according to bundle and accessibility needs. 注意：与 Lucide/Tabler 等线性图标混用时要统一 filled/outline、尺寸和视觉重量。bootstrap-iconsBootstrap IconsIconMIT打开资源图标打开资源

MingCute Icons

适合移动端、消费级工具、内容产品和需要 24px/2px stroke、outline/fill 双风格的清爽图标系统。

授权Apache 2.0商用可商用资源：MingCute Icons 授权：Apache 2.0 商用：可商用 风险：未标注 归因：未标注 获取：Install mingcute_icon or @mingcute/react, or download selected SVG/PNG files; keep Apache 2.0 notices when redistributing bundled assets. 注意：官方说明要求不要将图标集本身拿去销售；作为素材包分发前复核条款。mingcute-iconsMingCute IconsIconApache 2.0打开资源图标打开资源

IconPark

适合需要 outline、filled、two-tone、multi-color 同源图标主题的中大型 Web/移动产品、后台和营销页。

授权Apache 2.0商用可商用资源：IconPark 授权：Apache 2.0 商用：可商用 风险：未标注 归因：未标注 获取：Install @icon-park/react, @icon-park/vue-next, or @icon-park/svg; set theme, size, strokeWidth, lineJoin, lineCap, and fill tokens instead of hard-coding colors. 注意：multi-color 图标容易和品牌插画混淆，应限制在空状态、功能入口或营销模块。iconparkIconParkIconApache 2.0打开资源图标打开资源

Font Awesome Free

适合需要成熟通用符号、社交/电商/文件/状态类图标、现成 React/Vue/JS 接入和 icon font 兼容路径的项目。

授权Font Awesome Free split license商用可商用风险中风险归因保留许可声明资源：Font Awesome Free 授权：Font Awesome Free split license 商用：可商用 风险：中风险 归因：保留许可声明 获取：只使用 Free 图标；安装具体 @fortawesome free 包或下载 Free 套件，保留 SVG/JS、字体和代码文件中的许可与归因注释。 格式：SVG, JS, WOFF2, TTF 注意：Free 与 Pro 图标必须分开治理，不能把 Pro 搜索结果当 Free 使用。font-awesome-freeFont Awesome FreeIconIcons: CC BY 4.0; Fonts: SIL OFL 1.1; Code: MIT打开资源图标打开资源

Carbon Icons

适合企业后台、IBM/Carbon 风格产品、数据平台、云控制台和需要严谨 filled/outline 系统符号的界面。

授权Apache License 2.0商用可商用风险低风险归因保留许可声明资源：Carbon Icons 授权：Apache License 2.0 商用：可商用 风险：低风险 归因：保留许可声明 获取：通过 @carbon/icons-react 按名称导入 16/20/24/32px 图标；分发源码或复制 SVG 时保留 Apache 2.0 license/notice，不暗示 IBM 背书。 格式：SVG, React component, SVG, React component 注意：Carbon/IBM 视觉联想强，非企业系统需要避免品牌误导。carbon-iconsCarbon IconsIconApache 2.0打开资源图标打开资源

Fluent UI System Icons

适合 Microsoft/Fluent 风格产品、桌面生产力工具、命令栏、导航、状态提示和需要 regular/filled 双主题的界面。

授权MIT License商用可商用风险低风险归因保留许可声明资源：Fluent UI System Icons 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：通过 @fluentui/react-icons、平台包或 plain SVG 接入；保留 MIT notice，并区分 system icons、product launch icons、file icons 的不同使用语境。 格式：SVG, React component, Flutter package, iOS 注意：Microsoft/Fluent 视觉联想强，非相关产品不能暗示背书。fluent-system-iconsFluent UI System IconsIconMIT打开资源字体打开资源

Noto Emoji

适合统一 emoji 字体渲染、跨平台 emoji fallback、教育/文档/社群界面和需要标准 Unicode emoji 支持的产品。

授权SIL Open Font License 1.1商用可商用风险中风险归因保留许可声明资源：Noto Emoji 授权：SIL Open Font License 1.1 商用：可商用 风险：中风险 归因：保留许可声明 获取：优先作为 emoji 字体接入；如提取 SVG/PNG 资源，保留 OFL license、版本和来源，不把字体或原始资源单独销售。 格式：TTF, WOFF2, SVG, PNG 注意：OFL 主要面向字体软件；提取 SVG/PNG 做素材库时仍要保留 license、版本和来源。noto-emojiNoto EmojiFontSIL Open Font License 1.1打开资源图标打开资源

Game-icons.net

适合游戏 UI、成就徽章、技能树、地图符号、桌游工具、叙事型产品和需要强语义符号的互动原型。

授权Creative Commons Attribution 3.0 Unported商用有条件商用风险中风险归因需可见署名资源：Game-icons.net 授权：Creative Commons Attribution 3.0 Unported 商用：有条件商用 风险：中风险 归因：需可见署名 获取：下载具体图标或全量包时，保留作者、图标 URL、CC BY 3.0 链接和可见署名；CC0 子集也要逐项记录。 格式：SVG, PNG, SVG, PNG 注意：CC BY 3.0 需要署名，不能当作免归因素材。game-iconsGame-icons.netIconCreative Commons 3.0 BY, with some CC0 contributors noted打开资源插画打开资源

Fluent Emoji

适合友好状态提示、教育内容、轻量插图、空状态和需要 Microsoft Fluent 3D/flat emoji 语气的页面。

授权MIT商用可商用资源：Fluent Emoji 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：Download selected SVG/PNG emoji assets, preserve MIT notice, and keep emoji use supportive rather than replacing status text. 注意：Microsoft/Fluent 视觉联想明显，非相关产品需避免品牌误导。fluent-emojiFluent EmojiIllustrationMIT打开资源Token打开资源

Open Props

适合作为颜色、阴影、缓动、尺寸、比例和媒体查询的 token 参考，不要直接替代项目设计系统。

授权MIT商用可商用资源：Open Props 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：Import from npm or CDN, then map only selected props into project semantic tokens. 注意：应映射为语义 token；不要在组件里散落原子 token。open-propsOpen PropsTokenMIT打开资源色彩工具打开资源

Radix Colors

适合 UI 主题色阶、浅色/深色模式、边框/背景/文本/交互状态颜色和需要稳定 12-step palette 的产品界面。

授权MIT商用可商用资源：Radix Colors 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：npm install @radix-ui/colors; import JS color objects or CSS variables and map them into local semantic tokens. 注意：不要把 step 名称直接暴露给业务组件；先映射为 accent-bg、accent-text、border、focus 等语义 token。radix-colorsRadix ColorsColorMIT打开资源组件打开资源

Radix Themes and Colors

适合可访问 React 组件、弹窗、菜单、tabs、颜色阶梯和语义主题系统。

授权MIT商用可商用资源：Radix Themes and Colors 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：Use Radix primitives/themes for behavior, then map accentColor, grayColor, radius, and scaling into local CSS variables. 注意：不要把主题参数当成完整品牌策略；仍需定义业务语义。radix-ui-themesRadix Themes and ColorsComponentMIT打开资源组件打开资源

Radix Primitives

适合作为弹窗、菜单、popover、tabs、accordion、radio、select 等可访问交互组件的无样式底座。

授权MIT License商用可商用风险低风险归因保留许可声明资源：Radix Primitives 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：按需安装具体 primitive 包；复制示例代码时保留 MIT 许可声明并映射到本地 token、状态和可访问文案。 格式：TS, TSX, React primitive, unstyled component behavior 注意：仍需自己实现视觉、状态、响应式和业务文案。radix-primitivesRadix PrimitivesComponentMIT打开资源组件打开资源

React Aria Components

适合作为复杂表单、日期选择、collection、overlay、国际化输入和自定义设计系统的可访问 React 行为底座。

授权Apache 2.0商用可商用资源：React Aria Components 授权：Apache 2.0 商用：可商用 风险：未标注 归因：未标注 获取：Install react-aria-components or the lower-level react-aria/react-stately packages; style with local tokens rather than Spectrum branding. 注意：Apache 授权覆盖代码，不代表可复用 Adobe Spectrum 品牌资产。react-aria-componentsReact Aria ComponentsComponentApache 2.0打开资源组件打开资源

shadcn/ui

适合 Next.js/Tailwind/Radix 项目快速引入可复制源码组件、表单、表格、弹窗和 dashboard blocks。

授权MIT License商用可商用风险低风险归因保留许可声明资源：shadcn/ui 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：用 CLI 复制源码组件后，项目自行维护升级；记录组件来源、版本/日期、第三方 blocks 边界和本地 token 改动。 格式：TSX, CSS, React component source, Tailwind classes 注意：复制后项目自己承担升级和一致性维护。shadcn-uishadcn/uiComponentMIT打开资源组件打开资源

Headless UI

适合 React/Vue 中需要无样式、可访问、Tailwind 友好的菜单、弹窗、tabs、listbox 和 transition。

授权MIT商用可商用资源：Headless UI 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：npm install @headlessui/react or @headlessui/vue; style with local Tailwind/CSS tokens. 注意：组件范围比 Radix 窄。headless-uiHeadless UIComponentMIT打开资源组件打开资源

Shiki

当 agent 需要高质量语法高亮且希望减少客户端运行时，用 Shiki；但仍必须补 CodeExampleContract 的复制按钮、aria-live 状态、tabs 语义和长行滚动。

授权MIT License商用可商用风险低风险归因保留许可声明资源：Shiki 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：通过 npm 安装 shiki 并按需加载语言和主题；保留 MIT notice。用于高亮代码时，还要单独设计复制、tabs、占位符、安全和移动端滚动契约。 格式：TS, JS, HTML, HAST 注意：语言和主题加载策略会影响 bundle/构建成本。shiki-syntax-highlighterShikiComponentMIT打开资源组件打开资源

PrismJS

当 agent 需要轻量、CSS 可控的浏览器高亮时用 Prism；同时必须处理 code.language-* 语义、复制按钮、live region、局部 overflow 和无 JS fallback。

授权MIT License商用可商用风险低风险归因保留许可声明资源：PrismJS 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：通过 npm 或 CDN 按需引入 Prism core、语言和插件；保留 MIT notice。生产页面要限制语言/插件体积并补复制、tabs、fallback 和对比度验证。 格式：JS, CSS, client-side highlighted HTML, CSS token classes 注意：客户端高亮会增加运行时和 hydration/加载时序风险。prismjsPrismJSComponentMIT打开资源组件打开资源

Sandpack

当 agent 需要 live playground 而不是静态代码块时才检索 Sandpack；必须补加载/错误/重置、静态代码 fallback、键盘路径、移动端布局、iframe/CSP 和依赖治理。

授权Apache License 2.0商用可商用风险中风险归因保留许可声明资源：Sandpack 授权：Apache License 2.0 商用：可商用 风险：中风险 归因：保留许可声明 获取：通过 @codesandbox/sandpack-react 或 client 包安装；保留 Apache-2.0 notice。只在用户确实需要运行/编辑示例时使用，并记录 iframe/CSP、依赖、fallback 和性能边界。 格式：TSX, JS, CSS, virtual files 注意：比静态代码块重，可能影响首屏和移动端性能。sandpackSandpackComponentApache-2.0打开资源组件打开资源

Swagger UI

当 agent 需要标准 OpenAPI 交互式 reference 或快速验证 spec 可读性时检索 Swagger UI；必须同时套用 api-reference-endpoint-contract 的 try-it 安全、状态码矩阵、代码复制和移动端 QA。

授权Apache License 2.0商用可商用风险中风险归因保留许可声明资源：Swagger UI 授权：Apache License 2.0 商用：可商用 风险：中风险 归因：保留许可声明 获取：通过 swagger-ui、swagger-ui-react 或 swagger-ui-dist 接入，并保留 Apache-2.0 license/NOTICE。用于生产 API docs 时必须审计 try-it 环境、鉴权注入、CORS/proxy、写操作确认和主题可访问性。 格式：OpenAPI, YAML, JSON, JS 注意：Apache-2.0 NOTICE 需要保留。swagger-uiSwagger UIComponentApache-2.0打开资源组件打开资源

Redoc

当 agent 需要静态、可扫视、三栏 API reference 而非完整 API client 时检索 Redoc；仍要补状态码矩阵、x-codeSamples、移动端折叠和代码复制契约。

授权MIT License商用可商用风险低风险归因保留许可声明资源：Redoc 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：通过 redoc CLI、HTML script tag 或 React component 渲染 OpenAPI/Swagger 文档；保留 MIT notice。Redoc CE 默认不是 try-it 控制台，交互调用需求要另配 playground 或 Redocly API Reference。 格式：OpenAPI, YAML, JSON, HTML 注意：Community Edition 与 Redocly hosted/API Reference 功能不同，默认没有 Try-it console。redocRedocComponentMIT打开资源组件打开资源

Scalar API Reference

当 agent 需要比传统静态 reference 更接近 API client 的文档体验时检索 Scalar；必须补 ApiEndpointContract、try-it 安全、auth placeholder、移动端 schema 和版本兼容审计。

授权MIT License商用可商用风险中风险归因保留许可声明资源：Scalar API Reference 授权：MIT License 商用：可商用 风险：中风险 归因：保留许可声明 获取：通过 @scalar/api-reference 或对应框架包接入现代 API reference；保留 MIT notice。接入前确认框架版本、OpenAPI 兼容、client/try-it 安全、主题 token 和 hosted/pro 功能边界。 格式：OpenAPI, YAML, JSON, HTML 注意：项目迭代活跃，生产前要锁版本并回归 API 变化。scalar-api-referenceScalar API ReferenceComponentMIT打开资源组件打开资源

AI Elements

当 agent 要实现 AI/RAG 答案的 Sources、Inline Citation、Reasoning 或 Message parts 时检索 AI Elements；必须补 ai-response-citation-contract 的数据契约、streaming source 状态、权限过滤和移动端 QA。

授权Apache License 2.0商用可商用风险中风险归因保留许可声明资源：AI Elements 授权：Apache License 2.0 商用：可商用 风险：中风险 归因：保留许可声明 获取：通过 `npx ai-elements@latest add <component>` 或 shadcn registry 复制源码组件；保留 Apache-2.0 notice。接入后组件属于本地代码，需要本地 token、状态、权限、citation 数据契约和升级 diff 管理。 格式：TSX, React, Tailwind, shadcn registry 注意：需要 AI SDK、Next.js/shadcn/Tailwind 前置条件，非该栈要评估迁移成本。vercel-ai-elementsAI ElementsComponentApache-2.0打开资源组件打开资源

assistant-ui

当 agent 需要完整聊天 runtime、线程状态、AI SDK/LangGraph/custom backend 集成时检索 assistant-ui；引用/source card 仍应按 ai-response-citation-contract 明确数据模型和权限边界。

授权MIT License商用可商用风险中风险归因保留许可声明资源：assistant-ui 授权：MIT License 商用：可商用 风险：中风险 归因：保留许可声明 获取：通过 `npx assistant-ui@latest init` 或安装 @assistant-ui/react、@assistant-ui/react-ai-sdk 接入；保留 MIT notice。Cloud/thread persistence/analytics 属于可选托管能力，需与开源组件分开记录。 格式：TSX, React, runtime provider, AI chat interface 注意：Cloud/托管持久化与开源库边界要分清。assistant-uiComponentMITMIT License打开资源组件打开资源

tool-ui

当 agent 的 tool result 需要展示可点击 reference card、domain、favicon、snippet 或 source attribution 时检索 tool-ui Citation；同时按 ai-response-citation-contract 处理 claim 映射、权限和 copy/export。

授权MIT License商用可商用风险中风险归因保留许可声明资源：tool-ui 授权：MIT License 商用：可商用 风险：中风险 归因：保留许可声明 获取：通过 shadcn registry 或 tool-agent 复制具体组件，例如 `npx shadcn@latest add @tool-ui/citation`；保留 MIT notice。复制后要记录 Zod schema、tool payload、receipt/interaction 和本地 token 改动。 格式：TSX, Zod schema, shadcn registry, citation card 注意：组件是 tool payload 呈现层，不会自动保证来源真实性。assistant-ui-tool-uitool-uiComponentMIT打开资源Token打开资源

Apple HIG Materials and Liquid Glass

当 agent 需要设计 Liquid Glass-inspired、frosted nav、沉浸式 toolbar 或 Apple-like 半透明材质时检索该资源；必须搭配 translucent-material-readability，禁止复制 Apple 专有资产或把其效果泛化到所有卡片。

授权Apple Developer Agreement商用有条件商用风险高风险归因逐项确认资源：Apple HIG Materials and Liquid Glass 授权：Apple Developer Agreement 商用：有条件商用 风险：高风险 归因：逐项确认 获取：将 Apple HIG Materials、Liquid Glass 和 Design Resources 作为官方平台指导与灵感来源；不要把 Apple UI kits、模板、产品 bezels、图标或品牌资产当作开源素材复制。下载或使用 Apple Design Resources 前需接受并遵守对应许可。 格式：HIG guidance, Figma/Sketch UI kits under Apple terms, platform design resources, material guidance 注意：Apple 资源和品牌资产不是开源素材；UI kits、模板、bezels、图标、SF Symbols 和商标使用需单独遵守 Apple 条款。apple-hig-liquid-glassApple HIG Materials and Liquid GlassTokenApple Developer Agreement / Apple Design Resources terms; guidance and assets are not open-source打开资源可访问性打开资源

MDN backdrop-filter reference

当 agent 写 `backdrop-filter`、blurred glass 或透明 overlay CSS 时检索 MDN；必须同时调用 translucent-material-readability 的 reduced transparency、forced-colors、contrast 和 performance QA。

授权CC-BY-SA-2.5+ documentation / CC0 or MIT code samples商用有条件商用风险中风险归因需可见署名资源：MDN backdrop-filter reference 授权：CC-BY-SA-2.5+ documentation / CC0 or MIT code samples 商用：有条件商用 风险：中风险 归因：需可见署名 获取：用作 CSS `backdrop-filter` 实现参考；若复用 MDN 文档文字需按 CC-BY-SA 署名并遵守 share-alike，若复用代码样例需按 MDN 对样例的 CC0/MIT 说明处理。项目实现建议自己写 CSS，不复制长段文档。 格式：HTML documentation, CSS reference, compatibility data, CSS implementation notes 注意：MDN 文档许可不是 MIT；复制文档文字需要署名和 share-alike。mdn-backdrop-filterMDN backdrop-filter referenceAccessibilityDocumentation CC-BY-SA 2.5 or later; code samples CC0 or MIT depending revision打开资源组件打开资源

Material Web

适合需要 Material 3 Web Components、跨框架 custom elements、表单控件、导航、选择器和标准 Google/Android 语气的产品。

授权Apache-2.0商用可商用资源：Material Web 授权：Apache-2.0 商用：可商用 风险：未标注 归因：未标注 获取：npm install @material/web; import only needed components for production, or @material/web/all.js for prototypes, then map Material 3 theme tokens. 注意：官方仓库提示 MWC 处于维护模式等待新维护者，生产前要确认维护风险。material-webMaterial WebComponentApache-2.0打开资源组件打开资源

Fluent UI React

适合 Microsoft 生态、企业生产力、管理后台、Office/Teams 语气或需要成熟 React 组件的产品。

授权MIT for code; referenced fonts/icons use separate Microsoft assets license商用有条件商用资源：Fluent UI React 授权：MIT for code; referenced fonts/icons use separate Microsoft assets license 商用：有条件商用 风险：未标注 归因：未标注 获取：npm install @fluentui/react-components; import v9 components directly and configure FluentProvider with local theme tokens. 注意：代码 MIT，但字体和图标资产另有 Microsoft assets license，不能把品牌资产当普通 MIT 资源。fluent-ui-reactFluent UI ReactComponentMIT for code; referenced fonts/icons use separate Microsoft assets license打开资源组件打开资源

Carbon Design System

适合企业 SaaS、数据密集后台、AI/IBM 风格产品、表格/表单/流程复杂的管理界面。

授权Apache-2.0商用可商用资源：Carbon Design System 授权：Apache-2.0 商用：可商用 风险：未标注 归因：未标注 获取：Use @carbon/react or @carbon/web-components with @carbon/styles and Carbon element tokens; choose React or Web Components by stack. 注意：IBM 视觉语气强，非 IBM 产品应抽象原则而不是复制品牌表达。carbon-design-systemCarbon Design SystemComponentApache-2.0打开资源组件打开资源

Spectrum Web Components

适合创意工具、编辑器、媒体管理、设计/内容生产产品，以及需要 Adobe Spectrum 语气的跨框架 Web Components。

授权Apache-2.0商用可商用资源：Spectrum Web Components 授权：Apache-2.0 商用：可商用 风险：未标注 归因：未标注 获取：Install selected @spectrum-web-components packages plus @spectrum-web-components/theme; avoid the full bundle in production. 注意：文档明确 full bundle 包含全部元素，生产不建议使用；应按组件导入。spectrum-web-componentsSpectrum Web ComponentsComponentApache-2.0打开资源可访问性打开资源

WAI-ARIA Authoring Practices Guide

当 agent 不能直接使用 Radix/React Aria 等 primitive，或要审计自写组件时，用 APG 提取 roles/states/properties、keyboard table、focus movement、aria-activedescendant/roving tabindex 和测试断言。

授权W3C Software and Document License商用可商用风险低风险归因保留许可声明资源：WAI-ARIA Authoring Practices Guide 授权：W3C Software and Document License 商用：可商用 风险：低风险 归因：保留许可声明 获取：作为权威模式参考使用；复制示例代码或文档片段时保留 W3C 许可通知、来源 URI 和修改说明，不把 W3C/WAI 名称用作产品背书。 格式：HTML, CSS, JavaScript, Markdown 注意：APG 是模式指南，不是完整设计系统或现成 React 组件。wai-aria-apgWAI-ARIA Authoring Practices GuideAccessibilityW3C Software and Document License 2023打开资源可访问性打开资源

axe-core

作为 Web UI 自动化可访问性规则引擎，用于组件、页面和 CI 的 WCAG 问题初筛。

授权MPL 2.0商用可商用资源：axe-core 授权：MPL 2.0 商用：可商用 风险：未标注 归因：未标注 获取：npm install axe-core; integrate with Playwright, Jest, Cypress, or Storybook and keep manual review for incomplete results. 注意：自动化结果不能证明页面完全可访问，仍需键盘、读屏和任务流人工检查。axe-coreAccessibilityMPL 2.0a11y testing打开资源可访问性打开资源

Pa11y

适合对公开 URL、本地预览页和关键页面做命令行可访问性 smoke test。

授权LGPL-3.0-only商用有条件商用资源：Pa11y 授权：LGPL-3.0-only 商用：有条件商用 风险：未标注 归因：未标注 获取：npm install -D pa11y; run pa11y against local URLs in CI, noting that Pa11y 9 requires Node 20, 22, or 24. 注意：LGPL 授权和运行时分发需按项目法务/合规确认。pa11yPa11yAccessibilityLGPL-3.0-only打开资源可访问性打开资源

Lighthouse Accessibility

用于页面级可访问性、性能、最佳实践和 SEO 组合审计，帮助 agent 发现发布前明显问题。

授权Apache 2.0商用可商用资源：Lighthouse Accessibility 授权：Apache 2.0 商用：可商用 风险：未标注 归因：未标注 获取：npm install -D lighthouse; run with --only-categories=accessibility or through Lighthouse CI for page-level audits. 注意：分数不是完整质量证明，不能覆盖所有 WCAG 要求或真实辅助技术体验。lighthouse-accessibilityLighthouse AccessibilityAccessibilityApache 2.0打开资源可访问性打开资源

Accessibility Insights for Web

当 agent 已经有可运行页面，需要人工辅助确认键盘路径、焦点顺序、可访问名称、结构与 WCAG 2.2 AA assessment 时，优先用 Accessibility Insights 生成 FastPass/Assessment 证据，并把发现转成 triage record。

授权MIT License商用可商用风险低风险归因保留许可声明资源：Accessibility Insights for Web 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：通过 Chrome Web Store 或 Microsoft Edge Add-ons 安装扩展；如果复制或修改仓库代码，保留 MIT copyright/license notice，并遵守 Microsoft 商标边界。审计记录需保存 URL、viewport、页面状态、工具版本和报告链接。 格式：Chrome extension, Edge add-on, TypeScript source, FastPass report 注意：浏览器插件结果需要记录页面、视口、状态、版本、登录/数据条件和报告链接。accessibility-insights-webAccessibility Insights for WebAccessibilityMIT打开资源可访问性打开资源

Storybook Accessibility Addon

适合在组件开发阶段把 axe-core 检查接入 Storybook，尽早发现缺 label、低对比、错误 ARIA 等问题。

授权MIT addon; axe-core dependency is MPL 2.0商用有条件商用资源：Storybook Accessibility Addon 授权：MIT addon; axe-core dependency is MPL 2.0 商用：有条件商用 风险：未标注 归因：未标注 获取：npx storybook add @storybook/addon-a11y; review violations in component stories and keep manual checks for keyboard and screen-reader behavior. 注意：插件授权和 axe-core 依赖授权都要记录。storybook-addon-a11yStorybook Accessibility AddonAccessibilityMIT addon; axe-core dependency is MPL 2.0打开资源可访问性打开资源

WAVE by WebAIM

适合对真实页面进行人工辅助审计，快速看错误、警告、结构、对比和 ARIA 信号。

授权Free web and extension use; API and report redistribution require WebAIM terms review商用有条件商用资源：WAVE by WebAIM 授权：Free web and extension use; API and report redistribution require WebAIM terms review 商用：有条件商用 风险：未标注 归因：未标注 获取：Use the WAVE web service or browser extension for human-assisted page evaluation; check terms before API use or report redistribution. 注意：WAVE 强调辅助人工评估，不是自动通过/失败裁判。wave-webaimWAVE by WebAIMAccessibilityFree web and extension use; API and report redistribution require WebAIM terms review打开资源Token打开资源

Leonardo

适合生成基于目标对比度的可访问色阶、暗色模式、主题色和数据/状态色 token。

授权Apache 2.0商用可商用资源：Leonardo 授权：Apache 2.0 商用：可商用 风险：未标注 归因：未标注 获取：Use the web app for palette exploration or @adobe/leonardo-contrast-colors for code-generated contrast palettes. 注意：生成色阶后仍需人工命名语义 token。leonardo-colorLeonardoTokenApache 2.0打开资源色彩工具打开资源

Color.js

适合需要 CSS Color 4/OKLCH/P3 转换、gamut mapping、色差计算和设计 token 构建脚本的前端项目。

授权MIT商用可商用资源：Color.js 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：npm install colorjs.io; use for color conversion, gamut mapping, DeltaE, OKLCH/P3 workflows, and token build steps. 注意：色彩科学能力强但学习成本高，agent 应限制任务范围。colorjsColor.jsColorMIT打开资源色彩工具打开资源

Culori

适合程序化生成色阶、插值、色差、调色工具、图表色板和需要较轻量函数式 API 的主题构建脚本。

授权MIT商用可商用资源：Culori 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：npm install culori; use parse, converter, interpolate, formatCss, difference*, and clamp/gamut utilities in token tooling. 注意：库负责颜色计算，不负责语义 token、可访问文案或组件状态。culoriCuloriColorMIT打开资源色彩工具打开资源

Material Theme Builder

适合研究 Material 3 dynamic color、品牌色 harmonization、浅/深色角色、surface token 和 designer-to-developer 主题交付。

授权Apache 2.0商用可商用资源：Material Theme Builder 授权：Apache 2.0 商用：可商用 风险：未标注 归因：未标注 获取：Use the web/Figma builder to explore dynamic color and export theme code, then map Material roles into local product tokens. 注意：Material 角色不应原样套到非 Material 产品；需要翻译成项目语义 token。material-theme-builderMaterial Theme BuilderColorApache 2.0打开资源色彩工具打开资源

Material Color Utilities

适合在代码中生成 Material You/HCT tonal palettes、动态主题、对比度调整、图片取色和跨平台主题一致性。

授权Apache 2.0商用可商用资源：Material Color Utilities 授权：Apache 2.0 商用：可商用 风险：未标注 归因：未标注 获取：Use the TypeScript package or platform-specific libraries when you need Material HCT palettes and dynamic color schemes in code. 注意：HCT/Material 主题逻辑适合 Material 语境，其他设计系统要抽象使用。material-color-utilitiesMaterial Color UtilitiesColorApache 2.0打开资源组件打开资源

GOV.UK Frontend

适合公共服务、申请流程、资格检查、错误恢复、任务列表、check answers 和高信任表单。

授权MIT for code; documentation/content under Open Government Licence unless otherwise stated商用有条件商用资源：GOV.UK Frontend 授权：MIT for code; documentation/content under Open Government Licence unless otherwise stated 商用：有条件商用 风险：未标注 归因：未标注 获取：npm install govuk-frontend; import Sass/CSS and JavaScript enhancements, then adapt only when your service can preserve accessibility behavior. 注意：不要复制 GOV.UK 品牌或政府标识。govuk-frontendGOV.UK FrontendComponentMIT for code; documentation/content under Open Government Licence unless otherwise stated打开资源组件打开资源

NHS.UK Frontend

当 agent 需要设计医疗健康/公共事务表单错误恢复时，优先参考 NHS 的标题 Error 前缀、顶部错误摘要、字段旁错误、焦点移动、同文案复用和不清空字段规则；不要复制 NHS 品牌。

授权MIT + Open Government Licence 3.0 documentation商用有条件商用风险中风险归因保留许可声明资源：NHS.UK Frontend 授权：MIT + Open Government Licence 3.0 documentation 商用：有条件商用 风险：中风险 归因：保留许可声明 获取：通过 npm 安装或从官方仓库复制必要 Sass/CSS/JS；入库时记录代码 MIT、文档 OGL 3.0、NHS 品牌/标识不可复制和改造后的 WCAG 复核。 格式：SCSS, CSS, JavaScript, Nunjucks 注意：NHS 视觉、名称、标识和服务语境有强品牌/商标边界，非 NHS 产品只能抽象模式。nhsuk-frontendNHS.UK FrontendComponentMIT for code and sample code unless stated otherwise; documentation under Open Government Licence 3.0打开资源组件打开资源

U.S. Web Design System

适合美国公共服务、联邦风格信息站、表单、导航、公告、身份和数据门户界面参考。

授权Mostly public domain/CC0 with listed Apache 2.0, SIL OFL, MIT, and trademark exceptions商用有条件商用资源：U.S. Web Design System 授权：Mostly public domain/CC0 with listed Apache 2.0, SIL OFL, MIT, and trademark exceptions 商用：有条件商用 风险：未标注 归因：未标注 获取：npm install @uswds/uswds; configure Sass theme settings and import only needed assets and components. 注意：项目包含多种许可证和商标例外，不能只按 CC0 处理。uswdsU.S. Web Design SystemComponentMostly public domain/CC0 with listed Apache 2.0, SIL OFL, MIT, and trademark exceptions打开资源数据可视化打开资源

D3

适合高度定制的 SVG/Canvas/HTML 数据可视化、编辑型图形、复杂交互和没有现成图表组件能表达的关系。

授权ISC商用可商用资源：D3 授权：ISC 商用：可商用 风险：未标注 归因：未标注 获取：npm install d3; import only needed modules such as d3-scale, d3-shape, d3-array, d3-axis, or d3-selection. 注意：不是开箱即用图表库，agent 必须自己负责可访问性、响应式、数据清洗和图例。d3D3Data VisualizationISC打开资源数据可视化打开资源

Observable Plot

适合快速探索表格数据、仪表盘中的轻量图表、分层 mark 组合和需要比 Chart.js 更表达式化但比 D3 更快落地的场景。

授权ISC商用可商用资源：Observable Plot 授权：ISC 商用：可商用 风险：未标注 归因：未标注 获取：npm install @observablehq/plot; render Plot.plot(...) into a container and pair charts with summaries/tables. 注意：复杂产品级交互和高度定制布局仍可能需要 D3 或 ECharts。observable-plotObservable PlotData VisualizationISC打开资源数据可视化打开资源

Vega-Lite

适合声明式、可版本化、可由 agent 输出 JSON spec 的图表，尤其是分析报告、可重复图形和低代码图表生成。

授权BSD 3-Clause商用可商用资源：Vega-Lite 授权：BSD 3-Clause 商用：可商用 风险：未标注 归因：未标注 获取：Use vega-lite specifications with vega-embed, or generate JSON specs that can be audited and versioned. 注意：运行时和 embed 依赖要明确。vega-liteVega-LiteData VisualizationBSD 3-Clause打开资源数据可视化打开资源

Apache ECharts

适合交互式 dashboard、大数据量图表、地图、金融/运维监控、多图联动和需要丰富内置图表类型的产品界面。

授权Apache 2.0商用可商用资源：Apache ECharts 授权：Apache 2.0 商用：可商用 风险：未标注 归因：未标注 获取：npm install echarts; prefer tree-shaken imports and choose SVG or Canvas renderer based on data size and accessibility plan. 注意：配置复杂，agent 要限制 option 面积。apache-echartsApache EChartsData VisualizationApache 2.0打开资源数据可视化打开资源

Chart.js

适合常规产品图表、简单 dashboard、小型趋势/柱状/饼图和需要快速接入 Canvas 图表的场景。

授权MIT商用可商用资源：Chart.js 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：npm install chart.js; register only required controllers/elements/scales and provide accessible canvas labelling/fallback content. 注意：Canvas 内容默认不能被屏幕阅读器理解，必须添加 aria、fallback 文本或邻近数据表。chartjsChart.jsData VisualizationMIT打开资源数据可视化打开资源

Recharts

适合 React 产品页、SaaS dashboard、趋势卡片、业务指标、简单组合图和需要组件化 SVG 图表的场景。

授权MIT商用可商用资源：Recharts 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：npm install recharts; compose SVG chart components in React and pair every chart with a takeaway title, source, and data-table fallback. 注意：仍需自己处理图表选择、响应式、键盘 tooltip、替代数据表和可访问摘要。rechartsRechartsData VisualizationMIT打开资源数据可视化打开资源

MapLibre GL JS

适合矢量瓦片地图、物流/城市/环境/运营地理界面、可缩放地图视图和需要脱离 Mapbox 专有运行时的产品。

授权BSD 3-Clause商用可商用资源：MapLibre GL JS 授权：BSD 3-Clause 商用：可商用 风险：未标注 归因：未标注 获取：npm install maplibre-gl; pair the runtime with separately licensed tiles, styles, glyphs, sprites, and geodata attribution. 注意：代码授权不覆盖地图瓦片、样式、glyph、sprite、地理数据或 provider attribution。maplibre-gl-jsMapLibre GL JSData VisualizationBSD 3-Clause打开资源数据可视化打开资源

FT Visual Vocabulary

适合在设计评审和 agent 推理中先判断图表意图：比较、变化、分布、关系、组成、地理、流向或排序。

授权Check repository/content license before redistribution商用有条件商用资源：FT Visual Vocabulary 授权：Check repository/content license before redistribution 商用：有条件商用 风险：未标注 归因：未标注 获取：Use as a chart-selection reference; do not redistribute posters or FT-branded assets without checking rights. 注意：它是选择参考，不是可直接复制的品牌视觉系统。ft-visual-vocabularyFT Visual VocabularyData VisualizationCheck repository/content license before redistribution打开资源图案打开资源

Pattern Monster

适合低对比背景纹理、包装感区块、空状态和品牌插图底纹。

授权MIT License商用可商用风险低风险归因保留许可声明资源：Pattern Monster 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：从具体 pattern 页导出 SVG/CSS/PNG；记录 pattern 名称、foreground/background 色、stroke/angle 设置、来源 URL 和 MIT notice。 格式：SVG, PNG, CSS, inline SVG 注意：纹理必须低对比，不可影响正文可读性。pattern-monsterPattern MonsterPatternMIT打开资源图案打开资源

PatternFills

适合 D3/图表纹理填充、色盲友好区分、低带宽背景纹理和黑白打印替代编码。

授权MIT License商用可商用风险低风险归因保留许可声明资源：PatternFills 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：复制具体 SVG pattern defs 或 CSS background 前记录 pattern 名称、来源、MIT notice 和用于图表/打印的非颜色编码说明。 格式：SVG, CSS, SVG pattern defs, CSS background-image 注意：默认视觉偏基础，需要按产品风格降低对比或重绘。patternfillsPatternFillsPatternMIT打开资源图案打开资源

GeoPattern

适合确定性封面图、项目占位图、资源卡背景、头像背板、轻量几何纹理和需要从文本 seed 复现的视觉资产。

授权MIT License商用可商用风险低风险归因保留许可声明资源：GeoPattern 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：用 seed 生成静态 SVG/data URL 后自托管；记录 seed、base color、pattern 类型、opacity、生成库/版本和 MIT notice。 格式：SVG, SVG, data URL, CSS background-image 注意：项目较老，生产建议生成静态 SVG 后自托管，不依赖运行时库。geopatternGeoPatternPatternMIT打开资源图案打开资源

Hero Patterns

适合营销页、品牌区块、空状态背板和需要可调颜色/透明度的 repeatable SVG 背景图案。

授权Creative Commons Attribution 4.0 International商用有条件商用风险中风险归因需可见署名资源：Hero Patterns 授权：Creative Commons Attribution 4.0 International 商用：有条件商用 风险：中风险 归因：需可见署名 获取：复制 CSS/SVG 前记录 pattern 名称、作者、来源 URL、CC BY 4.0 链接、颜色/透明度改动和署名位置。 格式：SVG, CSS, inline SVG, background-image CSS 注意：必须保留署名和许可证链接。hero-patternsHero PatternsPatternCC BY 4.0打开资源图案打开资源

CSS Pattern

适合纯 CSS 背景、网格纹理、轻量几何底纹和无需图片请求的实验性 UI 表面。

授权MIT License商用可商用风险低风险归因保留许可声明资源：CSS Pattern 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：复制具体 CSS gradient pattern；把颜色、尺寸、透明度改成本地语义变量，并保留 Temani Afif / MIT notice。 格式：CSS, CSS background-image, CSS custom properties 注意：复杂 gradient 可能降低 CSS 可读性，应抽成 token 或 utility。css-patternCSS PatternPatternMIT打开资源图案打开资源

pattern.css

适合后台、文档、空状态和图表辅助编码中需要 checks、dots、grid、stripes、zigzag 等可复用 CSS 图案类。

授权MIT License商用可商用风险低风险归因保留许可声明资源：pattern.css 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：优先安装 npm 包或复制必要 SCSS/CSS 类；记录具体类名、颜色变量、版本、MIT notice，并避免全量引入未用图案。 格式：CSS, SCSS, CSS utility classes, background pattern classes 注意：默认类名可能与项目命名风格不一致，建议包进本地 utility。pattern-csspattern.cssPatternMIT打开资源图案打开资源

fffuel SVG Generators

适合生成品牌背景、噪声纹理、等距图案、线条、波形、粒状渐变和轻量装饰 SVG。

授权fffuel custom image license商用有条件商用风险中风险归因建议署名资源：fffuel SVG Generators 授权：fffuel custom image license 商用：有条件商用 风险：中风险 归因：建议署名 获取：生成并下载具体 SVG/PNG 后自托管；记录生成器名称、参数、颜色、导出格式和 fffuel custom license。不要把生成图片作为素材包转售、共享或再分发。 格式：SVG, PNG, SVG, PNG 注意：自定义许可禁止转授权、转售、共享或再分发素材本身。fffuel-svg-generatorsfffuel SVG GeneratorsPatternFree custom image license for generated/downloaded images; no sublicensing or redistribution打开资源图案打开资源

SVGBackgrounds.com

适合需要可复制 SVG/CSS 背景、图案、doodle、triangle 和轻量动画图形的营销页、作品页和内容区块。

授权SVGBackgrounds.com License Agreement商用有条件商用风险中风险归因逐项确认资源：SVGBackgrounds.com 授权：SVGBackgrounds.com License Agreement 商用：有条件商用 风险：中风险 归因：逐项确认 获取：复制或下载具体 SVG/CSS graphic 前，记录 graphic 名称、free/pro 状态、license URL、署名要求、订阅状态、使用项目和是否允许继续用于新项目。 格式：SVG, CSS, inline SVG, CSS background 注意：许可禁止把 graphic 单独、原样使用为主要完整设计元素。svgbackgrounds-comSVGBackgrounds.comPatternSVGBackgrounds.com License Agreement; commercial project use with attribution/subscription and redistribution restrictions打开资源运动打开资源

Vanta.js

适合短时品牌页、作品集 hero、活动页和需要可调参数的 WebGL/p5.js 动态背景。

授权MIT License商用可商用风险中风险归因保留许可声明资源：Vanta.js 授权：MIT License 商用：可商用 风险：中风险 归因：保留许可声明 获取：按具体 effect 安装/引入 Vanta 与 three.js 或 p5.js；记录 effect、参数、运行时依赖、reduced-motion 静态替代、destroy cleanup 和 MIT notice。 格式：JavaScript, Canvas, WebGL, runtime canvas background 注意：动效背景必须提供 `prefers-reduced-motion` 静态替代，并验证文字安全区。vanta-jsVanta.jsMotionMIT打开资源运动打开资源

tsParticles

适合粒子、confetti、fireworks、ribbons、轻量交互背景和需要跨 React/Vue/Svelte/Solid/Web Components 的动效背景。

授权MIT License商用可商用风险中风险归因保留许可声明资源：tsParticles 授权：MIT License 商用：可商用 风险：中风险 归因：保留许可声明 获取：按框架安装 slim/basic/React/Vue 等包；记录 preset/config、粒子数量、交互触发、暂停控制、reduced-motion 策略、依赖版本和 MIT notice。 格式：JavaScript, TypeScript, Canvas, runtime canvas particles 注意：粒子背景容易变成注意力噪声，后台、长文档和表单默认不应使用。tsparticlestsParticlesMotionMIT打开资源图案打开资源

css-doodle

适合生成式 CSS 图案、动态背景、创意 loading、品牌实验页和需要参数化网格纹理的视觉原型。

授权MIT License商用可商用风险中风险归因保留许可声明资源：css-doodle 授权：MIT License 商用：可商用 风险：中风险 归因：保留许可声明 获取：实验期可用运行时；生产页优先固定 seed/规则、限制 grid 和动画，必要时导出/复刻为静态 SVG、PNG 或 CSS，并保留 MIT notice。 格式：JavaScript, CSS, Web Component, DOM/CSS pattern 注意：运行时自定义元素有 SSR、hydration 和性能边界。css-doodlePatternMITMIT License打开资源图案打开资源

ambientCG

适合纸张、织物、石材、金属、噪声和 PBR 材质纹理，用于高端品牌页、3D 场景、拟物表面和海报式 hero。

授权Creative Commons CC0 1.0 Universal商用可商用风险低风险归因无需署名资源：ambientCG 授权：Creative Commons CC0 1.0 Universal 商用：可商用 风险：低风险 归因：无需署名 获取：下载具体材质页所需分辨率和贴图通道；UI 使用前降采样为 AVIF/WebP，并记录 asset id、分辨率和派生文件。 格式：JPG, PNG, EXR, blend 注意：原始 PBR 贴图很重，UI 中必须降采样和压缩。ambientcgambientCGPatternCC0 1.0打开资源3D打开资源

Poly Haven

适合高质量 HDRI、PBR 材质、真实材质纹理、产品 hero 3D 场景和 Three.js/Blender 原型。

授权CC0 1.0商用可商用资源：Poly Haven 授权：CC0 1.0 商用：可商用 风险：未标注 归因：未标注 获取：Download selected HDRIs, textures, or models; convert/compress models to glTF/GLB and UI backgrounds to optimized AVIF/WebP derivatives before shipping. 注意：原始文件很重，前端必须做尺寸、贴图、draco/meshopt、懒加载和低端设备 fallback。poly-havenPoly Haven3DCC0 1.0打开资源3D打开资源

Kenney Assets

适合游戏、互动 demo、轻量 3D 原型、UI pack、icon-like 场景物件和低风险可商用占位素材。

授权Creative Commons CC0商用可商用资源：Kenney Assets 授权：Creative Commons CC0 商用：可商用 风险：未标注 归因：未标注 获取：Download the exact asset pack, keep the included license file, and export only the needed sprites, UI pieces, textures, or 3D files into the project. 注意：Kenney logo 保留给官方项目，不要作为背书使用。kenney-assetsKenney Assets3DCreative Commons CC0打开资源3D打开资源

Khronos glTF Sample Assets

适合验证 Three.js/Babylon/glTF loader、PBR、transmission、animation、variants、Draco/Meshopt 等格式能力。

授权Varies by model, commonly CC BY 4.0 or other listed licenses商用按资源确认资源：Khronos glTF Sample Assets 授权：Varies by model, commonly CC BY 4.0 or other listed licenses 商用：按资源确认 风险：未标注 归因：未标注 获取：Use for testing loaders and material features; read each model's credit/license before including it in a product or screenshot. 注意：不是统一 CC0 素材库；每个模型授权和署名要求不同。gltf-sample-assetsKhronos glTF Sample Assets3DVaries by model, commonly CC BY 4.0 or other listed licenses打开资源3D打开资源

3Dicons

适合轻量 3D 空状态、功能图标、社交海报、产品首屏辅助图、演示文稿和需要友好 3D 语气的快速原型。

授权CC0 1.0商用可商用资源：3Dicons 授权：CC0 1.0 商用：可商用 风险：未标注 归因：未标注 获取：Download selected PNG/3D source assets, optimize to WebP/AVIF or GLB as needed, and record style, angle, and collection before using in a hero or empty state. 注意：3D 图标风格辨识度高，品牌主视觉建议二次定制。3dicons3Dicons3DCC0 1.0打开资源插画打开资源

Open Doodles

适合轻松手绘气质的 onboarding、空状态、社区页和教育型说明图。

授权CC0 1.0商用可商用资源：Open Doodles 授权：CC0 1.0 商用：可商用 风险：未标注 归因：未标注 获取：Download SVG/PNG/GIF assets and recolor or compose them as lightweight illustration accents. 注意：手绘语气强，不适合严肃金融、医疗或企业安全核心页面。open-doodlesOpen DoodlesIllustrationCC0 1.0打开资源插画打开资源

IRA Design Illustrations

适合 onboarding、空状态、产品说明、团队/协作场景、轻量营销页和需要可组合手绘人物/物件的界面。

授权MIT商用可商用资源：IRA Design Illustrations 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：Download selected SVG, PNG, or AI assets; customize gradients and colors, then export only the composed scenes needed by the product. 注意：插画应配合标题、原因说明和主行动；不要只用人物图填补空状态。ira-designIRA Design IllustrationsIllustrationMIT打开资源插画打开资源

Open Peeps

适合头像、团队、社区、人物场景、轻量营销页和 onboarding 人物插画。

授权CC0 1.0商用可商用资源：Open Peeps 授权：CC0 1.0 商用：可商用 风险：未标注 归因：未标注 获取：Download or compose people illustrations, then export only the needed SVG/PNG assets. 注意：风格辨识度高，重要品牌页面建议二次定制。open-peepsOpen PeepsIllustrationCC0 1.0打开资源插画打开资源

Humaaans

适合 onboarding、团队/社区场景、人物化空状态、故事板和需要可组合人物插画的产品说明页。

授权CC0 1.0商用可商用资源：Humaaans 授权：CC0 1.0 商用：可商用 风险：未标注 归因：未标注 获取：Download the design library or selected SVG/PNG exports, compose only needed people scenes, and record source plus any local color/customization notes. 注意：风格辨识度很高，重要品牌页面应二次绘制或定制。humaaansHumaaansIllustrationCC0 1.0打开资源插画打开资源

unDraw

适合快速为空状态、说明页和轻量 onboarding 提供插图，但要标注它不是 OSI 开源授权。

授权Free custom content license, not OSI open source商用有条件商用资源：unDraw 授权：Free custom content license, not OSI open source 商用：有条件商用 风险：未标注 归因：未标注 获取：Download SVG from unDraw and customize the accent color; do not redistribute the collection as a pack. 注意：授权禁止复制/聚合成竞争服务或素材包。undrawunDrawIllustrationFree custom content license, not OSI open source打开资源运动打开资源

LottieFiles Public Animations

适合加载、成功、空状态和轻量说明动效；公共动画要检查具体文件和授权条款。

授权Lottie Simple License商用有条件商用风险中风险归因建议署名资源：LottieFiles Public Animations 授权：Lottie Simple License 商用：有条件商用 风险：中风险 归因：建议署名 获取：下载具体 public animation 前记录作者、动画 URL、license、文件格式和是否来自 marketplace/付费资源；必须提供 reduced-motion 替代。 格式：JSON, dotLottie, SVG renderer, canvas renderer 注意：热门动画重复率高。lottiefiles-publicLottieFiles Public AnimationsMotionLottie Simple License for public animation files打开资源运动打开资源

Coverr Stock Video

当 agent 需要网站首屏视频背景时，优先返回 Coverr 的具体视频页、署名/授权判断、release 风险、poster、压缩格式、暂停控制和 reduced-motion 替代，而不是直接嵌入大 MP4。

授权Coverr License商用有条件商用风险中风险归因需可见署名资源：Coverr Stock Video 授权：Coverr License 商用：有条件商用 风险：中风险 归因：需可见署名 获取：从具体视频页下载，记录视频 URL、creator/Coverr、license、免费或 Coverr+ 状态、署名位置、MP4/4K、poster、裁切调色和人物/品牌/地点 release 风险；不得用于 AI 训练、数据集或竞争服务。 格式：MP4, MP4, WebM derivative, poster image 注意：当前许可页对免费用户写有署名要求；即便 FAQ 语气更宽松，入库时按免费下载需署名处理。coverr-stock-videoCoverr Stock VideoMotionCoverr custom stock video and music license打开资源运动打开资源

Mixkit Stock Video

当 agent 搜索 stock video 时，必须先判断 Mixkit 条目是 Free License 还是 Restricted License；Free 可进入商业候选，Restricted 只进入个人/非商业候选。

授权Mixkit Stock Video Free/Restricted License商用按资源确认风险需复核归因逐项确认资源：Mixkit Stock Video 授权：Mixkit Stock Video Free/Restricted License 商用：按资源确认 风险：需复核 归因：逐项确认 获取：仅下载具体视频页并记录该视频是 Free License 还是 Restricted License、creator/URL、尺寸、无水印状态、是否含 Envato Elements 推广素材、人物/商标/第三方组件风险和不得批量聚合/再销售边界。 格式：MP4, MP4, WebM derivative, poster image 注意：Mixkit 同时存在 Free License 和 Restricted License，不能按平台统一商用。mixkit-stock-videoMixkit Stock VideoMotionMixkit Stock Video Free or Restricted License; check each item打开资源运动打开资源

Motion

适合 React/JS/Vue 组件级 layout、exit、gesture、shared layout、hover/tap/drag 和小型产品微交互。

授权MIT商用可商用资源：Motion 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：npm install motion; use motion/react for React, motion for vanilla JavaScript, and useReducedMotion or MotionConfig for reduced-motion paths. 注意：复杂多段时间线、SVG morph 或高级滚动编排仍可能更适合 GSAP。motion-devMotionMITMotion.dev打开资源运动打开资源

GSAP

适合复杂时间线、ScrollTrigger、SVG/DOM 编排、draggable/gesture、插件型动效和需要跨框架精细控制的页面。

授权GSAP Standard No Charge License, custom terms商用有条件商用资源：GSAP 授权：GSAP Standard No Charge License, custom terms 商用：有条件商用 风险：未标注 归因：未标注 获取：npm install gsap @gsap/react; register plugins once, use gsap.matchMedia for responsive and reduced-motion branches, and preserve proprietary notices. 注意：不是 MIT/OSI 开源授权，按 GSAP 标准许可和 prohibited uses 检查。gsapGSAPMotionGSAP Standard No Charge License, custom terms打开资源运动打开资源

Lenis

适合确有滚动叙事、WebGL 同步、视差或品牌沉浸需求的页面；普通工具界面优先保留原生滚动。

授权MIT商用可商用资源：Lenis 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：npm install lenis; import lenis/dist/lenis.css when using React/Vue wrappers and test anchors, sticky, keyboard, focus, and reduced-motion behavior. 注意：平滑滚动会改变原生手感，必须测试键盘、锚点、浏览器返回、触控和滚动容器。lenisLenisMotionMIT打开资源运动打开资源

Scrollama

适合新闻/数据故事、产品解释页和教育叙事中基于章节进入/退出触发视觉状态变化的轻量 scrollytelling。

授权MIT License商用可商用风险低风险归因保留许可声明资源：Scrollama 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：通过 npm 安装 scrollama，并保留 MIT license notice；使用 CSS position: sticky 构建 sticky graphic，按版本记录 deprecated API 和 IntersectionObserver/polyfill 边界。 格式：JavaScript, TypeScript types, step trigger, step progress 注意：不是复杂动画时间线工具；复杂 pin/scrub 编排仍更适合 GSAP ScrollTrigger。scrollamaScrollamaMotionMIT打开资源运动打开资源

Anime.js

适合轻量、框架无关的 DOM/SVG/对象 tween、easing、stagger、draggable 或独立 demo 动效。

授权MIT商用可商用资源：Anime.js 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：npm install animejs; use for focused DOM/SVG/object tweens and clean up timelines in component lifecycles. 注意：React/Next 中要自己管理 refs、生命周期和 cleanup。animejsAnime.jsMotionMIT打开资源运动打开资源

CSS Scroll-driven Animations

适合阅读进度、局部 reveal、轻量视差和无需 JS 时间线的 scroll-linked 动效原型。

授权Web platform feature; documentation/license follows source docs商用可商用资源：CSS Scroll-driven Animations 授权：Web platform feature; documentation/license follows source docs 商用：可商用 风险：未标注 归因：未标注 获取：Use animation-timeline, scroll(), view(), and @supports checks; provide JS/CSS fallback for browsers where the feature is not Baseline. 注意：部分属性仍非 Baseline，必须查兼容性并提供 fallback。css-scroll-driven-animationsCSS Scroll-driven AnimationsMotionWeb platform feature; documentation/license follows source docs打开资源运动打开资源

lottie-web

作为 Lottie JSON 播放器使用，适合加载、空状态、成功反馈和轻量说明动效。

授权MIT License商用可商用风险低风险归因保留许可声明资源：lottie-web 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：把 lottie-web 只记录为播放器/runtime；动画 JSON、插画、音频和品牌素材必须各自记录来源授权。 格式：JS, SVG renderer, canvas renderer, HTML renderer 注意：播放器授权不等于动画素材授权。lottie-webMotionMITMIT License打开资源运动打开资源

dotLottie Web

适合需要 `.lottie` 压缩包、状态控制、Web Component 或 React/Vue 包装器的动效场景。

授权MIT商用可商用资源：dotLottie Web 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：Use @lottiefiles/dotlottie-web or framework wrappers for compressed .lottie animation packages. 注意：仍需单独确认动画素材授权。dotlottie-webdotLottie WebMotionMIT打开资源运动打开资源

Rive Runtimes

适合交互式矢量动画、状态机按钮、onboarding、游戏化反馈、产品演示和需要输入驱动动画状态的界面。

授权MIT for official runtimes商用可商用资源：Rive Runtimes 授权：MIT for official runtimes 商用：可商用 风险：未标注 归因：未标注 获取：Use @rive-app/react-canvas or the relevant official runtime for .riv files, self-host WASM/assets when needed, and provide static/reduced-motion fallback. 注意：runtime 授权不等于 `.riv` 素材授权；编辑器、marketplace、第三方图形和品牌素材需另查。rive-runtimesRive RuntimesMotionMIT for official runtimes打开资源运动打开资源

useAnimations

适合汉堡菜单、播放暂停、加载、勾选等 UI 微动效图标。

授权MIT商用可商用资源：useAnimations 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：npm install react-useanimations; use for small animated icons, not large narrative scenes. 注意：不要让动效图标替代文本状态。useanimationsuseAnimationsMotionMIT打开资源插画打开资源

OpenMoji

当 agent 需要开源 emoji/轻插图并能承受 CC BY-SA 署名和衍生共享要求时使用；必须返回具体 emoji、下载路径、版本、署名文案、改造说明和是否触发 ShareAlike。

授权Creative Commons Attribution-ShareAlike 4.0 International for graphics; GNU Lesser General Public License v3 for code商用有条件商用风险中风险归因需可见署名资源：OpenMoji 授权：Creative Commons Attribution-ShareAlike 4.0 International for graphics; GNU Lesser General Public License v3 for code 商用：有条件商用 风险：中风险 归因：需可见署名 获取：从 OpenMoji 官网或 GitHub release 下载具体 SVG/PNG/font；记录 emoji 名称、Unicode、color/black 版本、OpenMoji 版本、CC BY-SA 4.0 署名位置、是否改造，以及衍生图形是否按相同或兼容许可证共享。 格式：SVG, PNG, OTF, TTF 注意：CC BY-SA 4.0 允许商业使用但必须署名；改造、重绘或组成衍生图形时需要按相同或兼容许可证共享贡献。openmojiOpenMojiIllustrationCC BY-SA 4.0 for graphics; LGPL-3.0 for code打开资源插画打开资源

Twemoji

适合需要统一 emoji 图形、反应状态、社区表情、教育内容和轻量插画化状态的界面。

授权CC BY 4.0 for graphics; MIT for code商用有条件商用资源：Twemoji 授权：CC BY 4.0 for graphics; MIT for code 商用：有条件商用 风险：未标注 归因：未标注 获取：Use the SVG/PNG graphics only with visible attribution in README, About, footer, legal, or source comments; keep emoji as supportive expression, not the only status signal. 注意：CC BY 4.0 需要署名；不能当作无需归因素材。twemojiTwemojiIllustrationCC BY 4.0 for graphics; MIT for code打开资源图片打开资源

Openverse

适合为文章、知识库、教育页、案例说明和低预算项目寻找开放授权图片、照片、音频和其他媒体候选。

授权Per-item Creative Commons or public-domain license商用按资源确认风险需复核归因逐项确认资源：Openverse 授权：Per-item Creative Commons or public-domain license 商用：按资源确认 风险：需复核 归因：逐项确认 获取：把 Openverse 当发现入口；必须打开原始来源页记录 item URL、creator、provider、license、归因文案、商用/改作筛选和肖像/商标风险。 格式：JPG, PNG, SVG, MP3 注意：必须进入原始来源页核对授权、署名、尺寸和肖像/商标风险。openverseOpenversePhotoCreative Commons or public-domain license varies by item打开资源图片打开资源

Wikimedia Commons

适合历史、文化、建筑、科学、地点、人物公共资料和需要可追溯出处的图片证据。

授权Free licenses vary by file, commonly CC BY, CC BY-SA, public domain, or other listed licenses商用按资源确认资源：Wikimedia Commons 授权：Free licenses vary by file, commonly CC BY, CC BY-SA, public domain, or other listed licenses 商用：按资源确认 风险：未标注 归因：未标注 获取：Open the specific file page, copy the title, author, source, license, and attribution text, then download an appropriately sized derivative. 注意：CC BY/CC BY-SA 需要署名，SA 衍生图可能触发相同方式共享。wikimedia-commonsWikimedia CommonsPhotoFree licenses vary by file, commonly CC BY, CC BY-SA, public domain, or other listed licenses打开资源图片打开资源

NASA Image and Video Library

适合航天、科学、地球观测、教育、沉浸式 hero、3D 纹理参考和科普视觉素材。

授权NASA media generally not subject to U.S. copyright, with endorsement, logo, and third-party restrictions商用有条件商用资源：NASA Image and Video Library 授权：NASA media generally not subject to U.S. copyright, with endorsement, logo, and third-party restrictions 商用：有条件商用 风险：未标注 归因：未标注 获取：Download from the NASA media page, keep title/ID/date/credit metadata, and avoid uses that imply NASA endorsement or misuse NASA insignia. 注意：NASA 标志、员工肖像、任务徽章、第三方内容和背书语境要按官方指南检查。nasa-image-video-libraryNASA Image and Video LibraryPhotoNASA media generally not subject to U.S. copyright, with endorsement, logo, and third-party restrictions打开资源组件打开资源

Ariakit

适合 React 中构建 combobox、menu、dialog、popover、select、tooltip 等可访问组件行为底座，同时保持自定义视觉系统。

授权MIT for packages and most examples; Ariakit Plus and app code use separate/proprietary terms商用有条件商用资源：Ariakit 授权：MIT for packages and most examples; Ariakit Plus and app code use separate/proprietary terms 商用：有条件商用 风险：未标注 归因：未标注 获取：Install ariakit-react or copy MIT examples only after checking the path-specific license; do not copy Plus examples unless licensed. 注意：仓库不同目录授权不同，复制示例前必须确认具体路径。ariakitAriakitComponentMIT for packages and most examples; Ariakit Plus and app code use separate/proprietary terms打开资源组件打开资源

Ark UI

适合需要 React/Solid/Vue/Svelte 多框架一致组件逻辑的设计系统，尤其是跨产品组件库和内部工具平台。

授权MIT商用可商用资源：Ark UI 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：Install @ark-ui/react, @ark-ui/vue, @ark-ui/solid, or @ark-ui/svelte, then style parts with local CSS variables and semantic tokens. 注意：需要建立 part selector、状态属性和 token 映射规范。ark-uiArk UIComponentMIT打开资源组件打开资源

Zag.js

适合 agent 需要从状态机角度实现复杂组件逻辑时使用，例如 number input、steps、combobox、menu、toast、slider 和 tree view。

授权MIT商用可商用资源：Zag.js 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：Install the specific @zag-js machine package plus a framework adapter, then connect generated props to local markup and styles. 注意：学习成本高于直接复制组件。zag-jsZag.jsComponentMIT打开资源组件打开资源

Base UI

适合 React 项目构建无样式、可访问、slot 友好的组件库，尤其是需要从 Radix/Floating UI/MUI 经验迁移出的新底座。

授权MIT商用可商用资源：Base UI 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：Install @base-ui-components/react and wrap primitives into local components with project tokens, slots, and data-state styling. 注意：React 专用，不适合直接服务 Vue/Svelte 多框架库。base-uiBase UIComponentMIT打开资源组件打开资源

Mantine

当 agent 需要完整 React 组件库而非 headless primitives 时，Mantine 可作为高覆盖实现资源；接入后必须把 Mantine theme 映射到本地 token，并复测表单错误、日期本地化和暗色模式。

授权MIT License商用可商用风险低风险归因保留许可声明资源：Mantine 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：通过 npm 安装 Mantine 包；记录 MIT 许可、主题覆盖、样式层接入方式和是否使用 Mantine UI 示例 blocks。 格式：TypeScript, TSX, CSS, React components 注意：Mantine 有明显组件库语气，强品牌产品要重做 token、radius、typography 和状态视觉。mantineMantineComponentMIT打开资源组件打开资源

HeroUI

当 agent 需要比 shadcn 更开箱即用、又仍然适合 Tailwind/Next.js 的组件库时，可检索 HeroUI；必须区分 Apache-2.0 开源包和 HeroUI Pro 付费资产。

授权Apache License 2.0商用可商用风险低风险归因保留许可声明资源：HeroUI 授权：Apache License 2.0 商用：可商用 风险：低风险 归因：保留许可声明 获取：通过 npm 安装开源 HeroUI 包；记录 Apache-2.0 许可、版本、是否使用 Pro 模板/组件以及 React Aria/Tailwind v4 依赖边界。 格式：TypeScript, TSX, Tailwind CSS, React components 注意：旧 NextUI/MIT 与新 HeroUI/Apache-2.0 版本要区分记录。herouiHeroUIComponentApache-2.0打开资源组件打开资源

Chakra UI

当 agent 需要完整组件系统、而不是复制源码组件时，Chakra UI 可作为实现路径；必须明确哪些组件会变成 client components，并把 token/recipe 约束写入本地设计系统。

授权MIT License商用可商用风险低风险归因保留许可声明资源：Chakra UI 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：通过 npm 安装 Chakra UI；记录 MIT 许可、Provider/theme 边界、是否使用 Pro 组件、RSC/客户端组件影响和本地 token 映射。 格式：TypeScript, TSX, CSS, React components 注意：Chakra Pro 是单独付费资源，不能按 MIT 入库。chakra-uiChakra UIComponentMIT打开资源组件打开资源

Flowbite React

当 agent 需要 Tailwind 生态里较完整的 React 组件包和 Figma/设计系统线索时，可检索 Flowbite React；必须标记开源组件、文档 CC BY 和 Pro 资源边界。

授权MIT code + CC BY 3.0 docs商用有条件商用风险中风险归因保留许可声明资源：Flowbite React 授权：MIT code + CC BY 3.0 docs 商用：有条件商用 风险：中风险 归因：保留许可声明 获取：通过 npm/CLI 接入开源 React 组件；复制文档或示例说明时记录 CC BY 3.0，使用 Pro blocks 前确认付费许可。 格式：TypeScript, TSX, Tailwind CSS, React components 注意：文档是 CC BY 3.0，代码 MIT，Pro 资源另行授权，不能混作同一许可。flowbite-reactFlowbite ReactComponentMIT code; documentation CC BY 3.0; Pro templates/components use separate paid terms打开资源组件打开资源

Kobalte

当 agent 目标栈是 SolidJS 且需要类似 Radix/React Aria 的 primitive 时，优先检索 Kobalte；不要把它误用于 React/Vue 项目。

授权MIT License商用可商用风险低风险归因保留许可声明资源：Kobalte 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：通过 npm 安装 @kobalte/core；记录 MIT 许可、SolidJS 限定、状态 data-* 样式策略和是否使用 tailwindcss/vanilla-extract 插件。 格式：TypeScript, TSX, SolidJS primitives, unstyled accessible components 注意：SolidJS 专用，不适合直接进入 React/Next.js 代码库。kobalteKobalteComponentMIT打开资源组件打开资源

Park UI

当 agent 已选择 Ark UI/Panda CSS，但需要“如何把 headless parts 变成完整组件”的参考时，检索 Park UI；复制后必须替换品牌 token、文案、图标和业务状态。

授权MIT License商用可商用风险低风险归因保留许可声明资源：Park UI 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：从官方文档/仓库复制选定 Ark UI + Panda CSS 组件或使用 preset；保留 MIT 许可声明，记录组件来源、recipe/token 改造和框架目标。 格式：TypeScript, TSX, Panda CSS, styled components 注意：它是样式化起点，不应直接复制成最终品牌。park-uiPark UIComponentMIT打开资源组件打开资源

Ant Design

当 agent 要快速搭建企业后台且项目接受 antd 视觉和依赖体系时可检索 Ant Design；必须控制主题 token、中文/国际化、表格密度、表单错误和模板授权边界。

授权MIT License商用可商用风险低风险归因保留许可声明资源：Ant Design 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：通过 npm 安装 antd；记录 MIT 许可、ConfigProvider/theme 覆盖、locale、icons 依赖和是否使用 Ant Design Pro/模板资源。 格式：TypeScript, TSX, CSS-in-JS, React components 注意：Ant Design 视觉语气很强，非企业后台或高度品牌化产品要谨慎。ant-designAnt DesignComponentMIT打开资源组件打开资源

MUI Material

当 agent 需要稳定的 React Material Design 成品组件时检索 MUI Material；落地前先定义 ThemeProvider、Emotion、token 覆盖、SSR 和 MUI X 付费边界。

授权MIT License商用可商用风险低风险归因保留许可声明资源：MUI Material 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：通过 npm 安装 @mui/material、@emotion/react、@emotion/styled；记录 MIT 许可声明，并把 MUI X Pro/Premium、模板商店、Roboto 与 Material Icons 单独核验。 格式：TypeScript, TSX, CSS-in-JS, React components 注意：Material/MUI 视觉识别强，高度品牌化产品要重写 token 和组件语气。mui-materialMUI MaterialComponentMIT打开资源组件打开资源

Nuxt UI

当 agent 面向 Vue/Nuxt 构建设计系统或产品界面时检索 Nuxt UI；需要同步 Tailwind token、App 包裹、SSR、Figma Kit 授权与历史 Pro 边界。

授权MIT License商用可商用风险低风险归因保留许可声明资源：Nuxt UI 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：通过 npm 安装 @nuxt/ui 与 Tailwind CSS；Nuxt 项目注册 modules，纯 Vue/Vite 项目按官方插件配置，并单独留存 Figma Kit 与历史 Pro 资源授权记录。 格式：Vue, TypeScript, Tailwind CSS, Vue components 注意：主要面向 Vue/Nuxt，不适合 React 项目。nuxt-uiNuxt UIComponentMIT打开资源组件打开资源

Web Awesome

当 agent 需要跨框架组件或不想绑定 React/Vue 运行时，检索 Web Awesome Core；必须隔离 Pro 资产、图标库许可和 Fonticons/Web Awesome 商标语境。

授权MIT License商用可商用风险中风险归因保留许可声明资源：Web Awesome 授权：MIT License 商用：可商用 风险：中风险 归因：保留许可声明 获取：通过 npm 安装或 npm pack 自托管 Web Awesome Core；保留 MIT notice，不混入 Web Awesome Pro 组件/主题/色彩，也逐项核验外部图标库许可。 格式：Web Components, JavaScript, CSS, SVG icons 注意：Pro 组件、主题、pattern 和部分色彩不是开源素材库内容。web-awesomeWeb AwesomeComponentMIT for Web Awesome Core; Web Awesome Pro uses separate commercial terms打开资源组件打开资源

React DayPicker

当 agent 需要日期选择而不是整套 UI 库时检索 React DayPicker；要明确 v10 包名、locale、键盘交互、范围选择、时区和样式接入方式。

授权MIT License商用可商用风险低风险归因保留许可声明资源：React DayPicker 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：新项目安装 @daypicker/react；迁移旧项目时记录 react-day-picker 兼容包名、版本、日期/时区能力和样式覆盖。 格式：TypeScript, TSX, CSS, React date picker 注意：React 限定。react-day-pickerReact DayPickerComponentMIT打开资源组件打开资源

Primer React

当 agent 构建开发者平台或需要 GitHub Primer 风格组件时检索 Primer React；必须替换品牌语气、校准 BaseStyles/ThemeProvider，并处理 GitHub/Primer 商标边界。

授权MIT License商用可商用风险中风险归因保留许可声明资源：Primer React 授权：MIT License 商用：可商用 风险：中风险 归因：保留许可声明 获取：通过 npm 安装 @primer/react、@primer/primitives、react、react-dom；保留 MIT notice，避免复制 GitHub 品牌语境、Octicons/文档图片或暗示官方背书。 格式：TypeScript, TSX, CSS, React components 注意：GitHub/Primer 视觉和语义很强，商用产品要避免品牌混淆。primer-reactPrimer ReactComponentMIT打开资源组件打开资源

React Spectrum

当 agent 需要 React Spectrum 的可访问、国际化和 adaptive 组件能力时检索；落地时必须配置 Provider、defaultTheme、locale、colorScheme 和 CSS 导入。

授权Apache License 2.0商用可商用风险中风险归因保留许可声明资源：React Spectrum 授权：Apache License 2.0 商用：可商用 风险：中风险 归因：保留许可声明 获取：通过包管理器安装 @adobe/react-spectrum；导入官方 CSS 并配置 Provider/defaultTheme，保留 Apache-2.0 notice，不复制官方文档图片或暗示 Adobe 背书。 格式：TypeScript, TSX, CSS, React components 注意：Adobe/Spectrum 视觉语气和商标语境明显。react-spectrumReact SpectrumComponentApache-2.0打开资源组件打开资源

Reka UI

当 agent 需要 Vue/Nuxt 的 headless 可访问组件底座时检索 Reka UI；必须由本地 token 和 CSS 完成视觉，不把 demo 当成最终品牌。

授权MIT License商用可商用风险低风险归因保留许可声明资源：Reka UI 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：通过 npm 安装 reka-ui；Nuxt 使用 reka-ui/nuxt，自动导入可用 reka-ui/resolver，并保留 MIT notice 与依赖 notice。 格式：Vue, TypeScript, unstyled Vue primitives, Nuxt module 注意：Vue/Nuxt 限定，不适合 React。reka-uiReka UIComponentMIT打开资源组件打开资源

Figma Community

适合发现 UI kit、图标、组件库、模板、FigJam 流程图、设计系统样例和教学资源；入库时必须按具体文件记录授权。

授权Per-resource Figma Community license商用按资源确认风险需复核归因逐项确认资源：Figma Community 授权：Per-resource Figma Community license 商用：按资源确认 风险：需复核 归因：逐项确认 获取：Duplicate 具体文件前记录 creator、资源 URL、免费/付费、license、第三方素材说明和是否允许复制到客户/代码项目。 格式：Figma file, FigJam, plugin, widget 注意：没有统一开源授权；免费、付费、插件、widget 和 slide template 规则不同。figma-communityFigma CommunityComponentPer-resource license: Community Free/Paid Resource License, CC BY 4.0 slide templates, or creator-specified terms打开资源色彩工具打开资源

ColorBrewer

适合地图、分级设色图、数据可视化、政策 dashboard 和需要顺序/发散/定性色板判断的场景。

授权Apache-2.0 / Apache-style license for ColorBrewer software and color schemes商用可商用资源：ColorBrewer 授权：Apache-2.0 / Apache-style license for ColorBrewer software and color schemes 商用：可商用 风险：未标注 归因：未标注 获取：Use schemes as starting points for choropleth maps and data visualization, then record palette name, class count, colorblind-safe status, and local token mapping. 注意：色板不是完整品牌系统；需要映射到语义 token 并复测对比度。colorbrewerColorBrewerColorApache-2.0 / Apache-style license for ColorBrewer software and color schemes打开资源色彩工具打开资源

Open Color

适合快速生成 UI 基础色阶、原型、文档、状态色草案和需要统一 0-9 色阶命名的轻量产品。

授权MIT商用可商用资源：Open Color 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：Install open-color or copy selected scales, then translate them into semantic tokens such as surface, border, text, accent, danger, and success. 注意：不是 OKLCH/现代感知均匀色阶，需要人工检查对比和视觉跳变。open-colorOpen ColorColorMIT打开资源图片打开资源

Unsplash

适合高质量照片候选、品牌 moodboard、文章配图、hero 参考和真实场景氛围，但不适合当作已经清权的产品证据。

授权Unsplash License商用有条件商用风险中风险归因建议署名资源：Unsplash 授权：Unsplash License 商用：有条件商用 风险：中风险 归因：建议署名 获取：下载具体照片页并记录摄影师、photo URL、下载日期、裁切/调色、alt、可识别人物/地点/商标和是否需要额外 release。 格式：JPG, AVIF, WebP, JPG 注意：不能无重大修改后直接出售图片，也不能汇编成竞争服务。unsplashUnsplashPhotoUnsplash License打开资源图片打开资源

Pexels

适合网站、博客、广告草案、视频背景、产品情绪板和需要照片/视频双资源的页面原型。

授权Pexels License商用有条件商用风险中风险归因建议署名资源：Pexels 授权：Pexels License 商用：有条件商用 风险：中风险 归因：建议署名 获取：打开具体 photo/video 页，记录 creator、URL、license、尺寸、裁切/编辑、人物/品牌/商标风险和不得暗示背书。 格式：JPG, MP4, AVIF, WebP 注意：不得把图片/视频用于商标、设计标、商号或服务标。pexelsPexelsPhotoPexels License and some CC0 content; check each asset page打开资源图标打开资源

Remix Icon

适合需要 24x24、outline/fill 双风格、偏中性系统符号的 SaaS、后台、AI 工具、移动 Web 和营销页辅助图标。

授权Remix Icon License v1.0商用有条件商用资源：Remix Icon 授权：Remix Icon License v1.0 商用：有条件商用 风险：未标注 归因：未标注 获取：Use @remixicon/react, remixicon webfont CSS, SVG sprite, or copy individual SVG/PNG files; keep the custom license note with redistributed assets. 注意：2026 年已更新为自定义 Remix Icon License v1.0，不要继续按旧 Apache/MIT 记账。remix-iconRemix IconIconRemix Icon License v1.0打开资源图标打开资源

CSS.GG

适合作为纯 CSS 图标、SVG 图标、Figma 图标和 glyph/pattern 灵感入口，尤其适合做实验性控件和不想引入图标字体的原型。

授权Custom CSS.GG / GLYF.APP license for v2.1.2+; older versions before 2.1.2 were MIT商用有条件商用资源：CSS.GG 授权：Custom CSS.GG / GLYF.APP license for v2.1.2+; older versions before 2.1.2 were MIT 商用：有条件商用 风险：未标注 归因：未标注 获取：Use only after confirming the target version/license; for commercial production, request permission for v2.1.2+ or pin and document an older MIT release if that is legally acceptable. 注意：当前主分支许可证要求署名且商业使用需明确许可；不能简单标为 MIT。css-ggCSS.GGIconCustom CSS.GG / GLYF.APP license for v2.1.2+; older versions before 2.1.2 were MIT打开资源图标打开资源

MynaUI Icons

适合需要轻量现代线性/实心图标、React 接入、后台工具、移动控件和不想使用过度常见 Lucide/Tabler 语气的界面。

授权MIT商用可商用资源：MynaUI Icons 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：Install @mynaui/icons or @mynaui/icons-react, or download selected SVG files; import per icon and keep the MIT license notice. 注意：生态和社区规模小于 Lucide/Tabler，生产前要抽样检查缺口图标和维护节奏。mynaui-iconsMynaUI IconsIconMIT打开资源图标打开资源

Teenyicons

适合超紧凑 UI、表格行操作、toolbar、badge、chip、移动底栏和 15px 小尺寸控件图标。

授权MIT商用可商用资源：Teenyicons 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：Install teenyicons, then inline selected 15x15 outline or solid SVGs; wrap them in accessible icon components when used with labels or controls. 注意：不适合直接作为 24px 主图标系统；放大后可能过细或比例偏小。teenyiconsTeenyiconsIconMIT打开资源运动打开资源

Dot Matrix

当 agent 需要比 spinner 更有识别度的 loader 时检索 Dot Matrix；必须把 loader 放在具体 pending 区域旁，配可见文本/aria-label，检查 reduced-motion，并确认不会把组件再包装成可销售组件库。

授权Custom Proprietary License商用有条件商用风险中风险归因保留许可声明资源：Dot Matrix 授权：Custom Proprietary License 商用：有条件商用 风险：中风险 归因：保留许可声明 获取：通过 shadcn CLI registry 按需安装单个 loader；记录具体 item、版本、来源 URL、自定义 LICENSE 和改动。允许用于产品 UI，但不得把组件作为独立可复用组件库、模板包或 loader 库发布、转售或再授权。 格式：TSX, CSS, JSON, shadcn registry item 注意：许可证不是普通 MIT：仓库根 LICENSE 是自定义专有条款，禁止独立组件库/loader 库再分发和商业化。dot-matrix-loadersDot MatrixMotionCustom proprietary license; product use is permitted, but standalone reusable component distribution/resale is prohibited. package.json lists MIT, but the repository LICENSE is stricter and should govern intake.打开资源运动打开资源

Motion-Primitives

适合 React/Next/Tailwind 项目中的动画组件起点，例如文字揭示、布局转场、hover/tap 反馈、媒体 reveal 和轻量交互 demo。

授权MIT商用可商用资源：Motion-Primitives 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：Copy or install only the needed React/Tailwind/Motion component, then remap timing, easing, tokens, reduced-motion behavior, and accessibility labels to the local design system. 注意：项目标注 beta，组件和 API 可能变化；复制后要本地化并纳入 QA。motion-primitivesMotion-PrimitivesMotionMIT打开资源组件打开资源

Magic UI

适合 Next.js/Tailwind/shadcn 项目快速探索动态营销模块、文字特效、背景特效、互动卡片和启动页组件原型。

授权MIT商用可商用资源：Magic UI 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：Use the documented component source or CLI flow, then replace demo copy, colors, icons, gradients, and motion timing with local tokens and project content. 注意：很多组件偏营销和装饰，后台/事务型产品要降噪。magic-uiMagic UIComponentMIT打开资源组件打开资源

Animate UI

适合需要已动画化 shadcn/Radix 风格组件的 React 产品，例如弹层、菜单、按钮、反馈控件和动效丰富的组件分发。

授权MIT商用可商用资源：Animate UI 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：Install or copy only selected animated React/Tailwind/Motion/Shadcn components; verify dependencies, portals, focus, exit animation, and reduced-motion fallback. 注意：动画化组件不能替代交互契约；仍需检查 aria、keyboard、focus return、portal 和表单状态。animate-uiAnimate UIComponentMIT打开资源组件打开资源

React Bits

适合 React/Next/Tailwind 项目探索文字动效、背景动效、互动卡片、创意按钮和启动页视觉模块，再按本地设计系统收敛。

授权MIT + Commons Clause商用有条件商用资源：React Bits 授权：MIT + Commons Clause 商用：有条件商用 风险：未标注 归因：未标注 获取：Use its shadcn/jsrepo commands or copy a single component variant, then localize tokens, dependencies, animation timing, reduced-motion behavior, and accessibility labels. 注意：Commons Clause 对销售软件/组件库有额外限制，商业产品可用但分发和再销售场景要复核。react-bitsReact BitsComponentMIT + Commons Clause打开资源图标打开资源

SVGL

适合查找 AI、开发者工具、平台、支付、社交、设计和软件品牌的 SVG logo 候选，并为案例页、集成列表和技术栈展示建立入口。

授权MIT for the SVGL project code; logo and trademark rights vary by brand商用按资源确认资源：SVGL 授权：MIT for the SVGL project code; logo and trademark rights vary by brand 商用：按资源确认 风险：未标注 归因：未标注 获取：Use as a brand-logo discovery index; before embedding any logo, open its original brand guidelines or asset source and record permission, trademark boundary, color mode, and attribution. 注意：SVGL 项目 MIT 不等于每个 logo 可自由商用；品牌商标、背书和使用指南必须逐个确认。svglSVGLIconMIT for the SVGL project code; logo and trademark rights vary by brand打开资源3D打开资源

Quaternius Assets

适合低多边形 3D 场景、游戏化 onboarding、教育 demo、地图/城市/自然资产、角色原型和轻量 Three.js 场景。

授权Creative Commons CC0商用可商用资源：Quaternius Assets 授权：Creative Commons CC0 商用：可商用 风险：未标注 归因：未标注 获取：Download the selected pack, keep the source URL and license note, then optimize exported GLB/texture/sprite assets for the target runtime. 注意：风格偏游戏化，严肃企业产品要二次设计或仅用于原型。quaternius-assetsQuaternius Assets3DCreative Commons CC0打开资源Token打开资源

Style Dictionary

适合把设计 token 从单一 JSON 源转换为 CSS、SCSS、JS、Android、iOS、文档和多品牌主题产物，是 design-to-code token 管线的核心候选。

授权Apache-2.0商用可商用资源：Style Dictionary 授权：Apache-2.0 商用：可商用 风险：未标注 归因：未标注 获取：Install style-dictionary as a dev dependency, keep token source files in JSON/DTCG-compatible folders, and generate CSS variables, platform files, docs, or typed exports in CI. 注意：它是转换工具，不会替你定义语义 token；接入前要先明确 primitive、semantic、component token 分层。style-dictionaryStyle DictionaryTokenApache-2.0打开资源Token打开资源

Design Tokens Format Module

适合作为设计系统 token 文件格式、RAG schema、Figma/代码同步、工具互操作和长期资产治理的标准参考。

授权W3C Community Final Specification Agreement商用有条件商用资源：Design Tokens Format Module 授权：W3C Community Final Specification Agreement 商用：有条件商用 风险：未标注 归因：未标注 获取：Use the specification as the exchange contract for token JSON: prefer $type, $value, $description, aliases, groups, and .tokens.json naming when authoring shared token files. 注意：它不是 W3C 标准轨标准；规范和工具实现仍需按项目栈验证。dtcg-format-moduleDesign Tokens Format ModuleTokenW3C Community Final Specification Agreement打开资源3D打开资源

<model-viewer>

适合在产品页、作品集、教育内容、空间展示和 AR demo 中快速嵌入可旋转、可缩放的 3D/AR 模型。

授权Apache-2.0商用可商用资源：<model-viewer> 授权：Apache-2.0 商用：可商用 风险：未标注 归因：未标注 获取：Install @google/model-viewer or use the documented script import, then serve optimized GLB/USDZ assets with poster images, dimensions, alt text, loading policy, and AR fallback notes. 注意：库授权不覆盖示例模型或第三方 3D 资产；每个模型仍需单独记录来源和许可。model-viewer<model-viewer>3DApache-2.0打开资源3D打开资源

glTF Transform

适合把下载或生成的 GLB/glTF 资产纳入前端发布管线：检查、瘦身、压缩几何、压缩纹理、拆分、修复和批处理。

授权MIT商用可商用资源：glTF Transform 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：Install @gltf-transform/cli for batch asset work, or @gltf-transform/core/extensions/functions for scripted GLB inspection, pruning, deduping, Draco/meshopt compression, and texture conversion. 注意：压缩不等于视觉无损；要用截图/模型检查对比材质、法线、动画和尺寸。gltf-transformglTF Transform3DMIT打开资源图片打开资源

The Met Open Access

适合博物馆级艺术图像、历史物件、纹理参考、编辑型 hero、文化教育页面、情绪板和生成式视觉参考。

授权CC0 for public-domain Open Access images and data商用可商用资源：The Met Open Access 授权：CC0 for public-domain Open Access images and data 商用：可商用 风险：未标注 归因：未标注 获取：Search for works with the Open Access/OA indicator or use the public API, then store object ID, artist, title, date, image URL, source URL, and CC0 note with every downloaded asset. 注意：只有带 OA/Open Access 标识的公共领域图像适合按 CC0 使用；非 OA 藏品不可混用。met-open-accessThe Met Open AccessPhotoCC0 for public-domain Open Access images and data打开资源图片打开资源

Smithsonian Open Access

适合科学、自然史、航空航天、历史、设计、民族志、艺术和公共领域 2D/3D 藏品素材检索。

授权CC0 for designated Open Access assets商用可商用资源：Smithsonian Open Access 授权：CC0 for designated Open Access assets 商用：可商用 风险：未标注 归因：未标注 获取：Filter for CC0/Open Access assets, then preserve title, collection unit, catalog record, source URL, rights note, and any cultural/usage context alongside downloaded 2D or 3D files. 注意：CC0 只适用于带 CC0 标识的资产；未标识项目有使用条件。smithsonian-open-accessSmithsonian Open AccessPhotoCC0 for designated Open Access assets打开资源图片打开资源

Squoosh

适合图片入库前压缩、WebP/AVIF/JPEG 对比、hero 图导出、案例图瘦身和不想把图片上传到第三方服务器的本地处理。

授权Apache-2.0商用可商用资源：Squoosh 授权：Apache-2.0 商用：可商用 风险：未标注 归因：未标注 获取：Use the web app for visual codec comparisons, or review the repository before adopting automated workflows; record original size, output format, quality settings, dimensions, and visual QA notes. 注意：仓库和 @squoosh/lib 维护状态要在自动化前复核；大批量管线可优先考虑 Sharp/imagemin 等持续维护工具。squooshSquooshPhotoApache-2.0打开资源图标打开资源

SVGO

适合优化从 Figma/Illustrator/Inkscape 导出的 SVG 图标、logo、图案和插图片段，去除冗余 metadata、隐藏元素和可压缩路径。

授权MIT商用可商用资源：SVGO 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：Install svgo as a dev dependency, keep an explicit svgo.config.mjs, and run it on exported icons, logos, decorative SVGs, pattern SVGs, and illustration fragments before bundling. 注意：默认优化可能破坏 id、viewBox、aria/title、渐变引用或动画；必须用配置保护可访问性和运行时引用。svgoSVGOIconMIT打开资源可访问性打开资源

The A11Y Project Checklist

适合组件评审、页面验收、无障碍回归、设计规范补充和 agent 生成前端后做人工检查清单。

授权Apache-2.0 for site repository content; verify linked third-party resources separately商用有条件商用资源：The A11Y Project Checklist 授权：Apache-2.0 for site repository content; verify linked third-party resources separately 商用：有条件商用 风险：未标注 归因：未标注 获取：Use the checklist as a human QA rubric in design and frontend review; map each relevant item to local acceptance criteria, tests, and manual keyboard/screen-reader checks. 注意：清单不能保证 100% accessible；仍需真实用户路径、辅助技术和专业审计。a11y-project-checklistThe A11Y Project ChecklistAccessibilityApache-2.0 for site repository content; verify linked third-party resources separately打开资源图片打开资源

Sharp

适合把下载、拍摄或生成的图片批量转成可上线素材：格式转换、尺寸裁切、压缩、缩略图、占位图和入库前质量检查。

授权Apache-2.0商用可商用资源：Sharp 授权：Apache-2.0 商用：可商用 风险：未标注 归因：未标注 获取：Install sharp in a Node.js asset pipeline, then generate AVIF/WebP/JPEG/PNG variants, thumbnails, metadata, and responsive srcset outputs from original source images. 注意：压缩参数必须和视觉 QA 绑定，重点检查文字、细线、透明边缘、暗色渐变和人像肤色。sharp-image-pipelineSharpPhotoApache-2.0打开资源Token打开资源

Utopia

适合为响应式网页生成流式字号、行距和间距 token，让页面在小屏到大屏之间平滑过渡，而不是堆叠过多断点。

授权Free calculator and generated CSS; verify utopia-core/tooling license before redistributing code商用按资源确认资源：Utopia 授权：Free calculator and generated CSS; verify utopia-core/tooling license before redistributing code 商用：按资源确认 风险：未标注 归因：未标注 获取：Use the calculator to generate clamp-based type and space tokens, then store the exported CSS/custom properties in the local design-token layer with min/max viewport assumptions. 注意：流式字号不是完整排版系统；仍需定义正文、标题、行长、行高、断行和内容密度。utopia-fluid-type-spaceUtopiaTokenFree calculator and generated CSS; verify utopia-core/tooling license before redistributing code打开资源可访问性打开资源

Responsively App

适合前端交付前同时检查多个设备宽度、同步滚动/点击、快速截屏，并发现断点、溢出、触控目标和布局密度问题。

授权AGPL-3.0商用有条件商用资源：Responsively App 授权：AGPL-3.0 商用：有条件商用 风险：未标注 归因：未标注 获取：Install the desktop app for manual responsive QA, or use its device list as a reference when defining browser/screenshot test matrices. 注意：AGPL-3.0 对修改、分发和网络服务场景有义务，商用前要确认合规。responsively-appResponsively AppAccessibilityAGPL-3.0打开资源数据可视化打开资源

OpenFreeMap

适合地图型数据可视化、位置产品原型、城市/路线/门店分布页面和需要低成本矢量底图的交互项目。

授权MIT for project code; OpenStreetMap, OpenMapTiles, Natural Earth, style, glyph, and attribution licenses apply separately商用有条件商用资源：OpenFreeMap 授权：MIT for project code; OpenStreetMap, OpenMapTiles, Natural Earth, style, glyph, and attribution licenses apply separately 商用：有条件商用 风险：未标注 归因：未标注 获取：Use the public endpoint for prototypes or self-host the stack for production; always preserve OSM/OpenMapTiles/Natural Earth attribution and document tile/data provenance. 注意：地图数据和样式依赖有各自授权与归因要求，不能只看项目 MIT。openfreemapOpenFreeMapData VisualizationMIT for project code; OpenStreetMap, OpenMapTiles, Natural Earth, style, glyph, and attribution licenses apply separately打开资源数据可视化打开资源

OSM Liberty

适合作为开源地图项目的基础样式，帮助 agent 在地图可视化中快速获得道路、水体、地名、兴趣点和行政边界的基础视觉层。

授权BSD for the style; OpenMapTiles, Natural Earth, Maki icons, glyphs, tiles, and data licenses apply separately商用有条件商用资源：OSM Liberty 授权：BSD for the style; OpenMapTiles, Natural Earth, Maki icons, glyphs, tiles, and data licenses apply separately 商用：有条件商用 风险：未标注 归因：未标注 获取：Use as a MapLibre/Mapbox GL basemap style, then bind it to a compatible OpenMapTiles-schema source and record all source, sprite, glyph, and attribution requirements. 注意：它只是样式，不提供瓦片服务；必须匹配数据 schema。osm-libertyOSM LibertyData VisualizationBSD for the style; OpenMapTiles, Natural Earth, Maki icons, glyphs, tiles, and data licenses apply separately打开资源Token打开资源

Panda CSS

适合把设计系统 token、recipes、variants 和工程样式约束转成类型安全的 CSS 生成层，尤其适合需要多主题和组件变体治理的 React/TS 项目。

授权MIT商用可商用资源：Panda CSS 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：Install @pandacss/dev, initialize the config, define tokens/semantic tokens/recipes, and commit the generated styled-system output policy for the project. 注意：接入前先定义 token 分层和命名策略，否则类型安全只会放大混乱。panda-cssPanda CSSTokenMIT打开资源Token打开资源

vanilla-extract

适合需要 TypeScript token 契约、静态 CSS 输出、多主题和框架无关样式包的设计系统，尤其适合组件库和长期维护的产品 UI。

授权MIT商用可商用资源：vanilla-extract 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：Install @vanilla-extract/css plus the bundler integration, define theme contracts in .css.ts files, and generate static CSS at build time. 注意：需要配置 bundler 插件，组件库分发时要明确消费者如何编译 .css.ts。vanilla-extractTokenMITzero runtime CSS打开资源插画打开资源

Boring Avatars

适合用户头像占位、团队成员列表、评论区、社区资料、项目卡片和需要确定性生成但不上传真实头像的隐私友好界面。

授权MIT商用可商用资源：Boring Avatars 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：Install `boring-avatars`, pass a stable user id/name/email as the seed, choose one variant and a project color palette, and render SVG avatars locally instead of depending on the paused legacy API. 注意：旧 API 服务已暂停，生产应优先本地生成或使用新的付费/托管 API 前确认条款。boring-avatarsBoring AvatarsIllustrationMIT打开资源插画打开资源

DiceBear

适合产品头像、匿名用户、社区身份、游戏化资料、团队 mock 数据和需要多种视觉风格的可复现 SVG avatar。

授权Core code MIT; avatar style licenses vary by artist/style商用按资源确认资源：DiceBear 授权：Core code MIT; avatar style licenses vary by artist/style 商用：按资源确认 风险：未标注 归因：未标注 获取：Use the DiceBear package/API only after selecting an exact avatar style; record style name, creator, license URL, required attribution, seed, options, and whether the HTTP API or local generation is used. 注意：每个 avatar style 的授权不同，不能把 DiceBear 整体当成统一 MIT 素材库。dicebearDiceBearIllustrationCore code MIT; avatar style licenses vary by artist/style打开资源图标打开资源

Maki Icons

适合地图 POI、门店/设施分布、城市导览、物流、旅行、公共服务地图和需要小尺寸地理符号的可视化界面。

授权CC0-1.0商用可商用资源：Maki Icons 授权：CC0-1.0 商用：可商用 风险：未标注 归因：未标注 获取：Download selected 15px SVG POI icons, preserve the icon id/file name, and build a MapLibre/Mapbox sprite or inline SVG set with local color, hit-target, and label rules. 注意：图标授权不覆盖底图、瓦片、地理数据、字体、sprite 或 provider attribution。maki-iconsMaki IconsIconCC0-1.0打开资源组件打开资源

Tremor

适合 SaaS dashboard、分析后台、运营指标页、金融/销售/产品数据看板和需要快速落地数据丰富界面的 React 项目。

授权Apache-2.0商用可商用资源：Tremor 授权：Apache-2.0 商用：可商用 风险：未标注 归因：未标注 获取：Copy selected React/Tailwind/Radix dashboard components or follow Tremor's installation guide, then remap colors, charts, density, empty states, and data-loading states to local product tokens. 注意：复制 dashboard 组件后必须绑定真实数据语义、图例、单位、来源和空/加载/错误状态。tremorTremorComponentApache-2.0打开资源组件打开资源

daisyUI

适合 Tailwind 项目快速搭建按钮、表单、导航、modal、卡片、主题和后台/营销原型，尤其适合需要少写 utility class 的小团队。

授权MIT商用可商用资源：daisyUI 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：Install daisyUI as a Tailwind CSS plugin, set a local theme/token policy, and use component class names as a fast prototype layer before hardening product-specific semantics and states. 注意：它是组件 class 层，不会自动解决信息架构、表单文案、复杂状态和 a11y 回归。daisyuidaisyUIComponentMIT打开资源组件打开资源

HyperUI

适合营销站、应用页、eCommerce、表单、导航、CTA、卡片和不想安装组件包的 Tailwind HTML 原型。

授权MIT商用可商用资源：HyperUI 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：Copy individual Tailwind CSS v4 markup blocks into the project, then replace demo content, normalize spacing/type/color tokens, and test form, ecommerce, and marketing states with real copy. 注意：复制 HTML 片段后要补语义、表单错误状态、焦点、键盘路径和真实内容压力测试。hyperuiHyperUIComponentMIT打开资源组件打开资源

Origin UI

适合 React/Tailwind/shadcn 生态中快速获得 app UI、输入控件、导航、复杂表单、数据展示和产品界面片段。

授权MIT商用可商用资源：Origin UI 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：Add selected registry components with the documented shadcn-compatible flow, then localize tokens, dependencies, copy, validation, and Tailwind v4 assumptions before production. 注意：Tailwind v4 与旧项目版本要确认；legacy 组件路径要单独记录。origin-uiOrigin UIComponentMIT打开资源组件打开资源

Bits UI

适合 Svelte/SvelteKit 项目构建 headless、可访问、可深度品牌化的组件库，例如 dialog、select、combobox、menu、popover、slider 和 tabs。

授权MIT商用可商用资源：Bits UI 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：Install Bits UI in Svelte/SvelteKit, compose the unstyled primitives with local CSS variables, and document part/state attributes, keyboard contracts, and accessibility acceptance tests. 注意：无样式不等于无设计成本；仍需定义 token、状态文案、错误处理、动画和响应式。bits-uiBits UIComponentMIT打开资源3D打开资源

Three.js

适合 WebGL/WebGPU 3D hero、产品模型、数据空间、交互式场景、shader 原型、作品集和需要比 `<model-viewer>` 更深控制的前端体验。

授权MIT商用可商用资源：Three.js 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：Install `three` and use only the imports needed for the scene; pair every 3D surface with optimized GLB/KTX2 assets, loading states, reduced-motion/static fallback, keyboard-accessible controls, and mobile GPU budgets. 注意：库授权不覆盖示例模型、HDRI、纹理、音频或第三方 asset。three-jsThree.js3DMIT打开资源3D打开资源

KTX-Software / Basis Universal

适合 3D/WebGL/WebGPU 项目的 GPU 纹理压缩、KTX2 打包、GLB 贴图瘦身、移动端材质性能优化和大型 hero/产品模型发布前处理。

授权Files unique to KTX-Software generally Apache-2.0; Basis Universal components Apache-2.0 unless otherwise noted商用有条件商用资源：KTX-Software / Basis Universal 授权：Files unique to KTX-Software generally Apache-2.0; Basis Universal components Apache-2.0 unless otherwise noted 商用：有条件商用 风险：未标注 归因：未标注 获取：Use KTX tools in an asset pipeline to encode KTX2/Basis Universal textures; record source texture license, encoder settings, quality target, target GPU formats, and visual QA screenshots. 注意：工具授权不覆盖输入纹理、模型或输出资产的版权。ktx-softwareKTX-Software / Basis Universal3DFiles unique to KTX-Software generally Apache-2.0; Basis Universal components Apache-2.0 unless otherwise noted打开资源图案打开资源

Texturelabs

适合纸张、墨迹、颗粒、复古印刷、金属、划痕、叠加噪声和真实材质背板，用于品牌 hero、海报式页面、图像合成和高质感风格库案例。

授权Custom Texturelabs terms; many textures are free for personal and commercial use with exceptions商用有条件商用资源：Texturelabs 授权：Custom Texturelabs terms; many textures are free for personal and commercial use with exceptions 商用：有条件商用 风险：未标注 归因：未标注 获取：Download an exact texture page asset, record the texture URL/name/size, the terms URL, edits/crops/compression, and whether the use is an end product rather than a redistributed texture pack. 注意：不是 CC0/OSI 开源素材库；必须按 Texturelabs 自定义条款和具体下载页记录。texturelabsTexturelabsPatternCustom Texturelabs terms; many textures are free for personal and commercial use with exceptions打开资源运动打开资源

AutoAnimate

适合列表增删、筛选结果、accordion、表单区域、tag/chip、上传队列和低成本布局变化动效；尤其适合 agent 快速给状态变化补上过渡。

授权MIT商用可商用资源：AutoAnimate 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：Install `@formkit/auto-animate` or the framework adapter, attach it to a parent list/region, and test add/remove/reorder transitions with reduced-motion, focus, virtualization, and dynamic-height content. 注意：自动动效不等于交互设计；复杂时间线、滚动叙事和可访问状态仍需手工规划。auto-animateAutoAnimateMotionMIT打开资源图标打开资源

Primer Octicons

适合 GitHub 风格的开发者工具、代码审查、issue/PR 工作流、仓库管理、CLI 文档和紧凑产品 UI。

授权MIT for the Octicons code/assets; GitHub brand usage still follows GitHub trademark and brand boundaries商用有条件商用资源：Primer Octicons 授权：MIT for the Octicons code/assets; GitHub brand usage still follows GitHub trademark and brand boundaries 商用：有条件商用 风险：未标注 归因：未标注 获取：Install `@primer/octicons-react` or `@primer/octicons`, import individual icons, preserve MIT notices, and reserve GitHub-specific brand marks for legitimate GitHub references. 注意：Octicons 授权不等于 GitHub 商标授权；Octocat、GitHub 标识和产品联想需单独治理。octiconsPrimer OcticonsIconMIT for the Octicons code/assets; GitHub brand usage still follows GitHub trademark and brand boundaries打开资源Token打开资源

Spectrum Design Data

适合研究 Adobe Spectrum token、组件 schema、跨平台设计数据、token diff 和大型设计系统数据治理。

授权Apache-2.0商用可商用资源：Spectrum Design Data 授权：Apache-2.0 商用：可商用 风险：未标注 归因：未标注 获取：Use Spectrum token packages as reference or pipeline input, map token names to local semantic tokens, and keep Apache-2.0 notices with copied code/data. 注意：Spectrum token 语义很强，不要直接套用成非 Adobe 品牌视觉。spectrum-design-dataSpectrum Design DataTokenApache-2.0打开资源组件打开资源

Spectrum CSS

适合需要研究或复用 Adobe Spectrum CSS 组件、token-driven CSS custom properties、主题变量和企业级组件状态的项目。

授权Apache-2.0商用可商用资源：Spectrum CSS 授权：Apache-2.0 商用：可商用 风险：未标注 归因：未标注 获取：Install only needed `@spectrum-css/*` packages, wire the required token CSS, and treat Spectrum usage guidelines as design constraints instead of copying isolated styles. 注意：视觉语气非常 Adobe，非 Adobe 产品应抽取模式而不是整套照搬。spectrum-cssSpectrum CSSComponentApache-2.0打开资源3D打开资源

React Three Fiber

适合 React/Next.js 中的声明式 Three.js 场景、产品 3D hero、交互模型、粒子/Shader 原型和需要组件化 WebGL 的页面。

授权MIT商用可商用资源：React Three Fiber 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：Install `three @react-three/fiber`, match the package major to the React major, and verify the canvas with desktop/mobile screenshots plus reduced-motion/static fallbacks. 注意：库授权不覆盖模型、HDRI、纹理、音频和示例资产。react-three-fiberReact Three Fiber3DMIT打开资源3D打开资源

Drei

适合 R3F 项目快速接入相机、controls、环境、文本、加载器、实例化、HTML overlay 和常用 3D 交互助手。

授权MIT商用可商用资源：Drei 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：Install `@react-three/drei` alongside `three` and `@react-three/fiber`; import helpers individually and audit each helper for accessibility, asset, and performance impact. 注意：helper 便利性容易隐藏性能成本；Environment、Html、Text、Instances、ScrollControls 都要逐项测。dreiDrei3DMIT打开资源3D打开资源

gltfjsx

适合把 GLB/GLTF 模型转成可复用 R3F JSX 组件，便于产品模型、角色、图标级 3D 和可配置场景进入 React 代码库。

授权MIT商用可商用资源：gltfjsx 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：Run `npx gltfjsx model.glb --transform` for eligible assets, commit generated components only after checking model license, node naming, animations, compression, and visual parity. 注意：工具授权不覆盖输入模型和贴图授权。gltfjsx3DMITGLB to JSX打开资源3D打开资源

meshoptimizer

适合优化 Web 3D 模型的顶点缓存、过度绘制、简化、压缩和加载性能，尤其是 GLB/GLTF 发布前资产管线。

授权MIT with requested attribution in product documentation/credits商用可商用资源：meshoptimizer 授权：MIT with requested attribution in product documentation/credits 商用：可商用 风险：未标注 归因：未标注 获取：Use meshoptimizer through glTF Transform, native tools, or runtime decoders; record attribution, before/after file sizes, visual QA, and loader support. 注意：项目请求在用户文档或 credits 中保留 attribution。meshoptimizer3DMIT with requested attribution in product documentation/creditsmeshopt打开资源数据可视化打开资源

deck.gl

适合大规模地理/空间数据、点云、轨迹、热力、3D Tiles、地图叠加和 GPU 加速探索式可视化。

授权MIT商用可商用资源：deck.gl 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：Install `deck.gl` or scoped layer packages, pair with a licensed basemap/data source, and provide non-canvas summaries, filters, legends, and performance budgets. 注意：deck.gl 授权不覆盖底图瓦片、地理数据、3D Tiles、字体 glyph 或第三方数据条款。deck-gldeck.glData VisualizationMIT打开资源数据可视化打开资源

visx

适合 React 项目构建高度定制的 SVG 图表、品牌化数据组件、仪表盘图元、交互坐标轴和 D3 驱动但 React 管理的可视化。

授权MIT商用可商用资源：visx 授权：MIT 商用：可商用 风险：未标注 归因：未标注 获取：Install only needed `@visx/*` packages such as `@visx/shape`, `@visx/scale`, and `@visx/axis`; define chart tokens, accessibility labels, and interaction behavior locally. 注意：visx 不是开箱即用图表库；布局、主题、tooltip、键盘、屏幕阅读器和空状态都要自己定义。visxData VisualizationMITAirbnb visualization打开资源数据可视化打开资源

Plotly.js

当需求强调大量图表类型、交互探索或快速原型时可选 Plotly.js；agent 必须检查 bundle 体积、modebar 控件、键盘/读屏替代、颜色 token 和数据表 fallback。

授权MIT License商用可商用风险低风险归因保留许可声明资源：Plotly.js 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：Install `plotly.js`, `plotly.js-dist-min`, or a partial bundle; define chart theme, modebar behavior, static image/export policy, and accessible table fallback locally. 格式：JavaScript, TypeScript, SVG, Canvas 注意：默认 bundle 较重，生产界面优先评估 partial bundle 或替代库。plotly-jsPlotly.jsData VisualizationMIT打开资源数据可视化打开资源

Observable Framework

当任务更像数据应用/报告站而不是单个 React 组件时，agent 可选 Observable Framework；必须记录 loader 输入、构建输出、数据授权和交互图表 fallback。

授权ISC License商用可商用风险低风险归因保留许可声明资源：Observable Framework 授权：ISC License 商用：可商用 风险：低风险 归因：保留许可声明 获取：Create with `npm init @observablehq`, keep data loaders deterministic, document source data licenses, and export static dashboards only after checking embedded assets. 格式：Markdown, JavaScript, TypeScript, HTML 注意：不是通用 React 组件库；嵌入现有 Next 应用前要确认路由和构建边界。observable-frameworkObservable FrameworkData VisualizationISC打开资源数据可视化打开资源

Leaflet

当需求是普通 POI/区域/路线地图且优先轻量、成熟和插件生态时选 Leaflet；agent 必须单独核查瓦片、地理数据和图标授权。

授权BSD 2-Clause License商用可商用风险中风险归因保留许可声明资源：Leaflet 授权：BSD 2-Clause License 商用：可商用 风险：中风险 归因：保留许可声明 获取：Install `leaflet` and framework bindings only when needed; pair with licensed tiles/data, visible attribution, keyboard-accessible controls, and a non-map list/table fallback. 格式：JavaScript, CSS, GeoJSON, Raster Tiles 注意：Leaflet 代码授权不覆盖地图瓦片、OSM 数据、商业底图、POI 数据或 marker 图标。leafletLeafletData VisualizationBSD 2-Clause打开资源数据可视化打开资源

Turf.js

当地图 UI 需要空间计算而不是只渲染图层时，agent 可用 Turf；必须记录单位、坐标系统、精度误差、性能预算和地理数据授权。

授权MIT License商用可商用风险低风险归因保留许可声明资源：Turf.js 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：Install `@turf/turf` for broad use or individual `@turf/*` packages for bundle control; validate CRS, units, precision, and data-source licenses. 格式：JavaScript, TypeScript, GeoJSON 注意：Turf 是分析工具，不负责地图渲染、可访问替代或底图 attribution。turf-jsTurf.jsData VisualizationMIT打开资源组件打开资源

Floating UI

当 agent 需要自建浮层而不是直接用现成组件时，优先用 Floating UI 处理 collision、flip、shift、arrow、size 和 anchor positioning；交互语义仍由本地组件负责。

授权MIT License商用可商用风险低风险归因保留许可声明资源：Floating UI 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：Install `@floating-ui/react` or lower-level DOM packages, then pair positioning middleware with local focus, dismissal, aria, and portal contracts. 格式：TypeScript, JavaScript 注意：它解决定位，不自动完成 dialog/menu/listbox 的完整可访问语义。floating-uiFloating UIComponentMIT打开资源组件打开资源

TanStack Table

当 agent 生成复杂表格时，用 TanStack Table 管理 column model、sorting、filtering、selection、expansion 和 pagination；不要让它替代表格视觉层级和可访问表头关系。

授权MIT License商用可商用风险低风险归因保留许可声明资源：TanStack Table 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：Install the adapter for the target framework, define typed columns/data models, and implement markup, density, keyboard, empty, loading, sorting, filtering, pagination, and virtualization locally. 格式：TypeScript, JavaScript 注意：headless 不包含可访问表格设计、移动端重排和批量操作预览。tanstack-tableTanStack TableComponentMIT打开资源组件打开资源

TanStack Virtual

当列表数量大到影响性能时，agent 可用 TanStack Virtual 构建虚拟列表/窗口化渲染，只渲染可视项；必须同时记录 scroll owner、item measurement、focus retention 和屏幕阅读器替代策略。

授权MIT License商用可商用风险低风险归因保留许可声明资源：TanStack Virtual 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：Install the framework adapter, define a measured scroll container, stable item keys, overscan, dynamic-size strategy, and keyboard/focus behavior before using it in tables or feeds. 格式：TypeScript, JavaScript 注意：虚拟化会影响浏览器查找、读屏连续阅读、锚点、打印和 SEO；需要替代路径。tanstack-virtualTanStack VirtualComponentMIT打开资源运动打开资源

Embla Carousel

当 agent 需要轮播时，用 Embla 处理滑动和 snap；必须补齐可见控制、aria-live/当前页文本、暂停逻辑和移动端尺寸稳定。

授权MIT License商用可商用风险低风险归因保留许可声明资源：Embla Carousel 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：Install the framework adapter, use semantic slide markup, expose previous/next controls, pagination state, keyboard support, reduced-motion behavior, and no-autoplay default unless user-controlled. 格式：TypeScript, JavaScript 注意：carousel 容易隐藏内容和制造可访问风险；默认不要 autoplay。embla-carouselEmbla CarouselMotionMIT打开资源组件打开资源

cmdk

当 agent 生成 command palette 时，用 cmdk 做可组合命令列表和过滤；必须把命令语义、权限、空状态、加载状态、快捷键显示和执行反馈补齐。

授权MIT License商用可商用风险低风险归因保留许可声明资源：cmdk 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：Install `cmdk`, compose it inside a local dialog/sheet, and define command grouping, empty state, keyboard help, search indexing, permissions, and route/action side effects. 格式：TypeScript, JavaScript 注意：cmdk 不替代命令信息架构；命令分组、同义词、最近使用、权限和危险操作确认仍需设计。cmdkComponentMITMIT License打开资源组件打开资源

Sonner

当 agent 需要 toast 时，Sonner 可作为实现资源；但重要错误、表单校验、批量操作结果和安全事件不能只靠 toast，必须有持久状态。

授权MIT License商用可商用风险低风险归因保留许可声明资源：Sonner 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：Install `sonner`, mount one Toaster near the app root, and map toast variants to local tokens, live-region expectations, undo actions, and durable error surfaces. 格式：TypeScript, JavaScript 注意：toast 是短暂反馈，不适合承载必须阅读、必须恢复或需要审计的状态。sonnerSonnerComponentMIT打开资源组件打开资源

react-dropzone

当 agent 需要可定制 dropzone 而不是完整上传套件时检索 react-dropzone；它只负责文件选择/拖放交互，不替代 server validation、上传队列、进度和错误恢复。

授权MIT License商用可商用风险低风险归因保留许可声明资源：react-dropzone 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：Install `react-dropzone`, use `getRootProps` and `getInputProps` together, keep the native file input in the DOM, and implement upload, validation, progress, retry, and cleanup locally. 格式：TypeScript, JavaScript, React 注意：不是上传客户端；需要自己处理上传 endpoint、进度、取消、重试和安全校验。react-dropzoneComponentMITMIT License打开资源组件打开资源

Uppy

当 agent 需要完整上传产品体验而不是单个 dropzone 时检索 Uppy；必须选择最小插件集、定义 restrictions、隐私边界、Companion 部署、上传后端和本地状态映射。

授权MIT License商用可商用风险低风险归因保留许可声明资源：Uppy 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：Install `@uppy/core` plus only needed UI and uploader plugins such as `@uppy/react`, `@uppy/dashboard`, `@uppy/tus`, or `@uppy/xhr-upload`; self-host Companion when remote providers are used. 格式：TypeScript, JavaScript, React, CSS 注意：Dashboard 和远程来源会增加视觉、依赖和隐私复杂度；不要为简单头像上传过度接入。uppyUppyComponentMIT打开资源组件打开资源

FilePond

当 agent 需要比原生 input 更完整、但比 Uppy 更轻的上传组件时检索 FilePond；要记录插件、server contract、样式覆盖、图片处理和可访问状态。

授权MIT License商用可商用风险低风险归因保留许可声明资源：FilePond 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：Install `filepond` plus the framework adapter and only needed plugins such as file type/size validation or image preview; separate FilePond MIT code from optional paid image-editing products. 格式：JavaScript, TypeScript, React, Vue 注意：插件和图片编辑能力要逐项确认依赖与授权，Pintura 等产品不等同于 FilePond MIT。filepondFilePondComponentMIT打开资源组件打开资源

tus-js-client

当 agent 需要可靠可恢复上传能力时检索 tus-js-client；它是协议客户端，不提供完整 UI，必须与 dropzone/队列/后端 tus server/权限校验组合。

授权MIT License商用可商用风险低风险归因保留许可声明资源：tus-js-client 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：Install `tus-js-client`, pair it with a tus-compatible server endpoint, persist upload fingerprints carefully, and surface pause/resume/error/progress states in the local uploader UI. 格式：JavaScript, TypeScript, HTTP 注意：必须有兼容 tus 的服务端和 CORS/auth 策略；客户端库无法单独完成上传产品。tus-js-clientComponentMITMIT License打开资源运动打开资源

Rough Notation

当 agent 想要“手写标注/划重点”时，用 Rough Notation 做短文本装饰；不要把核心意义只放在动画标注里，正文结构仍要表达重点。

授权MIT License商用可商用风险低风险归因保留许可声明资源：Rough Notation 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：Install `rough-notation` or a framework wrapper, annotate only short text targets, expose reduced-motion/static emphasis, and keep semantic emphasis in HTML/CSS. 格式：TypeScript, JavaScript, SVG 注意：不适合后台密集 UI、大段正文或严肃合规界面。rough-notationRough NotationMotionMIT打开资源数据可视化打开资源

Mermaid

当 agent 需要把流程、架构、状态或数据关系写入文档并保持可维护时，优先考虑 Mermaid；用户输入的图定义要按安全模式和转义策略处理。

授权MIT License商用可商用风险低风险归因保留许可声明资源：Mermaid 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：Install `mermaid`, pin the major version, render only trusted or sanitized definitions, and pair complex diagrams with text summaries or table fallbacks. 格式：Markdown, JavaScript, SVG, HTML 注意：不要把不可信输入直接渲染为 SVG/HTML，需配置安全等级、转义和内容净化。mermaidMermaidData VisualizationMIT打开资源插画打开资源

Excalidraw

当 agent 需要“草图感”而不是精密 UI mockup 时，Excalidraw 可用于白板式构图；导入第三方 library 或品牌图形时仍要逐项查授权。

授权MIT License商用可商用风险低风险归因保留许可声明资源：Excalidraw 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：Install `@excalidraw/excalidraw` for embedded React whiteboards, keep `.excalidraw` source files, verify imported community libraries item-by-item, and separate Excalidraw+ service terms from MIT code. 格式：TypeScript, JavaScript, JSON, SVG 注意：Excalidraw+、托管协作和云服务条款不等同于代码库 MIT 授权。excalidrawExcalidrawIllustrationMIT打开资源组件打开资源

tldraw

当 agent 需要生产级无限画布 SDK 时，可评估 tldraw；但必须先确认 trial/commercial/hobby 授权、license key、商标和数据收集边界。

授权tldraw SDK License商用有条件商用风险中风险归因逐项确认资源：tldraw 授权：tldraw SDK License 商用：有条件商用 风险：中风险 归因：逐项确认 获取：Install `tldraw` for SDK exploration, but add a valid trial, commercial, or hobby license key before production; do not classify the SDK as permissive open source. 格式：TypeScript, JavaScript, CSS, JSON 注意：SDK 默认只允许开发用途，生产使用需要有效 license key。tldrawComponenttldraw SDK Licenseinfinite canvas SDK打开资源组件打开资源

React Flow / xyflow

当 agent 要实现可拖拽节点、连线、handles、minimap、controls 和自定义 React 节点时，React Flow 是优先候选；复杂布局需另配 layout engine。

授权MIT License商用可商用风险低风险归因保留许可声明资源：React Flow / xyflow 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：Install `@xyflow/react`, model nodes and edges as app data, define keyboard/selection affordances, and treat React Flow Pro examples/support as a separate paid boundary. 格式：TypeScript, JavaScript, CSS, SVG 注意：React Flow Pro 示例、优先支持和订阅服务不是 MIT 核心库的一部分。react-flowReact Flow / xyflowComponentMIT打开资源插画打开资源

RoughJS

当 agent 需要程序化生成手绘感图形而不是整套白板编辑器时，用 RoughJS；输出要可复现，并把语义保留在文本或数据层。

授权MIT License商用可商用风险低风险归因保留许可声明资源：RoughJS 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：Install `roughjs`, choose Canvas or SVG output, fix seeds/options for repeatable renders, and keep semantic meaning in labels, captions, or data structures. 格式：JavaScript, Canvas, SVG 注意：手绘感是视觉语气，不应替代信息架构或数据准确性。roughjsRoughJSIllustrationMIT打开资源数据可视化打开资源

Nivo

当 agent 需要快速做 React 图表且不想从 D3 primitives 手写时，可用 Nivo；必须补来源、单位、legend、空状态、可访问替代和性能边界。

授权MIT License商用可商用风险低风险归因保留许可声明资源：Nivo 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：Install only needed `@nivo/*` packages, choose SVG/Canvas/HTML rendering per data size, and define theme, legends, aria labels, table fallback, and SSR boundaries locally. 格式：TypeScript, JavaScript, SVG, Canvas 注意：React 绑定较强，非 React 项目不适合直接采用。nivoNivoData VisualizationMIT打开资源图标打开资源

Feather Icons

当现有项目没有主图标集、又需要简单线性图标时，Feather 可作为轻量候选；若项目已有 Lucide/Tabler，不要无规范混用。

授权MIT License商用可商用风险低风险归因保留许可声明资源：Feather Icons 授权：MIT License 商用：可商用 风险：低风险 归因：保留许可声明 获取：Install `feather-icons` or copy selected SVGs, normalize 24px viewBox/2px stroke/currentColor, and wrap icon-only buttons with accessible labels. 格式：SVG, JavaScript 注意：图标数量比大型集合少，复杂行业图标可能不足。feather-iconsFeather IconsIconMIT打开资源