Loading video...

Video Failed to Load

Go Home

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

jiayuan_jy's profile picture

Jiayuan (JY) Zhang

115,551 subscribers

41,794 views • 2 years ago •via X (Twitter)

EducationArtsScience & Technology
LIVE

Anya Rossi• Live Now

Private livecam show

7 Comments

potatoruning's profile picture
potatoruning2 years ago

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

mp's profile picture
mp2 years ago

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

cavillzhang's profile picture
cavillzhang2 years ago

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

MingDa (Jack)'s profile picture
MingDa (Jack)2 years ago

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

zhen lv's profile picture
zhen lv2 years ago

kimi也可以截图上传很方便

洋葱's profile picture
洋葱2 years ago

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

JEsu's profile picture
JEsu2 years ago

cool

Related Videos

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

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

Vincent

71,594 views • 3 months ago

分享下我在 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

174,163 views • 5 months ago

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

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

MapleShaw

43,246 views • 1 year ago

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

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

歸藏(guizang.ai)

157,676 views • 11 months ago

啊？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,586 views • 10 months ago

有时候我需要把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,918 views • 3 years ago

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

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

Paidax

37,642 views • 1 year ago

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

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

歸藏(guizang.ai)

51,107 views • 1 year ago

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 views • 1 year ago

图形化界面3分钟搭建ChatGPT应用 我录制了一个视频演示了如何使用langflow快速搭建了一个ChatGPT应用，实现： 1. 集成调用 ChatGPT API 2. 可自定义 Prompt 3. 实时搜索在线信息投喂 GPT 返回问题结果 不需要写代码，全图形化拖拉拽完成，当然也可以导出配置集成进现有代码中
1:28

图形化界面3分钟搭建ChatGPT应用 我录制了一个视频演示了如何使用langflow快速搭建了一个ChatGPT应用，实现： 1. 集成调用 ChatGPT API 2. 可自定义 Prompt 3. 实时搜索在线信息投喂 GPT 返回问题结果 不需要写代码，全图形化拖拉拽完成，当然也可以导出配置集成进现有代码中

nash_su - e/acc

115,291 views • 3 years ago

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

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

JJ Ying

61,143 views • 1 year ago

🚀 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,412 views • 1 year ago

我刚才发现自己有了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 views • 2 years ago

赚钱是一个必须学会的技能。 什么是赚钱的技能？ 就是把自己产品化。 这里有两个关键词：自己、产品化。 要找到自己的独特性，大多数人赚不到钱是因为总是想跟别人一样。 大学的时候别人靠计算机二级你就去考、别人去考四级你就去考。 别人买房子你也买房子，别人干什么你就要干什么，这样会把自己变成npc。 一定要找到独特的自己。 另外就是产品化，产品化就是把自己能力放大的杠杆。 例如你天生就会耍狗坨子，你就去做抖音短视频。 你只需要拍摄一个视频，就可以获得平台的杠杆流量效应。 你需要在一生中不断问自己两个问题。 第一个问题是，这真的是我想要的嘛？ 第二个问题是我实现产品化了吗？ 解决这两个问题，你就能赚钱。 ——《纳瓦尔宝典》 本文由 #BCGAME 赞助｜BC.GAME
0:21

赚钱是一个必须学会的技能。 什么是赚钱的技能？ 就是把自己产品化。 这里有两个关键词：自己、产品化。 要找到自己的独特性，大多数人赚不到钱是因为总是想跟别人一样。 大学的时候别人靠计算机二级你就去考、别人去考四级你就去考。 别人买房子你也买房子，别人干什么你就要干什么，这样会把自己变成npc。 一定要找到独特的自己。 另外就是产品化，产品化就是把自己能力放大的杠杆。 例如你天生就会耍狗坨子，你就去做抖音短视频。 你只需要拍摄一个视频，就可以获得平台的杠杆流量效应。 你需要在一生中不断问自己两个问题。 第一个问题是，这真的是我想要的嘛？ 第二个问题是我实现产品化了吗？ 解决这两个问题，你就能赚钱。 ——《纳瓦尔宝典》 本文由 #BCGAME 赞助｜BC.GAME

