朋友开了个美食号每天早上六点要发手账风的早餐图。我说你直接拍照调个滤镜不就行了他说不行账号调性是“手账排版手写风文案”每一张图都得有标题区、贴纸区、留白、花边用PPT和修图App来回拖得四十分钟起步。后来我把这条流水线拆成了n8n 自动编排 Claude Skills 生成内容把他的选题表往表格里一丢跑一趟流程3分钟内直接吐出一张成品图。他不用学代码我帮他搭好一次后面每天自己点一下就行。这篇文章就是把这套东西完整拆开讲。骨架是n8n负责定时任务、拉素材、调API、存文件这一堆“管道活”Claude Skills负责“懂行”——它知道美食手账该长什么样、颜色怎么搭、文案怎么写才像真人。整套方案零代码基础也能搭你只需要会填表单、会复制粘贴遇到问题知道重启工作流就完事了。下面按落地顺序来写已经跑通照着做就行。1. 先理清楚n8n和Claude Skills在这条流水线里各自负责什么很多人在看到“n8n”和“Claude Skills”放一起时容易懵觉得这是两套不相干的东西。其实它们的角色非常清晰n8n是“管道工”Claude Skills是“设计师文案”。一条流水线能不能稳定跑取决于你有没有把这两个角色的边界切干净。1.1 为什么是n8n而不是Python脚本或定时机器人我最早想过直接用Python写个脚本挂在服务器上思路很简单定时跑一次请求接口生成图片再丢到图床。但问题在于这玩意儿一旦要改流程比如换个素材来源、想在生成前先人工审核一遍、想在失败时通知自己你就得改代码、重新部署、再测试。你是在给自己制造运维工作。n8n解决的是“流程可视化”这件事。它是一个开源的工作流自动化工具界面像搭积木一样你能看到每一个节点、每一步数据长什么样、哪一步失败了。所有逻辑都在浏览器里改改完保存就是新的版本。对非程序员来说这比面对黑乎乎的代码窗口友好太多了。而且n8n自带定时触发、HTTP请求、数据转换、文件保存这些常用节点基本覆盖了自动化出图的所有环节。我没有必要为了一个美食手账项目专门维护一套Python服务用n8n一次配置之后只是点点运行按钮的事。我实际操作下来还有一点体会很深n8n里每个节点执行完都能立刻看到输出数据这让你排查问题时特别省心。比如Claude返回的内容不符合预期你能在n8n面板里直接看到原始的JSON返回不用翻日志。这种透明感对于小白用户来说能省掉一半的挫败感。1.2 那“3分钟”到底花在哪了先较个真我们把这3分钟拆成账本。一次完整运行大概分这几段定时任务触发小于10秒基本可以忽略读取素材源比如从在线表格拉今天的菜品清单2~5秒调用Claude生成手账HTML这部分最耗时约30~60秒渲染成图片就是让浏览器引擎把HTML画成PNG10~20秒保存到本地/云盘并推送通知几秒合计下来一次生成通常在1分半到2分半之间预留多点余量才敢说3分钟。有些人可能会问为什么Claude生成HTML要这么久因为它不是简单地把菜名拼在一起而是要根据你提供的菜品信息、文案规则、配色方案现场画一个完整的手账版式出来。这个过程要思考、要组织CSS、要把内容填进对应的区块就像你手工做一张手账也需要时间一样它只是在替你做而已。所以这篇文章里说的“3分钟出图”不是指秒出而是一条全自动流水线的平均周期。它的价值在于你每天要的是“每天一张图”而不是“立刻要一张图”所以这个时长非常够用。2. 动手前准备把n8n跑起来把Skill装进Claude这套方案里有两个核心依赖要先准备好一个是n8n服务一个是Claude的API访问能力。前者管流程后者管智商。下面分别说安装和配置的关键点。2.1 两条安装路径选你顺手的n8n的安装方式很多但适合普通用户的无非两条。第一条是用Docker跑官方镜像这也是我推荐的方式。只要你的电脑或服务器装了Docker命令就一行docker run -d --name n8n -p 5678:5678 -v n8n_data:/home/node/.n8n docker.n8n.io/n8nio/n8n跑起来之后浏览器打开http://localhost:5678就能看到n8n的界面。数据会存在n8n_data这个卷里容器删了也不会丢流程配置这点对小白很重要——你不用担心折腾坏了重来。第二条路是在n8n官网注册云端版本直接开账号就能用。好处是省去服务器维护坏处是免费额度有限而且素材源如果存在本地方案里跨网络拉取会多一些延迟。我的建议是如果只是自己在电脑上玩玩用Docker本地跑如果要做给团队用、每天定时产出可以用云端反正按量付费稳定性更好一点。装完n8n接下来要做的事情比较关键在n8n里配置Claude API的调用凭证。在n8n左侧的“凭证”菜单里选“Anthropic Claude”类型填API密钥就行。我没有在这里用n8n现成的Claude节点而是直接用了HTTP Request节点来请求Messages API配置方式就是加一个请求头Authorization: Bearer sk-ant-xxxx Content-Type: application/json为什么不用官方节点原因很简单HTTP Request节点让你能完全控制请求体包括system、messages、max_tokens这些参数出错时也更容易排查。对小白来说多填一次请求头不会比学节点配置更难。2.2 Skill不是提示词而是给Claude的一本“员工手册”很多人第一次听到“Claude Skills”会以为它是某种插件或者高级提示词这个理解方向上对了一半但低估了它的分量。一个Skill文件夹里通常包含一份SKILL.md描述文件里面写清楚了触发条件、工作流程、输出规范、内容示例。它的作用不是告诉Claude“你要做美食手账”——而是把“怎么做美食手账”这套完整的经验、规则、禁忌全部写进去让Claude每次执行任务时都翻这本手册来干活。我举个例子给你体会区别。普通提示词是帮我生成一个美食手账封面包含菜名、标签、日期。而一份Skill里的要求是画布尺寸1242x1656像素背景色采用米白与暖橙的渐变标题使用衬线体字号不小于48px需要包含日期标签、菜名主标题、一句不超过15字的描述文案以及一个食材贴纸区。右下角留白区域用虚线边框画出“今日份小记”位置。看到差距了吗前者是一句话需求Claude每次输出都很随机后者是一整套标准Claude输出基本稳定风格不会跑偏。所以搭这套流水线真正花时间的不是n8n配置而是写清楚这个“技能手册”。不过要注意Claude Skills在配置层面有很多种实现方式比如有人通过API调用时把skill内容塞进system参数有人通过客户端添加技能包目录。我在下面章节采用的是最通用、也最容易复现的做法把Skill内容写成一个Markdown文件调用API时读取文件内容作为system消息传给Claude。这样无论你怎么切换工具逻辑都不受影响。3. 实操全流程从菜品清单到成图的五个关键节点到这里准备工作做完了进入真正的核心环节。我分三部分展开先讲怎么设计一个能稳定出风格的美食手账Skill再讲n8n里每个节点怎么配置最后讲怎么让HTML变成香喷喷的成品图。3.1 先写一个能稳定出风格的美食手账Skill这一步是整个项目的灵魂。如果Skill写得不够详细后面n8n配得再顺出来的图也会像抽盲盒。我给朋友做的那份Skill结构大概是这样的# 美食手账封面生成器 ## 任务目标 根据输入的菜品信息生成一张小红书风格美食手账封面图HTML格式。 ## 画布规格 - 宽1242px高1656px3:4竖版 - 背景米白底色 #FFF9F0辅以暖橙色块 #FFA765 ## 版式结构 1. 顶部日期标签 当日推荐/打卡感标题 2. 中部主菜名大字号 一句文案不超过15字 3. 左下食材或亮点标签3个左右胶囊造型 4. 右下留白虚线框写“今日份小记xxx” 5. 底部账号ID位置使用手写体风格 ## 配色规范 - 主背景#FFF9F0 - 标题#4A2C1A - 强调#E8652D - 辅助#F2B880、#A8C3A0、#F5E6D3 ## 字体建议 - 标题衬线体如Noto Serif SC大字号加粗 - 正文与标签手写风格字体如ZCOOL KuaiLe适当增加字间距 ## 输出要求 - 输出完整HTML文档CSS内联在style标签中 - 图片和装饰用CSS绘制圆角/边框/渐变实现不要引用外部图片 - 不需要js保证纯静态渲染这份Skill文件有一个很重要的作用它规定了“能做什么”和“不能做什么”。比如“不要引用外部图片”这条就是为了后续渲染图片时不会因为外链加载失败而出现空白。你可能觉得这些限制很细碎但实际跑起来它们就是稳定性的来源。写完Skill之后怎么在代码里读取它呢在n8n里可以用Code节点读取文件const fs require(fs); return { skill: fs.readFileSync(/path/to/skill.md, utf8) };然后把这段内容作为调用API时的system消息。如果你用的是别的实现方式比如把Skill文件手动复制到请求体里逻辑也是一样的核心就是让Claude在生成时有规范可依。3.2 在n8n里把节点串起来每个节点的关键配置n8n节点流程我用的顺序大致是这样的Schedule Trigger → HTTP Request读取菜品清单→ HTTP Request调用Claude API→ Code提取HTML→ HTTP Request提交到渲染服务→ 保存文件每个节点的配置我捡重点说。第一个节点是Schedule Trigger用来设定运行时间。我用的是cron表达式比如每天早晨6点0 6 * * *如果是小白直接在n8n界面里选“自定义”填上面的表达式就行。它的含义是“每天6点0分触发”想改时间就改数字。这里没人会真的去背cron语法n8n的编辑框下方会有提示照着来就可以。第二个节点是HTTP Request读取今日菜品清单。我朋友的清单放在在线表格里所以这个节点直接对接表格API。如果你不想用在线表格也可以用n8n的Google Sheets节点或Airtable节点。重点是确认返回的数据结构比如返回的是[ { name: 番茄鸡蛋面, tag: 家常, note: 儿时的味道 } ]后面的节点就需要靠这些字段才能拼出文案。第三个节点是核心调用Claude API。这个节点里你要把请求方法设为POSTURL填Messages API地址在请求体里把model、system、messages都传进去。messages里面我通常会放这样一段用户消息请根据以下菜品信息生成一份美食手账封面菜品名称{{ $json.name }}标签{{ $json.tag }}备注{{ $json.note }}。严格按照Skill中的规范输出完整HTML。这里用到了n8n的表达式语法花括号里能直接引用上一个节点返回的字段。配置时务必先运行一遍前面的节点然后到表达式面板里点选字段防止手写时把字段路径写错。调用完API返回数据里会有一大段JSON。HTML内容藏在choices[0].message.content里或者对应API的返回结构里。这时候用Code节点把它提取出来整理成干净的HTML字符串方便下一个节点使用。第四个节点很关键把HTML送去渲染成图片。因为n8n本身不做渲染我们需要一个负责把HTML变成PNG的服务。这一步的实现方式我放在下一节详写但流程上你要知道在这里它的角色是“图片加工厂”。提交方式就是POST一段HTML过去然后拿回图片文件的下载链接或二进制动。最后用n8n的“保存文件”节点把图片存到指定目录或者通过Webhook发到你的聊天工具里。我朋友是直接让它存到云盘文件夹然后手机上打开就能看到。你可以根据自己习惯改成邮件发附件、推送通知都行。3.3 把HTML变成图片渲染环节的几种选择这是新手最容易卡住的一环。Claude明明返回了漂亮的HTML但怎么从HTML变成一张图片呢这里我用的是一个非常小的渲染服务核心依赖是Puppeteer。它本质上就是“无头浏览器”的驱动可以后台打开页面、截图、保存。核心代码大概长这样const puppeteer require(puppeteer); async function render(html) { const browser await puppeteer.launch(); const page await browser.newPage(); await page.setViewport({ width: 1242, height: 1656 }); await page.setContent(html, { waitUntil: networkidle0 }); await page.screenshot({ path: cover.png }); await browser.close(); }用n8n的HTTP Request节点把这个服务一调传一个JSON{ html: 完整的HTML字符串 }服务返回图片URL或者base64内容n8n再把数据落盘。整个过程其实就几行代码第一次配置的时候稍微花点时间之后就是纯自动化了。如果你不想自己搭建渲染服务也可以找现成的HTML转图片服务或API原理一样只是别人帮你跑Puppeteer。选型的话我建议按一个标准支持指定viewport尺寸、支持自定义字体、能返回PNG格式。这三个点缺一不可否则你的图比例不对、中文变方框、格式不支持很麻烦。这里还有一个中文排版的坑渲染环境里如果没有中文字体页面上所有中文都会变成豆腐块。所以自建服务时一定要在系统里装好中文字体或者在页面CSS里明确引入字体文件。我自己是在部署渲染服务时安装了Noto Serif SC和ZCOOL KuaiLe让CSS里写到的字体名都能在系统里找到。4. 最常见的问题和我的排查办法再顺的方案跑起来都会遇到几个坑。这一节我把自己踩过的、帮别人排查过的典型问题整理成一张速查表希望能帮你少走点弯路。4.1 我踩过的坑和对应的排查表现象原因解决办法生成的图片里中文全是方块渲染环境没有中文字体在Puppeteer服务器安装字体或在CSS里font-face引入在线字体Claude返回内容被截断max_tokens设置太小把max_tokens提高到4096以上每次生成的风格都不一样Skill规范写得不够具体把配色值、字号、版式区块、示例全部写进Skill不给自由发挥空间n8n里取不到上一个节点的字段表达式路径写错在n8n的表达式编辑器里用“选择字段”功能不要手抄渲染服务报超时HTML太大或渲染太慢检查是否引用了大量外部资源改为纯CSS绘制装饰元素生成的图比例不对没有固定viewport尺寸在Puppeteer里显式设置 width1242, height1656这张表看着简单但每一条背后都是实打实的时间成本。尤其是字体问题我第一次踩的时候愣是查了半天才反应过来是环境缺字体而不是Claude生成的HTML本身有问题。所以提前写出来是真心希望你少绕这个弯。还有一个容易被忽视的问题Claude在处理长文本时偶尔会自己发挥给HTML加一些没要求的JS脚本或者引用外部图片链接。这在你直接打开HTML看的时候没问题但放到Puppeteer里渲染时外部资源加载慢甚至失败就会拖垮整个流程。所以我在Skill里专门写死了一条“不使用外部图片不写JavaScript”。这条约束让渲染环节稳定了不少。4.2 多条流水线并行时注意这几点如果你要同时维护好几个风格的账号——比如一个美食号、一个旅行号、一个读书号——你可能会想着建好几套流水线。这时候有几个细节如果不注意会被困扰一阵。第一个是命名区分。n8n里的工作流、节点、变量最好都按“账号名-用途”命名比如“美食手账-早八点”、“旅行手账-晚九点”。否则几个工作流长得像孪生兄弟改配置时你根本分不清哪个是哪个。第二个是Skill文件分开管理。不同账号的技能规范不要互相覆盖。我建议的目录结构是一个账号一个文件夹里面放该账号的Skill文件和对应的效果示例图。这样后期想调整某个风格只动对应目录不会误伤其他号。第三个是控制并发调用。Claude API有速率限制如果多个工作流同时触发很容易撞上限流报错。我的做法是错峰执行比如早八点、中十二点、晚八点各跑一条互不干扰。如果你非要同时跑那就要在n8n里加上一个延时节点给每个请求错开几秒钟。5. 一些扩展想法与个人心得写完上面这些核心流程我再聊几个我觉得特别值得扩展的方向。这套“n8n Claude Skills”的组合本质上是可以复用的基础设施换到任何内容创作领域都成立。5.1 后续还能往里加什么现在这套流水线只能按固定清单一板一眼地生成。如果你想让选题更聪明一点可以在n8n里增加一个节点从公开的菜谱排行榜里拉当天热门菜名再让Claude结合热门话题生成文案。这样每天产出的手账内容就不是“你给什么它画什么”而是它自己发现热点、自己组织内容你再人工审核一下就能发。整个过程还是一样快但账号的灵敏度会高很多。另一个方向是把发布环节也接进来。n8n接到图片之后可以直接推到内容管理接口或者生成一个包含文案、话题标签、图片的打包文件。这样你从早上起床到发出去全程只需要拿手机看一眼确认剩下的事情都交给流水线。还有一个很小但很实用的功能错误通知。在n8n流程末尾加一个IF节点判断刚才的保存操作是否成功。失败时就通过聊天工具或者邮件发一条提醒标题写“今天的美食手账生成失败了快去检查”。别小看这个功能它能让你在度假时依然安心而不是账号断更两天才发现问题。5.2 这套组合能不能复制到其他领域完全可以。美食手账只是我把这套体系落地的第一个场景。你只要换掉Skill文件的内容流水线代码几乎不用动。比如旅行号需要的是照片感封面那Skill里写的就是取景构图、滤镜参数、地点标签的排版规则读书号需要的是文艺感书摘卡片那Skill里写的是卡片配色、名言排版、作者信息的位置。本质上说n8n只关心“什么时候跑、调谁、存哪里”而Claude Skills负责“生成什么样的内容”。你把这两件事分开理解就会发现所有图文类内容生产都能套进这个框架。我自己后续就在考虑把“每日一图”这套模式复制到读书摘录场景目前看来整个流程不需要什么大改。最后再说个我自己在实操中形成的小习惯每次改完Skill文件先单独用Claude测试几次确认风格稳定后再挂到n8n流水线上。否则你在n8n里试错每次都要跑完整条流程既费时间又费API额度。把测试范围缩小到“内容生成”这一环其他环节信任它稳定的管道能力就好。这种“一次只验证一个变量”的思路放在任何自动化项目里都适用。
