Frontend Design Anthropic

markdown

name: Frontend Design Anthropic

version: 1.0.0

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

summary: 为用户提供从零构建具有鲜明视觉风格的生产级前端界面的能力，强调设计意图与执行精度。

设计思维

在编写代码前，需深入理解项目背景，并坚定地确立一个大胆明确的美学方向：

• 目标：该界面解决什么问题？目标用户是谁？
• 基调：选择一种极端风格，例如：极简主义、极致繁复、复古未来风、自然有机、奢华精致、趣味玩具感、杂志编辑风、粗野主义、艺术装饰几何风、柔和粉彩、工业实用风等。风格种类丰富，可作为灵感参考，但最终设计必须忠实于所选方向。
• 约束：技术要求（框架、性能、无障碍访问等）。
• 差异化：它有何独特之处？让人印象深刻的“唯一记忆点”是什么？

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

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

• 可投入生产的高质量功能实现
• 视觉上引人注目且令人难忘
• 整体风格统一，具备明确的美学立场
• 每个细节都经过精心打磨

前端美学准则

重点关注以下方面：

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

禁止使用常见的 AI 生成审美：如过度使用的字体（Inter、Roboto、Arial、系统字体）、陈词滥调的配色（尤其是白色背景上的紫色渐变）、千篇一律的布局与组件模式，以及缺乏上下文特征的模板化设计。

务必进行创造性解读，做出出人意料但贴合情境的选择。每个设计都不应雷同。在明暗主题、字体、风格之间灵活切换。绝对避免在不同版本间反复使用相同选项（如 Space Grotesk 字体）。

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

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