正在加载视频...

视频加载失败

返回首页

前端开发从未变得如此简单 🤩 借助 分钟开发完一个 React 组件。 步骤： 1. 在 上找到你要「学习」的 UI 2. 截图 -> 复制到 Devv 中实现 Prompt 需要指定输出到同一个 html file 中便于 preview（未来会优化）。 预览没有问题就可以转化成 React 组件 copy 到自己的代码库中了。

jiayuan_jy's profile picture

Jiayuan (JY) Zhang

115,551 subscribers

41,794 次观看 • 1 年前 •via X (Twitter)

教育艺术科学技术
LIVE

Anya Rossi• Live Now

Private livecam show

7 条评论

potatoruning 的头像
potatoruning1 年前

靠图生成的组件还原度很难控，只是看起来像

mp 的头像
mp1 年前

是否可以做一个浏览器插件，浏览页面的时候可以直接选择一部分Dom，然后直接生成组件，最好把里面带的交互和动效可以选择是否一起克隆。

cavillzhang 的头像
cavillzhang1 年前

是不是有ip屏蔽，我访问不了

MingDa (Jack) 的头像
MingDa (Jack)1 年前

期待到時不用 prompt 程式也會自動输出到同一个 html file 中便于 preview

zhen lv 的头像
zhen lv1 年前

kimi也可以截图上传很方便

洋葱 的头像
洋葱1 年前

你还可以借助Lupan Ai: 轻松的给你的工程添加各种工具

JEsu 的头像
JEsu1 年前

cool

相关视频

最大的开源UI组件库，这里有 5,919 个UI元素，涵盖了CSS和Tailwind的组件！ 免费供个人和商业使用，复制代码到你的项目就可以。 👉
0:41

最大的开源UI组件库，这里有 5,919 个UI元素，涵盖了CSS和Tailwind的组件！ 免费供个人和商业使用，复制代码到你的项目就可以。 👉

katon

30,872 次观看 • 1 年前

以前做前端，为了个加载动画，要么到处找 GIF，要么自己写 CSS 写到头秃。 最近看到这个 math-curve-loaders 开源库，完全是用数学公式生成的动效。 我看了一下，玫瑰曲线、李萨如曲线这些数学图形，动效极其优雅。纯 HTML+CSS 实现，零第三方依赖，体积极小。 最爽的是自带可视化调试面板。粒子数、轨迹、速度、颜色，拖拽滑块就能实时预览。 调好参数，一键复制完整代码，粘贴到项目里就能跑。 以后做项目，你是更喜欢这种数学极客风，还是习惯用现成的 UI 库组件？
0:28

以前做前端，为了个加载动画，要么到处找 GIF，要么自己写 CSS 写到头秃。 最近看到这个 math-curve-loaders 开源库，完全是用数学公式生成的动效。 我看了一下，玫瑰曲线、李萨如曲线这些数学图形，动效极其优雅。纯 HTML+CSS 实现，零第三方依赖，体积极小。 最爽的是自带可视化调试面板。粒子数、轨迹、速度、颜色，拖拽滑块就能实时预览。 调好参数，一键复制完整代码，粘贴到项目里就能跑。 以后做项目，你是更喜欢这种数学极客风，还是习惯用现成的 UI 库组件？

Vincent

70,588 次观看 • 1 个月前

学习一个开源项目从未变得如此简单 🤩
1:17

学习一个开源项目从未变得如此简单 🤩

Jiayuan (JY) Zhang

167,430 次观看 • 2 年前

分享下我在 Vibe Coding 中，使用率最高，且最高效的几个工具，覆盖到设计稿生成，到代码交付，网页动效等👇 1、Codex 你只要输入一个需求，它就会调动多个AI智能体并行工作，无论是项目重构，还是从零构建MVP，，它都能独立完成，你无需关注代码，而是把更多精力放在架构设计和创造性问题解决上 2、Paper 这个可以让 AI 生成高质量设计稿，并实现设计与代码双向实时同步，你只需专注界面创作，AI 会自动还原为精准代码交付 3、21st 这个提供超多精美的前端组件，同时带有流畅的交互动画，只需点击复制 Prompt ，粘贴到 AI 对话框即可使用 4、Unicorn 这个，不用写代码，也可以做出丝滑流畅的 GPU 级网页特效，一键导出即可让 AI 接入你的项目 5、Agentation 这个，可以直接在网页上标注需要调整的元素，自动转化为 AI 能够直接理解，和执行的结构化代码上下文， 实现网站的精细化调整 6、Axion 这个，能让你的 AI 化身 iOS 开发专家，覆盖从设计、开发到调试的全流程，，输出符合 Apple 高标准、安全、高性能，且易于维护的生产级代码 7、Apple docs mcp 配合这个，可以自动检索 Apple 最新开发文档，能解决日常开发软件中 90% 的问题
1:15

