frontend-design

name	frontend-design
description	构建风格鲜明、可用于生产环境的高质量前端界面。用于实现网站、落地页、仪表盘、React 组件、HTML/CSS 布局、视觉物料或任何需要明显提升设计质量的 Web UI 任务。产出应具有创意与完成度，并避免套版化的 AI 审美。
license	Complete terms in LICENSE.txt

本技能用于指导你创建风格明确、可用于生产环境的前端界面，避免生成模板化、缺乏判断力的“AI 风格”页面。目标不是只把功能做出来，而是产出真正完成度高、审美一致、可运行的界面代码。

用户通常会提供一个前端需求，例如组件、页面、应用或某种界面；也可能附带用途、目标用户、业务背景、设计风格、技术约束或性能要求。

设计思考

在开始编码前，先明确语境，并选择一个强烈且一致的视觉方向：

• 目的：这个界面解决什么问题，服务谁
• 气质：选择一个足够清晰的方向，例如极简、繁复、复古未来、自然有机、精致奢华、玩具感、杂志化、粗野主义、几何装饰风、柔和粉彩、工业感等
• 约束：技术栈、性能、可访问性、已有设计系统
• 记忆点：用户看完之后最容易记住什么，界面的“主识别特征”是什么

关键要求：先定方向，再执行。不论是极繁还是极简，重点都不是“花哨”或“克制”本身，而是整个界面必须有明确判断，而不是平均化地堆常见组件。

然后再实现真正可运行的代码，无论是 HTML/CSS/JS、React、Vue 还是其他前端形式，都应满足：

• 代码可运行，可用于真实页面
• 视觉上有辨识度，有记忆点
• 从布局到细节都围绕同一个审美方向
• 完整度高，不停留在“概念稿”层面

前端审美准则

重点关注以下方面：

• 字体：优先选择有个性、有气质的字体搭配，避免默认感太强的 Arial、Inter、Roboto 一类常见组合；可用更有性格的展示字体搭配更克制的正文字体
• 颜色与主题：用 CSS 变量建立统一配色；主色、辅色、强调色要形成有判断的层次，避免平均发力、没有重心
• 动效：动画要服务于整体氛围和信息节奏；对纯 HTML 优先用 CSS 动画；React 场景在可用时可用 Motion 类库；优先设计高影响力的入场、分段揭示、滚动触发和悬停反馈
• 空间编排：可主动使用不对称、重叠、越格、斜向流动、刻意留白或高密度组织，重点是结构有张力
• 背景与细节：不要默认平涂背景；可以结合场景使用渐变、噪点、纹理、几何图形、半透明层、装饰边框、阴影或定制图形来建立氛围

避免下列常见问题：

• 使用过度泛化的 AI 风格布局
• 总是落入白底紫渐变、卡片栅格、圆角阴影这类陈词滥调
• 默认回到同一套字体与同一类页面骨架
• 所有设计都看起来像同一个模型生成的变体

应当根据上下文作出真正有判断的选择，让界面看起来像“专门为这个任务设计的”，而不是“随便套了个看起来还不错的模板”。

实现要求

• 最大化保留设计方向与功能目标之间的一致性
• 如果项目已有设计系统或现有页面风格，优先延续其语言，不要另起炉灶
• 如果是新页面、新组件或独立视觉任务，可以大胆建立新的视觉方向
• 桌面和移动端都要保证基本可用，不要只顾单端效果
• 复杂视觉必须对应合理实现，不要只堆装饰代码
• 简洁设计也必须足够精确，不能因为“克制”而显得粗糙

总原则

你应该把这类任务视为“真正的界面设计与实现”，不是纯粹的代码排版工作。

每次生成的结果都应该：

• 有明确风格，而不是折中风格
• 有完成度，而不是半成品
• 有设计判断，而不是套模板
• 有上下文意识，而不是脱离任务场景