借助 Skills 提升前端设计 | Claude

你可能注意到了，如果你让一个大语言模型 (LLM) 随便搭个网页（行话叫“落地页”），它十有八九会给你一套“标配”：Inter 字体、白底配紫色渐变，外加一点点可有可无的动画。

这问题出在哪？分布收敛 (Distributional convergence)。（别被这个术语吓到，它的大白话就是“随大流”）。模型在生成内容时，是靠“猜”的，它会猜哪个词（在AI里叫“词元”或 token）出现的概率最高。在它“上学”时（也就是训练）看过的海量网页数据里，那些最“安全”、最“通用”、谁看了都不讨厌的设计（比如 Inter 字体）出现得最多。所以，你一不“管”它，Claude 就会本能地从这个“最大概率”的选项里挑，结果就跟别人“撞脸”了。

这对开发者来说可不妙。如果你在做面向客户的产品，这种千篇一律的“AI 审美”会稀释掉你的品牌个性，让用户一眼就看出来“哦，这是 AI 搞的”，然后... 随手就关掉了。

“可控性”带来的新挑战

好消息是，Claude 其实“很听劝”，（术语叫“可控性强”，steerable）。只要你给的提示词 (prompting) 够精准，它就能办到。你跟它说“别用 Inter 和 Roboto 字体”，或者“背景用点有氛围的图，别用大色块”，它马上就能给你个不一样的版本。这种“听指挥”的敏感度是 Claude 的一大特色，说明它能灵活适应各种设计风格、限制和审美要求。

但问题又来了：任务越专业，你塞给它的“上下文”就得越多。就拿前端设计来说，你得告诉它排版原则、色彩理论、动画模式、背景处理…… 你得详细列出哪些“默认选项”不能用，以及在N个维度上你更喜欢哪些“替代方案”。

你当然可以把这些“设计规范”一股脑全塞进系统提示词 (system prompt) 里。但后果是，你每次使唤 Claude——哪怕是让它调试 Python 代码、分析数据或写封邮件——它都得背着这坨沉重的前端设计知识。这太浪费了！（这就像你请个水管工，非逼他背着全套电工工具）。所以，问题变成了：我们怎样才能“按需”给 Claude 投喂这些专业知识，同时又不在干别的事时造成“上下文开销” (context overhead) 呢？

Skills：动态加载上下文的“技能包”

这，就是 Skills 登场的时候了！它就是为了解决这个“按需投喂，用完即走”的问题而设计的。一个 Skill 其实就是一个文件（通常是 Markdown 格式），里面写满了特定任务的说明、限制和专业知识。它被存在一个专门的文件夹里，Claude 认识路，能用简单的“文件读取”工具自己去拿。在运行时，Claude 可以动态地加载它需要的“技能包”，一点点地“武装”自己，而不是在开局时就把所有家当都背上。

一旦 Claude 装备了这些“技能包”和配套的读取工具，它就能“智能化”地根据你派的活儿，自己去“技能库”里翻找并加载合适的“技能包”。举个例子，当你让它搭个网页或写个 React 组件时，它会敏锐地意识到：“哦，这是前端的活儿！” 然后它就会自己去把“前端设计 Skill”这个文件找出来，并“即时” (just-in-time) 运用里面的设计规范。请记住这个核心概念：Skills 就是可以按需激活的“提示词”和“知识库”，它们在特定任务上提供专业指导，而且“随叫随到，挥之即去”，完全不会造成上面说的“上下文开销”。

这样一来，开发者既能享受到 Claude “听指挥”的好处，又不必把五花八门的指令全塞进系统提示词里，搞得“上下文窗口”不堪重负。我们之前就聊过，“上下文窗口”里的词元 (tokens) 塞得太满，AI 的“智商”是会下降的。因此，让上下文保持“精简”和“专注”是榨干模型最佳性能的关键。Skills 完美解决了这个问题：它让那些超有用的提示词可以被“复用”，而且只在“特定情景”下才出现。

编写提示词，让前端出品更上一层楼

只要我们创建一个“前端设计 Skill”，就能在不增加“上下文开销”的前提下，让 Claude 生成的 UI 质量飙升。这里的“武功秘籍”是：你要像一个真正的前端工程师那样去思考设计。你越是能把“审美上的改进”翻译成“可实现的前端代码”，Claude 就越能完美执行你的意图。

