卧槽！发现这个网站后，我用 AI 做的页面再也不丑了

用 AI 写前端的朋友们，是不是已经被紫色看吐了？

不管你怎么描述需求，AI 生成出来的页面永远是那套：紫色渐变背景，圆角卡片，加一点毛玻璃效果。

换个模型试试？还是紫色。换个提示词？依然紫色。

说白了，AI 的审美被训练数据锁死了。它见过最多的 UI 模板就长那样，你不给它「喂」点好东西，它永远只会输出那几套。

想要提高 AI 的设计水平，其实和提升人的审美一样，得吃点细糠。

当你看过足够多优秀的 UI 之后，你才知道什么叫高级，什么叫质感。

问题是，去哪找这些高质量的 UI 参考？

今天给大家分享一个我最近发现的宝藏网站，21st.dev。

21st.dev 是一个高质量 UI 组件库，里面全是设计师和开发者上传的精品组件。

21st.dev 首页

打开首页你就能感受到，这个网站的组件质量和我们平时用 AI 生成的完全不是一个级别。

Navigation、Hero、Header、Pricing、Effect、Shader 各种分类应有尽有，每一个组件都是经过精心设计的。

先给大家看两个效果，感受一下什么叫「高级感」。

第一个是 3D 机器人 UI 界面，带交互动效的那种，鼠标移上去整个模型会跟着动。

第二个更炫，粒子漩涡鼠标交互，鼠标滑过的地方粒子会跟着旋转扩散，这种 Shader 效果平时想都不敢想。

这些效果如果让你从零写代码实现，可能得折腾好几天。

但在 21st.dev 上，它们都是现成的组件。

不只是这些炫酷的效果组件，日常开发中最常用的定价页面也有大量模板可以选。

定价组件模板

简约风、卡片风、渐变风、深色主题，各种风格的 Pricing Section 随便挑。

那怎么把这些组件用到自己的项目里呢？

这就是最爽的地方了。21st.dev 的每个组件都提供了配套的提示词，你只需要把提示词复制出来，丢给 Claude Code 就行。

操作流程非常简单：在 21st.dev 上找到你喜欢的组件，点击复制提示词，然后打开 Claude Code，直接粘贴进去。

将提示词复制到 Claude Code 中

Claude Code 会自动帮你把组件集成到本地项目中，包括 shadcn 项目结构、Tailwind CSS 样式、TypeScript 类型，全部一步到位。

不需要手动安装依赖，不需要自己调样式，Claude Code 全给你搞定。

有一点要注意，21st.dev 的提示词复制功能需要登录才能用。打开网站注册一下就行，不麻烦。

说实话，自从发现了这个组合之后，我做前端页面的效率直接起飞了。

以前用 AI 生成 UI 总觉得差点意思，现在有了高质量的组件参考，出来的效果完全不一样。

不是 AI 不行，是我们给它的参考不够好。

如果你也受够了千篇一律的紫色 UI，试试 21st.dev 加 Claude Code 的组合。

网站地址：21st.dev

评论区聊聊你平时用 AI 做前端遇到的坑吧。

我是 AI 产品普洱，咱们下期见。

文章来自于微信公众号 "AI产品普洱"，作者 "AI产品普洱"