前端设计（Frontend Design）
概述
Anthropic 官方的前端设计技能。核心目标：创建独特的、生产级的前端界面，彻底摆脱千篇一律的 AI 审美。
设计思维
动手写代码之前，先回答这四个问题：
- 目的：这个界面要传达什么情感或信息？
- 调性：严肃专业？还是轻松活泼？
- 约束：技术限制、性能要求、设备兼容
- 差异化：如何让这个界面脱颖而出？
前端美学指南
字体排版（Typography）
- 选择有性格的字体，不要默认的 Inter / system-ui
- 字体选择应该由内容的性格驱动
- 大胆使用字重对比和字号层级
色彩与主题（Color & Theme）
- 用 CSS 变量建立一致的色彩系统
- 设定一个主导色，用强调色点缀
- 避免过度使用渐变——尤其是紫色渐变
- 深色模式不是简单的反色，需要独立设计
动效（Motion）
- CSS 动画应该有意义，不是为了炫技
- 滚动触发的过渡效果增加沉浸感
- hover 状态是微交互的核心机会
- 过渡时长 150-300ms 是舒适区
空间构图（Spatial Composition）
- 不对称布局比居中布局更有视觉张力
- 尝试元素重叠和对角线流动
- 留白本身就是设计语言
- 网格系统不意味着所有东西都要对齐
背景与视觉细节
- 渐变、纹理、图案都是工具，按需选用
- 装饰性元素（SVG、几何图形）增加个性
- 但克制比堆砌更难——less is more
必须避免的 AI 审美陷阱
❌ 默认 Inter 字体 + 紫色渐变
❌ 所有内容居中对齐
❌ 到处都是圆角卡片 + 投影
❌ 没有实际功能的"装饰性"动画
❌ 模式化的 Hero + Features + CTA 三段式
❌ 千篇一律的浅灰背景 + 白色卡片
核心原则
优雅来自对愿景的精准执行，而非技术堆砌。
- 实现的复杂度要匹配审美愿景——不多也不少
- 每个设计决策都要有清晰的理由
- 先确定"这个界面应该给人什么感觉"，再写代码
- 大胆做出审美选择——平庸是最大的敌人