还在用PPT套模板做封面？醒醒，AI已经帮你把活儿全包了！最新实操教程，只要复制粘贴，1 分钟就能生成一张“高颜值+高转发”的分享卡片，发到朋友圈、小红书瞬间被夸“太专业”！
一、准备工作（30 秒搞定）
1. 任意 AI 工具：DeepSeek、Claude、Coze 都行，电脑手机都能用
2. 提示词：文末免费领取，直接复制，不用改一个字母
二、5 步出图（实测 60 秒）
① 打开 AI 对话框，粘贴提示词
② 在提示词下方继续粘贴文章正文或链接
③ 发送后等待 10 秒，AI 自动生成一段网页代码
④ 点击「预览」→ 按 Ctrl + “-”（Mac 用 Command + “-”）缩小画面，直到整张卡片完整露出
⑤ 系统截图 or 微信 Alt+A / 手机三指截屏，一张 1080P 高清卡片到手！
三、效果有多炸？
- 字体、配色、留白全自动，审美直接对标专业设计师
- 支持小红书 3:4、公众号 9:5、朋友圈 1:1 三种比例，一键自适应
- 深色/浅色两套主题，科技、人文、干货、情感内容都能 hold 住
- 关键信息自动高亮，读完 3 秒就想点收藏
四、提示词
竖版-精简提示词，支持双端保存
# 智能文章概念卡片设计师
## 核心任务
创建750px宽度、高度自适应的响应式文章概念卡片，智能提取文章核心内容并以高可读性的视觉形式呈现。
## 关键要求
- **固定宽度**：750px（内容区690px，左右各30px边距）
- **智能按钮**：PC端显示"复制图片"，移动端显示"保存图片"
- **内容完整性**：确保核心信息完整呈现，不截断关键内容
- **视觉平衡**：内容65% + 视觉元素35%的比例分配
## 设计流程
### 1. 内容分析
- 提取标题、核心观点、主要论点（3-7个）、重要引述（2-3句）
- 根据内容密度选择展示策略：完整展示 → 筛选展示 → 重点提炼
- 建立三层架构：核心概念（必见）→ 支撑论点（重要）→ 细节例证（补充）
### 2. 视觉设计
- **色彩方案**：基于文章主题和情感基调创建独特配色
- **字体层级**：主标题40px，副标题32px，正文24-26px
- **排版细节**：行高1.8，确保对比度≥4.5:1
- **图标选择**：使用Font Awesome图标增强表现力
### 3. 平衡优化
- 可读性优先，创意表现为辅
- 确保视觉层次清晰，内容逻辑完整
## 技术实现
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文章概念卡片</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@400;600;700&display=swap" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#主色调',
secondary: '#辅助色',
accent: '#强调色',
},
width: { 'card': '750px' },
fontFamily: {
'serif-sc': ['Noto Serif SC', 'serif'],
'sans-sc': ['Noto Sans SC', 'sans-serif'],
},
fontSize: {
'main-title': '40px',
'section-title': '32px',
'body': '24px',
'note': '20px',
}
}
}
}
</script>
<style>
body { color: #333; line-height: 1.8; }
.key-concept { font-weight: 700; position: relative; padding: 0 2px; }
.key-concept::after {
content: ''; position: absolute; bottom: 4px; left: 0; width: 100%; height: 10px;
background-color: rgba(245, 158, 11, 0.2); z-index: -1;
}
.quote-text {
font-style: italic; border-left: 4px solid #f59e0b; padding-left: 16px; margin: 18px 0;
}
.concept-card { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); }
#actionButton {
position: fixed; top: 20px; right: 20px; background-color: #4a90e2; color: white;
border: none; padding: 10px 20px; border-radius: 8px; font-size: 16px; cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); z-index: 1000;
}
#actionButton:hover { background-color: #3b7ed8; }
#actionButton:disabled { background-color: #94a3b8; cursor: not-allowed; }
</style>
</head>
<body class="bg-gray-50 flex justify-center items-center min-h-screen p-5">
<div class="w-card bg-white rounded-xl shadow-xl concept-card" id="cardToExport">
<div class="p-10 flex flex-col">
<header class="mb-6"></header>
<main class="flex-grow flex flex-col gap-6"></main>
<footer class="mt-8 pt-6 border-t border-gray-200 text-note text-gray-500"></footer>
</div>
</div>
<button id="actionButton"></button>
<script>
function isMobile() {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
const actionButton = document.getElementById('actionButton');
const cardElement = document.getElementById('cardToExport');
async function captureAndProcess() {
const tempContainer = document.createElement('div');
tempContainer.style.cssText = 'width:750px;position:absolute;left:-9999px;top:0px;';
document.body.appendChild(tempContainer);
const cardClone = cardElement.cloneNode(true);
tempContainer.appendChild(cardClone);
const canvas = await html2canvas(cardClone, {
scale: 2, useCORS: true, backgroundColor: '#f9fafb', logging: false,
width: 750, height: cardClone.scrollHeight
});
document.body.removeChild(tempContainer);
return canvas;
}
function saveImageMobile(canvas) {
const dataURL = canvas.toDataURL('image/png', 1.0);
try {
const newWindow = window.open();
newWindow.document.write(`
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>长按保存图片</title>
<style>
body,html{margin:0;padding:0;background-color:#f0f2f5}
.container{padding:20px;display:flex;flex-direction:column;align-items:center;gap:20px;min-height:100vh;box-sizing:border-box}
p{color:#333;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-size:16px;text-align:center;line-height:1.5;background-color:#fff;padding:12px 20px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.1)}
img{max-width:100%;height:auto;border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,0.15)}
</style>
</head>
<body>
<div class="container">
<p>请长按下方图片，然后选择 "存储图像" 或 "添加到照片"。</p>
<img src="${dataURL}" alt="生成的文章概念卡片" />
</div>
</body>
</html>
`);
newWindow.document.close();
} catch (e) {
alert('无法打开新窗口展示图片。请尝试更换浏览器或检查弹窗拦截设置。');
}
}
async function copyImageDesktop(canvas) {
try {
canvas.toBlob(async function(blob) {
try {
const item = new ClipboardItem({ "image/png": blob });
await navigator.clipboard.write([item]);
alert('卡片已复制到剪贴板！');
} catch (error) {
const dataURL = canvas.toDataURL('image/png');
const newWindow = window.open();
newWindow.document.write(`
<html><head><title>复制图片</title></head>
<body style="margin:0;padding:20px;text-align:center;font-family:Arial,sans-serif;">
<p style="margin-bottom:20px;color:#666;">右键图片选择"复制图像"</p>
<img src="${dataURL}" style="max-width:100%;height:auto;border:1px solid #ddd;" />
</body></html>
`);
}
});
} catch (error) {
alert('复制失败，请尝试手动截图。');
}
}
if (isMobile()) {
actionButton.textContent = '保存图片';
actionButton.addEventListener('click', async () => {
try {
actionButton.textContent = '生成中...';
actionButton.disabled = true;
const canvas = await captureAndProcess();
saveImageMobile(canvas);
} catch (error) {
alert('生成图片失败，请稍后再试。');
} finally {
actionButton.textContent = '保存图片';
actionButton.disabled = false;
}
});
} else {
actionButton.textContent = '复制图片';
actionButton.addEventListener('click', async () => {
try {
actionButton.textContent = '生成中...';
actionButton.disabled = true;
const canvas = await captureAndProcess();
await copyImageDesktop(canvas);
} catch (error) {
alert('生成图片失败，请稍后重试。');
} finally {
actionButton.textContent = '复制图片';
actionButton.disabled = false;
}
});
}
</script>
</body>
</html>
```
## 输出要求
- 输出完整HTML代码，无需```html标记
- 不进行HTML实体编码
- 根据文章内容动态调整配色方案和布局结构
## 以下为文章内容：
# 智能文章概念卡片设计师
## 核心任务
创建750px宽度、高度自适应的响应式文章概念卡片，智能提取文章核心内容并以高可读性的视觉形式呈现。
## 关键要求
- **固定宽度**：750px（内容区690px，左右各30px边距）
- **智能按钮**：PC端显示"复制图片"，移动端显示"保存图片"
- **内容完整性**：确保核心信息完整呈现，不截断关键内容
- **视觉平衡**：内容65% + 视觉元素35%的比例分配
## 设计流程
### 1. 内容分析
- 提取标题、核心观点、主要论点（3-7个）、重要引述（2-3句）
- 根据内容密度选择展示策略：完整展示 → 筛选展示 → 重点提炼
- 建立三层架构：核心概念（必见）→ 支撑论点（重要）→ 细节例证（补充）
### 2. 视觉设计
- **色彩方案**：基于文章主题和情感基调创建独特配色
- **字体层级**：主标题40px，副标题32px，正文24-26px
- **排版细节**：行高1.8，确保对比度≥4.5:1
- **图标选择**：使用Font Awesome图标增强表现力
### 3. 平衡优化
- 可读性优先，创意表现为辅
- 确保视觉层次清晰，内容逻辑完整
## 技术实现
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文章概念卡片</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@400;600;700&display=swap" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#主色调',
secondary: '#辅助色',
accent: '#强调色',
},
width: { 'card': '750px' },
fontFamily: {
'serif-sc': ['Noto Serif SC', 'serif'],
'sans-sc': ['Noto Sans SC', 'sans-serif'],
},
fontSize: {
'main-title': '40px',
'section-title': '32px',
'body': '24px',
'note': '20px',
}
}
}
}
</script>
<style>
body { color: #333; line-height: 1.8; }
.key-concept { font-weight: 700; position: relative; padding: 0 2px; }
.key-concept::after {
content: ''; position: absolute; bottom: 4px; left: 0; width: 100%; height: 10px;
background-color: rgba(245, 158, 11, 0.2); z-index: -1;
}
.quote-text {
font-style: italic; border-left: 4px solid #f59e0b; padding-left: 16px; margin: 18px 0;
}
.concept-card { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); }
#actionButton {
position: fixed; top: 20px; right: 20px; background-color: #4a90e2; color: white;
border: none; padding: 10px 20px; border-radius: 8px; font-size: 16px; cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); z-index: 1000;
}
#actionButton:hover { background-color: #3b7ed8; }
#actionButton:disabled { background-color: #94a3b8; cursor: not-allowed; }
</style>
</head>
<body class="bg-gray-50 flex justify-center items-center min-h-screen p-5">
<div class="w-card bg-white rounded-xl shadow-xl concept-card" id="cardToExport">
<div class="p-10 flex flex-col">
<header class="mb-6"></header>
<main class="flex-grow flex flex-col gap-6"></main>
<footer class="mt-8 pt-6 border-t border-gray-200 text-note text-gray-500"></footer>
</div>
</div>
<button id="actionButton"></button>
<script>
function isMobile() {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
const actionButton = document.getElementById('actionButton');
const cardElement = document.getElementById('cardToExport');
async function captureAndProcess() {
const tempContainer = document.createElement('div');
tempContainer.style.cssText = 'width:750px;position:absolute;left:-9999px;top:0px;';
document.body.appendChild(tempContainer);
const cardClone = cardElement.cloneNode(true);
tempContainer.appendChild(cardClone);
const canvas = await html2canvas(cardClone, {
scale: 2, useCORS: true, backgroundColor: '#f9fafb', logging: false,
width: 750, height: cardClone.scrollHeight
});
document.body.removeChild(tempContainer);
return canvas;
}
function saveImageMobile(canvas) {
const dataURL = canvas.toDataURL('image/png', 1.0);
try {
const newWindow = window.open();
newWindow.document.write(`
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>长按保存图片</title>
<style>
body,html{margin:0;padding:0;background-color:#f0f2f5}
.container{padding:20px;display:flex;flex-direction:column;align-items:center;gap:20px;min-height:100vh;box-sizing:border-box}
p{color:#333;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-size:16px;text-align:center;line-height:1.5;background-color:#fff;padding:12px 20px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.1)}
img{max-width:100%;height:auto;border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,0.15)}
</style>
</head>
<body>
<div class="container">
<p>请长按下方图片，然后选择 "存储图像" 或 "添加到照片"。</p>
<img src="${dataURL}" alt="生成的文章概念卡片" />
</div>
</body>
</html>
`);
newWindow.document.close();
} catch (e) {
alert('无法打开新窗口展示图片。请尝试更换浏览器或检查弹窗拦截设置。');
}
}
async function copyImageDesktop(canvas) {
try {
canvas.toBlob(async function(blob) {
try {
const item = new ClipboardItem({ "image/png": blob });
await navigator.clipboard.write([item]);
alert('卡片已复制到剪贴板！');
} catch (error) {
const dataURL = canvas.toDataURL('image/png');
const newWindow = window.open();
newWindow.document.write(`
<html><head><title>复制图片</title></head>
<body style="margin:0;padding:20px;text-align:center;font-family:Arial,sans-serif;">
<p style="margin-bottom:20px;color:#666;">右键图片选择"复制图像"</p>
<img src="${dataURL}" style="max-width:100%;height:auto;border:1px solid #ddd;" />
</body></html>
`);
}
});
} catch (error) {
alert('复制失败，请尝试手动截图。');
}
}
if (isMobile()) {
actionButton.textContent = '保存图片';
actionButton.addEventListener('click', async () => {
try {
actionButton.textContent = '生成中...';
actionButton.disabled = true;
const canvas = await captureAndProcess();
saveImageMobile(canvas);
} catch (error) {
alert('生成图片失败，请稍后再试。');
} finally {
actionButton.textContent = '保存图片';
actionButton.disabled = false;
}
});
} else {
actionButton.textContent = '复制图片';
actionButton.addEventListener('click', async () => {
try {
actionButton.textContent = '生成中...';
actionButton.disabled = true;
const canvas = await captureAndProcess();
await copyImageDesktop(canvas);
} catch (error) {
alert('生成图片失败，请稍后重试。');
} finally {
actionButton.textContent = '复制图片';
actionButton.disabled = false;
}
});
}
</script>
</body>
</html>
```
## 输出要求
- 输出完整HTML代码，无需```html标记
- 不进行HTML实体编码
- 根据文章内容动态调整配色方案和布局结构
## 以下为文章内容：
竖版-极度精简提示词，无保存能力
# 智能文章概念卡片设计师
## 核心任务
创建750px宽度、高度自适应的响应式文章概念卡片，智能提取文章核心内容并以高可读性的视觉形式呈现。
## 关键要求
- **固定宽度**：750px（内容区690px，左右各30px边距）
- **内容完整性**：确保核心信息完整呈现，不截断关键内容
- **视觉平衡**：内容65% + 视觉元素35%的比例分配
- **响应式设计**：在不同设备上保持良好的显示效果
## 设计流程
### 1. 内容分析
- 提取标题、核心观点、主要论点（3-7个）、重要引述（2-3句）
- 根据内容密度选择展示策略：完整展示 → 筛选展示 → 重点提炼
- 建立三层架构：核心概念（必见）→ 支撑论点（重要）→ 细节例证（补充）
### 2. 视觉设计
- **色彩方案**：基于文章主题和情感基调创建独特配色
- **字体层级**：主标题40px，副标题32px，正文24-26px
- **排版细节**：行高1.8，确保对比度≥4.5:1
- **图标选择**：使用Font Awesome图标增强表现力
### 3. 平衡优化
- 可读性优先，创意表现为辅
- 确保视觉层次清晰，内容逻辑完整
## 技术实现
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文章概念卡片</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@400;600;700&display=swap" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#主色调',
secondary: '#辅助色',
accent: '#强调色',
},
width: { 'card': '750px' },
fontFamily: {
'serif-sc': ['Noto Serif SC', 'serif'],
'sans-sc': ['Noto Sans SC', 'sans-serif'],
},
fontSize: {
'main-title': '40px',
'section-title': '32px',
'body': '24px',
'note': '20px',
}
}
}
}
</script>
<style>
body { color: #333; line-height: 1.8; }
.key-concept { font-weight: 700; position: relative; padding: 0 2px; }
.key-concept::after {
content: ''; position: absolute; bottom: 4px; left: 0; width: 100%; height: 10px;
background-color: rgba(245, 158, 11, 0.2); z-index: -1;
}
.quote-text {
font-style: italic; border-left: 4px solid #f59e0b; padding-left: 16px; margin: 18px 0;
}
.concept-card { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); }
</style>
</head>
<body class="bg-gray-50 flex justify-center items-center min-h-screen p-5">
<div class="w-card bg-white rounded-xl shadow-xl concept-card">
<div class="p-10 flex flex-col">
<header class="mb-6"></header>
<main class="flex-grow flex flex-col gap-6"></main>
<footer class="mt-8 pt-6 border-t border-gray-200 text-note text-gray-500"></footer>
</div>
</div>
</body>
</html>
## 输出要求
- 输出完整HTML代码，无需```html标记
- 不进行HTML实体编码
- 根据文章内容动态调整配色方案和布局结构
## 以下为文章内容
{{title}}、{{content}}
横版-16:9，适配飞书多维表格，无保存能力
# 智能文章概念卡片设计师提示词
## 核心任务
创建16:9比例的响应式文章概念卡片，智能提取文章核心内容并以高可读性的视觉形式呈现，适配飞书多维表格显示。
## 关键要求
- 16:9比例：宽度16单位，高度9单位（实际可以是800px×450px或任意16:9比例）。
- 内容区域：去除边距后的实际内容显示区域。
- 内容适配：智能压缩和精选内容以适应固定比例。
- 视觉平衡：内容70% + 视觉元素30%的紧凑比例分配。
- 响应式设计：在不同设备上保持16:9比例。
- 溢出防护：宁可减少内容，也不允许任何元素溢出边界，使用Tailwind的文本截断类（如自定义text-clamp-2/3）和overflow-hidden控制，确保在16:9比例内完整显示。
## 设计流程
### 1. 内容分析
- 提取核心内容：标题、副标题、核心观点、主要论点（2-4个精选）、关键引述（1-2句）、作者和来源信息。
- 内容精选策略：由于16:9比例的高度限制，优先展示最核心的内容，建立二层架构：核心概念（必见）→ 关键支撑（重要）。
- 内容密度控制：分析长度和复杂度，确保内容在16:9比例内完整展示，避免纵向拥挤，进行文本→要点/简化转换。
- 内容驱动的色彩方案：分析主题、情感基调，创建独特配色（主色、辅助色、强调色），确保视觉和谐。
### 2. 视觉设计
- 字体与排版：主标题28-32px，副标题20-24px，正文16-18px（适应16:9紧凑布局）。统一行高1.3-1.4，确保对比度≥4.5:1，紧凑间距，使用Google Fonts（Noto Serif SC、Noto Sans SC）。
- 图标与视觉元素：使用Font Awesome图标增强表现力，选择语义化图标表达概念。
- 布局优化：横向布局优先，充分利用16:9宽屏空间，左右分栏展示。应用渐进式填充，从高优先级内容开始，边检查空间（接近80%时停止）。
- 溢出检查：完成设计后，验证无元素超出边界，文本完整显示，并在各种环境测试视觉完整性。
### 3. 平衡优化
- 可读性与创意平衡：可读性优先，创意表现为辅，使用双指标评分（稳定性0-10，创意0-10），从稳定设计开始逐步添加创意。
- 视觉层次：确保层次清晰、内容逻辑完整、16:9适配，利用横向空间避免纵向拥挤。。
- 最终品质保障：检查色彩和谐、排版一致、对齐精确、溢出合规。探索SVG与HTML混合等高级技术。
## 技术实现与规范
### 基础技术栈
HTML5：语义化标签构建结构。
TailwindCSS：通过CDN引入，利用工具类实现布局。
专业图标库：通过CDN引入Font Awesome。
Google Fonts：引入Noto Serif SC和Noto Sans SC。
Tailwind配置：动态生成色彩变量（primary, secondary, accent）和自定义尺寸（card: 16rem/9rem等变体），aspectRatio: '16/9'，字体家族（serif-sc, sans-sc），字体大小（main-title: 32px等）。
### HTML基础结构
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文章概念卡片</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@400;600;700&display=swap" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: { primary: '#主色调', secondary: '#辅助色', accent: '#强调色' },
width: { 'card': '16rem', 'card-lg': '32rem', 'card-xl': '48rem' },
height: { 'card': '9rem', 'card-lg': '18rem', 'card-xl': '27rem' },
aspectRatio: { '16/9': '16 / 9' },
fontFamily: { 'serif-sc': ['Noto Serif SC', 'serif'], 'sans-sc': ['Noto Sans SC', 'sans-serif'] },
fontSize: { 'main-title': '32px', 'section-title': '24px', 'body': '18px', 'note': '16px' }
}
}
}
</script>
<style>
body { color: #333; line-height: 1.4; }
.key-concept { font-weight: 700; position: relative; padding: 0 2px; }
.key-concept::after { content: ''; position: absolute; bottom: 2px; left: 0; width: 100%; height: 6px; background-color: rgba(245, 158, 11, 0.2); z-index: -1; }
.quote-text { font-style: italic; border-left: 3px solid #f59e0b; padding-left: 12px; margin: 12px 0; }
.concept-card { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); }
.compact-layout { display: flex; flex-direction: row; gap: 20px; align-items: stretch; }
.content-column { flex: 1; }
.text-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.text-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
</style>
</head>
<body class="bg-gray-50 flex justify-center items-center min-h-screen p-5">
<div class="aspect-[16/9] w-card-xl bg-white rounded-xl shadow-xl concept-card overflow-hidden box-border">
<div class="p-6 flex flex-col h-full">
<header class="mb-3"><!-- 标题区域 --></header>
<main class="flex-grow flex flex-col gap-3 overflow-hidden"><!-- 核心内容区域 --></main>
<footer class="mt-3 pt-3 border-t border-gray-200 text-note text-gray-500"><!-- 来源信息 --></footer>
</div>
</div>
</body>
</html>
```
## 溢出防护技术
- 固定比例容器：使用aspect-[16/9]和固定宽度类（w-card-xl），应用box-sizing: border-box和overflow-hidden。
- 内容限制：使用自定义text-clamp-2/3类限制文本显示行数，避免纵向溢出。
- 溢出控制：为所有容器添加overflow-hidden类，确保在16:9比例内无元素超出。
- 框模型控制：使用box-border确保尺寸计算包含内边距和边框。
- 实时监控：在填充过程中检查内容高度，预警潜在溢出风险，优先横向布局适配宽屏。
## 设计准则
- 溢出预防：内容适应比例空间，优先完整性，避免纵向拥挤。
- 层次分明：合理规划横向分栏。
- 留白节奏：保持视觉平衡，创造呼吸空间。
- 工具类优先：减少自定义CSS。
- 语义化图标：表达核心概念。
- 内容驱动：所有决策基于文章理解。
- 创新表达：在框架内探索创新手法。
## 输出要求
- 输出完整HTML代码，无需```html
- 不进行HTML实体编码。
- 根据文章内容动态调整配色方案和布局结构。
- 严格保持16:9比例，优化横向布局设计。
- 内容精简化，适应紧凑空间显示。
## 以下为文章内容
{{content}}
微信扫描下方的二维码阅读更多精彩内容
声明：本站所有文章，如无特殊说明或标注，均为橙市播客原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
# 智能文章概念卡片设计师
## 核心任务
创建750px宽度、高度自适应的响应式文章概念卡片，智能提取文章核心内容并以高可读性的视觉形式呈现。
## 关键要求
- **固定宽度**：750px（内容区690px，左右各30px边距）
- **内容完整性**：确保核心信息完整呈现，不截断关键内容
- **视觉平衡**：内容65% + 视觉元素35%的比例分配
- **响应式设计**：在不同设备上保持良好的显示效果
## 设计流程
### 1. 内容分析
- 提取标题、核心观点、主要论点（3-7个）、重要引述（2-3句）
- 根据内容密度选择展示策略：完整展示 → 筛选展示 → 重点提炼
- 建立三层架构：核心概念（必见）→ 支撑论点（重要）→ 细节例证（补充）
### 2. 视觉设计
- **色彩方案**：基于文章主题和情感基调创建独特配色
- **字体层级**：主标题40px，副标题32px，正文24-26px
- **排版细节**：行高1.8，确保对比度≥4.5:1
- **图标选择**：使用Font Awesome图标增强表现力
### 3. 平衡优化
- 可读性优先，创意表现为辅
- 确保视觉层次清晰，内容逻辑完整
## 技术实现
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文章概念卡片</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@400;600;700&display=swap" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#主色调',
secondary: '#辅助色',
accent: '#强调色',
},
width: { 'card': '750px' },
fontFamily: {
'serif-sc': ['Noto Serif SC', 'serif'],
'sans-sc': ['Noto Sans SC', 'sans-serif'],
},
fontSize: {
'main-title': '40px',
'section-title': '32px',
'body': '24px',
'note': '20px',
}
}
}
}
</script>
<style>
body { color: #333; line-height: 1.8; }
.key-concept { font-weight: 700; position: relative; padding: 0 2px; }
.key-concept::after {
content: ''; position: absolute; bottom: 4px; left: 0; width: 100%; height: 10px;
background-color: rgba(245, 158, 11, 0.2); z-index: -1;
}
.quote-text {
font-style: italic; border-left: 4px solid #f59e0b; padding-left: 16px; margin: 18px 0;
}
.concept-card { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); }
</style>
</head>
<body class="bg-gray-50 flex justify-center items-center min-h-screen p-5">
<div class="w-card bg-white rounded-xl shadow-xl concept-card">
<div class="p-10 flex flex-col">
<header class="mb-6"></header>
<main class="flex-grow flex flex-col gap-6"></main>
<footer class="mt-8 pt-6 border-t border-gray-200 text-note text-gray-500"></footer>
</div>
</div>
</body>
</html>
## 输出要求
- 输出完整HTML代码，无需```html标记
- 不进行HTML实体编码
- 根据文章内容动态调整配色方案和布局结构
## 以下为文章内容
{{title}}、{{content}}横版-16:9，适配飞书多维表格，无保存能力
# 智能文章概念卡片设计师提示词
## 核心任务
创建16:9比例的响应式文章概念卡片，智能提取文章核心内容并以高可读性的视觉形式呈现，适配飞书多维表格显示。
## 关键要求
- 16:9比例：宽度16单位，高度9单位（实际可以是800px×450px或任意16:9比例）。
- 内容区域：去除边距后的实际内容显示区域。
- 内容适配：智能压缩和精选内容以适应固定比例。
- 视觉平衡：内容70% + 视觉元素30%的紧凑比例分配。
- 响应式设计：在不同设备上保持16:9比例。
- 溢出防护：宁可减少内容，也不允许任何元素溢出边界，使用Tailwind的文本截断类（如自定义text-clamp-2/3）和overflow-hidden控制，确保在16:9比例内完整显示。
## 设计流程
### 1. 内容分析
- 提取核心内容：标题、副标题、核心观点、主要论点（2-4个精选）、关键引述（1-2句）、作者和来源信息。
- 内容精选策略：由于16:9比例的高度限制，优先展示最核心的内容，建立二层架构：核心概念（必见）→ 关键支撑（重要）。
- 内容密度控制：分析长度和复杂度，确保内容在16:9比例内完整展示，避免纵向拥挤，进行文本→要点/简化转换。
- 内容驱动的色彩方案：分析主题、情感基调，创建独特配色（主色、辅助色、强调色），确保视觉和谐。
### 2. 视觉设计
- 字体与排版：主标题28-32px，副标题20-24px，正文16-18px（适应16:9紧凑布局）。统一行高1.3-1.4，确保对比度≥4.5:1，紧凑间距，使用Google Fonts（Noto Serif SC、Noto Sans SC）。
- 图标与视觉元素：使用Font Awesome图标增强表现力，选择语义化图标表达概念。
- 布局优化：横向布局优先，充分利用16:9宽屏空间，左右分栏展示。应用渐进式填充，从高优先级内容开始，边检查空间（接近80%时停止）。
- 溢出检查：完成设计后，验证无元素超出边界，文本完整显示，并在各种环境测试视觉完整性。
### 3. 平衡优化
- 可读性与创意平衡：可读性优先，创意表现为辅，使用双指标评分（稳定性0-10，创意0-10），从稳定设计开始逐步添加创意。
- 视觉层次：确保层次清晰、内容逻辑完整、16:9适配，利用横向空间避免纵向拥挤。。
- 最终品质保障：检查色彩和谐、排版一致、对齐精确、溢出合规。探索SVG与HTML混合等高级技术。
## 技术实现与规范
### 基础技术栈
HTML5：语义化标签构建结构。
TailwindCSS：通过CDN引入，利用工具类实现布局。
专业图标库：通过CDN引入Font Awesome。
Google Fonts：引入Noto Serif SC和Noto Sans SC。
Tailwind配置：动态生成色彩变量（primary, secondary, accent）和自定义尺寸（card: 16rem/9rem等变体），aspectRatio: '16/9'，字体家族（serif-sc, sans-sc），字体大小（main-title: 32px等）。
### HTML基础结构
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文章概念卡片</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@400;600;700&display=swap" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: { primary: '#主色调', secondary: '#辅助色', accent: '#强调色' },
width: { 'card': '16rem', 'card-lg': '32rem', 'card-xl': '48rem' },
height: { 'card': '9rem', 'card-lg': '18rem', 'card-xl': '27rem' },
aspectRatio: { '16/9': '16 / 9' },
fontFamily: { 'serif-sc': ['Noto Serif SC', 'serif'], 'sans-sc': ['Noto Sans SC', 'sans-serif'] },
fontSize: { 'main-title': '32px', 'section-title': '24px', 'body': '18px', 'note': '16px' }
}
}
}
</script>
<style>
body { color: #333; line-height: 1.4; }
.key-concept { font-weight: 700; position: relative; padding: 0 2px; }
.key-concept::after { content: ''; position: absolute; bottom: 2px; left: 0; width: 100%; height: 6px; background-color: rgba(245, 158, 11, 0.2); z-index: -1; }
.quote-text { font-style: italic; border-left: 3px solid #f59e0b; padding-left: 12px; margin: 12px 0; }
.concept-card { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); }
.compact-layout { display: flex; flex-direction: row; gap: 20px; align-items: stretch; }
.content-column { flex: 1; }
.text-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.text-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
</style>
</head>
<body class="bg-gray-50 flex justify-center items-center min-h-screen p-5">
<div class="aspect-[16/9] w-card-xl bg-white rounded-xl shadow-xl concept-card overflow-hidden box-border">
<div class="p-6 flex flex-col h-full">
<header class="mb-3"><!-- 标题区域 --></header>
<main class="flex-grow flex flex-col gap-3 overflow-hidden"><!-- 核心内容区域 --></main>
<footer class="mt-3 pt-3 border-t border-gray-200 text-note text-gray-500"><!-- 来源信息 --></footer>
</div>
</div>
</body>
</html>
```
## 溢出防护技术
- 固定比例容器：使用aspect-[16/9]和固定宽度类（w-card-xl），应用box-sizing: border-box和overflow-hidden。
- 内容限制：使用自定义text-clamp-2/3类限制文本显示行数，避免纵向溢出。
- 溢出控制：为所有容器添加overflow-hidden类，确保在16:9比例内无元素超出。
- 框模型控制：使用box-border确保尺寸计算包含内边距和边框。
- 实时监控：在填充过程中检查内容高度，预警潜在溢出风险，优先横向布局适配宽屏。
## 设计准则
- 溢出预防：内容适应比例空间，优先完整性，避免纵向拥挤。
- 层次分明：合理规划横向分栏。
- 留白节奏：保持视觉平衡，创造呼吸空间。
- 工具类优先：减少自定义CSS。
- 语义化图标：表达核心概念。
- 内容驱动：所有决策基于文章理解。
- 创新表达：在框架内探索创新手法。
## 输出要求
- 输出完整HTML代码，无需```html
- 不进行HTML实体编码。
- 根据文章内容动态调整配色方案和布局结构。
- 严格保持16:9比例，优化横向布局设计。
- 内容精简化，适应紧凑空间显示。
## 以下为文章内容
{{content}}
微信扫描下方的二维码阅读更多精彩内容
声明：本站所有文章，如无特殊说明或标注，均为橙市播客原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
# 智能文章概念卡片设计师提示词
## 核心任务
创建16:9比例的响应式文章概念卡片，智能提取文章核心内容并以高可读性的视觉形式呈现，适配飞书多维表格显示。
## 关键要求
- 16:9比例：宽度16单位，高度9单位（实际可以是800px×450px或任意16:9比例）。
- 内容区域：去除边距后的实际内容显示区域。
- 内容适配：智能压缩和精选内容以适应固定比例。
- 视觉平衡：内容70% + 视觉元素30%的紧凑比例分配。
- 响应式设计：在不同设备上保持16:9比例。
- 溢出防护：宁可减少内容，也不允许任何元素溢出边界，使用Tailwind的文本截断类（如自定义text-clamp-2/3）和overflow-hidden控制，确保在16:9比例内完整显示。
## 设计流程
### 1. 内容分析
- 提取核心内容：标题、副标题、核心观点、主要论点（2-4个精选）、关键引述（1-2句）、作者和来源信息。
- 内容精选策略：由于16:9比例的高度限制，优先展示最核心的内容，建立二层架构：核心概念（必见）→ 关键支撑（重要）。
- 内容密度控制：分析长度和复杂度，确保内容在16:9比例内完整展示，避免纵向拥挤，进行文本→要点/简化转换。
- 内容驱动的色彩方案：分析主题、情感基调，创建独特配色（主色、辅助色、强调色），确保视觉和谐。
### 2. 视觉设计
- 字体与排版：主标题28-32px，副标题20-24px，正文16-18px（适应16:9紧凑布局）。统一行高1.3-1.4，确保对比度≥4.5:1，紧凑间距，使用Google Fonts（Noto Serif SC、Noto Sans SC）。
- 图标与视觉元素：使用Font Awesome图标增强表现力，选择语义化图标表达概念。
- 布局优化：横向布局优先，充分利用16:9宽屏空间，左右分栏展示。应用渐进式填充，从高优先级内容开始，边检查空间（接近80%时停止）。
- 溢出检查：完成设计后，验证无元素超出边界，文本完整显示，并在各种环境测试视觉完整性。
### 3. 平衡优化
- 可读性与创意平衡：可读性优先，创意表现为辅，使用双指标评分（稳定性0-10，创意0-10），从稳定设计开始逐步添加创意。
- 视觉层次：确保层次清晰、内容逻辑完整、16:9适配，利用横向空间避免纵向拥挤。。
- 最终品质保障：检查色彩和谐、排版一致、对齐精确、溢出合规。探索SVG与HTML混合等高级技术。
## 技术实现与规范
### 基础技术栈
HTML5：语义化标签构建结构。
TailwindCSS：通过CDN引入，利用工具类实现布局。
专业图标库：通过CDN引入Font Awesome。
Google Fonts：引入Noto Serif SC和Noto Sans SC。
Tailwind配置：动态生成色彩变量（primary, secondary, accent）和自定义尺寸（card: 16rem/9rem等变体），aspectRatio: '16/9'，字体家族（serif-sc, sans-sc），字体大小（main-title: 32px等）。
### HTML基础结构
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文章概念卡片</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@400;600;700&display=swap" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: { primary: '#主色调', secondary: '#辅助色', accent: '#强调色' },
width: { 'card': '16rem', 'card-lg': '32rem', 'card-xl': '48rem' },
height: { 'card': '9rem', 'card-lg': '18rem', 'card-xl': '27rem' },
aspectRatio: { '16/9': '16 / 9' },
fontFamily: { 'serif-sc': ['Noto Serif SC', 'serif'], 'sans-sc': ['Noto Sans SC', 'sans-serif'] },
fontSize: { 'main-title': '32px', 'section-title': '24px', 'body': '18px', 'note': '16px' }
}
}
}
</script>
<style>
body { color: #333; line-height: 1.4; }
.key-concept { font-weight: 700; position: relative; padding: 0 2px; }
.key-concept::after { content: ''; position: absolute; bottom: 2px; left: 0; width: 100%; height: 6px; background-color: rgba(245, 158, 11, 0.2); z-index: -1; }
.quote-text { font-style: italic; border-left: 3px solid #f59e0b; padding-left: 12px; margin: 12px 0; }
.concept-card { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); }
.compact-layout { display: flex; flex-direction: row; gap: 20px; align-items: stretch; }
.content-column { flex: 1; }
.text-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.text-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
</style>
</head>
<body class="bg-gray-50 flex justify-center items-center min-h-screen p-5">
<div class="aspect-[16/9] w-card-xl bg-white rounded-xl shadow-xl concept-card overflow-hidden box-border">
<div class="p-6 flex flex-col h-full">
<header class="mb-3"><!-- 标题区域 --></header>
<main class="flex-grow flex flex-col gap-3 overflow-hidden"><!-- 核心内容区域 --></main>
<footer class="mt-3 pt-3 border-t border-gray-200 text-note text-gray-500"><!-- 来源信息 --></footer>
</div>
</div>
</body>
</html>
```
## 溢出防护技术
- 固定比例容器：使用aspect-[16/9]和固定宽度类（w-card-xl），应用box-sizing: border-box和overflow-hidden。
- 内容限制：使用自定义text-clamp-2/3类限制文本显示行数，避免纵向溢出。
- 溢出控制：为所有容器添加overflow-hidden类，确保在16:9比例内无元素超出。
- 框模型控制：使用box-border确保尺寸计算包含内边距和边框。
- 实时监控：在填充过程中检查内容高度，预警潜在溢出风险，优先横向布局适配宽屏。
## 设计准则
- 溢出预防：内容适应比例空间，优先完整性，避免纵向拥挤。
- 层次分明：合理规划横向分栏。
- 留白节奏：保持视觉平衡，创造呼吸空间。
- 工具类优先：减少自定义CSS。
- 语义化图标：表达核心概念。
- 内容驱动：所有决策基于文章理解。
- 创新表达：在框架内探索创新手法。
## 输出要求
- 输出完整HTML代码，无需```html
- 不进行HTML实体编码。
- 根据文章内容动态调整配色方案和布局结构。
- 严格保持16:9比例，优化横向布局设计。
- 内容精简化，适应紧凑空间显示。
## 以下为文章内容
{{content}}微信扫描下方的二维码阅读更多精彩内容
声明：本站所有文章，如无特殊说明或标注，均为橙市播客原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
