Transcription
what's up guys welcome back
那谷歌呢
出了这个Gemini 3.1的模型以后呢
它的这个模型的算力
和模型的这个设计能力
和它的处理任何所有代码的能力呢
又更上了一层楼啊
那今天的话呢
我就教大家如何使用这个Gemini 3.1
来做一个非常电影级别
非常完美的前端的
这样一个网页或者是APP
那我个人觉得呢
这个东西出来以后呢
所有人的话呢
其实基本上都可以通过一句话
来生成一个自己想要的前端了
所以呢
我觉得它这个功能出现了以后呢
能基本上把所有的初级的前端设计师
UIUX这种设计师全部的去替代掉了
那今天的话呢
我就教大家
如何用一句话来生成一个自己想要的
非常完美的一个前端设计
废话不多说
let's go
hi guys welcome back
如果你喜欢今天节目的话
今天节目对你有点帮助的话呢
一定要在下面点个赞
把视频赞点烂好吗
那今天的话呢
我们还是用了这个Antigravity啊
大家都知道Antigravity呢
是一个这个
谷歌出的IDE
它是专门配合这个Gemini的模型
去进行工作的
那Antigravity的话呢
之前我也做过很多期的一些介绍了
那这里面的话呢
也有非常大强大的一些啊功能在里面
那今天的话呢
我们先这个用在这里面
我进来以后建立一个这个啊
文件夹
然后呢这里面呢
我放了一个Gemini MD的文件
那这个Gemini MD的文件呢
意思就是这个
我们这次主要建立前端UI UX设计的
这样一个
可以说是一个核心大脑啊
那它的功能是什么
就是说我们在每次执行任何
想要执行的东西的时候呢
它会根据这里面
我们所编辑的所有的命令
他会一步一步的去
按照我们想要的方式和方法去建立
那今天的这个所有的这个提示词
这段啊很长的prompt的话呢
我也是免费送给大家
大家可以直接去我的免费群里面
去下载
那个这个免费群的链接呢
我已经放在下方的这个描述栏里面了
啊大家可以进去
直接点这个链接就可以了
这个群呢
叫AI agent大师学院啊
然后呢
我们进来了以后呢
去到我们这里有个YouTube资源区啊
你点到这个YouTube资源区了以后呢
你只要找到今天的这一期视频
然后点开了以后
然后旁边你就能看到这些文件了啊
这个提示词就在这里
OK你就可以去下载了
OK好的
那我们回到这个Anti Gravity啊
然后呢我们看一下
今天这个里面大概都写了什么东西啊
那首先的话呢
这个MD呢
是一个呃
电影级别
落地页面的这样一个监视器啊
首先它的角色是什么
我跟大家说啊
作为一个世界一流的
高级创意设计专家
然后前端的这个工程师啊
你要做出来一个像电影级别的
完美的这样一个落地页面
OK
然后呢他代理流程是什么
必须遵循啊
当使用者建立网站时
请利用ask user question
在一次对话中询问以下问题
第一品牌宗旨是什么啊
选择一个美学方向啊
然后呢
三大核心价值是什么
然后呢最后啊
访客主要是做什么对吧
这个的话呢
就是整个的几个价值
就是说我们在这里面要突出啊
我们的这个内容是什么
最后的话呢
我们要让所有浏览我们的这些访客
他要干什么
是要购买我们的产品
还是订阅我们的服务
还是什么东西
还是要预约等等啊
在这里
然后呢美学设计
有这些美学设计
然后呢
这边呢还有这个品牌标志是什么
然后呢这边有一些什么调色盘啊
什么之类的啊
颜色在这里
然后呢设置币啊等等这些东西
都已经给它加在里面了
这边的话就是非常多的一些
可以说是UI UX的一些design吧
非常细节的一些design的一些设置
那我也不是做UIUX设计的
所以呢这些呢
我其实也看不懂这写的是什么意思啊
所以呢
但是如果你是做UI UX设计的话呢
你可以根据你自己的这个需求
去改变一些这些细微小的设置啊
那如果你今天像我一样什么都不懂
对一些设计什么都不懂的话呢
你就直接用这个模板就可以了啊
因为这些模板的话呢
也是用AI生成的
也是用AI写的
再下来的话呢
一些互动式的原件啊
是怎么样去设置啊
包括啊理念宣言是在放在哪里啊
然后啊会员的定价是什么啊
我们这边我写了三个啊
基础版
性能版跟企业版三个不同的定价
可以让他去这个订阅对吧
然后呢
后面的话就是一些建立设置的一些流程
OK
那你下载了我的整个这样一个模板了
以后呢我们就可以在这里
让他去创建这样一个
啊我们的这个网站了啊
那今天的话呢
比如说我想去创建一个
比如说
我现在对我现在的这个公司的网站
不是很满意
我想让他重新设计一个我公司的网站
或者是你想设置一些啊
其他你想做的网站都可以啊
那我们现在来测试一下
好的那我现在在这边跟他讲啊
我说OK现在去帮我重新设计一下
我的公司的这个前端网页的设计啊
我现在不是很满意
那你可以去爬
我现在所有网页
里面的一些内容和文字
了解我的公司是做什么的
然后呢把这些元素呢
加到你想啊
建立的这样一个新的网页设计里面去
然后这个呢
是我的公司的网站
OK基本上就是这样了
然后呢
我们现在呢
就可以让它去运行一下了
所以大家看到啊
然后呢这边的话呢
其实我就是说了这些一句话
基本上就是一句话而已
简单明了啊
让他去做什么东西
然后呢让他去哪里找信息
对吧
那如果你今天没有现成的一个网站
你想要自己去建立的话呢
你可能要告诉他你的一些啊
这个品牌的宗旨啊
品你的网站是做什么的呀
对吧
包括你想要什么样设计啊
然后呢你的三大核心是什么
最后
想让你的这个访客或者用户看到
以后呢
大概是一个去做什么样的事情啊
对吧等等
这些你可能都要告诉他
对吧
所以呢
你如果什么都没有的情况下呢
你基本上要先想好这些东西才行啊
OK他这边的话呢
是让我打开一个新的profile啊
嗨我现在就点我的框好了
OK
在这里你可以看到
它自己的打开了我的这个网站OK
然后的话呢
它等于说是现在的话呢
可以去爬网站里面的所有的信息
你可以看到我没有动任何鼠标OK
它现在在自
己看我的网站
OK在学习我的网站
你看我完全没有动啊两个手
所以他现在在自己的
在学习
和爬我现在这个网站里面所有的东西
所以呢
Anti Gravity的好处就是说
他在背后工作的时候
尤其是打打开网页的时候呢
你其实
我们是可以看到
他正在做什么样的工作的
OK所以呢
这个是Anti Gravity非常好的一点啊
我们是可以去非常了解
他进行到每一步工作
他都做了什么
能明白他的这个工作逻辑是什么
OK好的
这边的话呢
他现在问了我几个问题啊
我们来看一下他问了哪些问题
首先的话呢
他一说
他已经爬取了我的这个网站所有内容
然后呢以下是我取得核心资讯啊
品牌的这个名称是Visionary Automate
然后宗旨是AI新一代
从这里开始
专为企业和创作者
提供AI全方位的解决方案
完全没有错啊
然后呢
核心价值呢
就是呃客制化AI代理工程
就是AI agent啊
完全托管的自动化流程
然后呢
数据驱动的营运效率
和显著的Roi增加
然后呢
最后的这个CTA
就是立即开始预约咨询
OK
为了确保全新的电影级别
是1:1像素级的
完美而且精准的契合您的愿景
请根据规则回答以下的四个问题
OK他让我回答四个问题
第一
就是说
他已经爬到了我的一些这个内容
但是呢
他还是让我去再再次确认这些东西啊
呃这个东西我觉得非常好
如果就是说这是一他不是说先开始做
所以呢他先让你再次确认
你是不是想往这个方向走
OK
那我们现在去回答一下他的问题啊
啊首先第一个问题的话呢
你已经找到了
已经告诉我了
就是那个没有问题
然后第二个话呢
啊选择一个美学方向
我觉得我是一个AI公司
所以我需要有一些有科技感的设计
OK
你自己看着办
你自己觉得什么设计感好就可以
第三个的话呢
三大核心啊
你也已经帮我找出来了
就用你刚才说的就没问题
然后呢访客做什么
我想让我的访客立即开始跟我预约
然后然后呢
我可以给他们提供这个AI的解决方式
对吧解决方案这个你也找出来了
不错所以呢
我觉得除了美学方向
你自己可以按照你自己的想法
去设计的
有科技感啊
有AI一些科技感的
这种高级的AI科技感啊
那其他的话呢
基本上你你都已经找出来了
就按照你找出来这些东西做就可以了
大家可以看到啊
基本上就是很像一个
我跟我的一个助手在聊天
或者是分布任务的这样一个情景一样
其实根本没有
一些非常高级的一些术语
或者什么
并没有啊
就是其实就是给他说OK
你就这样去发挥就好了
那我觉得
我们一般在做这种vibe coding的时候呢
其实也是一个就是说你跟你的员工
或者是跟你的这个合作伙伴
在沟通的这样一个形式
其实就是可以了并
不需要你说出来非常高级
或者是非常这种严谨的
这种客制化的术语啊
当然
但是如果你在你的专业的领域里面OK
你已经是有一定的
这样一个知识积累了
那当然
你想跟他讨论更高级的问题的时候
可能会遇到一些
这种要专业的一些词汇啊
当然这个时候你跟他讲是没有问题的
那对于一般来说
比如说我对UIUX设计我是完全不懂的
那所以呢
基本上来说
我就是作为一个门外汉
让他去帮我去做这个东西啊
OK那做好了以后呢
我们现在就可以让他去执行了
好的那他现在已经帮我生成好了
然后呢
我们可以看出来他做做的东西如何
首先的话呢
啊前面是我们的这个标题啊
我们公司的品牌名字
然后这边的话有这个预约
大家可以看到我鼠标放上去的时候
他还有在动啊
还是不错的
然后这边的话呢
立即开始体验他也会动
然后可以看一下这个
它自动生成的文案啊
也还算是可以
这边的话呢
系统能力它加了三个这个会会动的
这样一个UI设计啊
其实还是可以的
大家可以看到我鼠标放上去的时候
这里这个小图标和下面都
呃都是会动的
那如果你鼠标不放上去的话
你只有下面在动
上面是没有的
OK所以呢
每次放上去的话
它有一个小图标在动
这个呢也是设计也是啊
蛮这个别出心裁的啊还
我觉得还行
下来的话呢
就是再往下这边的话呢
是protocol OK
这个的话就是说啊
我们专注于什么
OK我们能给客户提供什么
发现需求与蓝图啊
然后呢
大家看到这边的话呢
也是三个动图
OK我们好继续往下看啊
准备好重塑您的营收引擎了吗
OK好的
那这边的话
其实我觉得他这个三个黑的
这个旁边这个动图
我不是很喜欢
我不知道大家怎么样
我不是很喜欢
我觉得这边的话呢
你其实可以放三张图片对吧
放这三张图片我觉得应该更好一点吧
这个动图啊
换掉
那我们现在去跟他呃讲一下
看看他是否能帮我把把他们去换掉啊
OK好的
我看了一下啊
呃基本上是不错
但是有一些东西呢
我不喜欢
我想让你改变一些东西啊
首先的话呢
这个在下面
PORTICO那边有一个发现需求与蓝图
还有客制开发与调试
还有正式部署与进化
旁边有三个动图
这三个动图我觉得很丑
我不喜欢
你可不可以帮我用Nano Banana Pro
生成三个
跟旁边文案和内容相关的三张图片
放在那里
好那我们现在的话呢
让他再去执行一下
我刚才给他的一些命令啊
好的这边的话呢
他说已经帮我生成三张图
已经改好了
OK然后的话呢
我们现在去看看他做出来的效果
OK看到他改了
首先的话呢
他这是第一张图哦
也是会动的
你看到吗
我鼠标放上去的时候
他这个也是会动的
OK然后第二张图
好的然后呢
第三张图
哎我觉得这个来说就好看
比刚才那个动图好看多了
所以呢
这只只是一个例子啊
就是说有什么东西呢
我们觉得他做的不好的时候
或者是我们觉得他可以去改进的时候
我们其实可以直接告诉他
这个东西在哪里啊
我觉得不好
你帮我生成什么
什么什么
因为它谷歌里面的自动
这个Anti Gravity里面
也也自动
带了
这个Nano Banana的这样一个功能在里面
所以呢也大家也都知道
Nano Banana这个文字生成图片呢
也是非常非常的强大的这样一个工具
啊
那刚才我只是说哦
你跟这个旁边生成跟文案相同的
三张图片就好了
那如果你有更详细的
一些图片上的要求
你可以跟他说
你帮我生成什么什么样的图片
图片里面是怎么怎么怎么样的
这样的话呢
他会根据你的这样一个啊内容和要求
生成你想要的图片在里面啊
所以呢这个呢
我只是给大家做一个演示
大家可以就是说看了以后
举一反三一下啊
其实也都是很简单的
那好的然后现在我们可以再做一个
因为刚才的话呢
我是用我自己的网站
让他帮我重新设计个东西
现在的话呢
比如说我想让他设计一个我根本呃
没有任何素材给他的东西
比如说呃
我现在跟他讲OK
我最近想要开一个高级的
这种非常私密性比较强的
很奢华的一个这种高级social
这种像会所一样
然后里面呢有酒吧
可以有些啊
比如说一些提供一些高端的酒水的
这样一些服务
还有雪茄等等
所以呢
我想打造一个这种高级会所的
这样一个啊
网站
现在可以帮我去做一下
规划好了
那我现在让他去做这样这样一个规划
因为我自己没有什么高端会所对吧
所以呢
啊我就是这样给大家举个例子啊
比如说你现在你没有任何的东西
比如说你想做一个什么东西
但是你完全是没有任何的素材
你可以让他帮你去规划一下这些东西
啊好
我们现在让他去规划一下
好
现在同样的他问了我刚才四个问题啊
第一个就是说啊
品牌名和宗旨是什么啊
美学方向
OK他这是这个预设b没错
然后三大核心是什么
全球稀有
这个藏酒窖啊
厉害了然后呢
雪茄品鉴室
然后呢
严格的白金邀请制会员服务
OK然后呢
最后我们的CTA是什么呢
是这个申请会员审核
然后预约尊享体验啊
OK
那其实我觉得
他这个自己写的都是不错的
OK那我也没有什么想法
我就说OK
你说的都对
就让他这样执行就好了
我们先来看一下
好的
他现在设计出来大家可以看一下啊
他现在这边做的也是蛮不错
大家可以看到后面有一个比较渐变的
这样一个大的背景啊
我觉得这个也是不错的
然后呢哎
这个我们的这个slogan在这里对吧
隐秘于繁华市中心的顶尖品味庇护所
这个文案还是写的不错的
然后呢铂金邀请制啊
审核严密啊
会员审核机制
然后呢要全球最稀有的酒窖
然后呢雪茄
然后呢白金会员制
这里我怎么感觉跟那个有点不太搭
我觉得这里我们可以去让他去换一下
然后我们注重私密性的奢华
与绝对的纯粹
这个话绝了啊
然后呢这边的话呢
大家可以看到它也生成了一些图片啊
这些都是Nano Banana生成的
所以呢你可以看到啊
它也是非常高质量的一些画面
整个设计感也是很强的
然后呢第一个
这个是酒窖对吧
然后呢这边是雪茄室啊
品鉴室
然后这个话呢
最后的话是白金的
这个白金卡的这个特殊服务对吧
比如说
你可以获得一些全球顶尖人物的
这种资源啊
这种东西啊
对吧因为像这种高级会所
大家都是这种互相交流资源的
所以呢
这种你可以得到很多的人脉跟资源
这种这种东西啊
啊等等你可以看到
就是一句话
就可以把这个网站基本上做出来
现在就是说这种东西
基本上谁都是可以去啊
去做的
OK一一两句话就能说出来
那这边的话呢
大家可以看到我们刚才做了两个呢
基本上呢
这个设计跟模板都是非常相像的
所以呢
他呢就是说
一旦我们给他设计好了一个
这个模板和格式了
以后呢
他都会去按照我们的模板和格式
去帮我们去啊调整
所以呢
如果你找到一个好的模板
你想要这个模板去输出
比如说做50个100个不同的网站
你也是可以的
你也不用怕说哦
因为大模型会有幻觉
会把我们这些东西都改变的不一样啊
其实完全不会
他会严格的按照我们的这个
给大家设计的东西去去做
那这边的话呢
可以看到我们这边这个Gemini MD啊
这边的这个
就是我们的这个
整个工作流的这个大脑
里面写了4个不同的这样一个呃
色调对吧
大家可以看到这边的话呢
色调是什么
颜色是什么
然后呢
啊每一个都有对吧
那如果你不喜欢的话
你可以在直接在这里面去改
你想要的色调
比如说你想要一个比较亮一点的
或者是啊colorful一点的
比较色彩丰富一点的
你其实都是在这里面可以去修改的
那他就会按照
你在这里面去修改的东西呢
最后去执行你的这个工作流对吧
你的这个任务
所以呢
我觉得现在呢
有了这些vibe coding的这些工具了以后呢
让一些更加不太懂
怎么样去做一些比较难的
coding的一些前端的设计啊
或者是后端一些东西啊
都非常的简单
之前的话呢
我们可能还要去学N8N
去做一些工作流
那工作流的话呢
其实说实话去设计
这些东西呢
其实不是非常容易的一件事情
但是现在的话呢
其实你你连N8N其实都不用学习了
你直接去用这个Gemini
加上这个Anti Gravity
或者是用啊Claude code
你就可以完全的去用一两句话
就可以编辑出这样一个前端的
这样一个设计了
所以呢我觉得是非常的方便
而且是人人都可以用的啊
简直是
我觉得这个前端设计师的话呢
这个如果你以后只是做前端设计师
不去做其他的任何其他的一些啊
别的方面一些设计
或者是不运用这些vibe coding
去帮助你设计的话呢
我觉得其实对于这个行业来讲的话呢
其实已经是有点受到被威胁到了
那我想知道你们的想法
你们觉得这个东西是否好用啊
自己大家都可以去下载我的免费模板
去用一下
然后呢我在下方留言区
我想知道你们答案
你们觉得这个东西
对现在的一些设计师
是不是构成了一定的威胁呢
他们能不能在未来的两三年之后呢
完全的被AI所替代掉
我想知道你们的想法
那如果你想去系统性的去学习
如何学习这个自动化工作流
如何vibe coding啊
然后呢如何用AI去找客户的话呢
欢迎加入到我们这个AI Agent学院的这个VIP群
我把这个链接呢
也放在下方的描述栏里面了
然后呢在这个群里面的话呢
我有超过40个小时的
这样一个非常系统化的课程在里面
然后每周的话呢
还有两次
的这样一个直播的时间
OK然后有兴趣的话呢
大家可以去了解一下
然后今天的话呢
如果大家喜欢我
所有的这个内容的话呢
一定要在下面点个赞
把下面赞点烂好吗
然后呢还没有订阅我频道的朋友呢
一定要订阅我的频道
打开那个小铃铛
所以
不会再错过任何发片和直播的时间
今天节目就到这里了
下次再见啦拜拜