Claude Design的推出正在彻底改变AI生成界面的工作流。这款工具不仅能自动从截图、代码或Figma文件中提取完整设计系统，更实现了从'人写给AI读'到'AI自己看懂并生成'的进化。文章通过三个实操案例，深度解析了如何结合System Prompt、Skill规范和设计系统三层架构，让AI输出既专业又美观的产品界面。

听着像玩梗，但这确实是我过去几个月用 AI 做产品的真实状态。

我最近在做一个 AI 模拟面试产品，从 Prompt 架构到界面生成全程用 AI 搭。

做着做着我就发现，让 AI 干活干得好，核心就三层东西：

System Prompt管全局规则；

Skill约束它做每个具体动作的标准；

Design System决定它输出的 UI 好不好看。

前两层我已经摸得比较熟了，但第三层一直是个半手工活。

之前 Google Stitch 提出了DESIGN.md的概念，把设计系统写成 markdown 喂给 AI，让它生成界面时有规范可循。方向是对的，但还是得你自己手搓那份文件。色板、字体、间距、组件规则，一条一条写进去。

然后 4 月 16 号，Claude Design 上线了。

它做了一件事：你不用再手搓了。给它截图、代码、甚至一个 Figma 文件，它自己提取设计系统。从人写给 AI 读，变成了 AI 自己看懂然后生成。

我花了一两天跑了三个测试（主要是tm额度一会儿就满了需要等）。下面是完整的过程和我的判断。

Claude Design 是什么

4 月 16 号，Anthropic 在发布 Opus 4.7 的同时，上线了一个新产品：Claude Design。目前还是 Research Preview 阶段，Pro、Max、Team、Enterprise 计划都可以用。

它是一个 AI 原生的设计工具。左边对话框，右边画布。你用自然语言描述需求，它直接生成可编辑的高保真界面。

创建项目的时候可以选 Wireframe 或 High fidelity 两种模式，进去之后左边是 Chat 对话区，右边是 Canvas 画布。你还可以给项目添加上下文，比如截图、代码库、Figma 文件，Claude 会基于这些素材来理解你要什么。

不过有一点要提前说：它特么真的很费 token。Claude Design 的用量是单独计算的，和普通对话、Claude Code 分开。我一天跑了三个案例，额度直接拉满到 100%。

我做产品这几个月，踩了不少坑之后，慢慢摸出来一个规律：让 AI 持续输出高质量的东西，靠的不是每次写一个好 Prompt，而是把规范沉淀下来，让它每次都按标准干活。

这个规律大概分三层。

第一层：项目级规范（System Prompt）

System Prompt 或者叫做 Instructions ，管的是项目全局。你这个项目是干什么的、用户是谁、有哪些边界和约束、整体的语气和风格是什么。

拿我做的 AI 模拟面试产品来说，System Prompt 里定的是：你是一个面试官，你要根据候选人的简历和目标岗位出题，你的追问逻辑是什么，你绝对不能做哪些事。这些规则一旦定下来，后面所有的对话都在这个框架里跑。

System Prompt 就是项目的宪法，你不需要每次都重复告诉 AI 你是谁、你要干什么。磨好一次，全局生效。

第二层：具体动作指南（Skill）

光有 System Prompt 不够。它管得了全局，管不了细节。

比如你让 AI 写一份 PRD，它知道你是什么产品、用户是谁，但它不知道你的 PRD 应该长什么样。几号字体、什么结构、要不要写竞品分析、技术方案写到什么粒度。这些东西如果不约束，每次输出都不一样。

这就是Skill要解决的问题。一个 Skill 就是一份具体动作的标准规范。它不管全局，只管一件事，但管得非常细。

我现在搓了不少 Skill：写 PRD 的、画小红书图文的、做课件的，每个都是从实际使用中反复调出来的。比如我的PR D Skill 里，连不许用破折号、不许用引号做强调应该用加醋这种颗粒度的规则都写进去了。

Skill 搓得越细，AI 的输出就越稳。这跟你带一个新人是一样的道理：你给他一份详细的 SOP，他干出来的活就比你口头交代一句要靠谱得多。

第三层：设计系统（Design System）

前两层解决的是做什么和怎么做，第三层解决的是做出来的东西的审美。

你让 AI 写代码、做界面，它能跑出来一个能用的东西。但好不好看、风格统不统一、配色是不是舒服，这些它没有标准可循的话，就是随机发挥。今天出一个蓝色系的，明天出一个绿色系的，后天又换了个字体。

之前的做法是手搓一份设计规范喂给它。Google Stitch 提出了DESIGN.md的概念，把色板、字体、间距、组件规则写成一个 markdown 文件，放在项目根目录里，AI 每次生成界面之前先读一遍这个文件。