分享下我在 Vibe Coding 中，使用率最高，且最高效的几个工具，覆盖到设计稿生成，到代码交付，网页动效等👇 1、Codex 你只要输入一个需求，它就会调动多个AI智能体并行工作，无论是项目重构，还是从零构建MVP，，它都能独立完成，你无需关注代码，而是把更多精力放在架构设计和创造性问题解决上 2、Paper 这个可以让 AI 生成高质量设计稿，并实现设计与代码双向实时同步，你只需专注界面创作，AI 会自动还原为精准代码交付 3、21st 这个提供超多精美的前端组件，同时带有流畅的交互动画，只需点击复制 Prompt ，粘贴到 AI 对话框即可使用 4、Unicorn 这个，不用写代码，也可以做出丝滑流畅的 GPU 级网页特效，一键导出即可让 AI 接入你的项目 5、Agentation 这个，可以直接在网页上标注需要调整的元素，自动转化为 AI 能够直接理解，和执行的结构化代码上下文， 实现网站的精细化调整 6、Axion 这个，能让你的 AI 化身 iOS 开发专家，覆盖从设计、开发到调试的全流程，，输出符合 Apple 高标准、安全、高性能，且易于维护的生产级代码 7、Apple docs mcp 配合这个，可以自动检索 Apple 最新开发文档，能解决日常开发软件中 90% 的问题

Paidax

172,798 次观看 • 4 个月前

视频制作的范式要被推翻了！😍 Remotion，一个能让你用 React 代码直接生成 MP4 视频的库。 动效、数据可视化、甚至是个性化短视频，都可以用你最熟悉的组件化思维来开发和复用。 在 AI 的加持下，Vibe Video Making 也可以出圈了！😜 源码见评论👇
3:21

视频制作的范式要被推翻了！😍 Remotion，一个能让你用 React 代码直接生成 MP4 视频的库。 动效、数据可视化、甚至是个性化短视频，都可以用你最熟悉的组件化思维来开发和复用。 在 AI 的加持下，Vibe Video Making 也可以出圈了！😜 源码见评论👇

MapleShaw

43,006 次观看 • 10 个月前

马斯克将创业过程分解为简单的步骤： 首先，制作一个能够清晰展示你想法的原型，然后找到一群充满激情的人来帮助实现它。 你不需要从一开始得到所有的答案。他的建议是开始行动，在过程中逐步解决问题。克服对失败的恐惧，并提出质问：“最糟糕的情况会是什么呢？”
0:43

马斯克将创业过程分解为简单的步骤： 首先，制作一个能够清晰展示你想法的原型，然后找到一群充满激情的人来帮助实现它。 你不需要从一开始得到所有的答案。他的建议是开始行动，在过程中逐步解决问题。克服对失败的恐惧，并提出质问：“最糟糕的情况会是什么呢？”

柴郡🔔｜Crypto+AI Plus

23,281 次观看 • 1 年前

Figma 正式推出了官方的远程 MCP 服务器，现在不需要安装 Figma 客户端 只需要在支持的软件比如 Cursor、Cluade code 里面添加，并在打开的网页里面完成账户授权就行 而且现在设计组件和前端组件的映射信息也可以通过 MCP 获取到，如果你的团队有设计系统的话，然后你的设计稿组件采用程度高 前端可以一键用 AI 生成全部的前端代码，而且保证高还原度，设计师和前端协作会到一个新的时代
0:29

Figma 正式推出了官方的远程 MCP 服务器，现在不需要安装 Figma 客户端 只需要在支持的软件比如 Cursor、Cluade code 里面添加，并在打开的网页里面完成账户授权就行 而且现在设计组件和前端组件的映射信息也可以通过 MCP 获取到，如果你的团队有设计系统的话，然后你的设计稿组件采用程度高 前端可以一键用 AI 生成全部的前端代码，而且保证高还原度，设计师和前端协作会到一个新的时代

歸藏(guizang.ai)

157,033 次观看 • 9 个月前

