solid-glass

给 AI 应用一套有质感、能直接用的界面设计系统

开源 free 设计创意

访问官网 ↗ GitHub ↗ 文档 ↗

GitHub 星标 ★ 1685

维护状态活跃

是否开源是

定价模式 free

项目预览

项目数据

分类设计创意

开发团队deeplethe

所属国家

官网地址https://deeplethe.github.io/solid-glass

GitHubhttps://github.com/deeplethe/solid-glass

定价模式free

价格说明开源免费使用

访问状态

是否开源是

开源协议MIT

主要语言TypeScript

技术栈/模型agent-ui,ai,ai-agents,chat-ui,design-system,llm,react,shadcn,shadcn-ui,tailwindcss,theme

GitHub 星标★ 1685

30天Star增速

HF 下载量

上线时间2026-10-12 00:00:00

代码更新—

仓库体积—

本站数据更新—

维护状态活跃

中文支持

访问方式

移动端支持

综合评分

收录时间2026-10-18

浏览次数0

项目介绍

solid-glass 是面向 AI 应用的设计系统，用材质感、物理感和技术感重新定义聊天与 Agent 界面。它解决的是当前 AI 产品界面同质化、缺乏品牌辨识度的问题：多数聊天 UI 直接套用通用组件库，视觉上像普通表单，难以传达智能体的能力边界与交互状态。项目基于 TypeScript、React、Tailwind CSS 和 shadcn/ui 构建，提供可复用的主题、组件与设计规范，覆盖对话流、消息气泡、工具调用展示、Agent 状态反馈等典型场景，让开发者能快速搭建有质感、有层次的 AI 交互界面。核心能力包括统一的设计令牌与主题体系、面向 Agent 场景的组件抽象、与 shadcn 生态兼容的定制方式，以及可组合的布局与动效基础。适合希望摆脱模板化外观、建立差异化 AI 产品视觉语言的团队。

Star 增长趋势

本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整

正在加载星标数据…

技术标签

使用教程

—

难度：进阶约 15 分钟部署方式：库/依赖 7 步

环境要求

已有一个 shadcn/ui 项目（React 19 + Tailwind CSS 4 + Base UI 组件）
Node.js 与 npm 可用，能执行 npx shadcn 命令
项目全局 CSS 中已导入 tailwindcss 与 shadcn 样式表

安装与启动步骤

1初始化 shadcn 项目

若无现成 shadcn/ui 项目，先用该命令初始化，会生成组件配置与全局样式表。
```
npx shadcn@latest init
```
2添加 Solid Glass 样式

直接从仓库拉取唯一的一份样式表 solid-glass.css 到项目中。
```
npx shadcn@latest add deeplethe/solid-glass/solid-glass
```
3在全局样式导入

按顺序在 tailwindcss、tw-animate-css、shadcn 样式之后导入，顺序不可颠倒。
```
@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import "./solid-glass.css";
```
4删除旧颜色变量

删掉 shadcn init 写入的 :root 和 .dark 颜色变量，Solid Glass 定义了同名变量。
5按需添加组件

组件安装方式相同，例如 status-glyph；面板、标签、工具步骤等按需逐个添加。
```
npx shadcn@latest add deeplethe/solid-glass/status-glyph
```
6本地运行查看效果

安装依赖并启动开发服务器，默认地址为 http://localhost:5191。
```
npm install
npm run dev
```
7构建与类型检查

构建产物输出到 dist/，可再跑一次类型检查确认无报错。
```
npm run build
npm run typecheck
```

关键配置

配置项	必填	说明	示例
`SOLID_GLASS_ORIGIN`	否	站点对外访问地址，组件间互相引用时使用	`https://deeplethe.github.io/solid-glass`
`SOLID_GLASS_BASE`	否	站点所在的子路径，默认指向仓库的 GitHub Pages	`/solid-glass`

如何确认成功

执行 npm run dev 后打开 http://localhost:5191，访问 /dev/examples 若无失败列表即正常。

常见问题

Q：需要改动已有的 shadcn/ui 组件源码吗？

A：不需要。Solid Glass 通过组件的 data-slot 和已有类名定位各部分，现有组件保持原样即可。

Q：支持亮色主题吗？

A：支持。暗色是设计原本的形态，亮色主题也一并提供，切换方式见官方安装文档。

Q：开发服务器端口是多少？

A：README 标注为 http://localhost:5191，直接访问该地址即可预览。

Q：导入样式后界面颜色没变化？

A：确认已删除 shadcn init 生成的 :root 与 .dark 颜色变量，并检查 solid-glass.css 导入在 tailwind 与 shadcn 样式之后。

注意事项

项目定位是单份样式表叠加在 shadcn/ui 之上，不改动你的组件代码
技术前提为 React 19、Tailwind CSS 4 和 Base UI 组件，版本不符可能表现异常
/dev/banner 与 /dev/examples 仅在开发环境可用，用于预览横幅与全部示例
更多说明见官方安装页 https://deeplethe.github.io/solid-glass/docs/installation

核心亮点

基于 shadcn/ui 与 Tailwind，组件可直接复制进项目，改造成本低
设计语言聚焦材质与物理感，视觉辨识度明显高于通用聊天模板
覆盖 Agent 对话、工具调用、状态反馈等 AI 场景，不只是基础 UI 组件

不足之处

项目仍处早期，组件覆盖面和长期维护节奏待观察
偏重视觉与主题层，复杂 Agent 交互逻辑仍需自行实现

适用场景

快速搭建有品牌感的 AI 聊天产品界面
为内部 Agent 工具统一视觉与交互规范
在 shadcn 项目中引入 AI 场景专用组件与主题

替代项目

assistant-ui、Vercel AI SDK

上一篇：taste-skill

下一篇：vectorcraft