📌 项目：https://github.com/deeplethe/solid-glass | 星数：2002 | 语言：TypeScript | 协议：MIT | 更新：2026-10-18
Solid Glass是deeplethe推出的AI应用设计系统，2002颗星，TypeScript编写，MIT协议。它的核心理念是"材质物理可触"——为AI应用界面提供一套从设计令牌到组件库的完整系统，让AI产品的界面不只是好看，而是有物理质感。灵感来自苹果Vision Pro的玻璃材质和微软Fluent Design的深度层，Solid Glass定义了一套材质语言：玻璃、亚克力、金属、织物，每种材质有光学属性（折射、模糊、反射）和触觉反馈参数。组件库基于React和TypeScript，提供50+开箱即用的AI界面组件——对话气泡、流式输出框、工具调用卡片、多模态预览、思维链折叠面板，全部内置材质物理渲染，让AI产品一上手就有高级感。
AI应用设计系统是个新兴领域，对UI设计方法论感兴趣可参考Oil UI设计技能指南；想了解等距图形在界面设计中的应用可看Hairline等距图形指南，WebGPU着色器方向可参考Shader Effects WebGPU组件。
材质物理渲染引擎：Solid Glass内置一个轻量WebGL材质渲染器，实时计算玻璃折射、环境反射、景深模糊和光照阴影。设计师调一个"玻璃厚度"参数，组件自动算出折射率和边缘高光。支持运行时切换材质预设，一个界面可以从"通透玻璃"一键切换到"磨砂亚克力"，无需重做设计稿，所见即所得。
AI原生组件库：50+组件专为AI交互设计——流式Token输出框（打字机动画和中断控制）、工具调用可视化卡片（展示AI调用了什么API）、思维链可折叠树、多模态结果预览（图片/音频/3D）、Agent状态指示器。每个组件支持材质属性注入，玻璃对话气泡会根据背景自动调整透明度。
设计令牌与主题系统：定义了完整的材质令牌——折射率、模糊半径、反射强度、阴影深度、触觉强度。主题系统支持亮色/暗色/自适应三种模式，每个主题可以独立配置材质参数。提供Figma插件，设计师在Figma里调材质参数，导出代码直接可用，设计开发无缝衔接。
| ✅ 优势 | ❌ 劣势 |
|---|---|
| 材质物理真实，视觉质感远超普通UI库 | WebGL依赖，低端设备性能吃力 |
| AI原生组件，省去自己造轮子 | 学习曲线陡，材质参数调试复杂 |
| TypeScript全类型，开发体验好 | 组件库50+，按需引入配置繁琐 |
| Figma插件设计到代码无缝衔接 | 主题定制文档不完善 |
| MIT协议免费商用 | 仅支持React，Vue/Svelte未适配 |
目前仅提供React组件库。官方规划中Vue适配在路线图上但无时间表。Svelte社区有人做了非官方移植。非React项目可以参考材质令牌系统（纯CSS变量）和WebGL渲染器（框架无关）单独使用。
中高端机型（骁龙8系/A14以上）流畅运行玻璃材质。低端机型建议关闭实时折射用静态模糊贴图替代。组件提供performanceLevel属性，可按设备能力自动降级。
可以。Solid Glass的材质令牌导出为CSS变量，Tailwind配置里映射即可。组件样式用CSS-in-JS，与Tailwind utilities不冲突。官方文档有Tailwind集成示例。