收录标准
- 运行条件透明——离线组件、独立页面与依赖在线模块的工程分别标记，先了解运行条件再取用。
- 结构与行为完整——组件源码同时包含预览所用的 HTML、CSS 与必要交互；外观示例的业务逻辑需由项目接入。
- 动效经得起看——缓动、层次、反馈细节打磨到位，能直接进项目，而不是半成品。
目录结构
前端设计素材库/
├─ index.html 素材库外壳（本页面）
├─ assets.js 自动生成的素材清单，通过 tools/ 中的源文件维护
├─ assets/ 文件型素材（fx-player.html 为特效单品播放器）
├─ 素材/ 原始素材归档（保持原样，库中直接引用）
├─ docs/ 自动生成目录、检查报告与运行条件
└─ tools/ 可重复构建、素材源文件与检查脚本
如何新增素材
两种方式，取决于素材的形态：
- 组件素材——在 tools/frag/practical-components.js 中维护固定 id、分类、标签、描述、preview、css 与可选 js。执行 node tools/build.js，预览、源码和演示页自动同步。
- 完整页面型素材——把 HTML 放进 assets/，在 tools/build-assets.js 的文件清单中登记路径与运行条件，再执行统一构建。目录和检查报告也会更新。
浏览器兼容说明
素材库外壳与普通组件支持双击 index.html 使用。以下素材建议通过本地 HTTP 服务打开：
- 文件型素材的「下载 HTML」按钮无法读取本地文件——此时可在新窗口打开演示页后 Ctrl/⌘ + S 另存，或直接复制 assets/ 下的文件。
- Three.js 页面还需要联网；本地服务可以使用 python -m http.server 8756 --bind 127.0.0.1。
- 多文件工程只提供原工程入口与嵌入代码，避免下载一个缺少依赖的 HTML。WebGL 点阵默认使用现有的单文件打包版。
更新日志
- 2026-10-15 · v1.5——新增节点画布、多轨时间轴、贝塞尔曲线编辑器和 FLIP 动态图库，提供「进阶交互与动效编辑」合集，合计 89 件素材、13 个合集。
- 2026-10-15 · v1.4——黑洞改用数值光线弯折重建；新增玻璃 Dock、快捷命令面板、扇形菜单、滚动文档目录、图像对比与排序清单，合计 85 件素材、12 个合集。
- 2026-10-15 · v1.3——按批注精简 16 件素材，保留 79 件并同步合集；Tabs 增加胶囊连续滑动与键盘选择，修正底部导航高亮对齐。
- 2026-10-15 · v1.2——新增 16 件实用组件、补录二维点云，增加数据展示 / 页面布局 / 状态反馈三类与三个场景合集。修复分类计数、组件源码缺失、预览实例串扰与导出演示交互；新增运行条件筛选、排序与可重复检查报告。
- 2026-10-05 · v1.1——扩充与精简：新增表单、导航两个分类与 25 件组件素材（表单控件 / 导航 / 反馈 / 加载 / 背景 / 文字），新增「表单套件」「导航与反馈」两个合集；同时移除 10 件实现过于简单或与他件重复的条目（脉冲点加载、线性进度条、徽章标签组、点阵网格背景、果冻按钮、面包屑、分页器、描边文字、扫光文字等）。
- 2026-10-04 · v1.0——建库：整合原型外壳，收录 24 个组件、33 件文件型素材（封面特效 / 主题开关 / 点云 / 生成艺术 / 数字孪生）、24 套风格模板与 6 个合集；新增收藏、搜索、完整 HTML 导出与键盘操作。
- 2026-09~10——素材积累期：封面特效画廊、点云系列、日月开关系列陆续完成。
素材来源
全部素材为个人练习与 vibecoding 过程中的原创产出（部分由 AI 辅助生成后手工打磨），仅限自用与学习参考。