Загрузка видео...

Не удалось загрузить видео

На главную

一个特别优雅、冷静甚至有点“性冷淡”的 UI 库 名字叫：Base UI 如果你的Vibecoding 项目 UI 设计还想突破 可以试试让 AI 调用此库

Jackywine's profile picture

Jackywine

42,221 subscribers

31,595 просмотров • 6 месяцев назад •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 0

Нет доступных комментариев

Здесь появятся комментарии из оригинального поста

Похожие видео

🔥又发现一个前端神器！这个开源项目能一键复刻大厂 UI ，在 GitHub 揽获 84K stars 整合了 50+ 大厂（Google、Apple、Airbnb 等）的设计系统，把颜色、字体、排版、组件、响应式这些核心规范用 Markdown 格式整理好了。 放到项目根目录，AI 读取后就能参照对应大厂风格生成 UI，节省自己翻设计文档的时间。 如果你经常要对照大厂 UI 做还原，值得收藏试试。
0:21

🔥又发现一个前端神器！这个开源项目能一键复刻大厂 UI ，在 GitHub 揽获 84K stars 整合了 50+ 大厂（Google、Apple、Airbnb 等）的设计系统，把颜色、字体、排版、组件、响应式这些核心规范用 Markdown 格式整理好了。 放到项目根目录，AI 读取后就能参照对应大厂风格生成 UI，节省自己翻设计文档的时间。 如果你经常要对照大厂 UI 做还原，值得收藏试试。

阿西_出海

48,681 просмотров • 3 месяцев назад

有人用过这个 MagicUI 没有？ 是一个全新思路的组件库，主打一个 Landing page 上面的动画视觉效果，完美适配 shadcn/ui ，组件我全都感受了一遍，好喜欢的，如果大家想把页面的颜值上升一个等级，强烈建议试试看。Stars：9.3K 我很喜欢那个 Border Beam 的效果。一点小小的提升让我看了以后爽心悦目。
0:23

有人用过这个 MagicUI 没有？ 是一个全新思路的组件库，主打一个 Landing page 上面的动画视觉效果，完美适配 shadcn/ui ，组件我全都感受了一遍，好喜欢的，如果大家想把页面的颜值上升一个等级，强烈建议试试看。Stars：9.3K 我很喜欢那个 Border Beam 的效果。一点小小的提升让我看了以后爽心悦目。

Viking

131,478 просмотров • 1 год назад

这个 AI UI 网站火了，我见过最好的UI设计😃😲 Beautiful UI 是 Shane Levine 做的一套专门给 AI 原生产品设计的 UI 组件库。 以前 shadcn/ui 解决的是按钮、表格、弹窗这些传统网页组件，而 Beautiful UI 开始解决 AI 产品真正需要的东西。 里面已经做了 19 类组件：AI Thinking、流式回答、Tool Call、任务执行状态、Agent 操作前审批、引用来源、上下文卡片、AI 修改 Diff、代码生成、Prompt 输入框等等。 如果你做 Agent、AI SaaS、Claude/Cursor 类产品，很多交互几乎可以直接参考甚至复制过去。 想要网站的同学，评论区吱声……
0:44

这个 AI UI 网站火了，我见过最好的UI设计😃😲 Beautiful UI 是 Shane Levine 做的一套专门给 AI 原生产品设计的 UI 组件库。 以前 shadcn/ui 解决的是按钮、表格、弹窗这些传统网页组件，而 Beautiful UI 开始解决 AI 产品真正需要的东西。 里面已经做了 19 类组件：AI Thinking、流式回答、Tool Call、任务执行状态、Agent 操作前审批、引用来源、上下文卡片、AI 修改 Diff、代码生成、Prompt 输入框等等。 如果你做 Agent、AI SaaS、Claude/Cursor 类产品，很多交互几乎可以直接参考甚至复制过去。 想要网站的同学，评论区吱声……

比特币橙子Trader

20,305 просмотров • 14 дней назад

