充分利用AI多模能力-快速模仿，一键生成简洁美观的知识卡片

人月聊IT

发布于 2025-07-10 09:05:37

6370

Hello，大家好，我是人月聊IT。今天接着聊AI工具的使用，即通过AI工具来快速地生成知识卡片。

因为前几天我刚好看到知乎有一个问题，让推荐好用的知识卡片的生成工具或者是绘图工具。对于知识卡片的输出，你当然可以采用类似各种在线绘图工具，或者ppt，visio作图来输出，但是相当来说工作量很大而且也很繁琐。

所以看到这，我还是想强调下我个人的观点，即在AI大模型足够强大的时候，你只要掌握好了方法和工具的使用，可以让AI快速的帮你完成相关的工作。对于知识卡片的生成也同样如此。在今年早期我写过一篇文章，里面给出了知识卡片详细的绘制提示语，而随着AI的发展，特别是AI多模态识图能力的发展，我们看到你只要懂得模仿，即可以快速的生成你期望的知识卡片。

包括在这个问题里面，对方上传了一个参考截图，如下：

注意这个图是对方用手机拍的，比较模糊和倾斜，但是不要紧，这个丝毫不影响AI大模型的读图和理解能力。

因此我们做的第一步就是上传这个附件参考图，让AI帮我们生成用于绘制类似知识卡片图的完整提示语。这个时候我给出的提示语如下：

上传后给出如下提示语：

上传的图片是一张知识卡片的截图，我需要你帮我进行分析，并提取绘制类似的知识卡片的Html网页需要的提示语。注意Html网页里面涉及到结构图或逻辑图，关系图，分类组成图，流程图的地方我需要用SVG绘图。同时提示词我需要你明确给出各类场景图的绘制要求。我比较看重结构逻辑图中的组件拆分，组件之间的关系和集成。

基于上面的提示语，AI会帮我输出完整的详细的绘制知识卡片需要的提示语，你可以将其单独保存为一个独立的markdown文件使用。具体生成内容如下：

# 知识卡片HTML网页制作提示语

## 概述

本文档提供了制作"第一性原理"知识卡片HTML网页的详细提示语和技术要求，特别强调了SVG绘图在结构图、逻辑图、关系图、分类组成图和流程图中的应用。

## 卡片整体设计分析

