Riley Brown · 23:58 · 发布 2026-07-06 · 8613次观看(截至抓取) · 观看原视频
主旨
Riley 演示如何把 Claude Code 通过 MCP server 接入 Paper(原生为 agent 而生的 Figma-like 设计画布),让 Fable 5 用一条 prompt 自主完成 YouTube 缩略图迭代、Instagram 信息图排版、6 张幻灯片赞助 deck,以及一键部署响应式着陆页,实现”prompt 即设计”。
核心论点
- Paper 是为 agent 而生的 Figma-like 设计画布桌面应用,通过 MCP server 把 Claude Code 接到画布上,从此 prompt 即设计。(→ 详解1、2)
- Claude Code 默认抓不到 YouTube 缩略图,装一个免费 skill(在 riley-skills-site 上可下)就能让 agent 抓图并直接导入 paper。(→ 详解3)
- 缩略图迭代的关键是”多参考图 + 精确文字覆盖”:把目标缩略图、自己照片、要替换的图标并排选中再一次性 prompt,几秒内出多种版本。(→ 详解3)
- Instagram 信息图里”黑色渐变蒙版 + 白色可编辑文字”这种手工难做的效果,在 Paper 里文本是独立图层,直接选中编辑而不用重生成图片。(→ 详解4)
- 6 张幻灯片级 deck 靠 Firecrawl skill 抓取某个参考站(Perplexity)的视觉风格,再让 agent 把多张个人照片排进每张幻灯片,产出品牌一致的赞助提案。(→ 详解5)
- 同一份 Paper 设计可以用一条 prompt 让 agent 一键部署到 Vercel、拿到真实网址,landing page + 内嵌 deck + 移动端响应全部一次性出。(→ 详解6)
知识点详解
1. Paper:为 agent 而生的 Figma-like 画布 00:02
视频开篇点题”Welcome to the new world of agent-based designing with Fable 5”, 演示场景是 Claude Code 在 Claw 桌面 app 里跑 Fable 5,直接控制 Paper 画布上的设计稿。Riley 特别澄清”Wait, no, not Figma. This is actually the agent native version of Figma called Paper”00:13,强调 Paper 与 Figma 的核心区别是”为 agent 而生”——所有画布上的对象都能被 agent 读写、检索、修改,而不是只给人用。
Paper 本质是 HTML-based 的画布应用,“all of this is HTMLbased. So, it’s really fast and really high quality”——出图速度快、质量高,因为不是位图而是结构化 HTML。下载方式很直接:去 paper.design 点下载按钮,自动识别 Mac/Windows 安装包。
2. 用 MCP 把 Claude Code 接到 Paper 01:47
接入流程只需三步。第一步,Paper 桌面 app 启动后点右下角”using agents”按钮并选择”get started”,拿到一个 MCP server 链接——Riley 直接给出 URL paper.design/doccks/mcp,“you can actually literally just copy this link paper.design/doccks/mcp”02:15。第二步,打开 Claude Desktop(也支持 Cursor 等任何本地跑 agent 的工具)开新对话,输入”我要设置 MCP server 控制我的 paper.design”,把上面那个链接粘贴进去,“And then Claude will set up the connection for you”02:48——Claude 会自动写好配置文件。
第三步是连通性验证:在 Paper 里新建一个 file 命名为”Riley site”,然后回到 Claude Code 输一句”告诉我当前打开的是哪个画布,并画一个简单的图形 hello from Claude Code”。“I’m not going to use high for this because I’m just going to use low. We do not need to waste those fable tokens”——Riley 强调验证阶段用 low 档模型省 credits。跑完测试画布上确实出现”hello from Claude Code”标题和一条弯曲蓝线,证明 Claude Code 已完全控制 Paper 画布。这一步就是后续所有自动化设计的基础:agent 能向画布读写 HTML 结构化对象,而 Paper 出图本身也是 HTML-based,所以”快且质量高”。
3. YouTube 缩略图:用 skill 抓图 + 多参考图迭代 04:24
缩略图场景分两步:Paper 自带的图像生成工具先做主体生成,然后 Claude Code 通过 skill 做素材导入。Paper 桌面 app 内置图像生成,可以直接选 AI image model,Riley 把一张高质量 YouTube 缩略图和自己照片并排摆在画布上,shift+click 多选后下指令”Replace the man in the middle with this guy”04:53,并指定把文字改成”Fable verse GPT 5.6”——几秒内出 7 张不同版本,“This is a really fun way to iterate and create graphics directly inside paper”05:10。
但 Paper 内置生成拿不到其他 YouTuber 的高清缩略图,这时靠 skill 扩展:“the question then becomes, how do I put these high-quality thumbnails from other YouTubers inside paper”05:40。Riley 以 YouTuber Callaway 为例,让 Claude Code “去找他表现最好的 12 张缩略图,导入到 paper 的一个 frame 里”。Claude Code 调用 skill/youtube-thumbnails(Riley 自己做的免费 skill,在 riley-skills-site.vercel.app 上),这是关键启示:“Claude Code actually won’t be able to do this by default, but if you use this skill”06:27,and it’s free in the description。
执行效果上”Just like that. There’s six”06:58——缩略图一张张被抓下来塞进画布上的 frame。然后 Riley 复制自己照片到 Callaway 的缩略图旁,选中目标缩略图与新元素多选后 prompt:“Replace the man, the guy holding the phone with this guy. Make the text say addicting apps. And on the phone it should be the same but with an app store icon”——这是把竞品爆款缩略图的”骨架”借来换成自己的人物和文字,既保持爆款的构图套路,又换成自己的品牌。
下一轮是”多参考图迭代”:08:26Riley 在画布上同时摆上”目标缩略图 + 自己照片 + 三个图标”,全选后下指令”please change the text to you’re still early and then replace the icons with the three icons that I’ve pasted here and also replace the guy with the other guy”——一次 prompt 让 agent 同时理解三组参考元素的关系,产出多版成品。Riley 反复强调”I don’t pull from other people’s thumbnails all the time. Oftent times I’m using previous thumbnails. I have worked with thumbnail designers in the past and will actually start from those as well. But this is just a way to like really quickly iterate until you reach the concept that you want”——这套工作流的核心价值是”快速迭代到目标概念”,而不是只能从零画起。
4. Instagram 信息图:可编辑文字 + 黑色渐变蒙版 11:10
Instagram 场景从一个新画布”Instagram graphics”开始。Riley 找了一张参考的 Instagram 信息图(来自账号 wealth)——“you can see it has this um black gradient effect behind the text, which I think is really cool”11:10——并把这个效果描述给 agent:“don’t generate a new image. What I want you to do is I want you to take the image of the guy and add the black gradient effect”11:34。
关键差异是 Paper 里文字是独立图层,而不是”烤进图片”的位图——所以下指令时特别强调”I can edit that text except I want that text to be white. And instead of it saying wealth right above it, have it say Riley Brown”。agent 先做加图、加黑色渐变蒙版、加可编辑文字三步,完成后 Riley 直接点击文字图层修改,不用重生成图片。“This is not generating an image where the text is an image where you have to edit it like you just edit it directly which I really like”——这是 Instagram 信息图工作流的核心便利。
为了让迭代更可控,Riley 用 Paper 的”复制链接”功能选中某张具体生成的自己照片作为参考:“notice here there is a copy link. I can copy this link and just I can say this one. please use this image for this”——把单个资产的链接复制给 agent,确保它引用的是确切的那张图,而不是”看起来像”的那张。“And then please change the paper like have paper be blue in the ex the one that you’ve already created like in the text and have the Riley brown be red same size”——多轮迭代里同时改颜色、文本、参考图。整段演示里 Riley 说”I don’t open paper anymore. Claude does”15:03——这是整套工作流的精髓,人退到”下指令 + 选中目标”,画布上具体怎么排由 agent 决定。
替换已生成图片也很简单:选中目标图片 copy,然后选中要替换位置的现有图片按 Cmd+Shift+R,“And boom, it replaces that image with the one you generated”——无需重跑整个 prompt。
5. 6 张幻灯片 deck:用 Firecrawl 抓参考站视觉风格 16:56
演示场景升级到做一份”赞助商 pitch deck”。Riley 把所有个人照片框进一个 frame 命名为”photos of me”,这样只需复制 frame 的链接就能让 agent 一次拿到所有图片——“instead of having to copy the link to all of these images, I can just copy the frame link and give it to Claude”。然后下了一条大 prompt:“Create a six slide high quality pitch deck. Not even a pitch deck. This is a presentation pitching on my creator business”17:55,并明确品牌风格要求”I want this brand to look like Perplexity. I think they have a great brand and so I want this deck to kind of match that style”,以及排版偏好”Remember, keep it simple. Don’t have footers. I don’t like footer text. I don’t even like subtitle text, but I like crisp headers, good design, cool graphics, simple layout, explain things very simply. I like whites space. Create a six uh deck, but each one of the slide should have one of these images of me on it. and use one per slide”。
实现 Perplexity 风格靠的是 agent 在跑这条 prompt 时调用的 Firecrawl skill:“Firecrawl which allows it to search the internet scrape the styling from any style like any site on the internet”19:06——抓目标站点的视觉风格(配色、字体、间距)直接喂进生成。Riley 还演示了”中途打断”用法:agent 写到一半,Riley 补一句”don’t do that again. So, Fable 5 is now working on our deck. And you see here, it pulled the Perplexity design, same colors, same font”——颜色、字体、布局确实抓到了 Perplexity 的味道。期间 Riley 还发现自己忘了把个人网站链接喂给 agent,马上补一句”my personal site is my personal site. You can get info from that. And there you go. So now it got I gave it my personal website and it updated the reach and now it’s actually up to date”——这个细节印证 agent 的迭代不是”一次成型”,而是”边做边接受补丁”。
6. 设计稿一键部署到 Vercel 着陆页 21:29
视频最后一步是把刚才做的 6 张幻灯片 deck 包成响应式着陆页。Riley 给 agent 一条 bonus prompt:“I really like this full slide deck. You did a great job. Now, what I want you to do is create a website, a landing page that’s optimized for web and mobile that allows people to just see Riley Brown at the top. And uh below it, it just says uh it has like one cool line and beneath it, it has the slide deck where people can toggle which slide”21:29,并附带部署指令”I want you to create this website and then I want you to deploy it to Vercel and send me the link so that I can see it on the actual internet”21:56。
Vercel 部署由 agent 一键完成,最终产出真实可访问的网址 rile-sponsor-site.cell.app——这是 Vercel 自动分配的 cell.app 子域。“And look, we have our slide deck in a website that’s deployed on the internet. You could go to this site rile-sponsor-site.cell.app and we have the slide deck right here directly in the website as we created it in paper”——着陆页里嵌入了 6 张幻灯片的切换视图,移动端布局自动响应。Riley 评价”In fact, I like this more than my existing website. So, I might use this. This is pretty solid”——产出质量让他考虑直接用它替换自己的个人站点。
视频最后一段给商业披露做了完整交代:“every time that you use claude code to do something on paper, it does use credits. And once you do enough, it will begin charging you. So there is a paper subscription at some point. I don’t know what it is. This video is not sponsored by Claude, nor is it sponsored by paper. I just really genuinely use these tools a lot especially for thumbnails and Instagram graphics”23:15——明确否认赞助关系,提示 Paper 后续会收费,定位为个人真实使用经验分享。
可执行步骤
- 去 paper.design 下载 Paper 桌面 app(Mac/Windows),启动后右下角点”using agents”按钮获取 MCP server 链接
- 打开 Claude Desktop 新对话,告诉 Claude 设置 MCP server 控制 paper.design,把上面那个链接粘贴进去,让 Claude 自动配置
- 在 Paper 新建一个 file,回到 Claude Code 跑一次”画一个简单图形”的验证 prompt(用 low 档模型省 credits),确认 agent 能读写画布
- 去 riley-skills-site.vercel.app 下载
skill/youtube-thumbnails,装到 Claude Code,以后让 agent 抓 YouTube 缩略图时直接可用 - 缩略图迭代时把目标缩略图、自己照片、要替换的图标并排摆好,shift+click 多选后下 prompt,几秒内出多版本选最优
- Instagram 信息图让 agent 加”黑色渐变蒙版 + 可编辑文字”时,明确说明文字是独立图层可后续直接编辑,不要让 agent 把文字烤进图片
- 做品牌风格统一的 deck 时,在 prompt 里明确”参考哪个站点的视觉风格”,agent 会自动调用 Firecrawl skill 抓取配色/字体/间距
- 多张照片素材框进一个 frame 并命名,把 frame 链接复制给 agent,避免逐张复制图片链接
- 把做好的设计部署成着陆页时,明确”创建响应式网站 + 部署到 Vercel + 发我链接”,一次性产出可访问的真实 URL
关联
- 进阶:与 2026-07-01-用Cursor打造桌面语音Jarvis 同频道续作——Jarvis 偏”语音 agent + 桌面操控”,本片偏”设计 agent + 画布操控”,先读 Jarvis 那条理解”agent 替代人操作 GUI”的大方向,再读本片看”agent 替代人做设计”的落地形态。
- 印证:Paper.design 提供 MCP server 与 MCP “Linux Foundation 托管的跨厂商标准”一致——印证 MCP 已落到设计工具领域,不只编码工具能用;独立来源是 Agentic 工作流课对 MCP 的定义。
- 印证:本片用 Firecrawl 抓取参考站点视觉风格,与 Firecrawl Interact “浏览器自动化与网页抓取合成同一条流程”的能力维度一致——印证 Firecrawl 的”抓取”不止于文本,样式也是输出。
- 复现:Fable 5 七级建站 的 Level 4 把 OpenArt 通过 MCP 暴露给 Claude Code,与本片把 Paper 画布通过 MCP server 暴露给 agent 的接入形态同构——两篇都印证”MCP server 是把视觉/设计工具接入 agent 的通用接口”。
一手来源与延伸
- riley-skills-site.vercel.app —— 视频引用的 Riley 自建 skills 平台,提供 YouTube 缩略图抓取等可下载 skill,Claude Code 默认做不到的扩展能力都在这里
- paper.design/doccks/mcp —— Paper 官方提供的 MCP server 接入链接(出现在视频 description 与口播中),无需自建服务即可让 agent 控制 Paper 画布
术语
- Paper(为 agent 而生的 Figma-like 设计画布桌面应用,HTML-based,支持 MCP server 接入)
- MCP server(把外部工具/服务按 MCP 协议暴露给 agent 调用的进程,本片即 paper.design/doccks/mcp)
- Fable 5(Claude 最新模型版本,本片里驱动所有设计任务的底层)
- skill(Claude Code 内可复用的指令包,本片用 YouTube 缩略图抓取 skill 和 Firecrawl skill)
- Firecrawl(把网页转成结构化数据/抓取视觉风格的爬虫 API,本片用于抓参考站点的配色字体)
- Vercel(前端应用部署平台,本片让 agent 一键部署 landing page 后自动分配 cell.app 子域)
- cell.app(Vercel 部署后自动分配的子域样式域名)
金句
“I don’t open paper anymore. Claude does.” → 一句话点透”把画布交给 agent”的人机协作哲学,人退到下指令,具体怎么排由 agent 决定 15:03
立场与利益
- 与利益同向(待印证):视频核心主张”agent-based designing 永远改变设计”,与 Riley 推广 Claude Code + Paper + 自家 skills 平台(riley-skills-site.vercel.app)高度同向——这条”永远改变”论断属于愿景级表达,需外部独立案例印证,具体操作步骤本身则中性。
- 利益中性:具体技术操作如”MCP 接入流程”、“skill 抓 YouTube 缩略图”、“Firecrawl 抓取参考站视觉”、“Vercel 一键部署”都是可独立验证的工程事实,跟 Riley 卖东西无直接关联。
- 利益反向:Riley 在视频结尾明确承认 Paper 后续会收费(“every time that you use claude code to do something on paper, it does use credits. And once you do enough, it will begin charging you”),并主动声明”this video is not sponsored by Claude, nor is it sponsored by paper”——主动暴露工具未来成本,且否认赞助,反向说明其工具推荐的真诚度。
价值定位
- 适合谁:已经在用 Claude Code、想把”设计自动化”扩张到日常创作流(缩略图/信息图/演示文稿/着陆页)的内容创作者、增长/营销人员、独立创业者;尤其适合做 YouTube/Instagram 内容但没时间精修设计的人。
- 解决什么:把”打开 Figma 手动排版”换成”一条 prompt 让 agent 在画布上直接产出 + 迭代”;尤其是 YouTube 缩略图这种需要”借爆款骨架换自己素材”的快速 A/B 场景,以及”参考某个品牌视觉风格做 deck”这种需要从网络抓取风格的设计任务。
- 认知 vs 实操:实操导向,三个具体场景(缩略图 / 信息图 / deck + landing page)都跟做能跑通;但没有深入讲 MCP 底层通信协议、Paper 内部对象模型、Figma-like 工具的协作权限模型等工程细节。
- 与 2026-07-01-用Cursor打造桌面语音Jarvis 重叠时:都属”Claude Code 操控 GUI 替代人动手”主线,但本片独有”操控对象是设计画布”这一新形态——Jarvis 是操控电脑桌面应用,本片是操控专用画布工具;且本片独有”skill 扩展 + Firecrawl 抓风格 + Vercel 一键部署”的完整流水线。
自检问题
- Paper 与 Figma 的根本区别是什么? 答案:Paper 是”agent native”版本——画布上的所有对象都能被 agent 读写检索,而 Figma 主要为人设计、agent 只能通过插件有限接入;且 Paper 是 HTML-based,出图快质量高,对应知识点1 00:13
- Riley 演示了用 Claude Code 通过 MCP 接入 paper 的三个设计场景分别是什么? 答案:YouTube 缩略图迭代、Instagram 信息图(可编辑文字+黑色渐变蒙版)、6 张幻灯片赞助 deck + 部署成 Vercel 响应式着陆页,对应知识点3、4、5、6 04:24
- 缩略图迭代中为什么要用”多参考图 + 精确文字覆盖”的 prompt? 答案:把目标缩略图、自己照片、要替换的图标并排 shift+click 多选,让 agent 一次理解三组参考元素的关系,产出多版成品;精确指定文字内容避免 agent 自由发挥出无效标题,对应知识点3 08:26
- Instagram 信息图的”黑色渐变 + 白色文字”效果在 paper 里为什么容易做? 答案:因为 Paper 里文字是独立图层而不是烤进图片的位图,agent 加完蒙版和文字后人可以直接点击图层修改,不用重生成整张图,对应知识点4 11:34
- 6 张幻灯片的视觉风格是怎么从 Perplexity 站点学到的? 答案:agent 在跑 prompt 时调用 Firecrawl skill 抓取 perplexity.com 的视觉风格(配色/字体/间距)直接喂进生成,所以出来的 deck 颜色字体与 Perplexity 站点一致,对应知识点5 19:06