这两天用Claude Design 给EasyApp2.0版本重新设计UI，得到的一些启发，希望给大家做一些参考。 😂Claude Design 非常消耗token，我已经消耗了 5次 5小时的用量，才做到如图所示的效果，其实还有一些地方可以继续优化/调整 1：首页找到你要参考的设计图，粘贴到对话框，Opus4.8多模态能力非常强，他能够很好的捕捉到参考图的设计系统。让Claude 以此为背景/模板来做创作，防止Claude 随意发挥，避免来回返工，消耗不必要的token 2：如果你对已存在的项目做UI优化，你可以选择Github connected、或者Link local code，这样做是让Claude读取你的代码，更加了解你当前的代码、功能，设计出来的UI更加符合你的业务逻辑 3：对于生成玩之后的设计图，局部微调效果，就用Commons功能，指哪打哪，非常精准。可以一次标记多个Commons，最后一次性发给Claude来修改。这一步基本上会占据整个设计时间的80%，非常琐碎 4：多试试Tweaks，Claude会在Tweaks中提供多种设计，选择一种你最喜欢的一套，作为最终的设计Token 5：可以让Claude 针对每个页面做成可交互的原型，带有动画效果，这样最终在还原到项目源码时，动画效果AI会自动带上，无需后续在手动告知AI 6：最后沉淀为自己的一套设计系统，以供后续复用
1:02

这两天用Claude Design 给EasyApp2.0版本重新设计UI，得到的一些启发，希望给大家做一些参考。 😂Claude Design 非常消耗token，我已经消耗了 5次 5小时的用量，才做到如图所示的效果，其实还有一些地方可以继续优化/调整 1：首页找到你要参考的设计图，粘贴到对话框，Opus4.8多模态能力非常强，他能够很好的捕捉到参考图的设计系统。让Claude 以此为背景/模板来做创作，防止Claude 随意发挥，避免来回返工，消耗不必要的token 2：如果你对已存在的项目做UI优化，你可以选择Github connected、或者Link local code，这样做是让Claude读取你的代码，更加了解你当前的代码、功能，设计出来的UI更加符合你的业务逻辑 3：对于生成玩之后的设计图，局部微调效果，就用Commons功能，指哪打哪，非常精准。可以一次标记多个Commons，最后一次性发给Claude来修改。这一步基本上会占据整个设计时间的80%，非常琐碎 4：多试试Tweaks，Claude会在Tweaks中提供多种设计，选择一种你最喜欢的一套，作为最终的设计Token 5：可以让Claude 针对每个页面做成可交互的原型，带有动画效果，这样最终在还原到项目源码时，动画效果AI会自动带上，无需后续在手动告知AI 6：最后沉淀为自己的一套设计系统，以供后续复用

sunshineLx

10,608 просмотров • 2 месяцев назад

偶然发现 Apple 有一个叫 PrototypeTools 的 framework 用来给内部设计师调参，系统里大量 UI 的交互和动画细节都可以实时调整，并且还支持远程控制。
1:08

偶然发现 Apple 有一个叫 PrototypeTools 的 framework 用来给内部设计师调参，系统里大量 UI 的交互和动画细节都可以实时调整，并且还支持远程控制。

Cyandev

60,706 просмотров • 2 месяцев назад

#AI开源项目推荐：photoshot 开源 AI 头像生成器 Web 应用程序，包含了完整的网站、AI的API调用、支付等功能，即使你不做同类应用，如果你想做类似的收费AI项目，可以帮你节约很多前期开发工作。 技术栈： ▲ Next.js： Web 应用程序 🖼 Chakra UI ：UI 组件的 📦 Prisma：数据库 ORM 🧠 Replicate：一个运行机器学习模型的云平台 💰 Stripe：Stripe 支付 👩‍🎨 Stable Diffusion：开源文本到图像生成模型
1:28

