frontend-design

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