说实话这个话题社区里的实践和观点可太多了。openai和anthropic真的从社区里拿到了太多真金白银的反馈。
什么时候国产模型不是"登顶""超越"的宣传稿满天飞，而且社区里有很多踏踏实实讨论最佳实践、反馈问题的帖子，热度能和这几个海外顶流一样高，那才是真的超越海外大模型的时刻。
国产加油！
日期: 2025年11月12日
阅读时间: 5 分钟
你可能会注意到，当你在没有指导的情况下要求 LLM 构建一个 landing page 时，它几乎总是采用 Inter 字体、白色背景上的紫色渐变，以及最少的动画。
问题是什么？分布收敛（distributional convergence）。在采样过程中，模型基于训练数据中的统计模式来预测 token。安全的设计选择------那些普遍适用且不会冒犯任何人的选择------在网页训练数据中占主导地位。在没有方向指导的情况下，Claude 从这个高概率中心进行采样。
对于构建面向客户产品的开发者来说，这种通用美学会削弱品牌身份，并使 AI 生成的界面立即变得可识别------并且容易被忽视。
可引导性挑战
好消息是，Claude 在正确的提示下具有高度的可引导性。告诉 Claude "避免使用 Inter 和 Roboto" 或 "使用有氛围的背景而不是纯色"，结果会立即改善。对指导的敏感性是一个特性；这意味着 Claude 可以适应不同的设计上下文、约束和美学偏好。
但这产生了一个实际的挑战：任务越是专门化，你需要提供的上下文就越多。对于前端设计，有效的指导涵盖字体设计原则、色彩理论、动画模式和背景处理。你需要在多个维度上指定要避免哪些默认值以及首选哪些替代方案。
你可以把所有这些都打包到系统提示中，但这样每个请求------调试 Python、分析数据、写邮件------都会携带前端设计上下文。问题变成了：你如何在需要时为 Claude 提供特定领域的指导，而不会为不相关的任务带来永久的上下文开销？
Skills：动态上下文加载
这正是 Skills 的设计目的：按需提供专门的上下文，而没有永久的开销。Skill 是一个包含指令、约束和领域知识的文档（通常是 markdown），存储在指定目录中，Claude 可以通过简单的文件读取工具访问。
Claude 可以利用这些技能在运行时动态加载所需的信息，逐步增强其上下文，而不是预先加载所有内容。当配备这些技能以及读取它们所需的必要工具时，Claude 可以根据手头的任务自主识别和加载相关技能。例如，当被要求构建 landing page 或创建 React 组件时，Claude 可以加载前端设计技能并及时应用其指令。
这是核心的思维模型：技能是按需激活的提示和上下文资源，为特定任务类型提供专门指导，而不会产生永久的上下文开销。
这使得开发者能够获得 Claude 可引导性的好处，而不会通过将许多不同任务的指令塞入系统提示来过载上下文窗口。正如我们之前解释的，上下文窗口中过多的 token 会导致性能下降，因此保持上下文窗口内容的精简和集中对于从模型中引出最佳性能极其重要。Skills 通过使有效的提示可重用和上下文化来解决这个问题。
为更好的前端输出进行提示
我们可以通过创建前端设计技能来从 Claude 解锁显著更好的 UI 生成，而无需永久的上下文开销。核心洞察是以前端工程师的思维方式思考前端设计。你越是能将美学改进映射到可实现的前端代码，Claude 就能越好地执行。
利用这一洞察，我们确定了几个有针对性的提示效果很好的领域：字体设计、动画、背景效果和主题。这些都清晰地转换为 Claude 可以编写的代码。在你的提示中实现这一点并不需要详细的技术指令，只是使用有针对性的语言来促使模型更批判性地思考这些设计轴就足以引出更强的输出。这与我们在上下文工程博客文章中提供的指导密切对应，关于在正确的高度提示模型，避免指定精确十六进制代码的低空硬编码逻辑和假设共享上下文的模糊高空指导这两个极端。
字体设计
为了看到这一点，让我们开始将字体设计视为我们可以通过提示影响的一个维度。下面的提示专门引导 Claude 使用更有趣的字体：
markdown
<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
配对原则：高对比度 = 有趣。Display + 等宽字体、serif + 几何 sans、跨权重的可变字体。
使用极端值：100/200 权重 vs 800/900，而不是 400 vs 600。3 倍以上的大小跳跃，而不是 1.5 倍。
选择一个独特的字体，果断地使用它。从 Google Fonts 加载。
</use_interesting_fonts>使用基础提示生成的输出：
使用基础提示和字体设计部分生成的输出
有趣的是，使用更有趣字体的指令似乎也鼓励模型改进设计的其他方面。
仅字体设计就带来了显著的改进，但字体只是一个维度。整个界面的连贯美学如何？
主题
我们可以提示的另一个维度是受知名主题和美学启发的设计。Claude 对流行主题有丰富的理解；我们可以利用这一点来传达我们希望前端体现的具体美学。这是一个例子：
markdown
<always_use_rpg_theme>
始终使用 RPG 美学进行设计：
- 奇幻启发的调色板，具有丰富、戏剧性的色调
- 华丽的边框和装饰性框架元素
- 羊皮纸纹理、皮革装订风格和风化材料
- 史诗般的、冒险的氛围，具有戏剧性的光照
- 中世纪风格的 serif 排版，具有装饰性标题
</always_use_rpg_theme>这产生了以下 RPG 风格的 UI：
字体设计和主题显示了有针对性的提示是有效的。但手动指定每个维度是乏味的。如果我们能将所有这些改进组合到一个可重用的资产中会怎么样？
通用提示
同样的原则扩展到其他设计维度：为动画（动画和微交互）添加提示会增加静态设计缺乏的抛光效果，而引导模型选择更有趣的背景选择会创建深度和视觉趣味。这是一个全面技能大放异彩的地方。
将这一切汇集在一起，我们开发了一个约 400 token 的提示------足够紧凑，可以在不膨胀上下文的情况下加载（即使作为技能加载）------显著改善字体设计、色彩、动画和背景的前端输出：
markdown
<frontend_aesthetics>
你倾向于收敛到通用的、"分布内"输出。在前端设计中，这创造了用户称为"AI slop"的美学。避免这一点：制作创造性的、独特的前端，让用户惊喜和愉悦。
专注于：
- 排版：选择美观、独特和有趣的字体。避免通用字体如 Arial 和 Inter；相反，选择提升前端美学的独特选择。
- 颜色和主题：致力于统一的美学。使用 CSS 变量保持一致性。主导色配以鲜明强调色胜过胆怯的、均匀分布的调色板。从 IDE 主题和文化美学中汲取灵感。
- 动画：为效果和微交互使用动画。优先为 HTML 使用仅 CSS 解决方案。React 可用时使用 Motion
库。专注于高影响力时刻：一个精心编排的页面加载，带有错开的揭示（animation-delay）比分散的微交互创造更多愉悦感。
- 背景：创造氛围和深度，而不是默认为纯色。
避免通用的 AI 生成美学：
- 过度使用的字体系列（Inter、Roboto、Arial、系统字体）
- 陈词滥调的配色方案（特别是白色背景上的紫色渐变）
- 可预测的布局和组件模式
- 缺乏上下文特定特色的千篇一律设计
创造性解释并做出感觉真正为上下文设计的意外选择。在明暗主题、不同字体、不同美学之间变化。你仍然倾向于在各代之间收敛到常见选择（例如，Space
Grotesk）。避免这一点：跳出思维定势至关重要！
</frontend_aesthetics>在上面的例子中，我们首先给 Claude 关于问题和我们要解决的问题的一般上下文。我们发现给模型这种类型的高级上下文是一种有帮助的提示策略来校准输出。然后我们确定了之前讨论的改进设计向量，并提供有针对性的建议来鼓励模型在所有这些维度上更有创意地思考。
我们还在末尾包含额外的指导来防止 Claude 收敛到不同的局部最大值。即使有明确的指令来避免某些模式，模型也可能默认选择其他常见选择（比如字体设计的 Space Grotesk）。最后提醒"think outside the box"加强了创意变化。
对前端设计的影响
使用这个技能激活，Claude 的输出在几种类型的前端设计中都有所改善，包括：
示例 1：SaaS landing page
说明： AI 生成的 SaaS landing page，使用通用的 Inter 字体、紫色渐变和标准布局。没有使用 Skills。
说明： 使用与上述渲染相同的提示以及前端技能生成的 AI 前端，现在具有独特的字体设计、连贯的色彩方案和分层背景。
示例 2：Blog 布局
使用默认系统字体和平面白色背景的 AI 生成 blog 布局。没有使用 Skills。
使用相同提示以及前端技能生成的 AI blog 布局，具有编辑风格的字体设计和有氛围的深度以及精细的间距。
示例 3：Admin dashboard
具有标准 UI 组件和最简化视觉层级的 AI 生成 admin dashboard。没有使用 Skills。
使用相同提示以及前端技能生成的 AI admin dashboard，具有粗体字体设计、连贯的深色主题和有目的性的动画。
使用 Skills 改进 claude.ai 中的 artifacts 质量
设计品味不是唯一的限制。Claude 在构建 artifacts 时还面临架构约束。Artifacts 是 Claude 创建并显示在聊天旁边的交互式、可编辑内容（如代码或文档）。
除了上面探讨的设计品味问题外，Claude 还有另一个默认行为限制了它在 claude.ai 中生成出色的前端 artifacts 的能力。目前，当被要求创建前端时，Claude 只是构建一个带有 CSS 和 JS 的单一 HTML 文件。这是因为 Claude 知道前端必须是单一 HTML 文件才能正确渲染为 artifacts。
就像你期望一个人类开发者如果只能用单一文件编写 HTML/CSS/JS 只能创建非常基本的前端一样，我们假设如果我们给 Claude 指令来使用更丰富的工具，Claude 将能够生成更令人印象深刻的前端 artifacts。
这导致我们创建了一个 web-artifacts-builder skill，它利用 Claude 使用计算机 的能力，并指导 Claude 使用多个文件和现代网络技术（如 React、Tailwind CSS 和 shadcn/ui）来构建 artifacts。在底层，该技能公开了脚本：(1) 帮助 Claude 高效设置基本的 React 仓库，(2) 在完成后使用 Parcel 将所有内容捆绑到单一文件中以满足单一 HTML 文件的要求。这是技能的核心好处之一------通过给 Claude 访问脚本来执行样板操作，Claude 能够最小化 token 使用，同时提高可靠性和性能。
通过 web-artifacts-builder skill，Claude 可以利用 shadcn/ui 的表单组件和 Tailwind 的响应式网格系统来创建更全面的 artifact。
示例 1：白板应用
例如，当被要求创建白板应用时，如果没有 web-artifacts-builder skill，Claude 输出了非常基本的界面：
另一方面，当使用新的 web-artifacts-builder skill 时，Claude 生成了一个更清晰、功能更多的开箱即用应用程序，包括绘制不同形状和文本：
示例 2：任务管理器应用
类似地，当被要求创建任务管理应用时，没有技能的情况下，Claude 生成了一个功能齐全但非常最小的应用程序：
使用技能，Claude 生成了一个开箱即用时功能更多的应用。例如，Claude 包含了一个"创建新任务"表单组件，允许用户为任务设置相关的类别和截止日期：
要在 Claude.ai 中尝试这个新技能，只需启用该技能，然后在构建 artifacts 时要求 Claude "使用 web-artifacts-builder skill"。
使用 Skills 优化 Claude 的前端设计能力
这个前端设计技能展示了一个关于语言模型能力的更广泛原则：模型通常有能力做得比它们默认表达的更多。Claude 具有强大的设计理解力，但没有指导时分布收敛掩盖了这一点。虽然你可以将这些指令添加到系统提示中，但这意味着每个请求都会携带前端设计上下文，即使这些知识与当前任务无关。相反，使用 Skills 将 Claude 从一个需要不断指导的工具转变为一个为每个任务带来领域专业知识的工具。
Skills 也高度可定制------你可以创建适合你特定需求的自己的技能。这允许你定义想要嵌入技能的确切原语，无论是你公司的设计系统、特定的组件模式，还是行业特定的 UI 约定。通过将这些决策编码到 Skill 中，你可以将 agent 思考的组件部分转换为整个开发团队可以利用的可重用资产。技能成为持久化和扩展的组织知识，确保跨项目的一致质量。
这种模式扩展到前端工作之外。任何 Claude 产生通用输出尽管有更广泛理解的领域都是 Skill 开发的候选者。方法是一致的：识别收敛的默认值，提供具体的替代方案，在正确的高度构建指导，并通过 Skills 使其可重用。
对于前端开发，这意味着 Claude 可以生成独特的界面，而无需每次请求的提示工程。要开始，请探索我们的前端设计 cookbook 或尝试我们在 Claude Code 中的新前端设计插件。
感到启发？要创建你自己的前端技能，请查看我们的 skill-creator。