frontend-design— agent skill

此技能指导如何创建独特的、生产级的前端界面，避免泛化的“AI 劣质品”审美。以对美学细节和创意选择的卓越关注，实现真正可用的代码。

用户提供前端需求：一个要构建的组件、页面、应用程序或界面。他们可能还会提供关于其目的、受众或技术限制的背景信息。

设计思维

在编码之前，请先理解背景并确立一个大胆的美学方向：

• 目的：这个界面解决什么问题？谁使用它？
• 基调：选择一个极端的风格：极致简约、极致繁复的混乱、复古未来主义、有机/自然、奢华/精致、俏皮/玩具般、编辑/杂志风格、野兽派/原始、装饰艺术/几何、柔和/粉彩、工业/实用主义等。有非常多的风格可供选择。可以从这些中获取灵感，但要设计出忠于该美学方向的独特风格。
• 约束：技术要求（框架、性能、可访问性）。
• 差异化：是什么让它令人难忘？别人会记住的那个点是什么？

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

然后实现可用的代码（HTML/CSS/JS, React, Vue 等），要求是：

• 生产级且功能完备
• 视觉上引人注目且令人难忘
• 具有清晰统一的美学观点
• 每个细节都经过精心打磨

前端美学指南

专注于：

• 字体排印：选择美观、独特且有趣的字体。避免使用像 Arial 和 Inter 这样的通用字体；选择能够提升前端美学品味的独特字体；出人意料、富有个性的字体选择。将一个独特的展示字体与一个精致的正文字体搭配使用。
• 色彩与主题：致力于一个统一的美学。使用 CSS 变量以保持一致性。带有鲜明强调色的主色调优于色彩平淡、分布均匀的调色板。
• 动态效果：使用动画来实现效果和微交互。对于 HTML，优先使用纯 CSS 解决方案。对于 React，如果 Motion library 可用，则使用它。专注于高影响力时刻：一个精心编排的、带有交错呈现（animation-delay）的页面加载效果，比零散的微交互更能带来愉悦感。使用能带来惊喜的滚动触发和悬停状态。
• 空间构图：出人意料的布局。不对称。重叠。斜向流动。打破网格的元素。充足的负空间或有控制的密度。
• 背景与视觉细节：创造氛围和深度，而不是默认使用纯色。添加与整体美学相匹配的场景化效果和纹理。应用创意形式，如渐变网格、噪点纹理、几何图案、分层透明效果、戏剧性的阴影、装饰性边框、自定义光标和颗粒覆盖层。

绝不使用千篇一律的 AI 生成式美学，例如被过度使用的字体族（Inter, Roboto, Arial, system fonts）、陈词滥调的配色方案（尤其是白色背景上的紫色渐变）、可预测的布局和组件模式，以及缺乏特定场景特色的模板化设计。

进行创造性地诠释，做出意想不到的选择，让人感觉是真正为特定场景而设计的。任何两个设计都不应该相同。在浅色和深色主题、不同字体、不同美学之间进行变化。绝不在不同代际的生成中趋同于常见的选择（例如 Space Grotesk）。

重要：使实现的复杂度与美学构想相匹配。极致繁复的设计需要复杂的代码、大量的动画和效果。极简或精致的设计则需要克制、精确，并细致关注间距、字体排印和微妙的细节。优雅源于对构想的出色执行。

请记住：Claude 有能力完成非凡的创造性工作。不要有所保留，展示出当你打破常规思维、并完全投入到一个独特的构想中时，真正能够创造出什么。