#AI开源项目推荐：photoshot 开源 AI 头像生成器 Web 应用程序，包含了完整的网站、AI的API调用、支付等功能，即使你不做同类应用，如果你想做类似的收费AI项目，可以帮你节约很多前期开发工作。 技术栈： ▲ Next.js： Web 应用程序 🖼 Chakra UI ：UI 组件的 📦 Prisma：数据库 ORM 🧠 Replicate：一个运行机器学习模型的云平台 💰 Stripe：Stripe 支付 👩‍🎨 Stable Diffusion：开源文本到图像生成模型

宝玉

128,472 просмотров • 3 лет назад

给大家分享一个用Codex优化前端UI的方法，贼好用！ 也是GPT-5.6真滴吊。 我优化我们前两天开源的workbuddy蓝皮书官网UI就是这么干的。也是近期我在AI上的一个ah moment。 我的经验是开发一个网站，可以先只管功能，还有页面布局。这些搞定之后，再来优化前端UI。 否则你可能一开始就会在UI上卡很久。 如果没有灵感，可以去各大前端模板网站上去找，找你喜欢的网页。 前端模板网站： 以上是我收集的几个前端模版站点，效果挺🐂🍺的。应该还有更多模板站，欢迎各位大佬评论区分享一下 找到你喜欢的模板，可以截图丢给codex，用GPT-5.6 Sol 极高，告诉它 参考截图的风格，设计网站的UI。 设计完，让它把效果图画出来，然后，你挑一个满意的图。就可以切换成GPT-5.6 Sol 中，开干啦～ 最后，欢迎大家参与workbuddy蓝皮书的共创！ 蓝皮书开源地址： 官网：
1:14

给大家分享一个用Codex优化前端UI的方法，贼好用！ 也是GPT-5.6真滴吊。 我优化我们前两天开源的workbuddy蓝皮书官网UI就是这么干的。也是近期我在AI上的一个ah moment。 我的经验是开发一个网站，可以先只管功能，还有页面布局。这些搞定之后，再来优化前端UI。 否则你可能一开始就会在UI上卡很久。 如果没有灵感，可以去各大前端模板网站上去找，找你喜欢的网页。 前端模板网站： 以上是我收集的几个前端模版站点，效果挺🐂🍺的。应该还有更多模板站，欢迎各位大佬评论区分享一下 找到你喜欢的模板，可以截图丢给codex，用GPT-5.6 Sol 极高，告诉它 参考截图的风格，设计网站的UI。 设计完，让它把效果图画出来，然后，你挑一个满意的图。就可以切换成GPT-5.6 Sol 中，开干啦～ 最后，欢迎大家参与workbuddy蓝皮书的共创！ 蓝皮书开源地址： 官网：

袋鼠帝

60,792 просмотров • 1 месяц назад

如果你用这些网站，做不出顶级UI前端。 我让在座的一人搞一次，立贴为证。 1️⃣在线 3D / 交互设计编辑器入口。 链接： 2️⃣UI 设计灵感收集网。 链接： 3️⃣一个面向前端和 AI 编程助手的 React UI 组件 / 模板 / 主题平台。 链接： 4️⃣一个 设计资源导航站 / 工具目录 / 灵感资源库。 链接： 5️⃣一套开源的 React 组件，包含动画、交互式和完全可定制的组件。 链接：
0:32

如果你用这些网站，做不出顶级UI前端。 我让在座的一人搞一次，立贴为证。 1️⃣在线 3D / 交互设计编辑器入口。 链接： 2️⃣UI 设计灵感收集网。 链接： 3️⃣一个面向前端和 AI 编程助手的 React UI 组件 / 模板 / 主题平台。 链接： 4️⃣一个 设计资源导航站 / 工具目录 / 灵感资源库。 链接： 5️⃣一套开源的 React 组件，包含动画、交互式和完全可定制的组件。 链接：

领哥LingGe🙏

19,712 просмотров • 1 месяц назад

