作为产品经理，我经常需要快速验证产品原型或搭建落地页。

最初的思路很直接——用 AI 写代码。但实际体验中发现了一个普遍问题：AI 生成的前端页面虽然功能完整，却总显得"廉价感"十足。

清一色的 Inter 字体、标志性的紫色渐变、千篇一律的卡片布局……打开不同 AI 生成的页面，就像在看同一个模板的不同版本。没上线就已经和竞品撞脸，这对产品来说是个隐患。

直到我发现了 Anthropic 官方发布的 frontend-design skill，才意识到问题不在 AI 的能力，而在指令的精确度。加一句话，整个页面的质感能上升一个量级。

为什么 AI 总爱生成"紫色 + Inter" 的页面

在深入讲解 skill 的用法之前，我先拆解了一个有趣的现象。

问题根源在于训练数据的分布特征。大约5年前，Tailwind CSS 流行时，默认按钮颜色是 indigo-500（紫蓝色）。大量开发者图省事采用默认配置，导致整个前端生态充斥着紫色网站。AI 的训练数据来自这些网站，结果是：

• 按钮颜色：紫色频率最高 → AI 选紫色
• 字体选择：Inter 出现最频繁 → AI 选 Inter
• 布局模式：规则卡片最常见 → AI 复制卡片

这种现象在学术上称为"distributional convergence"（分布收敛），通俗说法是"AI slop"——AI 生成的审美趋同化。AI 并不具备真正的审美判断，它只是在重复训练数据中最常见的模式。

解决方案：frontend-design skill 的三层设计逻辑

1. 明确的禁用清单（说清楚不要什么）

Anthropic 的解决思路第一步是具体禁止，而不是模糊建议：

• ❌ 不要说"设计别太平庸"
• ✅ 要说"不要 Inter 字体、不要 Roboto、不要紫色渐变、不要标准卡片布局"

这种点名道姓的限制条件能有效防止 AI 打擦边球，强制它跳出既有的设计模板。

2. 具体的方向引导（告诉 AI 能用什么）

禁用清单还不够，需要给出可行的替代方案：

相比"设计要好看"这类空话，列出具体可选方案能让 AI 有更多的生成方向。

3. 前置思考阶段（先想清楚再写代码）

最巧妙的是，skill 要求 Claude 在编写代码前先回答关键问题：

• 这个页面的目标用户是谁？
• 想传达什么感觉和价值观？
• 技术实现上有什么约束？
• 最让人记住的设计亮点是什么？

通过强制 AI 思考上下文，生成的代码自然更有针对性，而非机械复制。

效果对比：同样提示词，加一句话的差异

测试场景一：博客页面

提示词：「帮我创建一个现代极简、优雅美观的博客页面」

• 无 skill：紫色主题、Inter 字体、标准卡片布局
• +使用 frontend-design skill：大胆色彩对比、衬线字体、非对称排版、微妙动效

测试场景二：SaaS 落地页

提示词：「帮我写一个视频生成 SaaS 落地页」

• 无 skill：布局保守、配色平凡、缺乏视觉层次
• +使用 frontend-design skill：视觉焦点清晰、配色大胆、交互流畅、质感明显

测试场景三：商品详情页

提示词：「帮我写一个书籍的商品详情页」

• 无 skill：功能性布局、常规配色、缺乏品牌感
• +使用 frontend-design skill：高级感呈现、个性化配色、细节动效、整体品牌调性

质的差别在于：无 skill 的版本是"AI 一键生成感"，有 skill 的版本具备明显的设计思考和视觉品味。

理论基础：理解 Claude Skills 的工作机制

如果你对"skill"这个概念还陌生，简单解释一下：

Claude Skills 的本质是结构化的提示词集合。它像是给 Claude 安装的"技能包"——将精心设计的提示词组织在一个文件夹中，包含 Markdown 文件来规定 AI 在特定场景下的行为准则。

工作流程是：

