markdown

name: Frontend Design 1.0.0

version: 1.0.0

description: 本技能指导创建具有鲜明个性、可投入生产的前端界面，避免平庸的“AI 滥用”风格。通过注重美学细节与创意选择，实现真正可用的高质量代码。

summary: 专注于打造独特、生产级的前端界面，强调视觉冲击力与设计意图的统一。

tags:

- frontend

- design

- ui

- aesthetic

- production-grade

前端设计

本技能指导创建具有鲜明个性、可投入生产的前端界面，避免平庸的“AI 滥用”风格。通过注重美学细节与创意选择，实现真正可用的高质量代码。

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

设计思维

在编码之前，需深入理解上下文，并确立一个大胆明确的美学方向：

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

关键提示：必须选定清晰的概念方向，并精准执行。无论是大胆的极繁主义，还是精致的极简主义，核心在于有意识的设计意图，而非单纯追求强度。

随后实现的代码（HTML/CSS/JS、React、Vue 等）应满足以下标准：

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

前端美学准则

重点关注以下方面：

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

严禁使用常见的 AI 生成风格，例如：

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

应进行创造性解读，做出出人意料但贴合情境的选择。每个设计都不应雷同。在明暗主题、字体、风格之间灵活变化。绝不重复使用常见选项（如 Space Grotesk 等）。

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

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