Frontend Design

markdown

name: 前端设计

version: 0.1.0

chunk: 1/1

description: 本技能指导创建具有独特性、可投入生产的前端界面，避免平庸的“AI 糟糕美学”。通过注重审美细节与创意选择，实现真正可用且出色的代码实现。

summary: 构建兼具视觉冲击力与功能性的前端界面，拒绝通用化、模板化的 AI 设计风格。

此技能旨在指导用户创建独具特色、符合生产标准的前端界面，避免常见的“AI 模板化”审美。通过精心设计与真实可运行的代码实现，关注每一个视觉细节与创意决策。

用户提供前端需求：需构建的组件、页面、应用或界面。可包含用途背景、目标用户或技术约束等信息。

设计思维

在编码之前，深入理解上下文，并坚定地确立一个鲜明的美学方向：

• 目的：该界面解决什么问题？目标用户是谁？
• 基调：选择一种极端风格：极致极简、极繁混乱、复古未来主义、有机自然、奢华精致、趣味玩具感、杂志编辑风、粗野主义/原始感、艺术装饰几何风、柔和粉彩、工业实用主义等。风格选择丰富多样，应以此为灵感，但最终设计必须忠实于所选的美学方向。
• 限制条件：技术要求（框架、性能、无障碍访问等）。
• 差异化：它为何令人难忘？人们会记住的唯一亮点是什么？

关键提示：必须明确概念方向，并精准执行。大胆的极繁主义与精致的极简主义皆可，核心在于有意识的设计意图，而非单纯追求强度。

随后实现的代码（HTML/CSS/JS、React、Vue 等）需满足：

• 生产级质量，功能完整
• 视觉上引人注目且记忆深刻
• 整体风格统一，具备清晰的美学立场
• 每个细节都经过精细打磨

前端美学准则

重点关注以下方面：

• 字体排版：选用美观、独特且富有表现力的字体。避免使用通用字体如 Arial、Inter；应选择能提升整体美感的非主流字体。搭配一个具有个性的展示字体与一个精致的正文字体，形成对比与层次。
• 色彩与主题：坚持统一的视觉风格。使用 CSS 变量确保一致性。以鲜明的主色调搭配锐利的点缀色，优于平淡、均匀分布的配色方案。
• 动态效果：合理运用动画实现视觉反馈与微交互。优先使用纯 CSS 实现 HTML 动效。在 React 中可使用 Motion 库。聚焦高影响力时刻：一次精心编排的页面加载（通过 animation-delay 实现渐进式揭示），比零散的微交互更能带来愉悦感。利用滚动触发、悬停状态等制造惊喜。
• 空间构图：打破常规布局。采用不对称、重叠、对角流动、打破网格结构等手法。留白充足，或控制密度，营造张力。
• 背景与视觉细节：创造氛围与深度，避免使用纯色背景。添加与整体风格契合的纹理、特效与图形元素。可尝试渐变网格、噪点纹理、几何图案、多层透明、强烈阴影、装饰边框、自定义光标、颗粒叠加等创意形式。

禁止使用通用的 AI 生成美学，例如：

• 过度使用的字体家族（Inter、Roboto、Arial、系统字体）
• 陈词滥调的配色（尤其是白色背景上的紫色渐变）
• 可预测的布局与组件模式
• 缺乏上下文特征的千篇一律设计

应进行创造性解读，做出出人意料但合理的决策，让每项设计都真正服务于具体场景。杜绝重复。在明暗主题、字体选择、美学风格上保持多样性。绝不在不同版本间趋同于常见选择（如 Space Grotesk）。

重要提示：实现复杂度应与美学愿景相匹配。极繁风格需复杂的代码结构、丰富的动画与视觉效果；极简或精致风格则强调克制、精准，注重间距、排版与细微之处。优雅源于对愿景的完美执行。

请记住：Claude 能够完成非凡的创造性工作。不要自我设限，展现当突破常规思维、全情投入独特愿景时所能达到的真实创作高度。