支持私有云部署
AI知识库

53AI知识库

学习大模型的前沿技术与行业应用场景


为了致敬Manus,我做了一款产品

发布日期:2025-03-21 06:02:10 浏览次数: 1625 来源:AI产品黄叔
推荐语

Manus访谈金句卡片,用AI复刻产品,快速上手!

核心内容:
1. 受访谈启发,制作金句卡片产品
2. 使用多模态工具,复现网页工具开发过程
3. AI编程蓝皮书,更多案例技巧学习

杨芳贤
53A创始人/腾讯云(TVP)最具价值专家
Image

最近看到腾讯张小珺的这次访谈,有很深的触动,其中不少金句,于是我想用来做一些金句卡片,就有了上图! 

 

Image

这样的图片,可以使用工具来生成,黄叔为此做了个网站把它部署了起来,大家可以免费来玩: 

 

https://picquote.superhuang.me/ 

 

那它如何实现呢?非常简单,下面是教程 

 

使用多模态复刻产品

这个该创意来自@南瓜博士 

Image

具体原文可以看南瓜博士复现的文章:用 Trae 开发一个小小小工具

 

在她的文章里有详细的需求描述和开发过程,大家照着做就能复现了。 

 

那今天黄叔想教会大家的,其实是另外一个技巧: 

 

用多模态复刻产品

 

开始的第一步,还是在本地新建一个文件夹,再用Windsurf打开该文件夹,我们在上一节已经都做过演示,这里就不再展开了,如果你忘记了,可以回看: 

第二,在你的电脑上,新建个文件夹,并用Windsurf打开 

 

继续,按照这个流程,我们一开始需要将上面的图片,发给Trae,并带上下面的提示词: 

请你仔细查看这张图片,理解后帮我描述这张图片的功能,清晰罗列,我需要拿来开发一个一样的网页工具,注意,生成的图片底部每一行文字的背景都是相同的,呈现切割感
Image

 

然后回车,让Windsurf开始干活: 

Image

这里我们查看了之后,发现字幕切割部分没有详细介绍,所以可以再补充一段提示词: 

字幕每一行之间需要有分割线

同时每个字幕背后的图片应该是一样的,都是第一行字幕所处高度切割图片后的

随后Windsurf开始继续干活: 

Image

 

因为整个产品比较简单,所以Windsurf一遍就完成了开发: 

Image

 

我把上面的全屏截图给Windsurf,同时加上下面的提示词: 

优化一下样式,现在是竖版的界面,我希望调整成横版,并且按照苹果设计师的风格重新设计整个页面

优化后,就生成了下面的样式: 

Image

 

至此,使用多模态来复刻产品就完成了。 

 

小结下,第一个产品的思路,是通过直接给截图,让Windsurf理解,然后我们再补充需求的逻辑,让Windsurf完成开发,最后再做一些优化。 

 

是不是特别简单?有了Claude,你只需要想创意,实现可以完全交给AI! 

 

课后练习:

 

可以看到,这次我们使用截图直接上传给Trae,让其理解后直接生成,并对未完成部分做了针对性优化,完成了产品的复刻。 

 

当然,我们可以继续优化,增加更多功能,这里就留给大家当成作业! 

比如:增加你的专属水印 

比如:增加更多字体样式 

比如:增加网站图标 

Image

(当前是没有图标的) 


53AI,企业落地大模型首选服务商

产品:场景落地咨询+大模型应用平台+行业解决方案

承诺:免费场景POC验证,效果验证后签署服务协议。零风险落地应用大模型,已交付160+中大型企业

联系我们

售前咨询
186 6662 7370
预约演示
185 8882 0121

微信扫码

添加专属顾问

回到顶部

加载中...

扫码咨询