1. 将 skill 文件夹放在指定位置
2. 在对话中触发 skill（如"使用 frontend-design skill"）
3. Claude 自动读取该 skill 内的完整提示词
4. 根据你的需求 + skill 内的规则组合生成内容

好处是你不用每次都手动粘贴长篇提示词，Claude 能自动判断场景并调用相应 skill。

如何立即使用这个 skill

方法一：直接复制提示词到任意 AI 工具

适用场景：快速验证、无需重复使用

操作步骤：

获取 frontend-design skill 的完整提示词

复制其中的核心规则和指导

粘贴到 ChatGPT、Claude Web、Cursor 等工具

在你的页面需求后面加上这段提示词

让 AI 按照这个指导来生成代码

优势：简单粗暴，立竿见影
劣势：每次都要重复粘贴

方法二：制作成 Claude Skill 文件（推荐）

适用场景：经常做前端开发、需要批量使用

操作步骤：

将 frontend-design 提示词发给 Claude

让 Claude 帮你按照 Anthropic 的 skill 格式重新组织

Claude 会输出一个完整的 skill 文件夹结构

按照 Claude 的指导放入指定位置

以后只需说"使用 frontend-design skill"即可触发

优势：长期高效、无需重复操作
劣势：初次配置略有门槛

提示词优化的通用思路

拆解完 frontend-design skill，我发现其中的设计思路可以迁移到其他提示词场景：

这套方法论不仅适用于前端设计，也能优化文案撰写、数据分析、产品策划等各类提示词。

frontend-design 提示词（英文）

---
name: frontend-design
description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
license: Complete terms in LICENSE.txt
---

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

## Design Thinking

Before coding, understand the context and commit to a BOLD aesthetic direction:
- **Purpose**: What problem does this interface solve? Who uses it?
- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
- **Constraints**: Technical requirements (framework, performance, accessibility).
- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?

**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.

Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
- Production-grade and functional
- Visually striking and memorable
- Cohesive with a clear aesthetic point-of-view
- Meticulously refined in every detail

## Frontend Aesthetics Guidelines

Focus on:
- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.

NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.

Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.

**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.

Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

frontend-design 提示词（翻译）

## 中文翻译

这个技能指导创建独特的、生产级别的前端界面，避免千篇一律的"AI 垃圾美学"。实现真正可用的代码，对美学细节和创意选择给予极致关注。

用户提供前端需求：一个组件、页面、应用或界面。他们可能会包含关于用途、受众或技术约束的背景信息。

### 设计思考

在编码之前，先理解上下文并确立一个**大胆的美学方向**：
- **目的**：这个界面解决什么问题？谁会使用它？
- **基调**：选择一个极端：极简主义、极繁混乱、复古未来、有机自然、奢华精致、趣味玩具感、杂志编辑风、粗野主义、装饰艺术几何、柔和马卡龙、工业实用等。有太多风格可以选择。用这些做灵感，但要设计一个忠于美学方向的独特风格。
- **约束**：技术要求（框架、性能、可访问性）。
- **差异化**：什么让这个设计**令人难忘**？人们会记住的那一个特点是什么？

**关键**：选择一个清晰的概念方向，并精准执行。大胆的极繁主义和精致的极简主义都可以——关键在于**意图性**，而非强度。

然后实现可用的代码（HTML/CSS/JS、React、Vue 等），要求：
- 生产级别且功能完整
- 视觉冲击力强且令人难忘
- 有清晰美学观点的连贯整体
- 每个细节都经过精心打磨

### 前端美学指南

