后来发现，问题不在 AI 写得差，而是你没给它一套"设计系统"去遵循。组件库就是这个东西。

为什么一人公司更需要组件库

独立开发者没有专职设计师，也没时间去一个像素一个像素地调 CSS。组件库的价值很简单：你告诉 AI "用 shadcn/ui 的 Card 组件做一个定价页面"，出来的东西直接就是专业级的。不需要你懂设计，不需要你写一行样式代码。

同一个需求，不用组件库可能要调半天样式，用了组件库基本上生成即可用。这个效率差距对一人公司来说是质的区别。

四个值得认真看的组件库

我把目前主流的四个梳理了一下，各有各的适用场景：

  • HeroUI——做落地页的神器。如果你在做 SaaS 产品需要一个好看的营销页面，首选这个。组件视觉效果开箱即用就很惊艳，动画、渐变这些都帮你处理好了。
  • shadcn/ui——代码直接复制进你项目，不是 npm 装一个包，而是把源码拉到本地。好处是你可以随便改，坏处是你得自己维护。对于想深度定制的开发者来说，这个最灵活。
  • Ant Design——后台管理界面的老大哥。表格、表单、数据展示这些复杂组件做得非常成熟。如果你在做 B 端工具或者管理后台，基本不用考虑别的。
  • Material UI——最老牌，生态最全。社区资源多，遇到问题基本都能搜到答案。适合不想踩坑、求稳的场景。

实际怎么用：两个典型场景

场景一：用 HeroUI 搭落地页。 创建好项目之后，直接在 AI IDE 里给一段提示词，比如"用 HeroUI 组件做一个 AI 写作工具的落地页，包含 Hero 区域、功能介绍、定价表"。AI 会自动调用 HeroUI 的 Button、Card、Navbar 这些组件，生成的页面基本能直接用。不满意的地方再一轮一轮迭代就行。

场景二：用 shadcn/ui 做产品界面。 shadcn/ui 的安装方式比较特别，是通过 CLI 把组件代码直接拉到你的 components/ui 目录下。这意味着 AI 在生成代码的时候可以直接引用本地文件，改起来也方便。适合做 Dashboard、设置页面这种需要大量表单和数据展示的场景。样式定制直接改源文件就行，不用跟 CSS-in-JS 的覆盖规则斗智斗勇。

给 AI 写前端的一个关键技巧

不管用哪个组件库，在提示词里一定要明确指定："使用 XXX 组件库"。AI 不知道你装了什么，你不说它就会自己瞎写原生 HTML 加一堆内联样式。另外，把组件库的文档链接喂给 AI（比如加到项目的 rules 文件里），能显著提升生成质量。

说到底，组件库对独立开发者来说不是锦上添花，而是让你一个人也能做出专业级产品界面的基础设施。花半小时选一个适合自己场景的，后面能省几十个小时。