内容
你可能会注意到，当你要求一个大型语言模型（LLM）在没有指导的情况下构建一个登陆页面时，它几乎总是会遵循 Inter 字体、白色背景上的紫色渐变和最小的动画。
问题是什么？分布收敛。 在采样过程中，模型根据训练数据中的统计模式预测标记。安全的设计选择——那些在任何情况下都有效且不会冒犯任何人的选择——主导了网络训练数据。在没有方向的情况下，Claude 从这个高概率中心采样。
对于构建面向客户的产品的开发人员来说，这种通用美学会破坏品牌身份，并使 AI 生成的界面立即可识别——并且可以被忽略。
可导向性挑战
好消息是 Claude 在得到正确的提示后具有高度的可导向性。告诉 Claude“避免使用 Inter 和 Roboto”或“使用大气背景而不是纯色”，结果会立即改善。这种对指导的敏感性是一个特性；它意味着 Claude 可以适应不同的设计背景、约束和美学偏好。
但是，这就产生了一个实际挑战：任务越专业，需要提供的上下文就越多。对于前端设计，有效的指导需要涵盖排版原则、色彩理论、动画模式和背景处理。你需要指定要避免的默认值和要偏爱的替代方案，跨多个维度。
你可以将所有这些打包到一个系统提示中，但这样每个请求——调试 Python、分析数据、编写电子邮件——都会带有前端设计的上下文。问题变成了：如何在需要时提供 Claude 域特定指导，而不为无关任务带来永久的上下文开销？
技能：动态上下文加载
这正是 技能 的设计初衷：在需要时提供专业的上下文，而不带来永久的开销。技能是一份文档（通常是 Markdown 格式），包含指令、约束和领域知识，存储在一个指定的目录中，Claude 可以通过简单的文件读取工具访问。Claude 可以利用这些技能来动态加载它需要的信息，从而在运行时增强其上下文，而不是一次性加载所有内容。
当 Claude 配备了这些技能和必要的工具来读取它们时，它可以自主识别和加载相关技能，根据任务的需要。例如，当要求构建一个登陆页面或创建一个 React 组件时，Claude 可以加载前端设计技能，并应用其指令。这种思维模型是必不可少的：技能是提示和上下文资源，它们在需要时激活，提供特定任务类型的专业指导，而不带来永久的上下文开销。
这使得开发人员可以在不用将各种指令塞入系统提示中，从而避免上下文窗口过载的情况下，享受 Claude 的可导向性的好处。正如我们之前解释的，上下文工程 中的过多令牌会导致性能下降，因此保持上下文窗口的内容精简和专注对于从模型中获取最佳性能至关重要。技能通过使有效的提示可重用和上下文化来解决这个问题。
提示更好的前端输出
我们可以通过创建一个前端设计技能来解锁 Claude 更好的 UI 生成，而不带来永久的上下文开销。核心的洞察是以前端工程师的方式思考前端设计。将美学改进映射到可执行的前端代码上，Claude 就可以更好地执行。
利用这一洞察，我们确定了几个可以有效提示的领域：排版、动画、背景效果和主题。这些都可以清晰地转换为 Claude 可以编写的代码。实现这些提示不需要详细的技术指令，只需使用有针对性的语言来吸引模型更批判性地思考这些设计轴即可。
排版
让我们从排版开始，看看如何通过提示来影响它。以下提示专门引导 Claude 使用更有趣的字体：
<使用有趣的字体>排版瞬间传递质量。避免使用枯燥、通用的字体。 永远不要使用：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 字体加载。 </使用有趣的字体>
使用基本提示生成的输出：
使用基本提示和排版部分生成的输出
有趣的是，使用更有趣的字体的要求似乎鼓励模型改进设计的其他方面。
排版单独就能带来显著的改进，但字体只是一个维度。那么整个界面的协调美学呢？
主题
我们可以提示的另一个维度是受知名主题和美学启发的设计。Claude 对流行主题有着丰富的理解；我们可以利用这一点来传达我们希望前端具备的具体美学。以下是一个例子：
<始终使用RPG主题>
始终使用RPG美学设计：
- 奇幻启发的色彩调色板，具有丰富、戏剧性的色调
- 华丽的边框和装饰框元素
- 羊皮纸质感、皮革装订风格和风化材料
- 史诗般、冒险的氛围，具有戏剧性的照明
- 中世纪启发的衬线字体，具有装饰性的标题
</始终使用RPG主题>
这会产生以下 RPG 主题的 UI：
排版和主题展示了有针对性的提示的效果。但是，手动指定每个维度是很繁琐的。那么，如果我们可以将所有这些改进结合成一个可重用的资产呢？
通用提示
同样的原理也适用于其他设计维度：提示运动（动画和微交互）增加了静态设计所缺乏的光泽，而引导模型朝着更有趣的背景选择会产生深度和视觉趣味。这就是一个全面的技能的作用。
将所有这些结合起来，我们开发了一个约 400 个令牌的提示——紧凑到足以在不膨胀上下文的情况下加载（即使作为一个技能加载）——它在排版、颜色、运动和背景方面显著改善了前端输出：
< 前端美学 >
你倾向于收敛到通用、 "在分布"
的输出。 在前端设计中， 这会产生用户所说的 "AI 糟糕"
美学。 避免这种情况： 创建创造性、 独特的前端， 令用户惊讶和愉悦。
关注：
-
排版： 选择美丽、 独特、 有趣的字体。 避免通用的字体， 如 Arial 和 Inter； 相反， 选择能提升前端美学的独特选择。 -
颜色和主题： 致力于一个连贯的美学。 使用 CSS 变量来保持一致性。 主导颜色与锐利的强调色比胆怯、 均匀分布的调色板更出色。 从 IDE 主题和文化美学中汲取灵感。 -
运动： 使用动画来实现效果和微交互。 优先使用 CSS 解决方案来实现 HTML。 使用 Motion 库来实现 React。 当可用时， 使用 Motion 库。 关注高影响力时刻： 一个精心编排的页面加载， 带有延迟的显示（ animation - delay）， 比分散的微交互更能带来愉悦。 -
背景： 创建氛围和深度， 而不是默认使用纯色。 分层 CSS 渐变， 使用几何图案， 或添加与整体美学相匹配的上下文效果。
避免通用的 AI 生成美学：
-
过度使用的字体家族（ Inter、 Roboto、 Arial、 系统字体） -
陈词滥调的色彩方案（ 特别是白色背景上的紫色渐变） -
可预测的布局和组件模式 -
缺乏上下文特征的通用设计
创造性地解释并做出意外的选择， 感觉真正为上下文而设计。 变化于浅色和深色主题、 不同的字体、 不同的美学。 您仍然倾向于在生成中收敛到共同的选择（ 例如 Space Grotesk 用于排版）。 避免这种情况： 它至关重要的是您要跳出思维定式！
<
/前端美学>
在上面的示例中，我们首先为 Claude 提供有关问题和我们试图解决的问题的总体上下文。我们发现为模型提供这种高层次的上下文是一个有用的提示策略，可以校准输出。然后，我们确定了我们之前讨论的改进设计的向量，并提供了有针对性的建议来鼓励模型在所有这些维度上更具创造性地思考。
我们还在末尾添加了额外的指导，以防止 Claude 收敛到不同的局部最大值。即使有明确的指示来避免某些模式，模型也可能默认为其他常见的选择（例如，用于排版的 Space Grotesk）。最后的提醒“跳出思维定式”强调了创造性的变化。
对前端设计的影响
在激活此技能的情况下，Claude 的输出在多种前端设计类型中都有所改善，包括：
示例 1：SaaS 登陆页面
我们还在末尾提供了额外的指导，以防止 Claude 收敛到不同的局部最大值。即使有明确的指示来避免某些模式，模型也可能默认为其他常见的选择（如用于排版的 Space Grotesk）。最后的提醒“跳出思维定式”强化了创造性的变化。
对前端设计的影响
启用此技能后，Claude 的输出在多种类型的前端设计中都有所改进，包括：
示例 1：SaaS 登录页面
标题： 使用通用 Inter 字体、紫色渐变和标准布局生成的 AI 登录页面。未使用任何技能。
标题： 使用相同的提示以及前端技能生成的前端，具有独特的排版、统一的色彩方案和分层背景。
示例 2：博客布局
使用默认系统字体和平白背景生成的 AI 博客布局。未使用任何技能。
使用相同的提示以及前端技能生成的博客布局，具有编辑型字体、气氛深度和精致的间距。
示例 3：管理员仪表盘
使用标准 UI 组件和最小的视觉层次结构生成的 AI 管理员仪表盘。未使用任何技能。
使用相同的提示以及前端技能生成的管理员仪表盘，具有大胆的排版、统一的暗色主题和有目的的动画。
使用技能改进 claude.ai 中的工件质量
设计品位并不是唯一的限制。Claude 在构建工件时也面临着架构约束。****工件 是交互式、可编辑的内容（如代码或文档），Claude 创建并显示在聊天旁边。
除了上述设计品位问题外，Claude 还有另一个默认行为，限制了其生成精彩的前端工件的能力。在 claude.ai 中，当前，当要求创建前端时，Claude 只会构建一个包含 CSS 和 JS 的单个 HTML 文件。这是因为 Claude 理解前端必须是单个 HTML 文件才能被正确渲染为工件。
与人类开发人员只能在单个文件中编写 HTML/CSS/JS 代码来创建非常基本的前端类似，我们假设如果我们给 Claude 指示使用更丰富的工具，它将能够生成更令人印象深刻的前端工件。
这导致我们创建了一个 web-artifacts-builder 技能，该技能利用 Claude 的能力 使用计算机 并指导 Claude 使用多个文件和现代 Web 技术（如 React、Tailwind CSS 和 shadcn/ui）来构建工件。在底层，技能暴露了脚本，帮助 Claude 高效地设置基本的 React 仓库，并使用 Parcel 将所有内容打包到单个文件中，以满足单个 HTML 文件的要求。这是技能的核心益处之一——通过给 Claude 提供执行样板操作的脚本，Claude 能够最小化令牌使用，同时提高可靠性和性能。
使用 web-artifacts-builder 技能，Claude 可以利用 shadcn/ui 的表单组件和 Tailwind 的响应式网格系统来创建更全面的工件。
示例 1：白板应用
例如，当要求创建白板应用而不使用 web-artifacts-builder 技能时，Claude 输出了一个非常基本的界面：
另一方面，当使用新的 web-artifacts-builder 技能时，Claude 生成了一个更干净、更具功能的应用程序，包括绘制不同形状和文本：
示例 2：任务管理应用
类似地，当要求创建任务管理应用时，没有技能，Claude 生成了一个功能性但非常最小的应用程序：
使用技能，Claude 生成了一个功能更丰富的应用程序。例如，Claude 包括一个“创建新任务”表单组件，允许用户为任务设置关联的类别和截止日期：
要在 Claude.ai 中尝试此新技能，只需启用技能，然后要求 Claude “使用 web-artifacts-builder 技能”来构建工件。
使用技能优化 Claude 的前端设计能力
此前端设计技能演示了一个更广泛的原则，即语言模型的能力：模型通常具有比默认表达更强的能力。Claude 具有强大的设计理解，但分布式收敛使其在没有指导的情况下变得模糊。虽然您可以将这些指示添加到系统提示中，但这意味着每个请求都需要携带前端设计上下文，即使这种知识与任务无关。相反，使用技能将 Claude 从需要不断指导的工具转变为带有领域专业知识的工具。
技能也高度可定制——您可以创建自己的技能，根据您的特定需求量身定制。这允许您定义要在技能中包含的确切原语，无论是您的公司的设计系统、特定的组件模式还是行业特定的 UI 约定。通过将这些决策编码到技能中，您将代理的思考部分转变为可重用的资产，您的整个开发团队都可以利用它。技能成为组织知识，持续存在并扩展，确保项目之间的一致质量。
这种模式超出了前端工作。任何 Claude 产生通用输出的领域，尽管它具有更广泛的理解，都是技能开发的候选者。方法是一致的：识别收敛的默认值，提供具体的替代方案，在正确的高度结构化指导，并通过技能使其可重用。
对于前端开发，这意味着 Claude 可以在不需要每个请求提示工程的情况下生成独特的界面。要开始，请探索我们的 前端设计食谱 或尝试我们的 新前端设计插件在 Claude Code 中。
感觉受到启发？要创建自己的前端技能，请查看我们的skill-creator。
致谢 由 Anthropic 的应用 AI 团队撰写：Prithvi Rajasekaran、Justin Wei 和 Alexander Bricken，以及我们的营销合作伙伴 Molly Vorwerck 和 Ryan Whitehead。