我自己也搓过一套web-design Skill，干的就是这个事：先确定设计规范，再写代码。设计规范里包含 5 套预设的设计 Token，每套有完整的配色、字体、间距、圆角规则。这个Skill我直接开源到了Github上，庆幸赶在了Claude Design上线的前一天！

这个方向是对的。但手搓这份文件真的很累，尤其你想从一个已有的设计稿里提取规范的时候，得自己一条一条去量、去记、去反复测试。

Claude Design 的出现，就是直接把这第三层从手搓变成了自动化。

这三层加在一起，就是我现在用 AI 做产品的完整基建：System Prompt 管规划，Skill 管规范，Design System 管审美。

好，方法论讲完了，今天主要讲新出的这个Claude Design做的三个新鲜热乎的案例。

从几张截图到一个完整落地页

第一个测试，肯定都是先Say Hello，我就想看看最小成本的输入，能到什么程度。

我找了一个网站，截了几个图丢进去，没做任何设定，就让它自己来。

Claude 收到截图之后，第一件事不是直接开画。它先把自己理解的设计语言列了出来：配色方案、字体选择、标志性元素、布局逻辑，全部自己总结了一遍。然后拆了一个 7 步的进度条，从文件结构到页面组件，一步一步往下推。

预览渲染失败是因为没加载出来我上传的截图，这个感觉是bug。但无所谓不影响，我们先看下效果：

一个完整的落地页就这么生成了。黑白单色、大字报排版，导航栏、Hero 区、服务介绍、CTA 按钮，该有的全有。而且它选的字体、字重、字间距这些参数都不是随便糊的，确实在还原那种高端 agency 网站的质感。

这里有两个功能我要单独说一下。

第一个是可视化编辑。生成出来的页面不是图片，是真正可编辑的 HTML。你点击任何一个元素，右侧弹出属性面板，字体、颜色、间距全能直接调。这基本就是一个轻量版的 Figma 编辑器。

第二个更离谱：画圈标注。你觉得某个地方有问题，直接在画布上画个圈，写上备注，发给 Claude 让它改。底部还会显示你的操作记录。这就是设计师和开发之间 review 的体验，只不过对面坐的是 AI。

最后还有导出。它能把页面打包成独立 HTML 文件，完全离线，改完直接就能部署。格式还支持 PDF、PPTX，甚至可以直接 Handoff 到 Claude Code 继续写逻辑。

第一个案例跑完，我的感觉是：结构性还原确实很强。布局、组件、排版都到位了。但它生成的配图是 CSS 做的占位符，那种有质感的 3D 效果，代码是画不出来的。这个也简单，给它一个素材替换一下就行了。

案例二：从 Figma 模板到设计系统

第一个案例里我没用设计系统，Claude 全靠截图自由发挥。第二个测试，我想试试设计系统到底能做到什么程度。

我的思路是这样的：去 Figma 社区找一套好看的设计模板，把它的设计风格提取成 Claude Design 的设计系统，然后用这套系统去迁移我已有的课件。

先去 Figma 社区选了一个PPT模板，暖灰色系、水墨纹理配图，整体风格很干净。

选好之后，Figma 里点使用模板，然后把这个文件导出为 .fig 格式。这里有个坑要说一下：可能是因为版本的问题，有的Figma 导出给你的其实是 .deck 格式，但 Claude Design 要求上传的是 .fig 文件。

但是也简单，下载下来之后手动的把文件后缀改成.fig，依然不影响！

拿到 .fig 文件之后，回到 Claude Design，在设计系统创建页面把文件上传进去。

接下来就是等了。Claude 花了大概 10 分钟，把整个 Figma 文件解析了一遍。它拆出来的东西非常细：核心调色板、字体比例、间距规则、幻灯片布局类型、图像处理方式，全部结构化地呈现在设计系统面板里。

而且它还很贴心地列出了几个需要确认的问题：比如原 Figma 文件里没有中文字体，它自动加了备选；原文件里只有一张黑白纹理图被反复使用；图标系统几乎是空的。这些细节它都主动标出来了，让你决定要不要调整。

设计系统建好之后，就是重头戏了。

我把之前做的一份课件 HTML 丢进去，告诉它：这是我之前做的课件，帮我改成 Warm Monochrome 风格。

Claude 先读了课件内容和设计系统，然后拆了个 3 步的任务：拷贝设计系统资源、按新风格重建课件、验证交付。

出来的效果确实牛逼。我原来的课件内容完整保留，但整个视觉风格都变了：字体、配色、纹理背景，每一页都严格遵循设计系统的规范。而且直接就能编辑、改文字、调间距。

这个能力你仔细想一下就知道多离谱了：它把设计系统当成了一个皮肤。任何内容喂进去，都能套上这层皮。以后换课件风格，就是换个设计系统的事。