抓住了这个诀窍，我们锁定了几个“重点攻坚”领域：字体排版、动画、背景效果和主题。这些都是能清清楚楚地“翻译”成代码的。好消息是，你不需要在提示词里写特别详细的技术指令，你只需要用“有导向性”的语言，激发模型在这些“设计轴”上多动动脑子，它就能给你更好的输出。这与我们之前在上下文工程 (Context Engineering)博客中分享的理念不谋而合：你给的指令“高度”要刚刚好。既要避免“低空飞行”（比如写死某个颜色的十六进制色号），也要避免“高空巡航”（比如只给个“你懂的”模糊指令，期待模型心领神会）。

字体排版

咱们来实际瞧瞧。我们先从“字体排版”这个维度下手。下面这段提示词，就是专门用来引导 Claude 选用更“有品”的字体：

<use_interesting_fonts>
字体排版是品质的瞬时信号。避免使用无聊、通用的字体。

绝不使用：Inter, Roboto, Open Sans, Lato, 默认系统字体

以下是一些优秀、有冲击力的选择示例：
- 编码美学：JetBrains Mono, Fira Code, Space Grotesk
- 报刊编辑风：Playfair Display, Crimson Pro
- 科技感：IBM Plex 系列, Source Sans 3
- 独特风：Bricolage Grotesque, Newsreader

搭配原则：高对比度 = 有趣。比如展示体 + 等宽字体，衬线体 + 几何无衬线体，可变字体的不同字重搭配。

使用极端对比：用 100/200 的字重去对比 800/900，而不是 400 对 600。字号跳跃 3 倍以上，而不是 1.5 倍。

选一款独特的字体，然后“下狠手”用它。从 Google Fonts 加载字体。
</use_interesting_fonts>

使用基础提示词生成的输出：

图注：AI 生成的 SaaS 落地页，用了千篇一律的 Inter 字体、紫色渐变和标准布局。未使用 Skills。

使用基础提示词和“字体排版”部分生成的输出

图注：AI 生成的 SaaS 落地页，用了千篇一律的 Inter 字体、紫色渐变和标准布局。未使用 Skills。 （译者注：原文此处及后续多张图片的图注似乎均有错误，与第一张图的图注完全相同。我们按原文翻译，但请读者根据上下文和图片内容自行判断，这张图展示的应是应用了“字体排版”指导后的效果。）

有意思的是，当我们“逼”它用更有趣的字体时，模型似乎“开窍了”，顺带着把设计的其他方面也一起优化了。

光是改字体就有这么大进步，但设计可不止字体一个维度。我们能不能让整个界面的美学风格都“浑然一体”呢？

主题风格

我们可以“攻坚”的另一个维度是：从知名的主题和美学中汲取灵感。Claude 对各种流行主题（比如赛博朋克、复古、极简等）都有很深的理解；我们可以利用这一点，告诉它我们想要什么样的前端风格。看个例子：

<always_use_rpg_theme>
始终使用 RPG (角色扮演游戏) 风格进行设计：
- 灵感来自奇幻的色板，色彩丰富且富有戏剧性
- 华丽的边框和装饰性的框架元素
- 羊皮纸纹理、皮革装订风格和风化材质
- 史诗般的、冒险的氛围，带有戏剧性的光影
- 带有装饰性标题的中世纪风格衬线字体
</always_use_rpg_theme>

于是，它就生成了下面这个 RPG 主题的界面：

图注：AI 生成的 SaaS 落地页，用了千篇一律的 Inter 字体、紫色渐变和标准布局。未使用 Skills。 （译者注：原文图注再次出错。此图展示的应是应用了“RPG 主题”指导后的效果。）

无论是调字体还是定主题，都证明了“定向指导”是管用的。但问题是，每次都手动去指定这么多维度也太烦了。有没有办法把所有这些改进“打包”成一个可复用的“资产”呢？

一个通用的“设计规范”提示词

同样的道理也适用于其他设计维度：提示它加入“动效”能增加静态设计所缺乏的“精致感”；引导它选择更有趣的“背景”能创造出“深度”和“视觉趣味”。这时候，一个“集大成”的综合 Skill 就该闪亮登场了。

我们把所有这些经验“打包”到一起，写了一个大约 400 词元 (token) 的提示词——它足够精简，就算作为 Skill 加载也不会撑爆“上下文”——它能从字体、色彩、动效和背景等全方位地提升前端的“颜值”：

<frontend_aesthetics>
你（指 Claude）总是不自觉地“随大流”，搞出那些千篇一律的、“符合数据分布”的输出。在前端设计上，这就搞出了用户所说的“AI 垃圾审美”(AI slop)。必须避免这个：请做出有创意的、独特的、能给人惊喜的前端设计。

