最近在做一个面向新手的 AI 设计小项目时发现越来越多的同学开始尝试用 Claude 来辅助完成界面设计、海报排版和设计系统搭建。这类话题在短视频平台和数据网站上都火过一轮但真正讲清楚“从零开始怎么用 Claude 做设计”的教程并不多。要么只讲概念要么一上来就直接贴代码对新手并不友好。这篇文章准备围绕 Claude Design 整理一套完整的入门实战流程。我会从“Claude 到底能帮设计师做什么”这个概念讲起然后一步步带你完成环境准备、写设计提示词、生成 SVG 图形、用 HTML/CSS 搭落地页、以及维护一套简单设计系统。整个过程不要求你有设计基础只要会打字、会打开浏览器就能跟着做出一套可用的设计稿。如果你符合下面任一情况本文的内容都适合你产品经理、运营或测试同学需要在没有专职设计师时快速出图前端开发或全栈开发想用 AI 辅助生成界面和组件设计专业学生或刚入门的新手想了解 AI 时代的设计工作流。阅读完本文你会掌握 Claude 辅助设计的基本思路、提示词写法、文件输出方式以及如何把 AI 生成的结果调整成能真正交付使用的设计资源。下面我们正式开始。1. Claude Design 是什么它能解决什么问题在开始实操之前先把概念讲清楚。1.1 什么是 Claude DesignClaude Design 并不是一个独立的官方设计软件也不是某个叫“Claude Design”的应用。它指的是利用 Claude 这类大语言模型的生成能力来完成设计相关工作的一套工作流。你可以把 Claude 当作一个“懂设计原理、会写代码、能生成结构化内容”的设计助手。具体来说Claude 能帮我们做的事情包括根据文字描述生成设计稿的 HTML/CSS 代码生成 SVG 格式的图标、插画、装饰图形为设计系统梳理颜色、字体、间距、圆角等基础变量把一段杂乱的需求描述整理成清晰的设计规格对已有设计稿进行代码层面的评审和改进。它本身不替代 Figma、Photoshop 这类图形工具而是一个“从想法到代码”的加速器。1.2 它解决了什么痛点传统设计流程里从想法到最终稿通常要经历这样几个阶段需求分析 → 线框图 → 视觉稿 → 设计标注 → 切图 → 前端还原这中间需要设计师、产品、前端三个角色反复沟通。如果一个人身兼多职比如独立开发者或者小团队里的产品经理往往会卡在“想法有了但画不出来”这一步。Claude Design 工作流把链路缩短成了文字描述 → AI 生成代码 → 浏览器预览 → 调整优化也就是说你把脑海中的画面用文字描述清楚Claude 负责把文字变成可以运行的前端代码或 SVG 图形。你不需要会手绘不需要会 Figma 操作只需要能判断“生成的结果是否接近预期”然后继续对话命令 Claude 做调整。1.3 常见应用场景从目前社区里的实际玩法来看Claude Design 高频应用场景主要有四类。第一快速产出界面 Demo。比如你要做一个个人主页、一个落地页、一个后台管理面板可以用 Claude 直接生成一版完整页面拿去给团队评审。第二生成图标和插画素材。利用 SVG 文本文档的特点Claude 可以生成风格统一的图标、简单的场景插画、渐变背景装饰。第三建立设计规范。Claude 可以基于你提供的品牌色或参考图给出颜色板、字体搭配、间距体系这些建议并输出成 CSS 变量。第四学习设计原理。对新手来说Claude 不仅能给结果还能解释“为什么这个按钮要用主色而不是辅助色”“为什么大标题行高要小于正文行高”相当于一个随身设计教练。1.4 为什么值得学习有两方面原因。一是这已经是当前 AI 应用开发中很常见的需求很多项目都会直接在内部用 Claude 生成 UI 稿和设计资产。二是对个人开发者来说它极大降低了“把一个想法变成视觉原型”的门槛。你不需要先花三个月学设计软件就能用 AI 快速验证想法。当然这不意味着设计师会被完全替代。Claude 生成的结果往往缺乏细腻的美学判断和用户洞察真正负责设计质量、品牌调性和用户体验的还是人。我们学习 Claude Design正确的定位是“借助 AI 提升效率”而不是“完全依赖 AI 输出”。2. 环境准备与基础能力要求这一节先解决“需要准备什么”的问题避免你后面照着做时发现环境不一致导致卡壳。2.1 软件环境Claude Design 的门槛很低你只需要准备一个可以访问 Claude 的账号网页版或 API 均可一个浏览器推荐 Chrome 或 Edge一个代码编辑器推荐 VS Code不装也能跟着做但装了方便保存文件一个本地目录用来存放生成出来的 html、svg、css 文件。如果你的机器上还没有 Node.js、Python 这一类环境也没关系。本文的前几个案例只需要浏览器就能运行不涉及后端服务。2.2 前端基础要求我不要求你先精通前端但建议对下面几个概念有一个初步印象这样你在后面“读代码”的时候不会太懵HTML负责页面的结构。比如一个按钮、一个标题、一张图片都是 HTML 标签。CSS负责页面的样式。比如颜色、大小、间距、圆角。SVG一种基于 XML 的矢量图形格式可以直接嵌入 HTML也可以用文本编写。如果完全没接触过可以在做案例的过程中慢慢查。遇到不懂的标签直接让 Claude 解释这也是一个很高效的学习方式。2.3 提示词层面的准备提示词Prompt是和 Claude 沟通的核心语言。关于“怎么设计提示词”我会在下一节展开。这里先提两个基础原则任务要明确。不要只写“帮我做个页面”要写清楚页面类型、面向人群、风格倾向。反馈要具体。不要只写“不好看”要说清楚哪里不好看比如“标题太小”“颜色太暗”“间距太挤”。可以把 Claude 当成一位“理解文字、但看不见屏幕”的设计助理。你给的信息越详细它给出的结果越贴近预期。如果你使用的是 Claude 的网页版建议把对话记录保存在同一个会话中这样后续的修改需求会基于前文上下文来生成风格更稳定。3. 核心方法用文字驱动设计的提示词工程在 Claude Design 工作流中提示词是最核心的部分。Claude 不是魔法它输出质量的上限受限于你提供信息的质量。这一节我们会详细拆解一套适合设计场景的提示词写法。3.1 设计提示词的“四段式”结构经过实践总结建议采用下面的四段式结构【角色定义】你是一名资深 UI 设计师…… 【任务描述】请帮我设计一个…… 【设计规格】具体要求如下颜色、字体、布局、组件…… 【输出格式】请输出一个完整的 HTML 文件内联 CSS包含注释……下面给一个完整的例子你是一名资深 UI 设计师擅长极简风格的网页设计。 请帮我设计一个个人作品集首页面向“自由摄影师”这个人群。 设计要求 1. 整体风格干净、留白充足主色调为黑白灰辅以一点米色 2. 顶部导航包含首页、作品、关于我、联系 3. 首屏要有一个大标题、一句副标题和一个“查看作品”按钮 4. 作品区域展示 6 张占位图平均分成三列 5. 底部包含联系方式和社会媒体链接 6. 字体优先使用系统字体栈不要引用外部字体库 输出格式 请输出一个完整的 HTML 文件使用内联 CSS代码中添加必要的中文注释。这段提示词包含了角色、任务、规格、格式四个部分。你可以发现规格部分越详细越不容易产生“它理解错了”的情况。3.2 描述风格的关键词如果你不太会描述视觉风格可以从下面这些关键词里组合使用极简风留白多、色彩少、线条简洁玻璃拟态半透明背景、模糊、内边框高光新拟态浅色阴影、内阴影、柔和立体科技感深色背景、霓虹色点缀、细边框复古风暖色、旧照片质感、衬线字体孟菲斯风格几何形状、高饱和颜色、不规则排版。你可以把“风格”和“载体”同时放进提示词里。例如“我希望页面呈现玻璃拟态风格背景有模糊的渐变光斑卡片使用半透明白色和 1px 内边框”。3.3 告诉 Claude 看得到和看不到的部分这是很多新手容易忽略的细节。Claude 在处理设计任务时它不是通过“看图”来输出结果的而是通过“理解文字”来生成代码。因此你在描述时要站在“对方看不见图”的角度尽量写得具体。不推荐写法帮我做一个好看的登录页。推荐写法帮我设计一个登录页面。 页面背景使用深蓝色渐变中央放一张白色圆角卡片。 卡片内部包含Logo 区域、账号输入框、密码输入框、登录按钮。 输入框需要占位文字登录按钮平铺满卡片宽度背景色使用蓝色。 页面要适配移动端和桌面端。3.4 多轮对话式调整Claude Design 的优势是可以持续迭代。你不需要一次性把所有需求写全可以先让 Claude 给初稿再逐轮提修改意见。常见的修改指令示例“页面整体向左对齐去掉居中布局。”“按钮的圆角改成 6px背景色改成 #4F46E5。”“标题下方增加一行说明文字内容为用影像记录世界的温度。”“增加响应式布局在手机端时作品区域变成一列。”建议每一轮只提 1 到 3 个修改点这样 Claude 更容易准确执行也方便你对照前后输出。4. 实战案例一用 Claude 生成一个极简个人主页现在进入第一个完整案例。我们会从零到一用 Claude 生成一个“自然风光摄影师个人主页”。这个案例不需要任何前端基础你只需要复制提示词、运行结果、保存文件、预览效果。4.1 明确需求我们要做一个个人主页包含顶部导航首屏介绍作品展示区关于区域底部联系区。风格定为极简、黑白灰、米色点缀、大留白。4.2 编写并发送提示词打开 Claude 对话页面发送下面这段提示词你是一名资深 UI 设计师擅长极简风格网页设计。 请帮我设计一个“自然风光摄影师个人主页”页面要求如下 1. 页面结构包含顶部导航、首屏 Hero、作品集展示、关于我、底部联系 2. 顶部导航包含三个链接首页、作品、关于右侧放一个“联系我”按钮 3. 首屏 Hero 区域左侧显示大标题“用镜头记录四季”副标题“一位专注于自然风光的独立摄影师”下方一个“查看作品”按钮右侧放置一个模拟风景图可以用渐变和圆形模拟太阳山丘 4. 作品集区域展示 6 张占位作品三列两行布局每个占位图下方有作品名称和拍摄地点 5. 关于我区域左侧放一张圆形占位头像右侧写三段介绍文字 6. 底部区域深色背景包含邮箱、社交媒体图标图标可以用 SVG 7. 整体配色白色背景、正文用 #333、次要文字用 #777、强调色用 #B08968字体使用系统字体栈 8. 页面需要有基本响应式移动端时作品区域显示一列 输出格式请输出一个完整的 HTML 文件CSS 写在 style 标签中代码中添加中文注释。4.3 保存文件并在浏览器预览Claude 会返回一长段 HTML 代码。你需要把它保存为一个.html文件。操作步骤如下在本地创建一个文件夹命名为claude-design-demo在文件夹中新建文件index.html将 Claude 返回的代码完整复制到文件中并保存双击index.html在浏览器中查看效果。如果你的代码返回的是纯代码块可以点代码块右上角的复制按钮避免手动选择遗漏。4.4 设计调整如果你觉得生成结果还有不满意的地方可以直接在对话里继续提修改。比如“首屏右侧的模拟图改成更抽象的山峦层叠效果用多层渐变来实现。”“导航栏在滚动页面时增加一个淡淡的白色半透明背景。”“作品卡片下方加一个‘查看大图’的链接文字颜色使用强调色。”每一轮调整后让 Claude 重新输出完整 HTML 文件再次覆盖index.html刷新浏览器查看效果。4.5 本案例小结通过这个案例你已经完成了第一次完整的 Claude Design 工作流。我们发现整个过程并不需要打开 Figma也不需要手写复杂 CSS核心就是“描述需求 — 生成代码 — 预览调整”。如果你对生成结果满意可以把这个 HTML 文件继续交给 Claude让它帮你拆分成独立的 CSS 文件或者进一步生成对应的移动端页面。5. 实战案例二用 Claude 生成 SVG 设计素材除了完整页面Claude 在生成 SVG 素材方面也很好用。SVG 是矢量图形格式适合做图标、插画、装饰图形。以下是几个常见的使用场景登录页 Logo 和占位插画网页背景的几何装饰博客文章封面的简笔插画数据可视化中的基础图形。5.1 什么是 SVG为什么适合 AI 生成SVG 的正式名称是 Scalable Vector Graphics也就是可缩放矢量图形。它使用 XML 文本描述图形所以本质上就是一串有结构的文字。而 Claude 这类大语言模型最擅长的就是生成符合语法结构的文本因此生成 SVG 是它的强项。SVG 的优点包括无限缩放不模糊体积小可以直接嵌入 HTML可以用 CSS 控制颜色和动画。5.2 案例生成一个简约的风景插画我们来生成一张适合放在个人主页 Hero 区域的风景插画。发送提示词请用 SVG 画一幅简洁的自然风景插画画面包含背景渐变天空、远处的层叠山丘、太阳、近处草地和一条小路。 要求 1. 使用 viewBox0 0 800 500 2. 天空使用从浅橙色到淡黄色的渐变 3. 山丘使用不同深浅的绿色圆润路径 4. 太阳是一个圆形位于右上角颜色为暖黄色 5. 近处草地用深绿色中央一条浅色弯曲小路 6. 图形简洁适合做网页首屏配图 7. 请输出完整可运行的 SVG 代码并适当添加注释。Claude 会返回一段 SVG 代码。你可以创建一个新的 HTML 文件把 SVG 直接贴进body中预览!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleSVG 预览/title /head body !-- 在这里粘贴 Claude 生成的 SVG 代码 -- /body /html保存后在浏览器打开你就能看到这副插画了。5.3 用 SVG 生成统一风格图标图标生成是另一个高频需求。给 Claude 提示词时最好把风格统一放在最前面请生成 3 个线性风格图标分别为相机、邮箱、地图定位。要求 1. 线条粗细为 1.5px 2. 颜色使用 #B08968 3. 每个图标尺寸为 24x24带 viewBox0 0 24 24 4. 使用标准 SVG 路径不需要额外依赖 5. 分别输出代码图标之间用注释分隔。这样生成的图标适合放在个人主页的“作品”或“联系”区域。如果你希望图标风格更加统一可以把第一个图标的生成结果作为示例告诉 Claude“请保持同样的线条风格”。5.4 用 Claude 解释 SVG 代码如果你对 SVVG 路径里的M、L、C、Q这些命令不熟悉可以让 Claude 逐行解释。比如请解释你生成的 SVG 中山丘部分的路径代码每个命令代表什么含义尽量用新手能理解的方式说明。这种“先生成再解释”的方式不仅让你拿到结果还能帮助你逐步理解 SVG 语法。6. 实战案例三从头搭一个简单的设计系统当你不只是需要一个页面而是想生成一套可以复用的设计规范时Claude 同样能帮上忙。很多项目页面数量多如果每个页面都在对话中重新描述颜色和字体效率会很低。更高效的做法是让 Claude 先帮你建立一份基础设计系统后续所有页面都引用这套系统。6.1 设计系统包含哪些核心内容一个最小可用的设计系统至少包含颜色变量主色、辅助色、成功色、警告色、文本色、背景色字体变量标题字体、正文字体、字号阶梯间距变量小间距、中间距、大间距圆角变量小圆角、中圆角、大圆角阴影变量轻阴影、普通阴影、重阴影。这些变量在 Web 端通常用 CSS 变量来实现也就是:root中定义的--color-primary这一类形式。6.2 用提示词生成设计系统发送提示词请帮我建立一个适用于“健康饮食 App”的设计系统输出为 CSS 变量。 要求 1. 主色为新鲜的绿色 #2F9E44辅助色为橙色 #F08C00背景色为 #F8F9FA文本主色 #212529文本辅助色 #6C757D 2. 字体使用系统字体栈 3. 提供字号阶梯从 12px 到 36px 4. 提供间距变量4、8、16、24、32、48 5. 提供圆角变量4px、8px、16px 6. 提供阴影变量轻、中、重三档 7. 输出 CSS 代码并添加中文注释。Claude 会返回类似这样的 CSS:root { /* 品牌色 */ --color-primary: #2F9E44; --color-primary-hover: #2B8A3E; --color-accent: #F08C00; /* 中性色 */ --color-bg: #F8F9FA; --color-text: #212529; --color-text-secondary: #6C757D; --color-border: #DEE2E6; }你可以把这段 CSS 保存为design-tokens.css在后续页面中引入。这样就能保证多个页面的视觉风格一致。6.3 让 Claude 基于设计系统生成组件有了设计系统之后你可以在提示词中引用它让 Claude 生成组件时保持风格一致。例如请基于我提供的设计系统生成一个按钮组件。 按钮分主要按钮、次要按钮、禁用状态三种。 要求使用 CSS 变量输出为可直接运行的 HTML/CSS 代码。这种工作方式的好处是视觉规范的变更只改一处变量全局页面都会同步更新。实际项目中设计系统是 AI 辅助设计中性价比最高的一部分非常建议从第一个页面开始就建立起来。7. 常见问题与排查思路在跟着文章操作的过程中你可能会遇到一些典型问题。下面按“现象—原因—方案”的方式整理成表。问题现象常见原因解决思路生成的布局混乱元素叠在一起提示词缺少对齐要求或 CSS 浮层边界条件没写清补充“整体居中/左对齐”“卡片间距”等描述要求重新输出图片显示为空白提示词里写的是img标签但没给图片地址改用渐变色占位、SVG 占位图或使用在线占位图服务中文乱码文件保存时编码不是 UTF-8统一使用 UTF-8 保存HTML 文件meta charset设置为 UTF-8Claude 输出的代码太长被截断单次生成内容过多拆分任务例如先让 Claude 输出头部导航再输出作品区最后整合生成结果风格不稳定多轮对话后上下文被冲淡或规格描述不一致新建会话或把设计系统固定写成一段提示词每次开头先贴出来SVG 在网页中显示不全未设置viewBox或容器宽度过小检查 SVG 根节点的viewBox属性设置容器width: 100%想让 Claude 改样式但回复不正确修改指令太抽象把修改点拆成具体数值例如“把主按钮背景色改为 #2F9E44”7.1 如何高质量迭代如果你对 Claude 的第一次输出不满意不用急着否定它可以先检查自己的描述是不是漏了关键信息。常见漏项包括没有说明页面给谁看没有限制颜色范围没有指定布局方向没有给出字体倾向没有明确输出格式。建议把每次调整的内容记录在本地形成一个“提示词修改记录”。下次遇到类似页面时直接复用修改后的完整提示词效率会高很多。8. 最佳实践与工程建议使用 Claude 做设计这件事前期的规范和后期的人工审查同样重要。下面分享一些个人总结的实践建议。8.1 建立自己的提示词模板库不要每次设计都从零开始写提示词。建议把自己写过的、效果好、风格稳定的提示词整理成模板文件按场景分类。比如落地页模板后台管理面板模板图标生成模板设计系统模板海报排版模板。这样下次需要类似设计时直接复制模板并替换关键描述可以节省大量时间。8.2 使用设计系统保持一致性无论项目大小都建议先让 Claude 梳理一份基础变量再基于变量生成页面组件。这样能避免出现“页面 A 的主色和页面 B 的主色看起来差不远但实际不一致”的问题。如果项目已经比较大可以在对话中要求 Claude 输出规范文档然后人工补充审核。设计系统文件建议单独管理不混入页面代码。8.3 对生成结果进行可访问性检查Claude 生成的结果在视觉上可能很好看但可访问性未必达标。建议至少检查文本与背景的对比度是否足够输入框是否有对应的label标签按钮是否可以用键盘操作图片是否提供了替代文字。可以让 Claude 帮你在输出时加上aria-label等属性也可以自己在提示词里写明“遵循基础可访问性规范”。8.4 结合真实内容不要让占位符骗了你很多 AI 生成的设计稿里文本是“Lorem ipsum”或示例文案。在评审设计前建议先把真实文案替换进去。因为在真实文案下字句长度、段落密度、标题层级可能完全不一样能更准确地评估布局是否合理。8.5 版权与使用边界AI 生成的设计资产尤其是 Logo、插画、字体使用前要确认版权要求。不同平台对 AI 生成内容的使用授权可能有差异商用前务必核对条款。如果项目是公司内部项目建议与法务或负责人确认后再投入生产。8.6 人工设计与 AI 辅助的分工比较推荐的使用方式是创意方向、信息架构、视觉判断由人负责重复性排版、图标绘制、样式变量生成由 Claude 负责最终成品由人审查和打磨。不要期待 Claude 直接产出可直接上线的量产级设计但它能帮你把“想法的雏形”快速变成“可讨论的稿子”这个过程本身就是效率提升。9. 常见工具链搭配建议除了 Claude 本身你还可以搭配一些免费或常见的工具来完善工作流。9.1 本地预览工具如果你希望边改边看可以在 VS Code 中安装 Live Server 插件这样每次保存 HTML 文件后浏览器会自动刷新不需要手动刷新页面。9.2 截图回填如果你有参考设计图可以把图片上传给 Claude取决于你使用的版本是否支持图片输入请它参考图片的风格生成代码。如果你当前使用的版本不支持图片输入也可以先用文字详细描述图片内容再让 Claude 输出。9.3 代码托管与部署生成好的 HTML 页面如果想分享给朋友或者上线可以推到代码托管平台比如 GitHub再用静态页面托管服务部署。这类服务通常可以绑定个人域名适合个人作品集和项目展示。9.4 导出为图片如果我们需要把 AI 生成的设计稿作为海报或分享图可以在浏览器中打开 HTML 页面利用截图工具截取全页也可以交给 Claude 生成适合导出为 PNG 的 SVG 文件。SVG 文件可以通过浏览器或代码工具转成 PNG方便在社交媒体使用。10. 下一步学习路线与资源建议到这里你已经掌握了 Claude Design 的基础工作流。如果还想继续深入可以参考下面这条学习顺序。10.1 第一步加强提示词能力提示词是使用 Claude 的核心建议刻意练习。可以先从重写本文的三个案例开始尝试用不同的设计风格描述生成同一个页面然后对比输出差异找出有效描述和模糊描述的规律。10.2 第二步学习 HTML/CSS 基础虽然 Claude 能帮我们写前端代码但如果你能读懂 CSS 变量、Flex、Grid 布局就能更好地控制和调整生成结果。不需要成为专家能读懂改得动即可。10.3 第三步学习 SVG 语法基础SVG 是一个值得投入的方向。因为它覆盖了图标、插画、数据可视化等多个设计场景和 AI 生成非常契合。你可以让 Claude 当老师一步一步解释每个路径命令。10.4 第四步理解设计基础原理AI 能给你结果但判断结果是否“好”需要人的审美积累。建议补充学习色彩搭配、排版、留白、对比度、层次感这些基础设计原理。这里推荐一条简单路径观察优秀的网站和品牌设计把感受记录成文字再反过来让 Claude 验证这些文字能否生成类似效果。10.5 第五步应用到真实项目做设计这件事只学不练很难有提升。建议拿一个真实需求来练手比如给自己的博客做一套新的落地页给朋友的宠物店做一个信息展示页给团队内部工具做一个登录页和仪表盘为你的摄影作品集生成一版在线展示页。真实项目的约束会逼你考虑内容真实完整、设备适配、可访问性等问题这些正是 AI 辅助设计进阶的关键。11. 写在最后Claude Design 最大的价值不是让每个人都成为专业设计师而是让“设计表达”这件事的门槛变得更低。你可以不具备手绘能力不需要记忆大量设计规范但只要你脑子里有想法、文字能描述清楚Claude 就能帮你把想法变成可以预览的页面、可以嵌入的图标、可以复用的样式系统。在你开始动手的时候记住三条建议一是先搭一套设计系统再生成页面风格稳定比单个页面好看更重要二是调整时给出具体可执行的修改点别用“好看一点”这种模糊反馈三是人工审查不可替代AI 生成的结果始终要经过你的审美判断和可访问性检查。这篇文章的内容到这里就结束了。如果你按照文章里的三个案例完整操作过一遍相信你已经能独立做出一份像样的设计稿。如果你在操作中有什么新的发现或者有更好的提示词思路欢迎自己动手实践后继续验证。把 Claude 当成项目里的一名设计同事它就能发挥出最大的作用。