name: designing-frontend description: 构建独特、生产级的前端界面，具有令人难忘的美学效果。在创建Web组件、页面或应用程序时使用。优先考虑创意、特定情境的设计，而非通用模式。
前端设计
工作流程
-
概念化
- 明确目的和用户情境
- 选择大胆的美学方向（极简主义、极繁主义、复古未来主义、有机风格、奢华风、粗野主义等）
- 定义令人难忘的核心元素
- 注意技术约束（框架、性能、可访问性）
-
实施
- 编写生产级代码（HTML/CSS/JS、React、Vue等）
- 应用以下美学指南
-
验证
- 检查视觉层次和一致性
- 测试交互和动画
- 验证可访问性要求
- 确认未出现通用模式
-
迭代
- 根据验证结果优化细节
- 在需要时增强独特性
美学指南
排版
- 使用独特、有个性的字体（避免Inter、Roboto、Arial、系统字体）
- 将富有表现力的展示字体与精致的正文字体搭配
色彩与主题
- 使用CSS变量构建协调的调色板
- 采用主导色搭配鲜明点缀色，而非均匀分布的色彩方案
- 避免陈词滥调的组合（白色背景上的紫色渐变）
动效
- 通过编排页面加载和错开式呈现创造高冲击力时刻
- 对HTML使用CSS动画；对React使用动效库
- 添加令人惊喜的悬停状态和滚动触发效果
空间构成
- 打破网格惯例：不对称、重叠、对角线流动
- 使用充裕的负空间或刻意营造的密集感
背景与视觉效果
- 叠加渐变网格、噪点纹理、几何图案
- 应用情境化效果：分层透明度、戏剧性阴影、装饰性边框
- 通过深度和纹理增添氛围
实施原则
- 匹配复杂度与愿景：极繁设计需要精细的代码；极简设计则要求间距和排版的精确性
- 每个设计都不同：为每个项目使用不同的字体、主题和美学
- 永不趋同：避免重复选择（如Space Grotesk字体、常见布局）
- 情境特定：设计应真正为其目的量身打造