frontend-design 是一个前端设计技能，用于创建风格鲜明、达到生产级标准的前端界面，帮助开发者避免常见的“AI 生成式”通用审美。它适用于用户要求构建 Web 组件、页面、制品或界面等场景。
设计思路
在编写代码前，先理解上下文并确定一个大胆的美学方向，需要考虑以下方面：
- 用途：这个界面解决什么问题？给谁使用？
- 调性：选择一个极致方向，例如极简、极繁混乱、复古未来、有机自然、奢华精致、玩具般俏皮、编辑杂志风、粗野原始、装饰艺术几何、柔和粉彩、工业实用等。
- 约束：技术要求，例如框架、性能、无障碍。
- 差异化：什么让这个界面令人难忘？
关键是选择清晰的概念方向并精准执行。无论是大胆极繁还是精致极简，核心在于有意图，而非用力过猛。
随后实现可运行的代码（HTML/CSS/JS、React、Vue 等），要求达到生产级且功能可用、视觉醒目且令人难忘、审美统一且有清晰观点、每个细节都经过精雕细琢。
前端审美指南
- 字体排印：选择美观、独特、有趣的字体，避免 Arial、Inter 等通用字体，采用更有辨识度的字体。可将独特的展示字体与精致的正文搭配。
- 色彩与主题：坚持统一的审美，使用 CSS 变量保持一致。主色调搭配锐利点缀色，通常优于平均分布的柔和配色。
- 动效：用动画实现效果和微交互。HTML 优先使用纯 CSS 方案；React 在可用时使用 Motion 库。聚焦高冲击时刻，例如一次精心编排、带错落揭示的页面加载。可使用滚动触发和悬停状态制造惊喜。
- 空间构图：采用出人意料的布局，如不对称、重叠、对角线流向、打破网格的元素，以及充裕留白或受控的密集排布。
- 背景与视觉细节：营造氛围与深度，而非默认纯色。加入与整体审美匹配的上下文效果与纹理，例如渐变网格、噪点纹理、几何图案、分层透明、戏剧性阴影、装饰边框、自定义光标和颗粒叠加。
应避免的做法
不要使用通用的 AI 生成式审美，例如过度使用的字体族（Inter、Roboto、Arial、系统字体）、陈词滥调的配色方案（尤其是白底紫色渐变）、可预测的布局与组件模式，以及缺乏具体语境特征的模板化设计。
创作时进行创造性诠释，做出真正契合语境、出人意料的选择。每次设计都不应相同，可在明暗主题、不同字体、不同审美之间变化。不要在不同生成中反复收敛到常见选择（例如 Space Grotesk）。
重要提示
实现复杂度需与审美愿景匹配。极繁设计需要复杂代码、丰富动画和效果；极简或精致设计则需要克制、精准，关注间距、字体排印和微妙细节。优雅来自对愿景的良好执行。
使用方式：当用户提供前端需求（组件、页面、应用或界面）时，该技能会引导先进行设计思考，再实现可运行代码。
适用场景：构建需要高设计品质、风格鲜明的前端界面。
限制：官方资料未提供具体安装命令、收费或价格、平台支持范围等信息，暂未提供。