所以你现在可以这么玩：垒很多套不同风格的设计系统，小红书风格的、极简 PPT 风格的、iOS 便当盒风格的，然后你做任何项目都可以选择挂载其中一套。输出风格一致性就会非常高。

这才是 Claude Design 这个产品真正有意思的地方。

案例三：一个完整的 App 多界面原型

前两个案例分别测了网页生成和设计系统。第三个我想搞个大的：让它做一个完整的 App，多个界面、有流程、能交互。

我找了几张暗黑风格的理财 App 截图作为参考，告诉它：我想做一个个人资产、账单管理的 App，黑色主调、暖色主题、橙蓝色渐变作为装饰色，核心流程包含登录界面、消费支出总览、个人资产总览、单笔消费页面。

Claude 收到之后，先把设计系统自己定了一遍：底色、点缀色、字体、图案、屏幕数量，然后开始一屏一屏地画。

中间又渲染失败了一次。但第二轮出来之后，卧槽，5 个完整的交互式屏幕直接摆在画布上：欢迎页、密码登录、资产总览、消费分析、单笔交易详情。每个屏幕都是独立组件，点击任意一个手机就能进入原型模式单独查看。

底部还附了一条设计系统摘要：色板、字体、图案风格、圆角规则，全都一目了然。

但初版有个 bug：消费分析页的月度预算金额超出了卡片边界。我直接在画布上画了个圈标注了一下。

Claude 看到标注之后，自己定位了问题，调了容器的间距和字体大小，修好了。

接下来我做了一件更有意思的事：把整个 App 翻译成中文。

我告诉它把所有英文内容换成中文，用户名改成小普，地点改成北京朝阳区，字体换成苹方/思源黑体。它逐个文件搜索、编辑，连头像字符都帮我换成了”普”。

出来的效果就是一个完整的中文理财 App 原型了。产品叫星焰记账，5 个核心页面全部到位。

但这时候有个问题暴露了。

欢迎页的背景是 Claude 用 CSS 渐变生成的，那种橙蓝色光晕效果。看着还行，但跟真正有质感的设计比起来，总有一股塑料味。这东西的天花板就在这里，代码能做的视觉效果是有限的。

所以我做了一件事：用Lovart单独生成了一张橙蓝渐变呼吸效果的光效素材，去掉黑色背景，然后丢回 Claude Design 里替换。

替换之后光晕效果终于有了有机的质感，不再是纯代码渐变的塑料味了。

然后我又让它删掉资产总览页的银行卡轮播，把近期账单流水直接铺上来，快捷操作压缩成横向按钮组。整个页面的信息密度和实用感都上去了。

这个案例跑完，我的核心判断是：Claude Design 能搞定结构性的东西，布局、组件、交互流程、多屏幕串联，这些它确实很强。但质感性的素材，比如有机的光效、3D 材质、手绘纹理，这些靠代码生成是有天花板的。正确的打开方式是组合拳：Lovart 出素材、Claude Design 做结构和交互、画圈标注微调。

不过说实话，其实这个背景蛋还是丑，像一个美妆蛋似的。但是我来不及优化了，这是一个漫长的微调的过程，而且我特么没额度了！

但是抛开视觉不说，你还可以切换成交互模式直接上手测试，不单单是给你生成了几个静态页面：

三层基建

三个案例跑完，回到开头那句话：磨指令、搓 Skill、垒设计系统。

这不是在玩概念，是我得出的方法论。这三层不是割裂的，是嵌套的。System Prompt 是最外层的壳，Skill 是里面的齿轮，Design System 是齿轮上的涂装。缺了哪一层，AI 的输出都不会稳定。

我现在起一个新项目的流程基本是这样的：先花半小时把 System Prompt 写好，定清楚项目的边界和规则。然后看这个项目需要哪些具体动作，PRD、界面、文案、数据分析，每个动作对应检查一下有没有现成的 Skill，没有的就搓一个新的。最后看输出涉不涉及 UI，如果涉及，就建一套设计系统挂上去。

这套流程跑熟了之后，效率确实很高。因为大部分规范是可以复用的，Skill 库和设计系统库会越垒越厚。新项目启动的时候，很多东西直接挂载就行，不用从头来。

当然，Claude Design 现在还是 Research Preview，毛病不少。渲染会失败、inline comments 偶尔会丢、token 贵得离谱，跑三个案例就把周额度打满了。但它把设计系统这件事产品化了，方向是对的。

以后做项目的工作流大概就是这样：垒好你的设计系统库，挂载到项目上，然后用对话驱动生成。结构性的东西交给 AI，质感性的素材用外部工具补，最后画圈标注微调。

磨指令、搓 Skill、垒设计系统。AI时代，每天就干好这三件事。