### 视觉设计要素
- **背景**：深灰色渐变(#4a4a4a到#2a2a2a)
- **文字配色**：白色主文字，橙色、青色、黄色、紫色作为强调色
- **框架设计**：圆角矩形框架
- **布局特点**：层次分明的信息布局
- **表达方式**：图标和文字结合

## HTML网页制作要求

### 整体布局规范
```css
/* 主要样式要求 */
.knowledge-card {
 background: linear-gradient(135deg, #4a4a4a 0%, #2a2a2a 100%);
 max-width: 800px;
 margin: 0 auto;
 padding: 40px;
 border-radius: 20px;
 font-family: 'Inter', 'Roboto', sans-serif;
 color: white;
}
```

### 响应式设计
- 使用CSS Grid或Flexbox布局
- 移动端流程图改为垂直排列
- 触摸友好的交互区域
- 保持视觉层次和可读性

## SVG绘图详细要求

### 四步骤流程图SVG规范

#### 组件设计标准

**1. 矩形框组件**
```svg
<!-- 基础矩形框 -->
<rect width="160" height="120" rx="12" ry="12" 
      fill="rgba(0,0,0,0.3)" 
      stroke="{主题色}" 
      stroke-width="2"/>
```
- 尺寸：160×120px
- 圆角：12px
- 边框：2px实线，颜色对应步骤主题
- 背景：半透明深色(rgba(0,0,0,0.3))

**2. 连接线组件**
```svg
<!-- 连接箭头 -->
<path d="M x1,y1 Q cx,cy x2,y2" 
      stroke="white" 
      stroke-width="2" 
      fill="none" 
      marker-end="url(#arrowhead)"/>

<!-- 箭头标记定义 -->
<defs>
  <marker id="arrowhead" markerWidth="10" markerHeight="7" 
          refX="9" refY="3.5" orient="auto">
    <polygon points="0 0, 10 3.5, 0 7" fill="white"/>
  </marker>
</defs>
```
- 箭头样式：实心三角形
- 线条：2px粗细，白色
- 弯曲度：使用贝塞尔曲线(Q命令)

**3. 文字组件**
```svg
<!-- 步骤标题 -->
<text x="80" y="40" text-anchor="middle" 
      font-size="16" font-weight="bold" 
      fill="{主题色}">步骤标题</text>

<!-- 英文副标题 -->
<text x="80" y="60" text-anchor="middle" 
      font-size="12" 
      fill="white">English Subtitle</text>
```
- 步骤标题：16px粗体，对应主题色
- 英文副标题：12px常规，白色
- 图标：24×24px，简洁线条风格

**4. 布局关系**
- 2×2网格排列
- 水平间距：80px
- 垂直间距：60px
- 连接顺序：Step1→Step2→Step4→Step3形成循环

### 具体步骤内容

#### Step 1 - 分解问题 (橙色主题)
```svg
<!-- 三个圆点图标 -->
<circle cx="70" cy="80" r="4" fill="#FF8C42"/>
<circle cx="80" cy="80" r="4" fill="#FF8C42"/>
<circle cx="90" cy="80" r="4" fill="#FF8C42"/>
```
- 主题色：#FF8C42
- 图标：三个圆点排列
- 英文：Break Down

#### Step 2 - 基本事实 (青色主题)
```svg
<!-- 文档图标 -->
<rect x="70" y="75" width="20" height="15" rx="2" 
      fill="none" stroke="#4ECDC4" stroke-width="2"/>
<line x1="73" y1="80" x2="87" y2="80" stroke="#4ECDC4" stroke-width="1"/>
<line x1="73" y1="83" x2="85" y2="83" stroke="#4ECDC4" stroke-width="1"/>
```
- 主题色：#4ECDC4
- 图标：文档或列表
- 英文：Basic Facts

#### Step 3 - 质疑假设 (黄色主题)
```svg
<!-- 问号图标 -->
<path d="M75,75 Q80,70 85,75 Q85,80 80,82 M80,87 Q80,88 80,89" 
      stroke="#FFE66D" stroke-width="2" fill="none"/>
<circle cx="80" cy="92" r="1.5" fill="#FFE66D"/>
```
- 主题色：#FFE66D
- 图标：问号
- 英文：Question Assumptions

#### Step 4 - 重新构建 (紫色主题)
```svg
<!-- 向上箭头图标 -->
<path d="M80,90 L80,75 M75,80 L80,75 L85,80" 
      stroke="#B19CD9" stroke-width="2" fill="none"/>
```
- 主题色：#B19CD9
- 图标：向上箭头或重建符号
- 英文：Reconstruct

## 页面结构设计

### HTML结构模板
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>第一性原理 - 知识卡片</title>
 <link rel="stylesheet" href="styles.css">
</head>
<body>
 <div class="knowledge-card">
 <header class="card-header">
 <h1>第一性原理</h1>
 <p class="subtitle">First Principles Thinking</p>
 </header>

 <div class="process-diagram">
 <svg viewBox="0 0 400 300" class="flow-chart">
 <!-- SVG流程图内容 -->
 </svg>
 </div>

 <div class="core-concept">
 <h2>从根本原理出发，重新思考一切</h2>
 <p class="english-subtitle">Start from fundamental principles, rethink everything</p>
 <div class="tool-description">
 <span class="highlight">突破思维局限的利器</span>
 </div>
 </div>

 <div class="application-areas">
 <span class="tag business">商业创新</span>
 <span class="tag research">科学研究</span>
 <span class="tag design">产品设计</span>
 <span class="tag learning">学习方法</span>
 </div>

 <div class="warning-text">
 <p class="warning">不要被"常识"和"惯例"束缚你的思维</p>
 </div>

 <footer class="card-footer">
 <div class="meta-info">
 <span class="category">多维思维拆解体系</span>
 <span class="methods">方法论解 / 思维训练 / 创新思考</span>
 <span class="author">作者：思维进阶者</span>
 <span class="date">2025/06/19</span>
 </div>
 </footer>
 </div>
</body>
</html>
```

### CSS样式要求

#### 主要样式类
```css
/* 卡片头部 */
.card-header h1 {
 font-size: 2.5rem;
 margin-bottom: 0.5rem;
 text-align: center;
}

.subtitle {
 font-size: 1.2rem;
 opacity: 0.8;
 text-align: center;
 margin-bottom: 2rem;
}

/* 流程图容器 */
.process-diagram {
 margin: 2rem 0;
 text-align: center;
}

.flow-chart {
 max-width: 100%;
 height: auto;
}

/* 核心概念区域 */
.core-concept {
 text-align: center;
 margin: 2rem 0;
}

.core-concept h2 {
 font-size: 1.5rem;
 margin-bottom: 0.5rem;
}

.english-subtitle {
 font-size: 1rem;
 opacity: 0.7;
 margin-bottom: 1rem;
}

.highlight {
 color: #FFE66D;
 font-weight: bold;
}

/* 应用领域标签 */
.application-areas {
 display: flex;
 justify-content: center;
 gap: 1rem;
 margin: 2rem 0;
 flex-wrap: wrap;
}

.tag {
 padding: 0.5rem 1rem;
 border-radius: 20px;
 font-size: 0.9rem;
 font-weight: 500;
}

.tag.business { background-color: #FF8C42; }
.tag.research { background-color: #4ECDC4; }
.tag.design { background-color: #FFE66D; color: #333; }
.tag.learning { background-color: #B19CD9; }

/* 警示文字 */
.warning {
 color: #FF6B6B;
 font-weight: bold;
 text-align: center;
 margin: 1.5rem 0;
}

/* 页脚信息 */
.card-footer {
 margin-top: 2rem;
 padding-top: 1rem;
 border-top: 1px solid rgba(255,255,255,0.2);
}

.meta-info {
 display: flex;
 justify-content: space-between;
 font-size: 0.9rem;
 opacity: 0.7;
 flex-wrap: wrap;
 gap: 1rem;
}
```

## 交互动效要求

### 动画效果
```css
/* 卡片加载动画 */
.knowledge-card {
 animation: fadeIn 0.8s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 步骤框悬停效果 */
.step-box:hover {
 transform: scale(1.05);
 transition: transform 0.3s ease;
}

/* 连接线绘制动画 */
.connection-line {
 stroke-dasharray: 200;
 stroke-dashoffset: 200;
 animation: drawLine 1s ease-in-out 0.5s forwards;
}

@keyframes drawLine {
    to { stroke-dashoffset: 0; }
}
```

## 移动端适配

### 响应式断点
```css
/* 平板设备 */
@media (max-width: 768px) {
 .knowledge-card {
 padding: 20px;
 margin: 10px;
    }

 .process-diagram svg {
 transform: rotate(90deg) scale(0.8);
    }

 .meta-info {
 flex-direction: column;
 text-align: center;
    }
}

/* 手机设备 */
@media (max-width: 480px) {
 .card-header h1 {
 font-size: 2rem;
    }

 .application-areas {
 flex-direction: column;
 align-items: center;
    }

 .tag {
 width: 80%;
 text-align: center;
    }
}
```

## 技术实现要点

### SVG优化建议
1. **组件化设计**：将每个步骤框定义为可复用的SVG组件
2. **路径优化**：使用简洁的路径命令减少文件大小
3. **响应式SVG**：使用viewBox确保在不同屏幕尺寸下正确显示
4. **动画性能**：使用CSS动画而非JavaScript动画提升性能

### 浏览器兼容性
- 支持现代浏览器（Chrome 60+, Firefox 55+, Safari 12+）
- SVG功能在IE11+中正常工作
- 使用CSS Grid和Flexbox的fallback方案

### 性能优化
- 压缩CSS和HTML
- 使用Web字体的font-display: swap
- 延迟加载非关键CSS
- SVG图标内联以减少HTTP请求

## 扩展应用场景

### 其他类型图表的SVG绘制要求

#### 1. 结构图
- **层次关系**：使用树状结构，清晰的父子节点连接
- **组件拆分**：每个节点独立定义，便于维护和复用
- **视觉层次**：通过颜色、大小、位置体现重要性

#### 2. 关系图
- **节点设计**：圆形或矩形节点，大小反映重要性
- **连接线**：不同类型关系用不同线型表示
- **布局算法**：力导向布局或分层布局

#### 3. 分类组成图
- **分组容器**：使用虚线框或背景色区分
- **元素归属**：清晰的视觉归属关系
- **比例表示**：面积或颜色深度表示占比

#### 4. 流程图
- **标准符号**：遵循流程图标准符号规范
- **决策节点**：菱形表示判断，矩形表示处理
- **流向清晰**：箭头方向明确，避免交叉

## 总结

本提示语提供了完整的知识卡片HTML网页制作指南，特别强调了SVG在各类图表中的应用。通过组件化设计、响应式布局和优雅的动效，可以创建出专业且具有良好用户体验的知识卡片页面。重点关注了结构逻辑图中的组件拆分、组件关系和集成方式，确保图表的可维护性和扩展性。

好了，有了具体的完整提示语，我们来做下简单验证。

即我们让AI基于上面提示语帮我生成SCQA的知识卡片。我们来看下AI最终的生成效果如下：

接着我们再生成一个SWOT分析的知识卡片，效果也不错。

但是这类知识卡片一般是对一个关键概念的解释使用。

还有一类知识卡片是问答类的知识卡片，就是给出一个具体的知识点，然后提出几个关键的问题进行问答。类似如下图的方式：

好了，我们还是参考同样的方式，让AI帮我们生成类似的生成问答类知识卡片的详细提示语说明。

有了这个后我们做了简单测试，让AI帮我做一个微服务核心知识点的简单问答类知识卡片，看看效果如下：

还有一类比较复杂的，就是类似方法步骤类知识卡片，类似项目管理五大过程阶段，类似麦肯锡问题解决七步法，这类知识卡片更加强大每个阶段或步骤的完整描述。当然这类卡片也难不倒AI。

我给出了如下提示词说明：

还有一类知识卡片是讲解一个方法的知识卡片，类似于问题解决七步法这种，这类卡片往往针对每个阶段或步骤都会体现一个横向分层的小面板，每个小面板上面描述该步骤的关键内容，当然可以可以配简单的结构图，关系图或分类图。一般采用左图右边文字方式布局。我现在需要你参考我上传的附件图片，帮我生成一个制作这类知识卡片的详细的html提示词并单纯存储在card04.md文件中。注意需要简洁，咨询公司风格，重点突出。整个配色色系以深蓝色为主色。

基于上面要求，AI又重新帮我生成了一个完整的提示词模板。那么我们用麦肯锡问题七步法做下验证，具体输出的知识卡片如下：