作者:東方幽静響
链接:https://zhuanlan.zhihu.com/p/22727820526
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

背景

过年期间在给媳妇做小红书内容的时候,刚开始我只是生成内容,然后放到可画里排版。 做了几次我就烦了,太麻烦了。

于是我想我们平常开发的时候,拿着ui都能用html实现,那我能不能让deepseek直接帮我生成? 于是就有了以下操作。

deeepseek生成可运行的html

第一步:deepseek生成小红书风格的内容

第2步:让deepseek生成html提示词如下:

将上述回答所有内容,以小红书卡片风格生成html代码,要求如下:
1,每块文本对应一个卡片
2,生成出来的图片排版合理,美观大气,
3,整体色系调整为孕妇喜欢的色系
4,卡片背景采用点阵尾纹
5,卡片增加复古虚线边框和纸张投影
6,标题独占一个卡片,标题内容占卡片的50%
7,不要调整内容

如果内容有缺失追加提示词:
所有内容帮我填充到html,不能丢失,谢谢

最后生成了html

点击运行HTML效果如下:

最好把html复制下来,创建一个1.html的文件,编辑,将内容填充进去,通过调整浏览器的窗口,这样宽度就能自己控制然后一个个的截图,发布到小红书,我心里美滋滋的给媳妇炫耀,看这多省事。媳妇来了一句,还得截图多麻烦。

通过以下提示词,固定模板,色调和布局需要不断地调整。你复制出来的提示词跑的不如一步步提问好。

帮我优化我的提示词,根据任何内容能直接达到最终效果

deepseek生成图片

deepseek没法直接生成图片,但是我们在网页开发的时候,经常用到一种图片格式svg,可以让它直接生成。本质上还是html 提示词如下:

将整个回答内容(不能丢失)转成svg图片,要求如下:
1,每块文本对应一个卡片,卡片4:3,内容自动折行
2,生成出来的图片排版合理,美观大气,
3,整体色系调整为孕妇喜欢的色系
4,标题独占一个卡片,标题内容占卡片的50%

运行效果如下,不如html

html下载图片

svg的效果不太好,还不如html好控制,媳妇来了一句,你为啥不让它生成的卡片能直接下载图片,我一下子悟了,canvas可以,也是html。

优化了下提示词

将上述回答所有内容,以小红书卡片风格生成html代码,要求如下:
1,每块文本对应一个卡片,每张卡片都提供下载为 png 的按钮,生成的图片中不要包括这个按钮。
2,生成出来的图片排版合理,美观大气,
3,整体色系调整为孕妇喜欢的色系
4,卡片背景采用点阵尾纹
5,卡片增加复古虚线边框和纸张投影
6,标题独占一个卡片,标题内容占卡片的50%
7,不要调整内容

生成效果如下:直接就可以系在

当我展示自动下载功能时,媳妇眼睛亮了:”这个按钮…能做成爱心形状吗?” 于是我们有了这样的对话:
「当然!不过要先解决canvas绘制异形遮罩的问题…」
「说人话!」
「今晚就能上线!」

总结

我们可以通过提示词让deepseek生成爆款标题。

最后找一个ui同学,出一个个好看的模板,不断地优化,限定色调和布局,只是填充内容,可以实现批量生产内容。