frontend-design

name	frontend-design
description	创建具有鲜明风格和生产级品质的前端界面。用户要求构建 Web 组件、页面或应用时使用本 skill。生成有创意、打磨充分、贴合场景的代码。

Frontend Design

本 skill 指导创建具有辨识度、生产级质量的前端界面。实现真实可运行的代码，并高度关注视觉细节、场景特征和创意选择。

用户会提供前端需求：要构建的组件、页面、应用或界面。需求中可能包含用途、受众或技术约束。

设计思考

编码前，先理解上下文，并确定一个明确、有力度的审美方向：

• 目的：这个界面解决什么问题？谁会使用它？
• 调性：选择一个鲜明方向，例如极简冷峻、极繁混乱、复古未来、有机自然、奢华精致、玩具感、编辑部杂志风、粗粝 brutalist、装饰艺术几何、柔和粉彩、工业工具感等。可以从这些方向获得灵感，但最终设计必须贴合当前场景。
• 约束：技术要求，例如框架、性能、可访问性。
• 差异化：什么会让它令人记住？用户最可能记住的一个点是什么？

关键要求：选择清晰的概念方向，并精确执行。极繁和克制都可以成立，关键是设计意图明确、细节服务主题。

随后实现可运行代码（HTML/CSS/JS、React、Vue 等），并满足：

• 具备生产级质量和真实功能。
• 视觉上醒目、有记忆点。
• 拥有统一且清楚的审美立场。
• 每个细节都经过认真打磨。

前端审美准则

重点关注：

• 字体：选择漂亮、独特、有趣的字体。优先使用能提升气质的、有性格的字体；可以用一个有辨识度的展示字体搭配一个精致的正文字体。
• 颜色与主题：坚持一个统一审美。使用 CSS 变量保持一致性。明确主色和锐利强调色通常优于胆怯、平均分配的配色。
• 动效：使用动画和微交互。HTML 优先考虑纯 CSS 方案；React 可用 Motion 库。重视高影响瞬间：一个编排良好的页面加载分段出现，比零散微交互更有价值。使用能制造惊喜的滚动触发和悬停状态。
• 空间构成：使用意料之外的布局、不对称、重叠、斜向动线、打破网格的元素。可以选择大留白，也可以选择有控制的高密度。
• 背景与视觉细节：创造氛围和层次。加入与整体审美匹配的上下文效果和纹理，例如渐变网格、噪声纹理、几何图案、叠层透明、强烈阴影、装饰边框、自定义光标和颗粒覆盖层。

审美要具体到场景：字体、配色、布局和组件模式都应体现当前产品、受众和使用环境。

要进行创造性解释，做出符合上下文的意外选择。每次设计都应不同，可以在明暗主题、字体和审美方向之间变化。

重要：实现复杂度要匹配审美愿景。极繁设计需要更丰富的代码、动画和效果；极简或精致设计需要克制、精确的间距、字体和细节。优雅来自把方向执行到位。

记住：模型有能力做出非常强的创造性工作。坚持明确设计方向，展示跳出模板后的完成度。