用途
frontend-aesthetics 是一份关于如何设计高质量前端美学的指导规范，主要面向使用 AI 编码工具进行前端开发的场景。它要解决的问题是：AI 在生成前端设计时往往趋向于“分布内”的通用输出，形成用户所说的“AI slop”（AI 垃圾美学）。该规范的目标是引导产出有创意、有辨识度、能让用户感到惊喜与愉悦的前端界面。
主要能力
规范围绕四个设计维度提出具体方向：
-
字体排印（Typography）：选择美观、独特、有趣的字体。避免 Arial、Inter 这类通用字体，改用有辨识度的选择来提升前端美感。
-
色彩与主题（Color & Theme）：坚持一贯的审美基调，使用 CSS 变量保证一致性。以主色配锐利点缀色的方案，优于胆怯而均匀分布的色板。可从 IDE 主题和文化美学中获取灵感。
-
动效（Motion）：用动画实现效果和微交互。面向 HTML 时优先使用纯 CSS 方案；在 React 环境中如可用则使用 Motion 库。重点关注高冲击力时刻：一次精心编排、带错落感（animation-delay）的页面加载，比零散的微交互更能带来愉悦感。
-
背景（Backgrounds）：营造氛围与纵深，而非默认使用纯色。可叠加 CSS 渐变、使用几何图案，或添加与整体美学相符的情境化效果。
使用方式
该规范以设计指导文本的形式提供，可在开发或让 AI 生成前端代码时作为提示与参照准则使用，其中列出了应当遵循的方向和应当避免的常见模式。
适用场景
适用于使用 AI 工具进行前端界面设计、希望提升视觉质量与独特性的开发场景，也可作为人工前端设计时的参考清单。
限制与需避免的模式
规范明确列出应避免的通用 AI 生成美学：
- 过度使用的字体族（Inter、Roboto、Arial、系统字体）
- 陈词滥调的色彩方案，尤其是白底紫色渐变
- 可预测的布局与组件模式
- 缺乏情境特征的模板化设计
规范鼓励创造性地解读需求，做出真正贴合场景、出人意料的设计选择，并在明暗主题、不同字体与不同美学之间变化。同时提醒：AI 在不同生成之间仍容易收敛到常见选择（例如 Space Grotesk），因此必须刻意跳出思维定式。
关于收费、价格、平台支持范围等具体信息，资料中暂未提供。