SkillRouter

## 核心用法 frontend-design 是一个专注于前端界面开发的 Agent Skill，旨在帮助用户创建具有独特美学风格的生产级 Web 界面。该技能适用于构建各类前端资产，包括网站落地页、数据仪表盘、React 组件、HTML/CSS 布局以及任何需要美化风格的 Web UI。用户只需描述需求场景、目标受众和技术约束，技能便会基于明确的设计方向生成完整可用的代码实现。 ## 显著优点 该技能最突出的特点是其反"AI 平庸"的设计理念。它明确拒绝常见的 AI 生成式审美——如泛滥的 Inter 字体、紫色渐变背景、千篇一律的卡片布局——转而强调大胆的风格选择：从极简主义到极繁主义，从复古未来主义到粗野主义，每种风格都要求精准执行。技能内置了系统化的设计思维框架，涵盖字体搭配（推荐使用独特显示字体与精致正文字体组合）、色彩系统（CSS 变量管理、主色与强调色对比）、动效设计（CSS 优先、精心编排的页面加载序列）、空间构图（非对称、重叠、对角线流动）以及背景纹理（渐变网格、噪点、几何图案等）。对于 React 项目，技能会优先使用 Motion 库实现流畅动画。 ## 潜在缺点与局限性 首先，该技能对使用者的审美判断有一定要求——虽然技能提供了设计方向，但最终效果依赖于用户能否清晰表达需求。其次，其强调的独特风格可能与某些企业设计规范冲突，需要额外调整才能融入现有产品体系。此外，复杂的视觉效果（如大量动画、图层叠加）可能对低端设备性能造成影响，在可访问性方面也需要开发者自行补充 ARIA 标签等适配工作。技能本身不提供响应式设计的自动保证，需要用户明确要求移动端适配。 ## 适合的目标群体 该技能特别适合追求差异化视觉体验的产品团队、独立开发者、创意机构以及设计爱好者。对于需要快速产出高完成度原型的产品经理、希望突破模板化设计的全栈工程师、以及需要参考现代前端最佳实践的学生和初学者都极具价值。同时，它也是非设计背景开发者提升 UI 质感的有效工具。 ## 使用风险 主要风险在于性能与可维护性的平衡——过度追求视觉效果可能导致代码复杂度上升、包体积膨胀。建议在生产环境中对动画进行降级处理，并建立设计令牌（Design Tokens）规范以确保长期可维护。此外，技能生成的代码虽为生产级，但仍需经过常规的安全审查、跨浏览器测试和可访问性审计方可上线。