🧑‍💻「 AI 新手小技巧 2/100 」 不会设计的 Vibe coder 有福了！🫡 刚刚在 Google AI Studio 的首页看到了一个 Flash UI 的入口，点进去体验了一下。 Gemini 3 Flash 自动生成了 3 个音乐播放器的效果，UI/UX 审美还挺不错的！感觉是秒杀市面上的免费模板了，可以体验一下：
1:28

🧑‍💻「 AI 新手小技巧 2/100 」 不会设计的 Vibe coder 有福了！🫡 刚刚在 Google AI Studio 的首页看到了一个 Flash UI 的入口，点进去体验了一下。 Gemini 3 Flash 自动生成了 3 个音乐播放器的效果，UI/UX 审美还挺不错的！感觉是秒杀市面上的免费模板了，可以体验一下：

Penny777 🦊

49,163 просмотров • 8 месяцев назад

翻到了这个GitHub库，回到回不去的童年， ( ´◔ ‸◔`) 中国教材合集 项目： > 难得一见的数字化中国几乎所有教材集合 > 几乎全是 pdf > 甚至有音乐！ > 泪目了，这个作者做了太好的事情
0:23

翻到了这个GitHub库，回到回不去的童年， ( ´◔ ‸◔`) 中国教材合集 项目： > 难得一见的数字化中国几乎所有教材集合 > 几乎全是 pdf > 甚至有音乐！ > 泪目了，这个作者做了太好的事情

Jackywine

95,510 просмотров • 1 год назад

提供 shadcn/ui 和 Base UI 组件库，带落地页、背景、网格三个可视化构建器，让开发者少写代码就能搭出现代 Web 界面。 UI TripleD 是一组 shadcn/ui 和 Base UI 组件，加了 Framer Motion 动画。里面有三个工具：拖拽拼落地页、调着色器做 Aurora 动效背景、点几下生成 Tailwind 网格布局。单仓用 Turborepo + pnpm 管理，跑在 Next.js 16、React 19、TypeScript 上。
1:04

提供 shadcn/ui 和 Base UI 组件库，带落地页、背景、网格三个可视化构建器，让开发者少写代码就能搭出现代 Web 界面。 UI TripleD 是一组 shadcn/ui 和 Base UI 组件，加了 Framer Motion 动画。里面有三个工具：拖拽拼落地页、调着色器做 Aurora 动效背景、点几下生成 Tailwind 网格布局。单仓用 Turborepo + pnpm 管理，跑在 Next.js 16、React 19、TypeScript 上。

Geek Lite

24,937 просмотров • 3 месяцев назад

我确实没想到有人用Whisper和ChatGPT来面试作弊…… 这个开源项目是专门用来面试作弊的，Whisper用来识别语音成文字，ChatGPT根据识别出来的文字为你提供参考答案！ 慎用！！被面试官发现后果很严重！
1:28

我确实没想到有人用Whisper和ChatGPT来面试作弊…… 这个开源项目是专门用来面试作弊的，Whisper用来识别语音成文字，ChatGPT根据识别出来的文字为你提供参考答案！ 慎用！！被面试官发现后果很严重！

宝玉

277,910 просмотров • 3 лет назад

试用了一下得到 APP 出品的笔记软件： Get 笔记 很早我就注册了，最近它的发展好像越来越好了 -youtube 链接丢进去，直接读取为文字稿+总结 -网页+手机 APP -导入导出功能，这个很关键，Get 笔记做的很好 -还可以看罗胖的笔记库，自带知识库 待我深入试用下
0:28

试用了一下得到 APP 出品的笔记软件： Get 笔记 很早我就注册了，最近它的发展好像越来越好了 -youtube 链接丢进去，直接读取为文字稿+总结 -网页+手机 APP -导入导出功能，这个很关键，Get 笔记做的很好 -还可以看罗胖的笔记库，自带知识库 待我深入试用下

Jackywine

19,533 просмотров • 1 год назад