重点关注：
- **字体排版**：选择美观、独特、有趣的字体。避免平庸字体如 Arial 和 Inter；改用提升前端美学的独特选择；出人意料的、有性格的字体选择。搭配一个独特的展示字体和一个精致的正文字体。
- **色彩与主题**：坚持连贯的美学。使用 CSS 变量保持一致性。主色配锐利的强调色，胜过犹豫不决、均匀分布的配色方案。
- **动效**：使用动画创造效果和微交互。HTML 优先使用纯 CSS 方案。React 可用时使用 Motion 库。聚焦高影响力时刻：一个精心编排的页面加载动画，配合错开的显现效果（animation-delay），比零散的微交互更令人愉悦。使用滚动触发和令人惊喜的悬停状态。
- **空间构图**：出人意料的布局。非对称。重叠。对角线流动。打破网格的元素。大量留白**或**控制得当的密集排布。
- **背景与视觉细节**：创造氛围和深度，而不是默认使用纯色。添加与整体美学匹配的情境效果和纹理。应用创意形式如渐变网格、噪点纹理、几何图案、分层透明、戏剧性阴影、装饰边框、自定义光标和颗粒叠加。

**绝对不要**使用千篇一律的 AI 生成美学，如过度使用的字体家族（Inter、Roboto、Arial、系统字体）、陈词滥调的配色方案（特别是白底紫色渐变）、可预测的布局和组件模式，以及缺乏情境特色的流水线设计。

要创意性地解读并做出针对情境的意外选择，让设计真正有针对性。没有设计应该是一样的。在明暗主题、不同字体、不同美学之间变化。**绝不**要在多次生成中收敛到常见选择（例如 Space Grotesk）。

**重要**：让实现复杂度匹配美学愿景。极繁主义设计需要精细的代码，包含大量动画和效果。极简主义或精致设计需要克制、精确，以及对间距、排版和微妙细节的仔细关注。优雅来自于良好的愿景执行。

记住：Claude 有能力做出非凡的创意作品。不要退缩，展示当跳出框架思考并全力投入独特愿景时，真正能创造出什么。

---

## 拆解

这个提示词的关键结构
1. 明确反面教材
直接点名要避免"AI slop"（AI 垃圾美学），并具体列举：
禁用字体：Inter、Roboto、Arial、系统字体
禁用配色：紫色渐变配白底
禁用模式：千篇一律的布局和组件
为什么有效：AI 很容易陷入"安全选择"，明确告诉它什么不行，比只说"要好看"有效得多。

2. 设计思考四问框架
强制 AI 先思考再动手：
Purpose（目的）→ 解决什么问题？
Tone（基调）→ 从极简到极繁选一个极端风格
Constraints（约束）→ 技术限制
Differentiation（差异化）→ 让人记住的点是什么？
为什么有效：给 AI 一个"思考清单"，避免直接套模板。

3. 具体美学维度
把"好设计"拆解成可执行的具体维度：
字体：要"有个性的展示字体+精致的正文字体"
动效：要"页面加载时的精心编排"而非零散的小交互
布局：要"非对称、重叠、对角线"等具体手法
背景：要"渐变网格、噪点纹理、几何图案"等具体效果
为什么有效：把抽象的"好看"翻译成具体的CSS属性和设计手法。

4. 强调差异化和不重复
明确要求：
每次生成都要不同
在明暗主题、字体、美学之间变化
避免收敛到常见选择（如 Space Grotesk）
可迁移的通用技巧
"禁止清单"比"推荐清单"更有效 → 告诉 AI 什么不能做，限制它的默认选择
用极端词汇引导风格 → "brutally minimal"、"maximalist chaos"比"简洁"、"丰富"更能激发创意
拆解抽象概念为具体维度 → 把"好设计"拆成5个可执行的小点，每个点都有具体例子
强制"先思考后执行"流程 → 设计四问框架阻止 AI 直接套模板
匹配复杂度要求 → 明确说"极简需要精致细节，极繁需要复杂代码"，避免风格和实现不匹配
反复强调"要不同" → 在多处提醒 AI 不要每次都一样，打破模型的收敛倾向
这个提示词本质上是给 AI 建立了一套"美学决策树"，而不是让它自由发挥。通过约束和引导的平衡，逼出有个性的输出。