Transcription
What's up guys, welcome back.
那今天的话呢，我想用这个，用vibe coding的方式，结合谷歌的Anti gravity和谷歌的Stitch，这两个工具呢，做出一个非常完美的前端APP，或者是网站的这样一个设计。
那今天用的这两个工具呢，大家都知道，这个Anti gravity是用我们用来，我们去做vibe coding的这样一个工具。那Stitch的话呢，可以说是谷歌发出来，现在市面上最强的，这个前端网页 UI UX的这样一个设计的这样一个工具。今天的话呢，我会把它们两者二合一，变成一个非常强大的前端设计工具。这样的话呢，我们就完全不需要啊，再去用前端的这个UI UX设计师，去帮我们设计任何我们想要做的产品，或者是想要做的网站或者手机APP了。我们自己就可以做了啊，非常简单。
那你今天掌握这项技能以后呢，之后的话呢，不管你是啊，给你的客户做啊，任何的这个前端设计，或者是给自己的项目做任何前端设计，真的是可以说是游刃有余。
Hi guys, welcome back.
如果你喜欢今天节目的话呢，一定<bos>要在下面点个赞，把视频赞点烂好吗？
然后呢，今天我们用这个工具呢，叫这个Stitch啊。Stitch的话呢，是一个前端非常强大的这样一个UIUX设计的，这个谷歌出的这样一个呃工具。你如果进入到这个呃 Google Stitch里面的话，登录自己的谷歌账号，你这边的话呢，就会看到有这个APP和Web设计，这两个不同的版本。OK，你设计想设计哪个都可以。
这边的话呢，可以选择大模型，比如说3.0 Pro啊，这种各个不同的模型你都可以选择。这边的话呢，基本上就在这个框框里的话，基本上就是我告诉他，我们想设计的东西啊。
那这里的话呢，我们可以去加入我们的这个upload这个file。比如说我们喜欢的一些呃网站，我们可以给他截图，然后直接上传到这里也可以，或者是直接给他网站的这样一个网址，也可以。
今天的话呢，我们做例子啊，我们用这个叫wisprflow这个网站。这个是什么网站呢？之前大家在平时看我视频的时候，很多人问我啊，我用什么样的工具，就是说我怎么样去说啊，我跟他直接讲话，然后他就只能直接能帮我显示出来字了，对吧？我平时在Vibe coding的时候呢，其实我是很懒得去打字的，我基本上都是跟他讲话，我跟他说我是要需要什么样的东西，有什么样的需求，他就会变成文字。那很多人问我，那今天的话呢，大家有着兴趣的话呢，也可以注册一下这个呃软件啊，它这个工具呢，它也是完全免费的。OK。
那我把这个注册链接呢，放在下方了，大家有兴趣的话可以去看一下。OK。
那比如说，我今天是比较喜欢这个设计的话呢，哎，我就觉得好，那我就模仿他的设计，把他的这个网站啊，直接复制一下，直接粘贴过来。OK，他就网站在这里了。然后呢，我可以让他帮我创建几个不同的，跟他风格类似的设计啊。
那我现在跟他讲一下，OK，我让你创造三个不同的这个呃 APP的页面。OK，第一个页面的话呢，你是可以去选择不同的plan，让用户可以去选择不同的plan。然后第二个页面，你可以去做一些自定义的设置。然后第三个页面的话呢，是一个check out支付的这样一个设计啊。呃，我给你的这个网址的话呢，是wisprflow，是一个这个你可以跟它讲话，它就能出来这个文字的这样一个工具啊。所以呢，你可以参考这个它的设计，然后帮我设计出来。
好OK，他这边文字现在全部已经出来了，我们现在就直接让他去执行。OK好的，他现在帮我做出来了啊，但是呢，有一个问题啊，我不知道为什么，可能是我用的是这个3.0 Flash的模型，他做出来这个颜色，其实跟我们这个颜色完全不一样。我不知道他哪里抓的，但是他可能抓这个黑的截屏啊。嗯，但是其实我觉得就是，他这个排版还是OK的，但是呢，就是这个颜色跟色调不行。那所以呢，我们这里的话，如果看到他没有按照我们的这个，我们想要的东西做，你可以随时告诉他。
比如说我说，你完全没有按照我给你的网址来做，你要按照我给你的网址的色调来做。他说哦，抱歉啊，然后呢，他要重新这个调整一下这个风格。然后呢，这是他新做出来的风格。OK，这个就跟我们的这个颜色调有点像了啊。
所以呢，啊这边的话呢，我们来看一下，就是说我的点呢，就是说如果我们在这里，如果看到任何我们觉得不好，或者是这个颜色调也好，或者是他的任何UI UX做的不好的时候呢，我们其实可以随时跟他在这边啊对话，跟他说我们想要什么样的东西，他就可以直接做给我们。
OK，然后大家可以看一下这边，呃，他其实做了三版不同的东西啊。第一个就是免费版是怎么样的，然后呢，专业版，然后企业版是怎么样的。然后这边的话呢，它可以我们可以去啊，自定义一些东西对吧？是自定义的一些设定。然后这边的话呢，最后是check out page，他加了一个Google pay跟apple pay，但是这两个字呃，它显示的有问题。
OK，那我这边的话，其实可以让它再改一些东西啊，比如说OK，你需要把第三个这个配置啊，上面加一个跟，就是比较在在顶部，帮我加一个跟它有关系的，比较好看的一张图。然后呢，你可以把快速结账去掉，Google pay跟apple pay去掉，我不喜欢。然后呢，在最后的话呢，加上一个五星好评。OK，我们可以让他改一些东西。
然后然后呢，把这个东西加出来以后呢，我们其实可以让他帮我们去做一个多版本，让他帮我们去做三个不同的版本，然后我们最后喜欢哪一个，最后去选择对吧？然后呢，我们可以这样跟他讲，然后做出来三个不同的版本给我，我最后会选择一个。
我们现在跟他说完了OK，然后呢，让他去继续去修改我们想要的东西，我们看看他最后做出来的效果会如何啊。OK好的，他现在帮我建好了，他又建了这三个，他版本一，版本2，版本3在这里了。那这个呢，完全就是看自己的这个个人意愿了，你觉得哪一个好看，那我觉得话可能是这个好看一点吧，我想选这个。OK，那我就把这两个全部的去直接删除掉，就不要了。OK，删除掉这个也原版的也删除掉。
好的，那之后的话就是剩下这三本，这三本是我喜欢的。那我们现在就可以直接导出了。说实话啊，拿这个鼠标直接把它全部框起来，然后点这个export，然后呢，直接这边我们可以去加MCP也可以，然后呢，可以把它变成这个zip file。我们先可以把它变成zip file，等会直接，我们再从这个anti Gravity里面去直接连这个MCP啊。我们可以比如说啊，直接export。
好，我们现在就已经变成export。大家可以看一下，这个就是我们的这个zip file就好了。
那现在的话呢，我直接去anti Gravity里面OK，直接把它打开。OK，我去到anti Gravity里面，我直接把这个Stitch，这刚才这个Stitch我们做的这个文件，直接把它drop到这里面。OK，它就直接把它打开了。大家可以看到啊，直接就在这里了。
那现在的话呢，我可以就让他去帮我们把这个，我们刚才做的设计，变成一个可以执行的，这样一个三个页面了。那因为刚才那个只是三个图片，三个设计对吧？那现在的话呢，我可以帮他直接把它变成一个这样的一个页面啊。OK，那现在这一步的话呢，大家可以看到我们的设计出来了啊，然后呢，我们先要把它变成三个不同的code啊。这边的话呢，你可以去其实是选择任何的模型都可以，你可以选择German，你可以选择这个Opus最新的这个啊，4.6也是可以的对吧？其实都是可以的啊。
OK，我们现在呢，可以跟他这样说啊，就是说OK，我现在放了一些这个Stitch file里面的一些呃，我设计好的三个这个呃 APP页面的这样一些呃 screenshot和一些code，需要你把这些东西全部codify，编辑成一个这个可使用的这个APP，然后呢，把它变成一个local host，然后打开可以给我。好，基本上就可以了。
然后呢，我们现在去让它去执行啊。大家可以看到啊，这边呢，这个anti Gravity呢，它是直接打开了我的这个local host页面啊，然后它这个直接就帮我在这边，直接是生成了我们的local host啊。那我们可以看到，它在这边还是在完成一些工作啊。那我们这边的话呢，可以看到啊，哇，这是我们的第一个页面OK，这是第二个页面，然后呢，这是第三个页面。OK，完全没有问题，他已经帮我们deploy好了。
那在这里的话呢，大家可以看到啊，这个就是他帮我们这个啊，所有的这个walk through啊，他干了什么事情，在这里面帮我们总结好了OK。
那现在呢，我们如何要把这个Stitch跟我们的这个anti gravity结合在一起呢？这样的话呢，我们可以在antigravity里面直接去操作这个Stitch啊。首先的话呢，我们可以去通过一个MCP方式啊，这边我们有一个MCP Server，点开了以后呢，这边有个MCP啊，这边我们可以点manager MCP。我们看到这边确实是我们之前加过的所有的MCP。OK。
那现在呢，比如说我们想加一个MCP啊，我们可以有几种方式，一种是手动加啊，手动加的话呢，我们要去找这个Google Stitch MCP，然后直接把点这个raw config。我们点开了以后呢，可以在这里面直接加这个代码进去，或者是啊，我们可以直接在这边让他去帮我们加。
OK，我可以跟大家这样说，现在呢，去帮我加一个呃 Stitch的MCP，然后呢，这个是我的API key啊，我给你了，以后呢，你加到我的这个呃 MCP的config，这样这的文件里面。OK好。
那这边呢，我们把我们的只要把我们的这个呃 API KEY，只要回来了以后呢，从这边复制然后粘贴上去啊，就可以了。这样的话呢，我们就可以让它直接的去自动帮我们加，而不是我们手动加。OK，然后它装好了以后呢，我们只要重启Anti Gravity呢，它就会我们可以看到这里的我们，我们的这个MCP Server里面呢，就会有这个Stitch里面的这个东西啊。
大家可以看到啊，我们可以去create project对吧？get project listing project，然后呢，list screens啊，然后get screens，generate screen from text对吧？所以呢，我们在Anti Gravity里之后的话呢，直接可以在这边告诉他我们想要什么，他也可以用stage的功能去帮我们去生成任何的前端的设计，UIUX设计都是可以的。所以我们之后不需要再去Stitch里面直接呃让他去生成了，以后呢，我们还要去下载，还要在呃直接放到Antigrav里面，不需要了。我们可以直接去这里面生成了啊，确实是非常简单，也非常方便。所以大家可以把这些功能，这个都可以去看一下。
OK，接下来的话呢，我们去看一下我们的前端啊，我们前端的话呢，它已经做好了。OK，这是我们第一个页版本。OK，不错，你看我们鼠标放上去的时候，它会变颜色啊，还不错。然后呢，这是第二个页。OK，我们有可以有这些按钮可以按对吧？啊功能上面还是不错的啊。然后呢，最后的话呢，是结账页面。OK，OK，不错好。
比如说这个，我们现在觉得已经满意了。OK，他已经帮我们做成3个不同的这个结账页面了。好的，那我们现在，比如说呃，这是我们的设计，但是呢，我们想要把它变成一个适合于各种各样不同的产品，各种各样不同服务的产品。比如说我想今天做一个这个关于啊，这个咖啡的，我是一个卖咖啡，我想做一个咖啡的这样一个网站啊，我我怎么做呢？或者是我卖其他的一些产品，我该怎么做呢？我们可以用着它这样一个模板，去做各种各样不同的任何产品和任何服务的这样一些啊网站对吧？
那现在的话呢，我们就需要用到这样一个skill了，就是这样一个Stitch skill。这是我在GitHub上面找到的，我们可以用到这个skill啊。这里面写功能是什么，大家有兴趣的话可以看一下啊。然后呢，这个skill的话呢，我会把我这个skill放在我的这个免费的群里面啊。那大家如何进入到我这个免费的群呢？我这个免费群叫AI Agent大师学院。OK，然后呢，我在这个免费群里面呢，你只要进来进到这个YouTube资源区啊，然后呢，你找到今天这一期视频啊，打开点开，然后你就能看到这些，全都是我关于这一期视频所有的资源都在这里了。
这个免费群的连接呢，我放在视频的下方了，大家有兴趣的话呢，直接去点进去啊，注册就可以了。那呃，这个skill的话是GitHub上面的，然后呢，我们只要点到这，进入到这个code这里，然后呢，把这一串啊，这串这个URL复制下来。OK，然后呢，我们回到antigravity里面，然后呢，可以告诉他OK，这是我找到的一个Stitch的一个skill啊，然后呢，你要把这个skill加到这个我们的Stitch上面。所以呢，我之后可以用这个skill去创建更多的不同的APP和不同的website。
好的，然后呢，再把我们的这个链接复制上给他，然后呢，他就可以去执行了，他就可以去装这个skill给我们了。OK。
大家可以看到啊，这是我的prompt在这里啊。所以呢，现在的话呢，我们的逻辑是，我们现在有了这个Stitch MCP，还有了这个Stitch的这个skill。那Stitch的MCP呢，就是说我们可以用这个Stitch里面的这样一些UIUX design的这样的功能，去design我们去设计我们想要的这样一些前端的设计。那这个Stitch skill的话呢，它是可以把这个功能放大啊，我们可以用它的这些功能，把我们现在已经设计的东西呢，可以去创造更多我们喜欢类型，已经是一种模板的这样一些设计呢，变成不同的这样一些呃产品或者是其他的一些服务，都可以依照我们现在的设计去，你可以去做这种成千上万个不同的这样一个类似的，但产品不一样，但是设计一样的这样一些网站或者APP。所以功能是非常强大了。
好的，他现在的话呢，也把跟我说，他这个skill啊，也已经装载好了。你看这是我们的所有的skill啊，design MD，然后呢，这个enhance prompt啊，然后呢，remotion对吧？还有这个Stitch Loop啊，主要看这个Stitch Loop啊，它是generate Multi pages websites啊，它可以生成非常多不同的website。
那我们现在重新开一个Tab啊，以防它这个我们的上下文这个到了一个上限啊，我们重新开一个新的对话窗口啊。我可以跟他说OK，好的，现在的话呢，我，想让你去用这个Stitch的MCP和Stitch的这个Loop skill啊，去创造两个完全不同的这个呃 APP的这个网页。OK，第一个呢，是卖这个咖啡的。OK，第一个是卖咖啡的。第二个是关于棒球帽产品的这样一个APP的网页。OK，然后呢，你必须要按照我们现在用的这个wisper flow的这样一个设计的标准，去创建这两个网站。然后呢，最多的话呢，是三页啊，不能不能超过三个啊page啊，三页。然后呢，呃，你第一个页面和第二个页面，和第三个页面，要按严格按照我们刚才的设计去执行。
好的，那现在呢，我就让他去执行一下啊。所以呢，那比如说，我们刚才去创建了一个我们自己非常满意的这样一个设计，对吧？那我们这个非常满意设计好了以后呢，刚才呢是用whisper flow的这样一个网站，对吧？那跟我们现在所做的这个棒球帽，还有这个咖啡的东西呢，是完全不同的东西。那我们可以用刚才那个，那个我们已经非常满意的这样一个设计呢，去套到另外其他的所有的不同的产品上面，可以用这个MCP和这个skill啊，去完成这样一些不同的任务。
然后呢，我们来看他做出来的这样一些效果是如何。OK，他现在全部建好了。那这边呢，他这边是所有的walk through啊，会告诉我们他们都他都做了什么事情在这里，然后呢，我们可以去看一下现在他做的这样一个网站啊。OK，首先的话呢，你可以看一下这是他做的啊，第一版这个咖啡的啊。那第一版他也是做了大家可以看到他所有的这个排版呢，跟我们是基本上都是一样的啊，比如说啊，有3个板块是怎么样的对吧？然后呢，这个偏好是什么？OK，然后这边他也是有这边有设置对吧？然后呢，最后是结账页面。但是结账页面的话，其实说实话，他只改了字，但是为什么这个字是英文的对吧？那我们这个时候就可以跟他说哦，呃，在这个做咖啡的这样一个APP的第三个页面里面，全是英文的，你帮我把它全部换成中文啊，也就可以了。
所以呢，我们一定要自己检查，因为这个AI说实话，现在也不是100%就是一次就能把我们想要的东西全部做好，我们肯定是要来来回回去修改一些我们想要的东西的。OK，然后可以看一下这个棒球帽，棒球帽的话呢，这边也是有一啊，三个板块OK，刻制款，限定版，经典款。然后这边的话呢，你可以客制啊，size style什么之类的。OK，然后呢，这边的话最后是结账页面。同样的结账页面的话呢，它也是呃英文，它并没有换成中文，我们可以让它也去改一下啊。
所以呢，基本上大家能了解我的这个意思，就是说啊，我们的逻辑他是做到了，因为就是说我们在第一次生成了一个这个最基本的这样一个模板了以后，我们一直调整到我们非常喜欢的这样一个呃设计了以后呢，它生成之后生成任何同样的东，东西呢，通过我们的MCP，我我们的这个啊skill能生成同样的设计，但是它是不同的产品对吧？
我们回到我们这个Stitch里面啊，我们可以看到因为我们用了MCP，所以它每次在创建这个时候，大家可以看到，它自动的会帮我们更新到我们的这个Stitch里面啊，这个是帽子的对吧？然后呢，这边的话呢，还有这个咖咖啡的对吧？所以呢，这个呢，就是说我们已经这个可以通过在Anti Gravity里面去直接给他提示词，让他去生成一些工作的话呢，他会直接的去同步到我们的这个Stitch里面对吧？
那比如说现在呢，我没已经对这个网站已经觉得OK，没问题了，我已经想要去把它变成一个，因为我们现在是local host嘛，对不对？大家可以看到这里的网址是local host。比如说我们现在想要去把它直接变成一个上线状态，把它直接这边啊变成一个网站网址。那我们要怎么做呢？首先的话呢，我们这边可以跟他讲啊，比如说我们现在都已经设置好了，那当然那我们现在做了一个咖啡，做了一个帽子，我们只想要帽子，也不想要之前的那个版本吧，文件在里面。所以呢，我们可以让他把之前的东西全部删掉，然后呢，把这个东西直接push到我们的这个GitHub上面，然后直接从GitHub上面直接啊，可以去把它直接一键部署啊。
首先我可以跟他说OK，现在的话呢，我比较喜欢那个帽子，的那个版本。OK，然后呢，你可以把所有跟帽子没有关系的，比如说那个咖啡，还有之前的我们的模板，你可以去删掉了，只保留关于帽子的所有的文件，然后呢，帮我上传到我的GitHub上面，然后你在GitHub上面可以建立一个private repo，然后把它上传上去。OK，这样的话呢，我们就可以把我们所有的这个刚才生成的文件，全部上传到我们的GitHub上面了去存储了。然后呢，这个也是一个private，所以没有其他人能看得到，只有我们自己能看得到啊。
好的，他告诉我下线上传到我们的GitHub上面了，我们去看一下啊。那进到我们的GitHub里面，你可以看到这个我已经上传了snapback，这是private，这是我们的所有的文件。OK，然后呢，现在我们要去一个网站啊，叫这个vercel.com。你进来了以后，你能看到是这个样子的。OK，然后呢，我们需要去连接我们的GitHub，然后连接上我们GitHub以后呢，你在这里可以点这个import project啊，然后呢，点这个import。然后呢，这边GitHub连上以后，它就能看到你这里面所有的repo。然后呢，比如说刚才这个是我们同样的名字对吧？然后呢，我们就直接点import。然后呢，他就会把所有的这个我们刚才文件import这里，他会帮我们设置所有的东西。OK，设置所有的配置，然后呢，这之间一键你就可以部署了。点这个deploy。OK，然后他就可以部署了。
那部署好了以后呢，那就说明我们这个东西就可以直接上线了。OK，好的，他说congratulations啊，这个已经全部部署好了，我们直接现在去我们的网站这边，看看能不能直接打开啊。OK。
好了，大家可以看到，这个是直接上线的这样一个状态啊，是一个网址https啊，不是local host了。然后大家可以看到，这里我们都可以完全看到我们的设计了。所以呢，这个我们就直接可以全部一键部署就完成了。很快啊，两三分钟就可以了。
那如果你这边要，比如说你想换自己的域名啊，还是什么的，这里面也可以去配置啊。比如说这里有DOMAIN对吧？你可以把你的自己的DOMAIN加到这里对吧？也可以就是说买新的DOMAIN也是可以的，你就自己去在这里面操作就可以了，其实都不难的，很简单。
所以呢，这就是一个非常简单的这样一个大家可以看啊，这是其他我们哎，跟我们刚才看的一模一样，全部都已经部署好了。这就是一个非常全面的，我们怎么样去用这个Stitch啊，然后呢，用这种方式去做我们的设计啊，通过vibe coding场景去做设计。然后呢，我们一开始可以用一些我们想用的网站也好，或者是一些喜欢的网站，直接拔他们的模板下来，去做一些好的设计。
再通过最后这个Stitch这个skill啊，然后呢，通过我们这个Anti Gravity的方式呢，这边大家可以看到，这边全部都是我们这个APP的这些文件啊，那这些文件的话呢，也是我们存在本地的任何的时候，我们想找也是可以找到的啊，非常非常的方便。
那通过Anti Gravity vibe coding的方式的话呢，我们可以就是说非常快的时间啊，一个小时你就可以做出来一个你非常喜欢高质量的，非常经验的UI UX的这种啊前端，不管是APP也好，或者是网站也好，对你来说，你不管是新手还是老手，你有没有任何的这个写代码或者是一些技术的背景，其实都无所谓，你都可以去完全很简单的去完成这样小任务。
所以呢，希望大家都可以去试一试啊。好的，那最后的话再跟大家讲一下，如果大家想拿到所有的这些资源的话呢，进到我这个YouTube资源区，免费的群啊，我链接放在下方了。进到我这个YouTube资源区，然后呢，你点今天的视频，然后你就可以看到这些所有的资源了。
然后我这边的话呢，有一个VIP群，VIP群的话呢，里面我有40个小时以上的这样一个非常系统性的学习，怎样做AI自动化工作流，如何用AI创业啊，vibe coding等等这些课程啊，全部在里面。然后呢，每周的话呢，我还有两次直播的时间。OK，如果大家有兴趣的话呢，我把VIP的这样一个链接呢，也放在视频下方了，大家有兴趣的话可以了解一下。
那现在vibe coding呢，其实说实话，是一个对我们来讲非常方便啊，非常好用的这样一个技能。我觉得大家学会了以后呢，啊，不管是对你开想开发任何的产品也好，或者是你给自己现在目前对于自己的工作帮助也好，我觉得都是有大大的提升。我也希望大家可以去自己去试一试，玩一玩，因为说实话，其实就是你跟AI对话而已，没有什么特别难的，一些代码的逻辑啊，你只要大的框架，你都知道了以后呢，其实啊，你都可以用AI去解决你所有想要的问题。
如果你喜欢今天节目的话呢，今天节目对你有点点帮助的话呢，一定要在下面点个赞，帮我把视频赞点烂好吗？然后呢，还没有订阅我频道的朋友呢，一定啊，要订阅我的频道，打开那个小铃铛，所以再不会错过任何发片和直播的时间。
今天节目就到这里了，下次再见啦，拜拜。
那我们废话不多说，我们就开始吧。Let's go.