| name | frontend-design |
| description | 创建高品质、生产级前端界面。当用户需要构建 Web 组件、页面、应用或美化任何 Web UI 时使用此 Skill。包括：网站、落地页、仪表盘、React 组件、HTML/CSS 布局、或任何需要精致样式的界面设计。生成具有创意的、精心打磨的代码和 UI 设计。 |
Frontend Design Skill
创建高品质、生产级前端界面的设计指南。实现真正可用的代码，对美学细节和创意选择给予极致关注。
用户提供前端需求：一个组件、页面、应用或界面。他们可能包含关于用途、受众或技术约束的上下文。
设计思维
编码前，理解上下文并确定一个大胆的美学方向：
- 目的: 这个界面解决什么问题？谁在使用？
- 基调: 选一个极端：极简主义、极繁主义、复古未来主义、有机自然、奢华精炼、趣味玩具感、编辑/杂志风、粗野主义、Art Deco 几何风、柔和粉彩、工业实用主义等。风格选择多样丰富，以此为灵感但设计出真正忠于美学方向的作品。
- 约束: 技术要求（框架、性能、无障碍）。
- 差异化: 什么让这个设计令人难忘？人们会记住的那一个特点是什么？
关键: 选择一个清晰的概念方向并精确执行。大胆的极繁主义和精炼的极简主义都有效 — 关键是意图性，不是强度。
然后实现可运行的代码（HTML/CSS/JS、React、Vue 等），确保：
- 生产级品质且功能完整
- 视觉冲击力强且令人难忘
- 具有清晰的美学观点和内在一致性
- 每个细节都经过精心打磨
设计美学准则
核心关注点：
- 字体: 选择美观、独特、有趣的字体。避免通用字体如 Arial；选择有个性的字体来提升界面美感。将一个有特色的展示字体与一个精炼的正文字体搭配。
- 色彩与主题: 坚持一个内聚的美学。使用 CSS 变量保持一致性。一个主导色搭配鲜明强调色比均匀分配效果更好。HiveMind 默认品牌色参考
brand-guidelines skill。
- 动效: 使用动画实现效果和微交互。优先使用纯 CSS 方案。专注于高影响力时刻：一个精心编排的页面加载动画（用 animation-delay 实现错落进入）比零散的微交互更让人愉悦。利用滚动触发和出人意料的悬停状态。
- 空间构图: 打破常规的布局。不对称。重叠。对角线流动。突破网格的元素。充裕的留白或受控的密度。
- 背景与视觉细节: 创造氛围和深度而不是默认纯色。添加与整体美学匹配的纹理和效果。运用渐变网格、噪点纹理、几何图案、叠层透明、戏剧性阴影、装饰性边框、自定义光标和颗粒覆盖等创意形式。
避免 过度使用的设计套路：过度居中的布局、紫色渐变白底背景、统一的圆角、千篇一律的设计。
富有创意地诠释，做出出人意料的选择，让设计感觉是真正为具体场景量身定制的。没有两个设计应该雷同。在明暗主题、不同字体、不同美学之间变换。
重要: 实现的复杂度要匹配美学愿景。极繁风格需要精心的代码和大量动画效果。极简或精炼风格需要克制、精确，以及对间距、字体和细微细节的精心关注。优雅来自对愿景的精确执行。
HiveMind 特定指南
当为 HiveMind 平台创建界面时，遵循以下额外规范：
设计系统
- 参考
brand-guidelines skill 获取标准配色和字体
- 使用项目中
frontend/src/styles/variables.css 的 CSS 变量
- 遵循
frontend/src/styles/mixins.module.css 的设计模式（毛玻璃、渐变文字等）
技术栈
- 框架: React 18 + TypeScript
- 构建: Vite
- 状态管理: Zustand
- UI 组件库: Ant Design
- 样式: CSS Modules
- 图标: Lucide Icons