🤯 之前推文中分享了 Neobrutalism 风格的 UI 组件，今天发实战效果！ 做了个小项目：AI 帮外国朋友取中文名！最近看到很多外国友人涌入小红书，PH 上也有人做类似产品，所以决定用这个想法实战一下新野蛮风格UI库。 想要源码的朋友，关注我在评论区留下 "CODE"，我会私信发给你。 评论超过 50 条，直接开源！ 👉点击链接体验： 主要特点： 🌟 根据英文名及介绍生成中文名 🎨 复古的 Neobrutalism 设计风格 🌑 支持暗色模式 📱 响应式设计，移动端自适应 ⚙️ 使用 aisdk 实现流式输出
0:52

🤯 之前推文中分享了 Neobrutalism 风格的 UI 组件，今天发实战效果！ 做了个小项目：AI 帮外国朋友取中文名！最近看到很多外国友人涌入小红书，PH 上也有人做类似产品，所以决定用这个想法实战一下新野蛮风格UI库。 想要源码的朋友，关注我在评论区留下 "CODE"，我会私信发给你。 评论超过 50 条，直接开源！ 👉点击链接体验： 主要特点： 🌟 根据英文名及介绍生成中文名 🎨 复古的 Neobrutalism 设计风格 🌑 支持暗色模式 📱 响应式设计，移动端自适应 ⚙️ 使用 aisdk 实现流式输出

katon

12,053 просмотров • 1 год назад

Opus4.6 + Agent Teams + Claude Code = Codepilot 一个完全由 AI 搞定的 高颜值 Claude Code 桌面端产品 昨天上午发的时候，没想到它能变成一个真正的产品。 ​ ​更没想到这东西是一天搞出来的。太可怕了！ 感兴趣可以试试，有问题提Issues 技术栈：Next.js 16、Electron 40、Radix UI + shadcn/ui、Tailwind CSS 4、Motion (Framer Motion)、Claude Agent SDK、Vercel AI SDK
6:25

Opus4.6 + Agent Teams + Claude Code = Codepilot 一个完全由 AI 搞定的 高颜值 Claude Code 桌面端产品 昨天上午发的时候，没想到它能变成一个真正的产品。 ​ ​更没想到这东西是一天搞出来的。太可怕了！ 感兴趣可以试试，有问题提Issues 技术栈：Next.js 16、Electron 40、Radix UI + shadcn/ui、Tailwind CSS 4、Motion (Framer Motion)、Claude Agent SDK、Vercel AI SDK

歸藏(guizang.ai)

51,517 просмотров • 6 месяцев назад

如果你想你的 Claude Code 能使用 Claude 之外的 AI 模型，比如 o3、Gemini 2.5 pro，你可以试试 claude-bridge，它可以使用 Claude Code 拦截并转换 API 请求，让你可以轻松集成 OpenAI、Google 等多个大语言模型服务。当然还是搭配 Claude 4 Opus、Sonnet 效果最佳，建议还是考虑 Claude Max 订阅。
3:45

如果你想你的 Claude Code 能使用 Claude 之外的 AI 模型，比如 o3、Gemini 2.5 pro，你可以试试 claude-bridge，它可以使用 Claude Code 拦截并转换 API 请求，让你可以轻松集成 OpenAI、Google 等多个大语言模型服务。当然还是搭配 Claude 4 Opus、Sonnet 效果最佳，建议还是考虑 Claude Max 订阅。

宝玉

36,779 просмотров • 1 год назад

如果你想让你的网站看起来有质感更高级，一定要收藏这个 UI 动效组件网站 这里几乎可以找到你想要的特效，而且还免费，使用也是非常简单，直接拷贝对应的代码或者npm安装 独立开发者必备！
0:54

如果你想让你的网站看起来有质感更高级，一定要收藏这个 UI 动效组件网站 这里几乎可以找到你想要的特效，而且还免费，使用也是非常简单，直接拷贝对应的代码或者npm安装 独立开发者必备！

开发者Hailey

22,442 просмотров • 7 месяцев назад