【收藏！】教你3步用Claude Design提示词复刻同款Agent，你也可以成为设计大师～

FILE #01 · CLAUDE DESIGN 复刻档案2026 · 04 · 19

AI 工具解构 · 01

Anthropic Claude Design让Figma股价大跌，而龙虾复刻了一个同款

把官方的设计智能体提示词装进小龙虾（基于CodeBuddy subagent） —— 它能做什么、效果怎么样，一篇文章讲透。

说明：此文章采用复刻的claude design subagent配图生成和排版。

路

路易乔布斯

一深思 AI · 2026.04.19

导语 · PROLOGUE

Anthropic 最近发布了一个叫 Claude Design 的产品——本质上是一个专门做设计的 AI 智能体。我研究了它的系统提示词，虽然少了很多官方工具实现，但核心能力和框架可以复刻到自己的 小龙虾 里。于是昨天凌晨我把它装进了 CodeBuddy，做成一个叫 @claudedesign 的子代理。

这篇文章给你看看提示词的力量：复刻后达到的效果。重点是看完了，你也可以把这个“高端设计师”带回家！

什么是 Claude Design？为什么要复刻？

Claude Design 是 Anthropic 官方给 Claude 配的"设计师模式"——你对它说"做张海报"、"做个 PPT"、"做个原型"，它会按资深设计师的工作流来做事：

先问 10+ 个问题澄清需求，再去读你的设计系统、UI Kit、品牌素材，然后出 3+ 个变体让你选，最后用独立验证子代理挑刺再交付。

问题是，它只在 Anthropic 官方能用。而我们国内访问受限，并且需要Pro以上会员才可以使用。

昨天凌晨看到有关于Claude design提示词泄漏的文章后，我就把Claude Design 的系统提示词，配置到 CodeBuddy 的 subagent 里，结果好到出乎我意料！

它能帮你做的 6 件事

下面按优先级从高到低讲 6 个场景。每个场景都配了它真实生成的效果图——你看完就知道该不该装一个。

01做海报 / 封面POSTER

自媒体、活动、产品发布——任何需要"一张图说清楚一件事"的场景，它都能出活。

它和普通 AI 出图的区别：不是一次只给你一张，而是一次给 3 版，每版换一个核心视觉维度。你选定一版后，右下角还自带调参面板，可以拖滑块微调字号、颜色、间距——改满意了再导出。

这是他做的这篇公众号封面：

效果图 effects/01-poster.html

02做幻灯片 / PPTDECK

你给它一份 PRD、一篇文章、甚至一段录音转写的逐字稿——它会自动拆成幻灯片，直接在浏览器里就能翻页演示，不需要打开 PowerPoint。

真正的亮点在导出：同一份 HTML 源文件，可以导出成可编辑版 .pptx（老板能直接改文字改图）或截图版 .pptx（像素完美但不可编辑）或 PDF。不用再做完 PPT 再转 PDF 再截图。

效果图 effects/02-deck.html

03做交互原型PROTOTYPE

产品经理、设计师最痛苦的场景——给老板讲原型。以前的流程是 Figma 画死画面 + 嘴巴解释"假装这里点一下会......"。

它做的原型是真的能点——hover 状态、点击变色、跨页跳转、填表校验，全都有。配上内置的 iPhone/Android/桌面窗口外壳，场景感直接拉满。

效果图 effects/03-prototype.html

04做动效 / 过场ANIMATION

这是我最意外的一项能力——它不仅能做静态设计，还能做时间轴驱动的动画。基于生成的一张ClaudeDesign的介绍海报，我让他做动效。

做出来的效果很惊艳，可以随时拖动进度条，正放和倒放。以后很多教程类型的视频可以用这种方法来制作。

05建立 UI KitDESIGN SYSTEM

这是它最"大工程"的能力——如果你要做一个完整的产品（不只是一张海报），它可以帮你从零建立整套视觉系统：色板、字号阶梯、组件库、间距规范，全部定义清楚，沉淀成可复用资产。

你以后做新产品不用从零——直接说"按 v1 UI Kit 做一个新页面"，它就能保持整个产品家族的视觉统一。

效果图 effects/05-design-system.html

06多格式导出EXPORT

前 5 项能力都是"做什么"，最后一项是"做完之后怎么交付"。

官方是说一份 HTML 源文件，按需导出成：PPTX（可编辑或截图版）、PDF、独立离线 HTML、PNG 图片序列、MP4 视频、Canva 项目。

效果图 effects/06-export.html

我试验了下导出为PPTX的功能，把前边生成的封面导出：

划重点

如何装一个？3 步

直接把一段官方 prompt 配置到 CodeBuddy 的 subagent 里，3 步完成安装到使用：

01

拿到 Claude Design 系统提示词

社区已有人完整提取，网上搜 "Claude Design system prompt" 即可。或者关注我后台发送“Claude Design”获取提示词

https://github.com/elder-plinius/CL4R1T4S/blob/main/ANTHROPIC/Claude-Design-Sys-Prompt.txt

02

在 CodeBuddy 创建 agent（其他工具也类似）

在点击“设置”-“Agent”，输入subagent的名称，模式选择agentic，描述随便填，最后把官方的prompt贴入到系统提示词。

03

在对话中召唤它

说 @claudedesign 帮我做张海报，CodeBuddy 会自动切换到这个 subagent——它就开始按 Claude Design 的工作流问问题、出方案。

So What · 3 条底层认知

从这次复刻，我学到了什么

01

系统提示词就是 AI 的"职业素养"

同一个模型（Claude 4 或 GPT-5），配不同的提示词，就是不同"工种"——配设计师提示词就是设计师，配医生提示词就是医生。你不需要买昂贵的"行业专用 AI"。

反常识：这个通用大模型能力日益强大的今天，我愈发觉得提示词工程的重要性了！

02

好工具的差距在"工作流"而不在"能力"

Claude Design 用的还是 Claude 的模型能力——它的差异化不在"更强的 AI"，而在"一套资深设计师的工作流"：先问问题、找素材、出变体、自检。把工作流装进 AI 里，效果立刻不一样。

03

HTML 是 AI 时代的"通用画布"

为什么 Claude Design 选 HTML 而不是 PS、Figma？因为 HTML 能被 AI 读写、能导出所有格式、能带交互、能当视频素材。一套源码解决所有下游——这是未来 AI 设计工具的默认形态。

最终公式 好的 AI 工具 = 底层模型 × 职业素养 复刻路径 = 抠出系统提示词 → 装进你的现有工具

NEXT · 下篇预告

Claude Design 背后的 7 个设计决策

这篇讲"它能帮你做什么"——下一篇我们拆透"它为什么这么设计"。包括：强制 10 问澄清、AI Slop 反清单、3+ 变体强制、双 Agent 验证、时间轴即坐标——这 7 条方法论，抽出来后可以注入你任何一个 AI 工具。

继续关注看 AI 工具解构系列

WECHAT · 一深思 AI