Claude Design提示词教程：3步复刻同款Agent设计

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

AI 工具解构 · 01

Anthropic Claude Design让Figma股价承压，龙虾团队落地同款设计智能体

将官方设计智能体的系统提示词注入小龙虾（基于CodeBuddy subagent框架）——实测能力边界、输出质量与落地效果，一文说透。

说明：本文所有配图及排版均由复刻版claude design subagent直接生成。

导语 · PROLOGUE

Anthropic最新发布的Claude Design，本质是一个专精于设计交付的AI智能体。社区已逆向提取其核心系统提示词，虽缺少部分官方工具的实现细节，但整体工作流与能力框架完全可迁移至自有工具链。今天凌晨，有人将此套提示词配置到CodeBuddy中，封装为名为@claudedesign的子智能体。

本文直观展示这套提示词的真实威力：复刻版能跑到什么程度？看完你会发现，你可以立刻拥有这位“资深设计师”。

Claude Design是什么？为什么值得复刻？

Claude Design是Anthropic为Claude定制的“设计师工作模式”——你对它说“做张海报”“做份PPT”“做个原型”，它会严格遵循资深设计师的标准流程：先抛出10个问题澄清需求，接着读取你的设计系统、UI Kit、品牌资产，然后输出3个设计方案供你选择，最后由独立验证子智能体进行质量审查后才交付。

问题在于：该能力目前仅限Anthropic官方平台使用。国内用户访问受限，且需要Pro及以上会员才能调用。

昨天凌晨社区流出Claude Design提示词后，我立即将其完整配置到了CodeBuddy的subagent中，产出效果远超预期。

它能帮你解决的6个真实场景

以下按照优先级从高到低展示6个典型用例。每个场景均附真实生成效果——看完自然知道是否值得安装。

01 海报 / 封面设计

自媒体封面、活动海报、产品宣发——任何需要“一图胜千言”的场景，它都能高效交付。

与普通AI生图的核心区别：一次输出3个版本，每个版本采用不同的视觉表现维度。选定方案后，右下角提供参数调节面板，可拖拽滑块微调字号、色彩、间距——满意后再导出。

以下是为本文生成的公众号封面：

效果图 effects/01-poster.html

02 幻灯片 / PPT制作

丢给它一份PRD文档、一篇长文、甚至一段录音转写的逐字稿——它能自动拆解为幻灯片，直接在浏览器内翻页演示，无需打开PowerPoint。

真正亮点在于导出：同一份HTML源文件，可同时输出可编辑版.pptx（老板可改文字改图）、截图版.pptx（像素级精确但不可编辑）、以及PDF。彻底省去“做完PPT再转PDF再截图”的繁琐工序。

效果图 effects/02-deck.html

03 交互原型设计

产品经理和设计师最头疼的场景——向老板演示原型。传统模式下：Figma画好静态界面，靠嘴说“假装这里点一下会……”。

它生成的原型可真实交互：hover状态响应、点击颜色变化、跨页面跳转、表单输入校验，样样俱全。配合内置的iPhone/Android/桌面窗口外壳，场景沉浸感极强。

效果图 effects/03-prototype.html

04 动效 / 转场动画

这是最令人意外的能力——它不止能做静态设计，还能基于时间轴驱动动画。以一张ClaudeDesign介绍海报为起点，让它生成动效。

输出效果惊艳：支持随时拖拽进度条，正放与倒放均流畅。未来许多教程型视频可直接采用此方式制作。

05 建立UI Kit / 设计系统

这是它最具“体系化”的能力——如果你要做一个完整产品（而非单张海报），它可以帮你从零搭建整套视觉规范：色板、字号梯级、组件库、间距协议，全部定义清晰，沉淀为可复用的设计资产。

后续开发新产品不必从零开始——只需说“按v1 UI Kit制作一个新页面”，即可保持整个产品家族的视觉一致性。

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

06 多格式导出

前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”即可找到。

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而不是Photoshop或Figma？因为HTML可被AI读写、可导出任意格式、可承载交互、可当作视频素材。一套源码打通所有下游——这正是未来AI设计工具的默认形态。

最终公式：优质AI工具 = 底层模型 × 职业素养；复刻路径 = 提取系统提示词 → 注入现有工具

NEXT · 下篇预告

Claude Design背后的7个设计决策

本篇聚焦“它能帮你做什么”——下篇拆解“它为什么这样设计”。包括：强制10问澄清、AI Slop防错清单、三方案强制机制、双Agent验证、时间轴即坐标——这7条方法论，提炼后可注入任何AI工具。

来源：互联网