正文预览
01 图片字幕生成器
你想生成自己的金句卡片么?类似这样的:

欢迎访问黄叔发布的网址来进行体验:https://picquote.superhuang.me/
该创意来自@南瓜博士

具体原文可以看南瓜博士复现的文章:https://mp.weixin.qq.com/s/CEJ6ite843M4hPuyT5jB6Q
在她的文章里有详细的需求描述和开发过程,大家照着做就能复现了。
那今天黄叔想教会大家的,其实是另外一个技巧:
用多模态复刻产品
<whiteboard token="UMp4wMrlKh1j0TbL5mlc8LzJnLf"></whiteboard>
开始的第一步,还是在本地新建一个文件夹,再用Windsurf打开该文件夹,我们在上一节已经都做过演示,这里就不再展开了,如果你忘记了,可以点击回看:
继续,按照这个流程,我们一开始需要将上面的图片,发给Windsurf,并带上下面的提示词:
请你仔细查看这张图片,理解后帮我描述这张图片的功能,清晰罗列,我需要拿来开发一个一样的网页工具,注意,生成的图片底部每一行文字的背景都是相同的,呈现切割感

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

这里我们查看了之后,发现字幕切割部分没有详细介绍,所以可以再补充一段提示词:
字幕每一行之间需要有分割线
同时每个字幕背后的图片应该是一样的,都是第一行字幕所处高度切割图片后的
随后Windsurf开始继续干活:

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

我把上面的全屏截图给Windsurf,同时加上下面的提示词:
优化一下样式,现在是竖版的界面,我希望调整成横版,并且按照苹果设计师的风格重新设计整个页面
优化后,就生成了下面的样式:

至此,使用多模态来复刻产品就完成了。
小结下,第一个产品的思路,是通过直接给截图,让Windsurf理解,然后我们再补充需求的逻辑,让Windsurf完成开发,最后再做一些优化。
是不是特别简单?有了Claude,你只需要想创意,实现可以完全交给AI!
课后练习
可以看到,这次我们使用截图直接上传给Windsurf,让其理解后直接生成,并对未完成部分做了针对性优化,完成了产品的复刻。
当然,我们可以继续优化,增加更多功能,这里就留给大家当成作业!
比如:增加你的专属水印
比如:增加更多字体样式
比如:增加网站图标

(当前是没有图标的)
02 注册硅基流动,获赠4000万Token

感谢硅基流动的支持,我们会主要使用它们家的SiliconCloud,即模型云服务平台:

简单可以理解为,只需要注册硅基流动,就可以一键接入包括Deepseek在内的诸多模型。
大家可以点击链接注册,首次使用手机号注册,可获得AI编程蓝皮书专属的4000万Token:
https://cloud.siliconflow.cn/s/AIbclps
注册完成后,建议先完成实名认证,这样可以充值(因为最近Deepseek R1比较火,建议大家稍微冲一些钱,使用Deepseek的Pro版本,这样能够保证稳定使用,有关Pro版的信息,详情可以阅读硅基流动的官方公众号文章:稳定护航!硅基流动上线 Pro 版 DeepSeek R1 & V3 )
![图片展示的是硅基流动平台的实名认证页面。页面左侧有导航栏,其中“实名认证”选项被红色框突出显示。右侧是实名认证的说明,强调为了账户安全需完成实名认证,且完成认证后可使用国际先进模型等专属权益。下方有“个人认证”和“企业认证”两个选项,其中“个人认证”被红色箭头指向。该图片与上下文介绍的完成实名认证操作步骤相关,是完成认证前的页面展示。](/courses/aicoding/img/PZMQ