用途:frontend-design 是一个前端设计技能,用于创建独特、生产级的前端界面,强调高设计质量。当用户要求构建 Web 组件、页面等时使用。
主要能力:该技能要求在编码前先思考界面用途、受众、美学方向(极简、极繁、复古未来、有机、粗野主义等)、技术约束(框架、现有设计系统、无障碍要求)以及如何让设计令人难忘。核心原则是选择清晰的概念方向并精确执行,极繁与极简均可,关键在于有意为之。
设计要点:字体方面,选择美观、独特、有趣的字体,避免 Arial、Inter 等通用字体,可用 Google Fonts,将特色展示字体与易读正文字体搭配。色彩与主题方面,用 CSS 变量建立统一调色板,包含主导色、鲜明强调色和合理对比度,避免陈词滥调的配色。动效方面,优先使用纯 CSS 方案或 React 的 Motion 库,关注页面加载编排、有意义的悬停状态和状态间平滑过渡,避免无目的的零散微交互。空间构图方面,超越可预测的网格布局,考虑不对称、重叠分层、对角线流动和意外对齐,选择充裕留白或受控密度之一。视觉细节方面,通过微妙渐变、纹理图案、阴影深度和情境化装饰元素营造氛围。
应避免:通用 AI 生成美学,如过度使用的字体、无思考的陈词滥调配色、可预测的卡片布局、缺乏情境特色的设计。
实现方式:让实现复杂度匹配愿景,极繁设计需要精细复杂的代码,极简设计需要精确与克制,每一行代码都应服务于美学愿景。
限制:资料未提供具体安装命令、收费信息、支持平台或框架版本等细节。