设计系统从零搭太累？Better Design：29套开箱即用的shadcn/ui组件库，让产品一夜拥有大厂颜值

前端开发有一件怪事。组件库满天飞，真到了做项目，还是得从零调样式。按钮改圆角，卡片换阴影，配色重新定，一套设计系统折腾下来，少则一周，多则半个月。

老板总爱指着大厂产品说"我们要这个感觉"。Linear 的紫色渐变怎么调、Stripe 的海军蓝阴影怎么实现，没人告诉你。我见过太多团队在 Figma 里对着截图一像素一像素比对，最后做出来的东西还是四不像。

Better Design 解决的就是这个问题。二十九套设计系统，每套对应一个成熟的视觉风格。

Linear 的开发者工具风、Airbnb 的温暖邀请感、Stripe 的金融科技调性、Vercel 的极简黑、Notion 的文档质感、Apple 的产品页高级感、Supabase 的开发者平台绿，甚至 Figma 那种设计工具的紫色光晕。每套系统约八十七个组件，从手风琴到排版，一应俱全。想要哪套风格，一条命令装进项目。

这个项目打动我的地方，是它没有发明"万能"的设计语言，直接把业界验证过的视觉方案打包给你。

Linear 用紫色点缀、多层阴影、工程美学；Airbnb 用珊瑚色主调、温暖邀请；Stripe 用靛蓝 [#635BFF](javascript:😉、标志性的海军紫阴影。真金白银砸出来的品牌识别度，现在可以直接用，不用从零摸索。所有设计系统基于 shadcn/ui 构建，组件代码可读、可改、可 fork，不存在封装得严严实实的黑盒。

我总觉得那些号称"开箱即用"的组件库，实际用起来总有这样那样的限制。

Better Design 的做法很聪明。每个设计系统拆成两部分：registry 目录放 CLI 安装时读取的配置，components 目录放原始 .tsx 源码。想直接装，用命令行；想看代码怎么写的，去 GitHub 翻；想改某个组件的样式，直接改源文件。这种透明度在开源项目里不多见。大部分设计系统要么只给编译后的包，要么源码写得让人看不懂。

二十九套设计系统听起来多，但它们并非随意堆砌。

暗色系的开发者工具风、亮色系的产品页风、极简风、玻璃拟态风，甚至工业风和电视风。每种风格给出完整的组件覆盖，不存在只做了按钮和卡片就完事的情况。Cinematic Dark 专门针对流媒体场景，超深色背景、白色 CTA、极简阴影、内容优先的布局；Monochrome Industrial 用 OLED 黑、点阵字体、信号灯红点缀、锐利边角，完全是另一种气质。

无论做 SaaS 工具、电商平台、内容社区还是金融产品，都能找到一套接近想要的视觉方案。

安装方式足够简单。项目用的是 shadcn/ui，一条命令就能把任意组件装进去。CLI 自动处理依赖、CSS 变量和 globals.css 的配置，不用手动改一堆文件。即插即用的体验，在开源设计系统里算相当友好了。想把整套设计系统都装进去，也完全可以，每个系统都有 index.json 作为清单。

Better Design 把设计系统的门槛降到了接近零。

以前想给产品换一套视觉风格，要么花大价钱请设计公司，要么自己从零搭，要么在开源项目里找半天，找到的还未必完整。现在可以在 better-design.com 上把二十九套设计系统都预览一遍，选一套最接近想要的，装进项目，再根据业务需求微调。整个过程可能一两个小时，而不是一两周。对创业团队、独立开发者、甚至大厂里需要快速出原型的团队来说，都是一种解放。

用了这套系统就能做出和 Linear、Stripe 一样好的产品？我并不这么认为。设计只是产品的一部分，交互、内容、业务逻辑才是核心。

但至少在视觉层面，不用再从零造轮子了。二十九套设计系统，二十九个起点，每个起点都已经被验证过可行。剩下的，就看怎么在这些基础上，做出真正属于自己的东西。

https://github.com/marvkr/better-design