frontend-aesthetics 是一个前端设计指导技能，资料称其基于 Anthropic 提升前端设计可控性的方法。它的核心问题是：大语言模型倾向于输出“分布内”的通用结果，在前端设计上表现为所谓“AI 味”审美，如 Inter 字体、白底紫色渐变和极少的动画。该技能通过明确的指令约束，引导生成更有创意、更具辨识度的前端界面。
用途与定位：该技能用于创建前端界面、落地页等设计场景，帮助设计者或 AI 在排版、配色、动效与背景四个维度上做出非默认选择，使结果更贴合具体语境，而非套用通用模板。
主要能力与设计准则：
- 排版：要求选择美观、独特、有趣的字体，明确避免 Inter、Roboto、Open Sans、Lato、Arial 及默认系统字体。资料给出的候选包括代码风格 JetBrains Mono、Fira Code、Space Grotesk；编辑风格 Playfair Display、Crimson Pro、Newsreader；技术风格 IBM Plex 系列、Source Sans 3；个性风格 Bricolage Grotesque、Syne、Outfit、Plus Jakarta Sans；高端风格 Cabinet Grotesk、Satoshi、General Sans、Clash Display。配对原则为高对比，例如展示字体配等宽字体、衬线配几何无衬线、可变字体跨字重使用；并使用极端字重（100/200 对 800/900）和 3 倍以上的字号跳跃，建议从 Google Fonts 加载一款有辨识度的字体并果断使用。
- 颜色与主题：强调统一的美学承诺，用 CSS 变量保持一致性；主张主色加锐利点缀优于平均分布的保守配色。灵感来源包括 IDE 主题（Dracula、Nord、One Dark、Catppuccin、Tokyo Night）、文化美学（日式极简、北欧设计、粗野主义）和行业配色（金融：藏青/金；健康：青绿/白；游戏：霓虹/暗色）。明确避免白底紫色渐变。
- 动效：用于效果和微交互，HTML 优先纯 CSS 方案，React 可用 Motion 库；重点放在高影响力时刻，例如一次精心编排的页面加载配合交错显现（animation-delay），比零散微交互更有惊喜感。
- 背景：营造氛围与层次，而非默认纯色；可叠加 CSS 渐变（径向加线性）、使用几何图案或网格、加入与整体美学匹配的语境效果，并考虑噪点纹理、颗粒或细微动画。
使用方式与 Tailwind CSS v4 兼容性：资料给出若干关键规则。间距上不再使用 space-x-、space-y-（v4 已移除），改用 flex/grid 容器配合 gap-；例如错误写法为 div className="flex space-x-4"，正确写法为 div className="flex gap-4"。配置加载方面，Tailwind v4 不会自动加载 tailwind.config.ts，需要在 CSS 文件中添加 @config "../tailwind.config.ts"，并配合 @import "tailwindcss"。CSS 重置方面，不要添加自定义的 * { margin: 0 } 重置，以免破坏 mx-auto、my- 等工具类，交由 Tailwind 的 preflight 处理。package.json 中建议添加 "type": "module" 以避免 Node.js ESM 警告。
适用场景：适合需要摆脱通用模板感的前端设计任务，如落地页、产品界面、个人项目等；也适合作为 AI 生成前端代码时的设计约束清单。
限制与注意事项：资料中的字体与配色均为建议示例，并非强制标准，部分字体（如 Cabinet Grotesk、Satoshi、General Sans、Clash Display）的获取与授权方式暂未提供；Space Grotesk 在资料中也被提示正变得过度使用。该技能未提供安装命令、收费信息或具体平台集成方式，暂未提供。