用途
frontend-design 是一个前端设计技能，用于创建独特、生产级的前端界面，避免通用化的“AI slop”审美。当用户要求构建 Web 组件、页面或应用界面时，可使用该技能。用户会提供前端需求：要构建的组件、页面、应用或界面，也可能包含关于用途、受众或技术约束的背景信息。
主要能力
该技能引导在编码之前先理解上下文，并确定一个大胆的美学方向，具体包括：
- 用途：这个界面解决什么问题？谁在使用它？
- 基调：选择一个极端方向，例如极简、极繁混乱、复古未来、有机/自然、奢华/精致、俏皮/玩具感、编辑/杂志风、粗野主义/原始、装饰艺术/几何、柔和/粉彩、工业/实用等。资料指出可选风格很多，可将其作为灵感，但应设计出真正忠于该美学方向的作品。
- 约束：技术要求（框架、性能、无障碍）。
- 差异化：什么让这个界面令人难忘？哪一点会被人记住？
资料强调：选择一个清晰的概念方向并精确执行。大胆的极繁主义和精致的极简主义都可行，关键在于有意为之，而非强度。
随后实现可运行的代码（HTML/CSS/JS、React、Vue 等），要求：
- 生产级且功能可用
- 视觉上醒目且令人难忘
- 风格统一，具有清晰的美学观点
- 每个细节都经过精心打磨
前端美学准则
该技能给出的关注点包括：
- 字体：选择美观、独特、有趣的字体。避免 Arial、Inter 等通用字体，改用能提升前端美感的独特选择；使用出人意料、有性格的字体。将独特的展示字体与精致的正文字体搭配。
- 颜色与主题：坚持统一的美学。使用 CSS 变量保持一致。主导色配以鲜明点缀，优于胆怯、均匀分布的调色板。
- 动效：用动画实现效果和微交互。对于 HTML，优先使用纯 CSS 方案。在可用时，React 使用 Motion 库。聚焦高冲击力时刻：一次精心编排的页面加载，通过错开的显现（animation-delay）比零散的微交互带来更多愉悦。使用能带来惊喜的滚动触发和悬停状态。
- 空间构图：出人意料的布局。不对称。重叠。对角线流动。打破网格的元素。充裕的留白或受控的密集。
- 背景与视觉细节：营造氛围和深度，而不是默认使用纯色。添加与整体美学匹配的上下文效果和纹理。运用渐变网格、噪点纹理、几何图案、分层透明、戏剧性阴影、装饰性边框、自定义光标和颗粒叠加等创意形式。
资料明确要求：绝不使用通用的 AI 生成审美，例如被过度使用的字体族（Inter、Roboto、Arial、系统字体）、陈词滥调的配色方案（尤其是白底紫色渐变）、可预测的布局和组件模式，以及缺乏上下文特定性格的千篇一律设计。
同时要求创造性地诠释，做出让人感觉真正为上下文而设计的出人意料的选择。没有两个设计应该相同。在浅色与深色主题、不同字体、不同美学之间变化。绝不在多次生成中收敛到常见选择（例如 Space Grotesk）。
资料还强调：让实现复杂度与美学愿景相匹配。极繁设计需要精细的代码，包含大量动画和效果。极简或精致设计则需要克制、精确，以及对间距、字体和微妙细节的细致关注。优雅来自对愿景的良好执行。
使用方式
用户提供前端需求（组件、页面、应用或界面），可附带用途、受众或技术约束等背景。技能先进行设计思考，确定美学方向，然后实现可运行代码。资料未提供具体的安装命令、调用参数或配置步骤。
适用场景
适用于需要构建 Web 组件、页面或应用界面的场景，尤其是希望获得独特、生产级、具有明确美学观点且避免通用 AI 审美的前端作品时。
限制
资料未提供关于收费、价格、平台支持范围、性能指标或效果保证的信息。该技能依赖用户提供的前端需求与上下文；具体框架、性能和无障碍等约束由用户提出。