AI Note

n8n title card

学习使用n8n-mcp来创建一个n8n工作流生成小红书卡片

帮我生成一个n8n工作流:
1. 表单输入封面内容,封面要求
2. 设置飞书配置和token
3. 创建飞书表格
4. 获取表单
5. 写入标题
6. 复制成多个项目
7. 使用大模型对接deepseek v3
提示词如下:
# 角色
你是一位专注于艺术美学的艺术设计总监,擅长将内容与艺术结合。现在请为我制作一张小红书平台风格的封面图,使用HTML5、TailwindCSS 3.0+(通过CDN引入)和必要的JavaScript完成整体设计,创造出令人惊艳的视觉体验。

## 设计风格
## 风格一:现代温馨风
- 采用大胆现代风格设计,打破传统排版规则,创造强烈视觉冲击。
- 温馨色系:粉色、珊瑚橙、薄荷绿等柔和色彩
- 渐变背景:使用低饱和度的莫兰迪色系

## 风格二:极简商务风
- 采用极简主义设计理念,运用大量留白空间,突出核心信息。
- 高级色系:深海蓝、雾霾灰、象牙白等沉稳色调
- 几何元素:融入简洁的线条和几何图形作为装饰

## 风格三:复古文艺风
- 运用复古文艺设计手法,营造怀旧温暖的视觉氛围。
- 复古色系:奶茶棕、土陶橙、橄榄绿等大地色调
- 纹理背景:添加纸质纹理、做旧效果或胶片感边框

## 风格四:青春活力风
- 运用动感青春设计元素,传达积极向上的正能量。
- 活力色系:柠檬黄、天空蓝、草莓红等明亮鲜艳色彩
- 动态元素:加入波浪线条、爆炸图形或不规则几何形状

## 风格五:高端奢华风
- 采用奢华精致设计风格,彰显品质感和高端形象。
- 奢华色系:香槟金、玫瑰金、深紫色等贵气色调
- 质感材质:运用金属光泽、丝绸纹理或珍珠光效

## 风格六:自然清新风
- 融入自然元素设计,营造清新舒适的治愈感氛围。
- 自然色系:森林绿、天空蓝、米白色等清新淡雅色彩
- 有机形状:使用叶片轮廓、水滴形状或云朵等自然元素

## 风格七:科技未来风
- 运用前沿科技设计语言,展现现代感和未来感。
- 科技色系:电光蓝、荧光绿、银灰色等冷调科技色
- 数字元素:融入网格线条、数据图表或全息效果

## 风格八:手绘插画风
- 采用手绘插画设计风格,展现个性化和亲和力。
- 插画色系:马卡龙色、水彩色、彩铅色等柔和艺术色彩
- 手绘元素:加入涂鸦线条、水彩晕染或素描质感

## 风格九:国潮中式风
- 融合传统中式美学与现代设计,展现文化底蕴。
- 国潮色系:中国红、琉璃蓝、墨绿色等经典传统色
- 文化元素:运用祥云纹样、汉字书法或传统图案

## 风格十:梦幻浪漫风
- 营造梦幻唯美的浪漫氛围,触发情感共鸣。
- 梦幻色系:薰衣草紫、樱花粉、星空蓝等浪漫柔美色调
- 浪漫元素:添加星星点点、羽毛飘散或光斑效果

## 尺寸要求
- 创建一个 id 为 "cardcontent" 的容器元素,宽度 800px,高度 1200px
- 所有内容必须在 #cardcontent 容器中进行排布
- 内容不能超过容器区域

## 技术规范
- 从设计风格中选择一种风格进行设计,不用混合使用多种风格
- 内容主要以文字为主,重点的文字内容使用高亮展示,高亮效果不要用单纯的加粗,风格新颖一些,比如用文字背景之类的,一定要与容器背景形成对比
- 视觉聚焦:核心元素应占据画面60%以上
- 设计2-3级文字层级,创造阅读节奏
- 主要标题应为最大号字体,突出关键概念
- 不用出现按钮的样式

## 文字设计
- 字体清晰度,优先使用无衬线字体(如思源黑体、阿里巴巴普惠体),避免复杂手写体
- 颜色对比:文字与背景色需强对比
- 排版留白:文字区域占比要超过 50%
- 左对齐或居中对齐更符合阅读习惯。
- 注意文字不要堆叠在一起

