你一定看到过以下这种漂亮的知识卡片，结构清晰，制作精美，易于传播和收藏。
但是我们自己要做是真的很复杂，比较麻烦，为了只是把知识变成可视化的卡片，还需要费老长时间用设计软件排版设计？
有没有更省时间的方法？最好是一键生成的那种。
像我这种懒人就真的会去找懒人的法子。
↓↓↓
经过磨合调试了几次提示词，借助AI编程工具或者deepseek，可以一次性生成像下面这种还不错的知识卡片。
今天就来分享这套提示词的用法，看到这里应该先果断点赞收藏了，干货来了。
01 deepseek工具一键生成知识卡片网页。
第一种方法就是用deepseek官网工具，生成HTML页面，但是毕竟在官网写一大串代码，承受力还是有限，输出的也有限，所以制作效果略微差一些。
打开deepeek官网，输入以下提示词：
请生成 HTML 页面，用于创建一个
可视化
的 16:9 比例的知识卡片，用于截图或屏幕捕获，以便分享到朋友圈或公众号文章。
目标是生成一个精美的静态卡片图像，而非可交互的网页组件。
卡片风格和配色方案 (固定，无需修改):
主题风格:
科技感、赛博朋克风、紫色基调
配色方案:
基调配色:
深空黑(#0a0a0a) + 科技蓝绿(#00ff88)
辅助色:
霓虹蓝(#00ccff)、柔和紫(#b967ff)、赛博橙(#ff9500)、电子粉(#ff00aa) (酌情点缀)
文字层级:
主文字#e0e0e0 / 次级文字#a0a0a0
背景渐变:
多层次径向渐变 + 线性渐变 (深邃科技感)
卡片视觉结构 (动态设计，根据内容自动调整):
整体比例:
**卡片必须呈现 16:9 的宽高比**。 请确保生成的 CSS 代码能够实现 16:9 的固定比例，即使内容长度变化，卡片比例也保持不变。
视觉布局:
请根据
[内容]
的性质和信息量，**灵活设计卡片的视觉布局**。 不必拘泥于固定的模块名称，但要确保信息组织清晰、视觉层次分明。
主要视觉元素:
背景:
使用
背景渐变
配色方案，营造深邃科技感。
主题标题:
卡片顶部醒目的主题标题，使用 **科技蓝绿 **
**#00ff88**
或 **霓虹蓝 **
**#00ccff**
等强调色，字体醒目大气。
内容区域:
围绕主题展开的内容区域，可以使用列表、段落、图标等形式呈现。 文字颜色使用 **主文字色 **
**#e0e0e0**
或 **次级文字色 **
**#a0a0a0**
区分层级。
强调元素:
可以使用 **科技蓝绿 **
**#00ff88**
、**霓虹蓝 **
**#00ccff**
、**赛博橙 **
**#ff9500**
、**电子粉 **
**#ff00aa**
等辅助色，点缀卡片，例如用于图标、分隔线、强调文字等，提升科技感和视觉吸引力。
留白和间距:
合理运用留白和间距，使卡片内容排版舒适、不拥挤。
边框和阴影 (可选):
可以考虑添加 subtle 的圆角边框和阴影效果，增强卡片的立体感和独立性。
视觉设计原则:
16:9 比例优先:
**务必保证卡片最终呈现 16:9 比例**。
科技感和赛博朋克风:
整体视觉风格要符合科技感和赛博朋克主题。
信息层级清晰:
通过视觉元素区分信息的重要性，方便快速阅读。
美观和吸引力:
卡片设计要美观、吸引眼球，适合在社交媒体传播。
简洁性:
在保证信息完整性的前提下，力求设计简洁、重点突出。
内容如下：看着是有点长，的确也没办法，不然deepseek经常会给你偷懒生成出来的不够精美，只是给你“做完”就得了。
这套提示词当中的的配色方案都是我提前设定好的，比较喜欢的一种科技暗黑风格。
你自己想要别的配色可以自己再改。
同时比例我喜欢16:9的，因为要放到公众号文章里面。你自己钥匙喜欢小红书那种3:4的竖屏卡片，把比例改一下就行。
然后提示词结尾最后的内容，自己复制你想制作成知识卡片的一段知识点即可。
发送给deepseek之后，可以看到初步运行的效果：
制作出来之后，根据你的情况，再让它修改即可，但其实一次性生成出来的就已经很不错了。
像下面这两个都是同一套提示词，只是换了下内容制作的：
02 字节Trae工具，效果更好。
因为字节的Trae接入了claude 3.7，并且代码在软件里做可以写的更多更全面一些，所以同样我把一套提示词输入到了Trae当中。
效果瞬间又上升了一个档次，可以看下制作的效果：
其实还有动态交互的效果的，因为是截图没法看出来，单单看这配色，排版，就已经非常不错了。
进一步再沟通调教，你还能生成下面这种更惊艳的效果：
提示词当然需要多次迭代才行的，有的真的是很长，我都同步在我的AI工具手册当中了，后续有升级的更好的版本也会同步进去。