|
ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;color: rgb(31, 35, 41);margin: 0px 0px 4px;word-break: break-all;min-height: 20px;">最近看到腾讯张小珺的这次访谈，有很深的触动，其中不少金句，于是我想用来做一些金句卡片，就有了上图！ ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;color: rgb(31, 35, 41);margin: 0px 0px 4px;word-break: break-all;min-height: 20px;"> ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;color: rgb(31, 35, 41);margin: 0px 0px 4px;word-break: break-all;min-height: 20px;">这样的图片，可以使用工具来生成，黄叔为此做了个网站把它部署了起来，大家可以免费来玩： ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;color: rgb(31, 35, 41);margin: 0px 0px 4px;word-break: break-all;min-height: 20px;"> ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;color: rgb(31, 35, 41);margin: 0px 0px 4px;word-break: break-all;min-height: 20px;">https://picquote.superhuang.me/ ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;color: rgb(31, 35, 41);margin: 0px 0px 4px;word-break: break-all;min-height: 20px;"> ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;color: rgb(31, 35, 41);margin: 0px 0px 4px;word-break: break-all;min-height: 20px;">那它如何实现呢？非常简单，下面是教程 ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;color: rgb(31, 35, 41);margin: 0px 0px 4px;word-break: break-all;min-height: 20px;"> ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;letter-spacing: 0.578px;margin-top: 0px;margin-bottom: 8px;font-size: 26px;padding-bottom: 12px;">使用多模态复刻产品ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;color: rgb(31, 35, 41);margin: 0px 0px 4px;word-break: break-all;min-height: 20px;">这个该创意来自@南瓜博士 具体原文可以看南瓜博士复现的文章：用 Trae 开发一个小小小工具 在她的文章里有详细的需求描述和开发过程，大家照着做就能复现了。 那今天黄叔想教会大家的，其实是另外一个技巧： 用多模态复刻产品 开始的第一步，还是在本地新建一个文件夹，再用Windsurf打开该文件夹，我们在上一节已经都做过演示，这里就不再展开了，如果你忘记了，可以回看： 第二，在你的电脑上，新建个文件夹，并用Windsurf打开 继续，按照这个流程，我们一开始需要将上面的图片，发给Trae，并带上下面的提示词： 请你仔细查看这张图片，理解后帮我描述这张图片的功能，清晰罗列，我需要拿来开发一个一样的网页工具，注意，生成的图片底部每一行文字的背景都是相同的，呈现切割感 然后回车，让Windsurf开始干活： 这里我们查看了之后，发现字幕切割部分没有详细介绍，所以可以再补充一段提示词： 字幕每一行之间需要有分割线
同时每个字幕背后的图片应该是一样的，都是第一行字幕所处高度切割图片后的
随后Windsurf开始继续干活： 因为整个产品比较简单，所以Windsurf一遍就完成了开发： 我把上面的全屏截图给Windsurf，同时加上下面的提示词： 优化一下样式，现在是竖版的界面，我希望调整成横版，并且按照苹果设计师的风格重新设计整个页面 优化后，就生成了下面的样式： 至此，使用多模态来复刻产品就完成了。 小结下，第一个产品的思路，是通过直接给截图，让Windsurf理解，然后我们再补充需求的逻辑，让Windsurf完成开发，最后再做一些优化。 是不是特别简单？有了Claude，你只需要想创意，实现可以完全交给AI！ 课后练习： 可以看到，这次我们使用截图直接上传给Trae，让其理解后直接生成，并对未完成部分做了针对性优化，完成了产品的复刻。 当然，我们可以继续优化，增加更多功能，这里就留给大家当成作业！ 比如：增加你的专属水印 比如：增加更多字体样式 比如：增加网站图标 （当前是没有图标的） |