## 重要要求
- 【关键】直接输出HTML代码,不要任何解释文字,不要任何标题
- 【关键】不要使用```html```md代码块语法包装代码
- 【关键】不要在HTML前面添加任何文字说明或标题
- 【关键】第一行必须直接是<!DOCTYPE html>开始
- 【关键】不要在代码后面添加任何解释或说明文字
8. 使用上述提示词进行设计HTML页面,然后结构化输出
9. 进行html预处理
10. 创建html页面
11. 截图
12. 构建图片插入的位置
13. 写入飞书图片
{
  "mcpServers": {
    "n8n-mcp": {
      "command": "npx",
      "args": ["n8n-mcp"],
      "env": {
        "MCP_MODE": "stdio",
        "LOG_LEVEL": "error",
        "DISABLE_CONSOLE_OUTPUT": "true",
        "N8N_API_URL": " http://host.docker.internal:5678",
        "N8N_API_KEY": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI3YWFmODAzZC00ZGJjLTQwNGQtOWVjZi0zMTQ5NzBkNDA2YjMiLCJpc3MiOiJuOG4iLCJhdWQiOiJwdWJsaWMtYXBpIiwiaWF0IjoxNzU4OTY0NDYxfQ.JdSvBpDxwvOJSCxd5G29mMvA3RRFP2mQ1DpbcCxcJUX"
      }
    }
  }
}
## 🎯 可变输入参数(用户输入区)

1. **主题关键词**`{{theme}}`
2. **日期**`{{date}}`
3. **标题**`{{title}}`
4. **作者名**`{{author}}`

---

## 🧩 固定生成规范(模版部分)

```
# 公众号可爱3D风格封面生成器 (v2)

#### 🎯 核心任务
根据用户给定的 **主题**、**标题**、**日期** 和 **作者名**,创建一个符合现代科技/生活方式调性的 **公众号封面图**。最终产出物是一个 **固定宽高比为 2.35:1** 的、包含内联样式的完整HTML文件。

---

### 🎨 视觉风格总览
- **主题风格**: 可爱、圆润、简洁的3D插画风格 (Cute, Soft, Minimalist 3D Illustration),质感类似皮克斯动画或黏土定格动画。
- **色彩**: 整体色调和谐、明快,背景为低饱和度的纯色或同色系渐变,确保左侧文字可读性。
- **构图**: 非对称式“右图左文”,主体集中在右侧 30%-40%,左侧保持干净留白。

---

### 📐 生成规范与流程

#### 第一部分:底图生成
- **宽高比**: 2.35:1  
- **主体位置**: 右侧 30%-40%  
- **左侧留白**: 60%-70%,干净背景(纯色或渐变)  
- **禁止元素**:  
  - 禁止任何文字(字母/数字/符号)  
  - 禁止边框  
- **插图风格要求**:  
  - 可爱、圆润、卡通 3D 风格  
  - 柔和边缘、哑光或黏土质感  
  - 明亮柔和光照  
  - 禁止霓虹/赛博朋克/暗黑风/抽象科技线条/玻璃质感/写实渲染  

#### 第二部分:文字叠加 (HTML)
- **结构**:  
  - 外层容器 `div` → `position: relative;`  
  - 背景 `<img>` → `width: 100%; display: block;`  
  - 三个文字元素(日期 / 标题 / 作者) → `position: absolute;`

- **样式**:  
  1. 日期: `top: 8%; left: 6%; font-size: 1.5vw; color: #999999;`  
  2. 标题: `top: 18%; left: 6%; font-size: 4vw; font-weight: bold; line-height: 1.2;`  
     - 自动判断底图亮度 → 暗背景用白字,亮背景用黑字  
  3. 作者: `bottom: 8%; left: 6%; font-size: 1.5vw; color: #666666;`  

---

### 💡 系统执行流程
1. 接收输入参数:`{{theme}}`、`{{date}}`、`{{title}}`、`{{author}}`  
2. 生成底图(严格执行风格与布局规范)  
3. 构建HTML(叠加文字层,自动判断对比色)  
4. 输出完整HTML文件  

---

### ✍️ 用户输入区(变量示例)
- **主题关键词**: `{{theme}}`  
- **日期**: `{{date}}`  
- **标题**: `{{title}}`  
- **作者名**: `{{author}}`  
```

On this page