王短鸟 (长鸟版)

20,463 views • 7 months ago

holy shit，Warp这次真的是把整个行业的桌子给掀了。 发布一天多，GitHub直接冲到31.9k星，速度快到系统都卡了。 兄弟们，这可不是简单把代码扔到GitHub，相当于带来了人类历史上第一个AI原生的开源协作范式🤯🤯🤯 以前开源是靠热情开发者周末肝代码， 现在Oz代理会自动写代码，跑测试，做code review， 甚至生成完整的技术文档。 未来人类只需要做最值钱的三件事，提想法，把关品味，拍板最终方向。 更有意思的是，前几天 而且你现在甚至能去 我感觉这可能是未来十年软件开发方式的一次预演。
3:59

holy shit，Warp这次真的是把整个行业的桌子给掀了。 发布一天多，GitHub直接冲到31.9k星，速度快到系统都卡了。 兄弟们，这可不是简单把代码扔到GitHub，相当于带来了人类历史上第一个AI原生的开源协作范式🤯🤯🤯 以前开源是靠热情开发者周末肝代码， 现在Oz代理会自动写代码，跑测试，做code review， 甚至生成完整的技术文档。 未来人类只需要做最值钱的三件事，提想法，把关品味，拍板最终方向。 更有意思的是，前几天 而且你现在甚至能去 我感觉这可能是未来十年软件开发方式的一次预演。

AYi

108,768 views • 4 months ago

一个只有5分钟但是却让人收获良多的Ted视频：《如何给出高效反馈的秘诀》，良好的反馈大家都知道很重要，但是日常工作中，经常遇到下属、同事犯错误，不说又不利于其成长，说了又可能会得罪人，怎么样反馈比较好呢？ 视频给出了一个实用的提供反馈的公式，绝大部分情况都可以直接套用： 1. 从小的容易获得肯定的问题开始：开始反馈之前，提出一个简短但重要的问题，让对方知道要开始反馈了，以及制造一种主动接纳的氛围，让对方觉得是有自主权的，例如，“你有五分钟谈谈上次的对话吗？” 2. 摆事实和列数据：具体指出你所看到或听到的，避免使用模糊的词汇。例如，不是说“你不可靠”，而是说“你说11点之前给我发邮件，但我还没有收到”。 3. 事情造成的影响：明确说明事情对你产生的影响。例如，“因为我没有收到消息，我无法继续工作”。 4. 以一个问题结束：以问题结束反馈，如“你怎么看？”，这使得对话成为一个共同解决问题的过程。
5:01

一个只有5分钟但是却让人收获良多的Ted视频：《如何给出高效反馈的秘诀》，良好的反馈大家都知道很重要，但是日常工作中，经常遇到下属、同事犯错误，不说又不利于其成长，说了又可能会得罪人，怎么样反馈比较好呢？ 视频给出了一个实用的提供反馈的公式，绝大部分情况都可以直接套用： 1. 从小的容易获得肯定的问题开始：开始反馈之前，提出一个简短但重要的问题，让对方知道要开始反馈了，以及制造一种主动接纳的氛围，让对方觉得是有自主权的，例如，“你有五分钟谈谈上次的对话吗？” 2. 摆事实和列数据：具体指出你所看到或听到的，避免使用模糊的词汇。例如，不是说“你不可靠”，而是说“你说11点之前给我发邮件，但我还没有收到”。 3. 事情造成的影响：明确说明事情对你产生的影响。例如，“因为我没有收到消息，我无法继续工作”。 4. 以一个问题结束：以问题结束反馈，如“你怎么看？”，这使得对话成为一个共同解决问题的过程。

宝玉

98,379 views • 3 years ago