面向 AI 编码代理的 Tailwind 设计系统 lint 工具,用规则约束样式并给出基于组件与主题的修复建议。
deeplethe/solid-glass
面向 AI 应用的设计系统,基于 shadcn/ui 的样式表与组件,带有类玻璃的质感。
- Star
- 2,042
- Fork
- 42
- 未关闭 Issue
- 5
- 最近提交
- 7天前
这是什么?
Solid Glass 是一套面向 AI 应用的设计系统,基于 shadcn/ui、Tailwind CSS 4 和 React 19 构建。它以一个样式表的形式提供,通过 data-slot 和已有的类名为 shadcn/ui 组件换上新外观,项目中已有的组件无需修改。
视觉风格介于扁平设计与液态玻璃之间:表面带有细微的边缘高光、细边框和柔和阴影,呈现为实体材质而非透明面板。目标是让界面保持平静易读,即使在回答流式输出、智能体运行和等待用户决策时,文字依然清晰。
除基础样式外,项目还提供面向智能体界面的组件,包括状态指示、输入框、工具步骤列表、diff 视图、提问卡片、上下文用量环、任务通知和推理内容展示等。此外还有用于调整主题变量的 Create 页面和若干示例界面,可通过 shadcn CLI 安装。
核心功能
- 01单个样式表即可为现有 shadcn/ui 组件换肤,无需修改组件代码。
- 02同时支持浅色与深色模式,深色为主要设计方案。
- 03Create 页面可调整厚度、色调、圆角、模糊等主题变量。
- 04提供面向智能体的组件,如回合状态、工具步骤、diff 视图和提问卡片。
- 05可通过 shadcn CLI 从仓库注册表直接安装。
适用场景
- 在现有 shadcn/ui 项目上搭建聊天或智能体交互界面。
- 以易读的布局展示流式 LLM 输出、工具调用和等待人工输入的状态。
- 无需从零编写 CSS,即可为 AI 产品建立统一的视觉主题。
收录于专题
标签
常见问题
- solid-glass 是什么?
- 面向 AI 应用的设计系统,基于 shadcn/ui 的样式表与组件,带有类玻璃的质感。 Solid Glass 是一套面向 AI 应用的设计系统,基于 shadcn/ui、Tailwind CSS 4 和 React 19 构建。它以一个样式表的形式提供,通过 data-slot 和已有的类名为 shadcn/ui 组件换上新外观,项目中已有的组件无需修改。
- solid-glass 可以免费使用吗?用的什么许可证?
- solid-glass 以 MIT 许可证开源。用于商业产品前,请先确认许可证条款。
- solid-glass 还在维护吗?
- 活跃维护中。solid-glass 最近一次提交是在 2026年10月31日。
- solid-glass 适合用来做什么?
- 在现有 shadcn/ui 项目上搭建聊天或智能体交互界面。 以易读的布局展示流式 LLM 输出、工具调用和等待人工输入的状态。 无需从零编写 CSS,即可为 AI 产品建立统一的视觉主题。
- 在哪里获取 solid-glass?
- 源代码和安装说明在 GitHub 上:https://github.com/deeplethe/solid-glass
概要由 AI 根据项目 README 生成;GitHub 数据每日更新。
相关项目
3316+29 本周72TypeScriptMIT维护活跃更新于 5天前
Hermes Agent 的网页工作台,把聊天、文件、终端、记忆、技能和智能体监控整合在一个界面中。
6799+24 本周1060JavaScriptMIT更新于 前天
shadcn/ui 的 Svelte 社区移植版,提供可访问、可定制、可直接复制到项目中的组件。
9246+20 本周580TypeScriptMIT更新于 4天前
基于 OpenUI 的开源 Next.js 项目,复现 ChatGPT 的 Intelligent UI,将模型回答以可交互的地图、图表、表单和工具形式呈现。
949+65 本周84TypeScriptMIT更新于 昨天
一个基于 React 和 Tailwind CSS 的动效组件库,可直接复制到 Next.js 或 shadcn/ui 项目中使用。
2.3万+138 本周1231MDXMIT维护活跃更新于 前天
基于 Shadcn UI 和 Vite 构建的管理后台界面模板,支持深浅色模式与 RTL 布局。
1.7万+257 本周2495TypeScriptMIT更新于 2个月前