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