Codex 发布视频中英文双语字幕 见证软件工程的未来！OpenAI 为您带来 Codex 的最新研究性预览——一个强大的远程 AI 智能体，现已集成到 ChatGPT (专业版、企业版和团队版用户首批体验)。 在本视频中，我们将深入探讨 Codex 如何利用全新的 codex-1 模型，在云端并行处理复杂的软件开发任务：从解释代码库、查找并修复 Bug，到主动提出优化建议、甚至处理大规模代码重构。了解 AI 智能体如何在你自己的代码仓库和环境中工作，以及 OpenAI 是如何通过端到端强化学习训练这些智能体，使其不仅能编写代码，还能理解和操作整个开发流程。 这不仅仅是工具的升级，更是向 AI 作为全能开发伙伴的转变。准备好了解 Codex 如何让您的开发工作流发生根本性变化，以及它如何预示着一个人人都能更高效构建软件的未来。
23:04

Codex 发布视频中英文双语字幕 见证软件工程的未来！OpenAI 为您带来 Codex 的最新研究性预览——一个强大的远程 AI 智能体，现已集成到 ChatGPT (专业版、企业版和团队版用户首批体验)。 在本视频中，我们将深入探讨 Codex 如何利用全新的 codex-1 模型，在云端并行处理复杂的软件开发任务：从解释代码库、查找并修复 Bug，到主动提出优化建议、甚至处理大规模代码重构。了解 AI 智能体如何在你自己的代码仓库和环境中工作，以及 OpenAI 是如何通过端到端强化学习训练这些智能体，使其不仅能编写代码，还能理解和操作整个开发流程。 这不仅仅是工具的升级，更是向 AI 作为全能开发伙伴的转变。准备好了解 Codex 如何让您的开发工作流发生根本性变化，以及它如何预示着一个人人都能更高效构建软件的未来。

宝玉

126,923 次观看 • 1 年前

除了千篇一律的现代UI，可以试试开源复古风RetroUI，对于有些游戏页面、社交个性化的诉求可以搭配。 ✨ 40+即插即用的复古风组件 🎨 完美集成React + TailwindCSS 💻 只需复制粘贴，极速上手
0:47

除了千篇一律的现代UI，可以试试开源复古风RetroUI，对于有些游戏页面、社交个性化的诉求可以搭配。 ✨ 40+即插即用的复古风组件 🎨 完美集成React + TailwindCSS 💻 只需复制粘贴，极速上手

katon

24,206 次观看 • 1 年前

啊？AI可以自己找活干了？ 给大家介绍一个炸裂的开源项目 Hephaestus - 这玩意儿让AI Agent自己规划工作，自己发现问题，自己创建任务！抽象到什么程度？它内嵌了个kanban....让AI自己拆解card自己做.... 传统的Agent框架都是你提前写死所有流程，遇到没预料到的情况就傻眼。Hephaestus 直接换了个思路：只定义三个阶段（分析-实现-验证），然后Agent自己看着办。 举例：测试Agent在跑测试时，发现了一个性能优化机会，它不是记个log就完事，而是自己创建了一个新的调查任务，然后放到kanban里，然后另一个Agent接手去研究，确认可行后又自己创建实现任务。整个工作流就这么自己长出了一个分支。 你给它一个PRD，它分析出5个组件，创建5个并行任务。其中一个Agent干完了发现bug，自己创建修复任务。另一个Agent发现可以优化，自己创建优化分支。工作流是实时生成的，而不是一开始就预测好的。 我有空也会测一下试试，看看它能不能真的从0到1自己把活干完。总之先增加到待测试列表。 项目地址：
1:29

啊？AI可以自己找活干了？ 给大家介绍一个炸裂的开源项目 Hephaestus - 这玩意儿让AI Agent自己规划工作，自己发现问题，自己创建任务！抽象到什么程度？它内嵌了个kanban....让AI自己拆解card自己做.... 传统的Agent框架都是你提前写死所有流程，遇到没预料到的情况就傻眼。Hephaestus 直接换了个思路：只定义三个阶段（分析-实现-验证），然后Agent自己看着办。 举例：测试Agent在跑测试时，发现了一个性能优化机会，它不是记个log就完事，而是自己创建了一个新的调查任务，然后放到kanban里，然后另一个Agent接手去研究，确认可行后又自己创建实现任务。整个工作流就这么自己长出了一个分支。 你给它一个PRD，它分析出5个组件，创建5个并行任务。其中一个Agent干完了发现bug，自己创建修复任务。另一个Agent发现可以优化，自己创建优化分支。工作流是实时生成的，而不是一开始就预测好的。 我有空也会测一下试试，看看它能不能真的从0到1自己把活干完。总之先增加到待测试列表。 项目地址：

