Solid Glass：给 AI 界面用的克制玻璃质感样式

做 AI 对话或 Agent 界面的人，常遇到一个老问题：回复在流式输出，工具在后台跑，决策又等着人点确认。界面一花，读者就得在文字和背景之间来回拉扯。Solid Glass 是 DeepLethe 做的一套 shadcn/ui 主题样式表，立场很清楚：介于扁平设计和液态玻璃之间，只让轮廓透出来。它本身就是一个 CSS 文件，靠 shadcn/ui 组件已有的 data-slot 与 class 找到每一部分，已有的组件不用改。仓库 2026 年 10 月 12 日创建，采用 MIT 许可，主要语言 TypeScript，截至 2026 年 10 月 19 日有 2,231 颗星。

核心功能

• 一份样式表，不动组件：样式表用 data-slot 和组件已有的 class 找到 shadcn/ui 的每个部分，所以你现有的组件不需要改。
• 玻璃的三种厚度，一种状态：颜色、三种厚度的玻璃、一种状态与动效都写在一个文件里（src/solid-glass.css）。
• 面向 Agent 的界面部件：status-glyph 用三个光点表示一轮对话正在进行；turn-status、composer、tool-steps、diff-view、ask-card、context-ring、task-notice 与 reasoning 分别对应状态行、输入框、执行步骤、代码 diff、提问、上下文占用、任务通知与思考过程。
• Create 页把旋钮摆出来：厚度、色调、图表色、字体、圆角、边缘和模糊都能调，每改一项预览即时变化，页面还会给出对应的几行 CSS。
• Blocks 页给整屏示例：agent-workspace 是一个由组件拼成的工作台，包含会话列表、对话线程、文件与后台任务，可以直接读，也可以直接复制。

README 解释了这样设计的理由：AI 应用的信息一直在变，回复在流式输出、Agent 在跑任务、决策在等人确认。所以界面要保持平静，中性色减少干扰，深度用来建立层级，颜色和动效只留给有意义的反馈。整套主题用轻量 CSS 写成，和 shadcn/ui 组件一起使用，亮色与暗色模式都支持。

典型使用场景

• Agent 工作台或 AI 对话前端：需要同时呈现流式回复、工具步骤、待确认的提问和上下文占用的团队，Solid Glass 的部件正好对应这些界面元素。
• 已经在用 shadcn/ui 的产品：想换一套视觉基调，又不想重写组件。装好样式表后，把 shadcn init 写入的 :root 与 .dark 颜色变量删掉即可，这是 README 的要求。
• 想先看效果的人：不用装任何东西，先在官网的 Blocks 页和 Create 页里看一看、调一调，再决定要不要引入。

如果你想先用文字生成界面结构，可以看看站内的 OpenUI；Solid Glass 解决的是另一件事：给已经用 shadcn/ui 搭好的界面换一层材质。

快速上手

README 的做法是先初始化 shadcn/ui 项目，再添加样式表：

npx shadcn@latest init
npx shadcn@latest add deeplethe/solid-glass/solid-glass

添加完成后，在样式入口里把 @import "./solid-glass.css"; 放在 Tailwind 与 shadcn 的样式之后。想在本地看全部页面，可以克隆仓库后执行 npm install 与 npm run dev，地址是 http://localhost:5191。

小结

适合已经用 shadcn/ui、React 19 与 Tailwind CSS 4 的团队，想给 AI 界面一套克制、可读的视觉基调。不适合两类项目：没有 shadcn/ui 基础的，以及必须保留原有颜色体系的。需要留意两点。其一，仓库只有一周多的历史，README 的数字与组件清单可能还会变，安装前先看当天的版本。其二，样式表使用和 shadcn/ui 相同的变量名，会直接覆盖 :root 与 .dark 里的颜色，已有的颜色设置要先迁移。许可证为 MIT，主要语言 TypeScript。