近期，腾讯张小珺的访谈节目引发了广泛讨论，其中不少金句令人印象深刻。受此启发，我们尝试将这些金句制作成卡片——效果出奇地好。

实际上，这类金句卡片工具完全可以利用AI技术来生成。以下教程将详细拆解整个实现过程，帮助您快速上手。

使用多模态能力复刻产品

这一创意最初源自@南瓜博士 的分享，她撰写了《用 Trae 开发一个小小小工具》一文，其中包含了极其详尽的需求描述与开发流程。按照步骤操作即可轻松复现。

不过，今天我们要分享的是另一个核心技巧：借助多模态能力直接复刻产品。

首先，在本地新建一个文件夹，并使用 Windsurf 打开。这一基础操作此前已演示过，此处不再赘述。若遗忘，可参考对应章节。

接下来进入核心环节：将上述金句卡片的截图发送给 Windsurf，并附上以下提示词：

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

按下回车键，Windsurf 便开始工作。它会解析图片内容，并尝试生成相应的网页代码。

检查后发现，它对字幕切割部分的描述仍不够详尽。此时可补充以下提示词：

字幕每一行之间需要有分割线。
同时每个字幕背后的图片应该是一样的，都是第一行字幕所处高度切割图片后的。

Windsurf 接收到补充需求后，会继续优化代码。由于整个产品逻辑相对简单，Windsurf 通常一次即可完成开发。

接下来可进一步优化样式。将之前的全屏截图再次发送给 Windsurf，并附带以下提示词：

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

优化完成后，生成的页面即变为横版，视觉效果显著提升。

至此，利用多模态能力复刻产品的过程便告完成。

总结该流程的核心思路：首先提供截图，使 Windsurf 理解产品形态；其次补充需求逻辑，促使其完成开发；最后进行视觉优化。整个过程可概括为：截图+提示词 → 理解 → 生成 → 优化。

是不是非常简单？借助 Claude 的多模态能力，任何创意灵感都能快速落地实现。

课后练习

可以看到，本次直接上传截图给 Windsurf（或 Trae），让其理解并生成代码，再对不完善之处进行针对性优化，即完成了产品的复刻。

当然，还有很多可以优化的方向。这些就留作练习了：

例如：添加个人专属水印；

例如：支持更多字体样式选择；

例如：更换网站图标，使该工具更具独立产品质感。

（当前尚无图标）