BrutxUI 是一个面向 SaaS 应用、独立工具、仪表盘、开发者作品集、落地页和产品界面的新粗野主义设计注册表,适用于需要更强视觉冲击力的场景。
与作为单一 npm 依赖隐藏实现细节的方式不同,BrutxUI 以复制粘贴为首要原则。它遵循 shadcn/ui 推广的工作流:组件生成到你的项目中,基于 reka-ui 无障碍原语和 Tailwind CSS 构建,让你拥有代码并自由修改。
- 适合: SaaS 产品、分析仪表盘、开发者工具、落地页、Web3 门户,以及能承载大胆界面风格的创意作品集。
- 谨慎使用: 保守的企业仪表盘、面向患者的医疗记录、传统银行应用。当默认风格过于张扬时,Pastel(柔和) 和 Monochrome(单色) 预设可以柔化对比度。
BrutxUI 旨在与 shadcn/ui 协同工作,而非替代它:
- 共享工作流: BrutxUI 使用相同的
components.json布局模式。 - 共存: 你可以在同一项目中,对安静的 UI 表面使用
shadcn/ui组件,对按钮、页头、定价区域或其他高对比度区域使用 BrutxUI 组件。 - Tailwind 样式: 生成的文件合并到标准 Tailwind CSS 层中。
安装 BrutxUI 组件推荐使用 Brutx-Vue CLI:
Brutx-Vue CLI 负责 Tailwind 检测、CSS 令牌注入和包管理器检测。
# 在项目中初始化 BrutxUI 配置
npx brutx-vue@latest init
# 添加指定组件
npx brutx-vue@latest add button card badge
# 一次性安装全部组件
npx brutx-vue@latest add --all
# 升级已安装的组件(使用 --overwrite 覆盖本地文件)
npx brutx-vue@latest add --all --overwrite升级提示: 始终使用
npx brutx-vue@latest确保运行最新版 CLI。升级组件时加--overwrite会覆盖本地修改,请提前备份或使用版本控制。供应链安全: 官方 Registry 的 manifest 使用 Ed25519 签名,CLI 内置官方公钥,零配置开箱即验;强制校验用
--require-signature。默认源为 GitHub Release 资产(发布时构建上传),--offline完全离线使用本地缓存。
BrutxUI 在样式表中暴露 CSS 自定义属性,你可以全局柔化或强化粗野主义风格:
:root {
--brutal-border-width: 3px; /* 布局边框粗细 */
--brutal-radius: 0px; /* 锐利直角 */
--brutal-shadow-offset: 4px; /* 常规卡片/按钮偏移 */
}内置四种视觉预设:
- 经典粗野主义 (
.theme-classic): 深黑阴影、霓虹强调色、锐利直角。 - 柔和新粗野 (
.theme-pastel): 柔和色彩、较轻对比度、8px圆角。 - 纯粹单色 (
.theme-mono): 灰度色彩和更粗的黑色线条,适用于极简界面。 - 温暖粗野主义 (
.theme-warm): 温暖的泥土色调与深褐硬阴影,兼顾舒适性与个性。
想先可视化调参,可以打开主题实验室:它提供产品预览、组件矩阵、对比度检查和 token 覆盖率,并生成可复制的 .theme-custom CSS。
BrutxUI 内置中文(zh-CN,默认)和英文(en)语言包,支持运行时切换、局部覆盖和自定义翻译,无需 vue-i18n 依赖:
import { BrutxUIPlugin, en } from 'brutx-ui-vue'
app.use(BrutxUIPlugin, { locale: en })BrutxUI 提供了 Claude Code Skill,让 AI 助手能够根据 BrutxUI 设计规范生成组件代码。
将 skills/brutxui/ 目录复制到你的全局 Claude Code 配置目录:
# Windows
xcopy /E /I skills\brutxui %USERPROFILE%\.claude\skills\brutxui
# macOS / Linux
cp -r skills/brutxui ~/.claude/skills/brutxui安装后,在 Claude Code 中直接描述你的需求即可:
- "用 BrutxUI 创建一个登录表单"
- "帮我做一个新粗野主义风格的定价页面"
- "BrutxUI 的 Button 组件怎么用?"
Claude 会自动参考组件文档、样式规范和代码模板,生成符合 BrutxUI 设计规范的代码。
详细的本地开发设置、测试套件运行、组件注册表编译以及贡献提交流程,请参阅 贡献指南 (CONTRIBUTING.md)。
本项目基于原作者 dev-snake 的新粗野主义项目 BrutxUI (dev-snake/brutxui) 进行移植、开发与维护。非常感谢其优秀的设计和创意。
BrutxUI 是基于 MIT 许可证 的开源软件。