karminski-牙医

41,533 次观看 • 8 个月前

如何让一个19岁女大学生快速进化到35岁？ 只需要简简单单的两个步骤。
0:22

Sensitive content

如何让一个19岁女大学生快速进化到35岁？ 只需要简简单单的两个步骤。

闲鱼小虾米

872,234 次观看 • 2 个月前

有时候我需要把PDF转成图片，还需要几页合并成一张图片，以前让GPT-4帮我写过代码本地执行，现在简单了，直接传到Code Interpreter，一个Prompt搞定！ 启用Code Interpreter，上传PDF文件，然后输入： “请将这个PDF文件保存成2行2列的图片，每4页一张图片” 等着下载就好了，简直太方便了！
1:08

有时候我需要把PDF转成图片，还需要几页合并成一张图片，以前让GPT-4帮我写过代码本地执行，现在简单了，直接传到Code Interpreter，一个Prompt搞定！ 启用Code Interpreter，上传PDF文件，然后输入： “请将这个PDF文件保存成2行2列的图片，每4页一张图片” 等着下载就好了，简直太方便了！

宝玉

279,869 次观看 • 3 年前

在上个月，我分享了一个 Demo，很多人都来问我如何实现，我这里简单说下从前期生图到视频生成以及开发交付落地整个流程，希望能帮到你。 主要用到的工具是即梦（图片生成）和可灵（视频生成） 生成后的的视频可以通过配置图层混合来进行交付
1:54

在上个月，我分享了一个 Demo，很多人都来问我如何实现，我这里简单说下从前期生图到视频生成以及开发交付落地整个流程，希望能帮到你。 主要用到的工具是即梦（图片生成）和可灵（视频生成） 生成后的的视频可以通过配置图层混合来进行交付

Paidax

37,642 次观看 • 1 年前

Gemini CLI 原生集成到 VS Code 里面了，现在可以感知当前打开的文件和选中的代码，这个太好了 需要通过 CLI 命令 /ide install 安装扩展 为了这个扩展还优化了 UI，可以在窄宽度显示内容
0:46

Gemini CLI 原生集成到 VS Code 里面了，现在可以感知当前打开的文件和选中的代码，这个太好了 需要通过 CLI 命令 /ide install 安装扩展 为了这个扩展还优化了 UI，可以在窄宽度显示内容

歸藏(guizang.ai)

51,107 次观看 • 10 个月前

uiverse + v0 Chat + Cursor + Vercel: AI辅助Web开发全流程演示，从UI设计到快速部署 视频简介： 这个视频展示了高效Web开发流程，从UI组件选择到最终部署的每一步。 探讨了如何利用多种先进工具来简化开发过程并提高效率： uiverse：从这个开源UI组件库中选择并定制精美的界面元素。 v0 Chat：演示如何使用AI辅助开发工具来加速编码过程，解决复杂问题，并生成高质量代码。 Cursor：介绍如何使用这款AI驱动的代码编辑器进行代码优化和调试，提高代码质量。 Vercel：展示如何利用这个平台快速部署和发布Web应用。 时间戳: 00:00 高效Web开发流程简介 01:53 案例展示 03:06 天气应用开发演示 13:49 收音故事页面开发演示 18:33 总结
20:01

uiverse + v0 Chat + Cursor + Vercel: AI辅助Web开发全流程演示，从UI设计到快速部署 视频简介： 这个视频展示了高效Web开发流程，从UI组件选择到最终部署的每一步。 探讨了如何利用多种先进工具来简化开发过程并提高效率： uiverse：从这个开源UI组件库中选择并定制精美的界面元素。 v0 Chat：演示如何使用AI辅助开发工具来加速编码过程，解决复杂问题，并生成高质量代码。 Cursor：介绍如何使用这款AI驱动的代码编辑器进行代码优化和调试，提高代码质量。 Vercel：展示如何利用这个平台快速部署和发布Web应用。 时间戳: 00:00 高效Web开发流程简介 01:53 案例展示 03:06 天气应用开发演示 13:49 收音故事页面开发演示 18:33 总结

nicekate

20,818 次观看 • 1 年前

我做的第一个 macOS App 发布啦！没学过 Swift，全程用 Cursor 开发，很 vibe 的一次体验~ 从代码到设计到 Compressio 这个名字都来自 AI~ 软件本身源于我自己多预设灵活切换的压图需求，欢迎体验~
0:24

