我也分享个「知识卡片」提示词

首先感谢@baoxing分享的提示词,然后参考了@rick分享的效果仿制而成。
效果图:



提示词:

# SVG总结卡片生成
作为专业的知识卡片设计师,根据提供的内容创建现代扁平化科技风格SVG信息卡片,确保内容层次清晰,视觉风格统一。

## 卡片结构与布局
- 主卡片: 白色背景,圆角20px,两侧和底部具有轻微阴影以形成悬浮效果(不透明度0.1)
- 尺寸:  宽度1000px(主卡片宽度950px),高度应根据内容自动调整,不使用固定高度,顶部与SVG边界留白14px
- 背景: 使用10px网格的点阵图案提升质感

## 内容板块
1. **标题区域:**
   - 顶部全宽标题栏,下方无圆角设计,渐变背景(#0d8999→#26b7bc)
   - 主标题:根据输入内容提取或直接使用,居中显示
   - 副标题:对主标题的补充说明

2. **引用区域:**
   - 标题下方,浅青色背景(#E9F6F5),左侧竖线(#26b7bc)
   - 选择相关名言或创建总结性陈述
   - 标明来源或作者

3. **插图区域:**
   - 首先对[主题]或相关问题进行解释,提供概念概述和背景信息
   - 使用适当的可视化方法(流程图、关系图、时间线等)展示复杂概念
   - 根据插图大小调整卡片大小,避免超出卡片边界

4. **正文内容:**
   - 主要内容卡片:按照逻辑顺序展开[主题]的各个方面,每个卡片聚焦一个具体方面
   - 对比/表格卡片:如有必要,使用表格或并列视图展示对比内容
   - 案例/应用卡片:展示[主题]的实际应用案例或示例

5. **问答区域:**
   - 创建底部常见问题部分,整体使用卡片包裹
   - 设计几个与主题相关的问题
   - 每个问答设计为独立的白色矩形卡片(宽860px,高度根据内容调整)
   - 卡片使用主题色细边框(#26b7bc,宽1px),圆角10px


## 视觉设计规范
- 字体: 无字体要求,正文部分14px大小
- 小标题设计: 每个小标题字体使用浅蓝色,下方应有浅蓝色分割线,宽度与标题文本等宽
- 文本格式: 所有文本不超出右侧边界,较长文本拆分为多行,正文部分有适当缩进,文字间距应宽松
- 视觉元素: 渐变填充、几何装饰、流程线使用虚线或渐变
- 卡片效果: 每个卡片的两侧和底部具有轻微阴影以形成悬浮效果(不透明度0.1)

## 输出要求
- 返回完整SVG代码,及简要设计思路说明
- 确保SVG内所有元素定位准确,无内容溢出
38 Likes

谢谢分享

感谢分享

谢谢分享

感谢分享,这个颜色很清新

感谢大佬!

good one

谢谢佬友分享

感谢楼主分享

感谢分享:folded_hands:

1 Like

好帅啊!

2 Likes

感谢佬友分享!

这个颜色很清新,感谢大佬分享

1 Like

感谢佬友分享

我都可以出去编资料了:joy:

1 Like


流程图,换行会有黑框,是客户端渲染问题吗

好用呀,感谢分享

这就去用用

如果是Claude3.7生成的前提下,建议佬保存代码从浏览器运行看看捏

xcafe 通过 LINUX DO <[email protected]>于2025年3月13日 周四21:32写道:

cool