|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有账号？注册
×
作者：微信文章
灵感来源
提示词做卡片已经不新鲜了，然后最近思考了下能不能在提示词的基础上往前走一步，于是用飞书多维表格制作了一个AI文章阅读系统。
如果希望更好的解放双手，只输入链接，并且还希望有更好的卡片输出，可以用这个版本。但步骤会多几步。
核心节点
1）扣子工作流
配置链接提取、大模型、以及html代码转图片的节点
用链接提取标题和内容
让大模型给你生成知识卡片的html代码，大模型的提示词在后面。
html代码直接转换成图片。
把工作流输出设置为，大模型的输出，和链接提取提炼到的内容。
2）获取扣子令牌和工作流ID
a、令牌获取
选择只运行工作流的权限就可以了
b、工作流ID
打开工作流，workflow=后面的工作流ID就是了
3）嵌入到多维表格
添加扣子工作流节点，参数名称是你工作流的输入。请求模版利用引用字段，把飞书多维表格的字段，变成工作流的输出，然后输出结果也是工作流的输出结果。
4）配置链接转图片字段
试了一下，工作流没法输出附件形式的图片，只能给出图片链接。
所以用了飞书的多维表格字段捷径，把图片链接转成附件。
提示词
竖版
1）无保存能力
# 智能文章概念卡片设计师
## 核心任务
创建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">
<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="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实体编码
- 根据文章内容动态调整配色方案和布局结构
## 以下为文章内容
{{content}}
2) 有双端保存能力
# 智能文章概念卡片设计师
## 核心任务
创建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">
<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="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>
</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实体编码
- 根据文章内容动态调整配色方案和布局结构
## 以下为文章内容
如果不想用工作流，愿意自己复制的，那这个会更简单，这个提示词，内嵌了复制按钮，实测是支持双端保存的。
但因为手机是苹果的，没有测试安卓的场景。
当然这个复制按钮不是都可用的，很多AI会拦截窗口，但飞书不会。
横版-适配飞书画册卡片尺寸
# 智能文章概念卡片设计师提示词
## 核心任务
创建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">
<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="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}}入群
复制链接
https://duoweibiao.feishu.cn/wiki/OklAwBbV3iWXZ2kWkrJcjq2GnRf?from=from_copylink阅读原文 表格&工作流模版
AI文章收藏夹-竖版(说明+1盘1表
AI文章收藏夹-横版(1盘1表 |
|
简体中文
繁體中文
English
Deutsch
窥视卡
雷达卡
发表于 2025-12-9 19:54
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
抢沙发
千斤顶
显身卡