我做的第一个 macOS App 发布啦！没学过 Swift，全程用 Cursor 开发，很 vibe 的一次体验~ 从代码到设计到 Compressio 这个名字都来自 AI~ 软件本身源于我自己多预设灵活切换的压图需求，欢迎体验~

JJ Ying

61,058 次观看 • 11 个月前

🚀 vibe coding 正在颠覆内部工具开发！ 我只花 1 小时，就用 搭好了 LLM 训练 + 监控平台： - 模型训练过程管理 - 数据集管理 - 计算资源 & 一键微调 + 部署 过去这样的内部平台可能需要花费数周的时间来开发，现在仅需要几个小时的时间。 PS. 我们的工作流是在 Devv 上开发完基本的功能后，会同步代码到本地，接入到真实的线上数据中。 未来我们会上线 Devv VSCode/Cursor/Windsurf 代码双向同步的工具。
1:21

🚀 vibe coding 正在颠覆内部工具开发！ 我只花 1 小时，就用 搭好了 LLM 训练 + 监控平台： - 模型训练过程管理 - 数据集管理 - 计算资源 & 一键微调 + 部署 过去这样的内部平台可能需要花费数周的时间来开发，现在仅需要几个小时的时间。 PS. 我们的工作流是在 Devv 上开发完基本的功能后，会同步代码到本地，接入到真实的线上数据中。 未来我们会上线 Devv VSCode/Cursor/Windsurf 代码双向同步的工具。

Jiayuan (JY) Zhang

21,391 次观看 • 1 年前

怎样将保存一个完整的网站到本地？ 直接使用页面另存为会有非常多的问题，主要是静态资源的问题，比如图片不显示等等。 原帖是一个非常火的讨论： 方案一：找到一个开源库 SingleFile： 提供各种浏览器插件以及 CLI 工具可以很方便的完成站点的一键保存。有 14.9K 个 star。 方案二：原帖中的一段 Gist 代码， 我看了一下处理：使用FileReader 读取，external css 转换成 inline，并且修改地址到 absolute，图片转换成 base64 images。 这两个方案都是值得收藏看看。大家如果有更好的方案也可以分享一下。
1:22

怎样将保存一个完整的网站到本地？ 直接使用页面另存为会有非常多的问题，主要是静态资源的问题，比如图片不显示等等。 原帖是一个非常火的讨论： 方案一：找到一个开源库 SingleFile： 提供各种浏览器插件以及 CLI 工具可以很方便的完成站点的一键保存。有 14.9K 个 star。 方案二：原帖中的一段 Gist 代码， 我看了一下处理：使用FileReader 读取，external css 转换成 inline，并且修改地址到 absolute，图片转换成 base64 images。 这两个方案都是值得收藏看看。大家如果有更好的方案也可以分享一下。

Viking

132,543 次观看 • 1 年前

我刚才发现自己有了ChatGPT昨天发布的GPTs联动的功能，试了一下确实强大。 下面用一个例子看一下如何使用和具体能力，还有一个对简中用户比较重要的操作。 我自己看论文会先下载下来让ChatGPT总结，然后会用宝玉的科技文章翻译GPTs对总结的内容进行精细的翻译，以前完成这两步起码需要我切两个窗口，然后复制粘贴一次。 现在我只需要在总结完成后输入“@”找到需要的GPTs，输入要求就可以在一次对话中完成，甚至我还可以再搞一个自动发推的GPTs在ChatGPT直接将翻译内容发到推特上。 最后一个对简中用户不太友好的BUG：拉起GPTs选择的时候你输入的“@”符号需要在英文输入法下才能调用这个功能，中文输入法下面没办法拉起GPTs选择，OpenAI做产品是真的糙。
1:04

我刚才发现自己有了ChatGPT昨天发布的GPTs联动的功能，试了一下确实强大。 下面用一个例子看一下如何使用和具体能力，还有一个对简中用户比较重要的操作。 我自己看论文会先下载下来让ChatGPT总结，然后会用宝玉的科技文章翻译GPTs对总结的内容进行精细的翻译，以前完成这两步起码需要我切两个窗口，然后复制粘贴一次。 现在我只需要在总结完成后输入“@”找到需要的GPTs，输入要求就可以在一次对话中完成，甚至我还可以再搞一个自动发推的GPTs在ChatGPT直接将翻译内容发到推特上。 最后一个对简中用户不太友好的BUG：拉起GPTs选择的时候你输入的“@”符号需要在英文输入法下才能调用这个功能，中文输入法下面没办法拉起GPTs选择，OpenAI做产品是真的糙。

歸藏(guizang.ai)

49,750 次观看 • 2 年前