重点关注：
- 字体排版：选择漂亮、独特、有趣的字体。避免使用 Arial 和 Inter 这种通用字体；选择能提升前端美感的独特字体。
- 色彩 & 主题：坚持一个统一连贯的美学风格。使用 CSS 变量（**CSS 里的“变量”功能**）来保持一致性。大胆使用主色调配上鲜明的强调色，这比那些小心翼翼、分布均匀的调色板要好得多。从 IDE 主题和各种文化美学中汲取灵感。
- 动效：使用动画来制造效果和微交互。如果是 HTML，优先使用纯 CSS 方案。如果用 React，就用 Motion 库。聚焦在高冲击力的时刻：一个精心编排的、带有交错显示（animation-delay）的页面加载动画，比零零散散的微交互更能带来愉悦感。
- 背景：要创造氛围和深度，而不是默认用纯色。使用层叠的 CSS 渐变、几何图案，或添加符合整体美学的上下文效果。

避免那些通用的“AI 生成审美”：
- 被用烂了的字体 (Inter, Roboto, Arial, 系统字体)
- 陈词滥调的配色方案 (尤其是白底配紫色渐变)
- 可预测的布局和组件模式
- 缺乏场景特色的“千人一面”设计

请创造性地解读任务，做出“意料之外、情理之中”的选择，让人感觉这真是为这个场景量身定做的。在亮色和暗色主题、不同字体、不同美学之间切换。你（指 Claude）在不同代次中还是容易“收敛”到某些常见选项（比如 Space Grotesk 字体）。避免这种情况：跳出思维定式，这至关重要！
</frontend_aesthetics>

在上面的例子里，我们先是给 Claude 讲清楚了“问题是什么”以及“我们要解决什么”。我们发现，给模型这种“高层次的背景”是一种很有用的提示词技巧，能“校准”它的输出。然后，我们指出了之前讨论过的几个“设计改进”的维度，并给出针对性建议，鼓励它在所有这些维度上都“打开思路”。

我们还在最后加了点“补充指导”，防止 Claude 从一个“坑”跳到“另一个坑”（术语叫“收敛到另一个局部最优解”，local maximum）。因为就算你明确告诉它“不许用 A”，它也可能只是默认跑去用另一个很常见的 B（比如在字体上老是用 Space Grotesk）。所以，最后那句“跳出思维定式”的提醒，是在反复强化“要创新、要多变”的指令。

对前端设计的实际效果

激活了这个 Skill 后，Claude 在好几种前端设计上的出品质量都“肉眼可见”地变好了，包括：

示例 1: SaaS 落地页

图注：AI 生成的 SaaS 落地页，用了千篇一律的 Inter 字体、紫色渐变和标准布局。未使用 Skills。（译者注：原文图注又错了。这应是“使用前”的对比图。）

图注：AI 生成的前端，使用了与上图相同的提示词，并额外激活了“前端 Skill”。现在它有了独特的字体、统一的配色方案和有层次的背景。

示例 2: 博客布局

AI 生成的博客布局，用了默认系统字体和纯白背景。未使用 Skills。

AI 生成的博客布局，使用了相同的提示词并激活了“前端 Skill”，现在它有了“报刊编辑风”的字体、有氛围感的深度和更精致的间距。

示例 3: 后台管理面板

AI 生成的后台管理面板，用了标准的 UI 组件，视觉层级感很弱。未使用 Skills。

AI 生成的后台管理面板，使用了相同的提示词并激活了“前端 Skill”，现在它有了醒目的字体、统一的暗色主题和有目的性的动效。

用 Skills 提升在 claude.ai 上的“作品”质量

“设计品味”不是唯一的限制。Claude 在构建“作品” (Artifacts) 时还面临着“架构”上的束缚。“作品”指的是 Claude 在聊天框旁边创建和展示的、可交互、可编辑的内容（比如代码或文档）。

除了上面探讨的“设计品味”问题，Claude 还有一个“默认行为”，限制了它在 claude.ai 上生成牛X前端“作品”的能力。目前，你让它做一个前端，它只会给你一个包含 CSS 和 JS 的“单 HTML 文件”。这是因为它“知道”——在 claude.ai 里，前端“作品”必须是“单 HTML 文件”才能被正确渲染。

