写了一篇详细的教程 教大家如何生成这种一图流模型或者产品介绍宣传图 顺便教一下怎么用 Figma 修改从网页生成的图片

如果等不及施工可以看这里：mp.weixin.qq.com/s/uQQ7R8rBUXZ...

也可以参考橘子这个：x.com/oran_ge/status/191721521...

生成网页 我们就以 DeepSeek-Prover-V2 这个例子介绍一下，还是我之前讲 Vibe Coding 说的第一次生成结果至关重要，所以我们需要准备一些东西。 首先是模型的论文或者介绍博客： 如果你要介绍产品更新也是一样，需要上传文档，论文的话就是 PDF 就行，如果是介绍博客就直接全选网页内容保存一个

提示词： 基于模型发布文档的关键信息，帮我用类似苹果发布会PPT的Bento Grid风格的视觉设计生成一个中文动态网页展示，具体要求为： 1. 尽量在一页展示全部信息，背景为白色、文字和按钮颜色为纯黑色，高亮色为#4D6BFE 2.

一般这个时候第一次生的结果就已经不错了，如果没有问题的话你就可以用最大的显示面积截图就行。 但是经常会有一些小问题，比如在布局上可能会出现的问题有标题没有加上卡片和边框，或者在某个部分的卡片没有占满全部的空间，比如我 Deepseek 这个就有问题。 这种问题让 AI

Figma 微调设计稿 首先我们需要找到这次要用的核心 Figma 插件 html. to. design 只需要在随便一个 Figma 文件里面点击下方 Tab 栏圈住的图标之后搜索就行。

然后我们输入需要导入的网页地址，如果你没有的话可以用 Youware 部署，然后点击 Import 按钮就行. 之后导入一般的之后他会让你选一下其他选项，这里除了不让开的开关你都开了就行，然后 Font Mappings 字体设置这里需要选替换字体，如果你的网页有中文的话我推荐你换成 Pingfang SC。

然后你就能看到导入的网页了，是一个完整的画板，里面还有 Youware 的下导航这里有很多我们不需要的部分，你就可以直接选中这部分删掉就行。 删掉没用的 tab 栏之后我们发现 Iframe 这个里面也没有内容，然后实际的内容都在红框没有权重的那个 Iframe 里面。

终于要进行我们的改动了 首先我们希望给头部的标题也加上卡片，这时候我们选了一下发现头部 Header 的宽度比下面所有卡片加起来的宽度是要宽的所以先把他们的宽度统一改成 1472px。

最后我们做导出前的最后一步，整个卡片四周的边距有些问题，左右很宽上下很窄，我们想要他们一样，这个时候我们只需要选中 html-Body 这个图层，然后把红框部分的间距都改成统一的 32 就行。 之后将html-Body 宽度这里改成适应内容。 最后将最上面的 Iframe

如果你想要想我上面的的展示图片那样给图片加个渐变边框的话可以用 postspark（https:// postspark. app/screenshot） 这类工具。

好了，今天的图片生成教程就到这里了。 最后欢迎在评论区或者其他平台 @ 我，交作业