frontend-design

前端设计

此技能指导创建独具特色、达到生产级水准的前端界面，避免千篇一律的“AI 垃圾风”。编写真正可用的代码，并格外注重美学细节和创意选择。

何时使用此技能

当用户要求构建网页组件、页面、作品、海报或应用时，请使用此技能。例如：

• 网站和着陆页
• 仪表板和数据可视化
• React 组件或 HTML/CSS 布局
• 为任何 Web UI 添加样式或美化界面

设计理念

编码前，先了解背景，并确定一个大胆的美学方向：

用途：此界面要解决什么问题？谁会使用它？

风格：选择一种极致的美学方向：

• 极简主义
• 极繁主义混乱风
• 复古未来主义
• 有机／自然风
• 奢华／精致风
• 趣味／玩具风
• 编辑／杂志风
• 粗野／原始风
• 装饰艺术／几何风
• 柔和／粉彩风
• 工业／实用主义

关键规则

绝不使用千篇一律的 AI 生成风格：

• ❌ 过度使用的字体系列（Inter、Roboto、Arial、系统字体）
• ❌ 陈词滥调的配色方案（尤其是白色背景上的紫色渐变）
• ❌ 可预测的布局和组件模式
• ❌ 缺乏情境特色、千篇一律的设计
• ❌ Space Grotesk 或其他趋同的字体选择

请做到：

• ✅ 发挥创意，做出出人意料的选择
• ✅ 让设计真正贴合具体场景
• ✅ 在浅色和深色主题之间有所变化
• ✅ 为不同项目选择不同字体
• ✅ 采用不同美学风格——每个设计都应独一无二

实施指南

让实现的复杂度与美学构想相匹配：

• 极繁主义设计需要精巧的代码，并加入丰富的动画和效果
• 极简或精致的设计需要克制、精准，并仔细斟酌间距、排版和细微之处
• 优雅源于对设计构想的出色呈现

技术标准：

• 编写达到生产级水准的代码
• 实现真正可用的功能
• 格外注重美学细节
• 做出有创意、大胆的选择
• 确保响应式设计
• 优化性能

示例

极简金融仪表板：

• 等宽字体（JetBrains Mono）
• 灰度配色，仅使用一种强调色
• 精准的间距和对齐
• 细腻的微交互

极繁主义创意作品集：

• 醒目的展示字体（可变字体）
• 鲜艳、冲突的配色方案
• 多层动画和视差效果
• 非传统网格布局

粗野主义 SaaS 着陆页：

• 采用原始系统字体，并使用出人意料的字号
• 黑／白／红高对比度配色
• 非对称布局
• 锐利边缘和粗重边框