你可以想象一下，如果一个真人开发者被限制“只能在一个 HTML 文件里写所有的 HTML/CSS/JS”，那他顶多也就能做出个最基础的网页。我们猜，如果给 Claude 一套更丰富的“工具”，它应该也能生成更惊艳的前端“作品”。

这促使我们创建了一个叫 web-artifacts-builder 的 Skill。它利用了 Claude 使用电脑的能力，引导 Claude 使用“多文件”和现代网页技术（如 React、Tailwind CSS 和 shadcn/ui）来构建“作品”。这个 Skill 的“黑科技”在于，它提供了一些脚本：(1) 帮 Claude 高效地搭好一个 React 项目的“脚手架”；(2) 在 Claude “写完代码”后，用 Parcel 这个工具把所有东西“打包”成一个“单 HTML 文件”，以满足“作品”的渲染要求。这就是 Skills 的一个核心优势：通过给 Claude 一些“脚本”去执行那些“重复劳动”（行话叫“样板代码”，boilerplate），Claude 就能在“节省词元 (token)”的同时，提高“可靠性”和“性能”。

有了 web-artifacts-builder 这个 Skill，Claude 就可以利用 shadcn/ui 的表单组件和 Tailwind 的响应式网格系统，来创建一个功能更完整的“作品”。

示例 1: 白板应用

比如，在没有 web-artifacts-builder Skill 的情况下，让 Claude 做个“白板应用”，它只能给出一个非常基础的界面：

另一方面，当使用了这个新的 web-artifacts-builder Skill 后，Claude “开箱即用”地就生成了一个更简洁、功能更丰富的应用，包括绘制不同形状和输入文字：

示例 2: 任务管理应用

同样，当让它做一个“任务管理应用”时，没有这个 Skill，Claude 生成了一个“能用，但极其简约”的应用：

而有了这个 Skill，Claude 生成的应用“开箱即用”的功能就丰富多了。比如，它直接包含了一个“创建新任务”的表单组件，允许用户给任务设置“分类”和“截止日期”：

想在 Claude.ai 上试试这个新 Skill 吗？很简单，先启用它，然后在让 Claude 构建“作品”时，对它说一句“请使用 web-artifacts-builder skill”就行了。

用 Skills “解锁” Claude 的前端设计潜力

这个“前端设计 Skill”揭示了一个关于大语言模型能力的更广泛的原则：模型“会的”往往比它们“默认展示”的要多得多。Claude 其实有很强的设计理解力，但“随大流”（即“分布收敛”）的天性把它这个能力给掩盖了，需要你“点拨”一下。虽然你可以把这些“点拨”的指令加到系统提示词里，但这会让“每次”请求都背上沉重的“前端设计包袱”，哪怕这个任务八竿子打不着。而使用 Skills，就把 Claude 从一个“需要你手把手教”的工具，变成了一个“自带专业技能”的得力助手。

Skills 还是“高度可定制”的——你可以创建“量身定做”的 Skill 来满足你的特定需求。你可以把你想要的“独门绝技”（术语叫“原语”，primitives）“烘焙”到 Skill 里，无论是你公司的“设计规范”、特定的“组件模式”，还是某个“行业特有”的 UI 惯例。通过把这些“决策”固化成一个 Skill，你其实是把 AI 智能体 (AI Agent) 的“思考过程”变成了你整个团队都可以利用的“可复用资产”。这个 Skill 沉淀下来，就成了你团队的“组织知识”，可以不断传承和扩展，确保所有项目的质量都能“整齐划一”。

这个模式也不仅仅限于前端工作。在任何一个 Claude 默认“随大流”，但其实“潜力无限”的领域，都是开发 Skill 的好地方。方法论是通用的：找出它“随大流”的默认选项 -> 给出具体的“替代方案” -> 在“不高不低”的合适高度上构建指导 -> 通过 Skills 让它变得“可复用”。

对前端开发来说，这意味着 Claude 可以在不需要“每次都写一长串提示词”的情况下，生成与众不同的界面。想上手试试吗？可以去看看我们的 “前端设计秘笈” (cookbook)，或者在 Claude Code 里试试我们新的“前端设计插件”。

心动了吗？想创建你自己的前端 Skills，就来看看我们的 Skill 创建器。

电子书

智能体技能 (Agent Skills)

立即开始将 Skills 与 Claude 结合使用，构建更强大的应用程序。

产品更新、操作指南、社区聚焦等等。每月发送至您的收件箱。

源文链接: https://www.claude.com/blog/improving-frontend-design-through-skills