frontend-design

name	frontend-design
description	创建具有高设计质量、独特的生产级前端界面，或应用 Anthropic 官方品牌视觉风格指南。当用户要求构建 Web 组件、页面、应用程序时，生成富有创意且打磨精良的代码；当涉及品牌色彩、风格指南或公司设计标准时，应用 Anthropic 的外观和感觉。
tags	["frontend"]

此技能包含两个主要模块：前端设计 (Frontend Design) 与 Anthropic 品牌风格 (Anthropic Brand Styling)。请根据用户需求的上下文选择适用的模块。

模块一：前端设计 (Frontend Design)

此模块指导创建独特的、生产级的前端界面，避免通用的“AI 废料（AI slop）”审美。实现真实可用的代码，并对审美细节和创意选择给予极大的关注。

用户提供前端需求：要构建的组件、页面、应用程序或界面。他们可能包含关于目的、受众或技术限制的上下文。

设计思维 (Design Thinking)

在编码之前，理解上下文并致力于一个大胆的审美方向：

• 目的 (Purpose)：此界面解决什么问题？谁在使用它？
• 基调 (Tone)：选择一个极致的方向：极度极简、极繁主义的混乱、复古未来主义、有机/自然、奢华/精致、俏皮/玩具般、编辑/杂志风、粗野主义/原始、装饰艺术/几何、柔和/粉彩、工业/实用主义等。有非常多的风格可供选择。利用这些作为灵感，但要设计出忠实于该审美方向的作品。
• 限制 (Constraints)：技术要求（框架、性能、可访问性）。
• 差异化 (Differentiation)：是什么让它令人难忘？人们会记住哪一点？

关键 (CRITICAL)：选择一个清晰的概念方向并精确执行。大胆的极繁主义和精致的极简主义都行之有效——关键在于意图，而非强度。

然后实现工作代码（HTML/CSS/JS, React, Vue 等），需满足：

• 生产级且功能正常
• 视觉上引人注目且令人难忘
• 具有清晰审美观点的连贯性
• 在每个细节上都经过精心打磨

前端美学指南 (Frontend Aesthetics Guidelines)

专注于：

• 排版 (Typography)：选择美丽、独特且有趣的字体。避免使用 Arial 和 Inter 等通用字体；选择能提升前端美感的独特字体；选择意想不到、充满个性的字体。将独特的展示字体与精致的正文字体搭配使用。
• 色彩与主题 (Color & Theme)：致力于统一的审美。使用 CSS 变量保持一致性。具有鲜明强调色的主色调优于胆怯、均匀分布的调色板。
• 动效 (Motion)：使用动画来实现效果和微交互。HTML 优先考虑纯 CSS 解决方案。在 React 中可用时使用 Motion 库。专注于高影响力的时刻：一个精心编排的、带有交错显示（animation-delay）的页面加载，比零散的微交互更能带来愉悦感。使用能带来惊喜的滚动触发和悬停状态。
• 空间构图 (Spatial Composition)：意想不到的布局。不对称。重叠。对角线流向。打破网格的元素。大量的留白或受控的密度。
• 背景与视觉细节 (Backgrounds & Visual Details)：创造氛围和深度，而不是默认使用纯色。添加与整体审美相匹配的上下文效果和纹理。应用创意形式，如渐变网格、噪点纹理、几何图案、分层透明度、戏剧性的阴影、装饰性边框、自定义光标和颗粒覆盖层。

绝不使用通用的 AI 生成审美，如过度使用的字体家族（Inter, Roboto, Arial, 系统字体）、陈词滥调的配色方案（特别是白色背景上的紫色渐变）、可预测的布局和组件模式，以及缺乏特定上下文特征的千篇一律的设计。

进行创造性的解读，做出感觉像是为该语境量身定制的意想不到的选择。没有设计应该是相同的。在明暗主题、不同字体、不同审美之间变化。绝不要在不同生成中收敛于共同的选择（例如 Space Grotesk）。

重要 (IMPORTANT)：将实现复杂度与审美愿景相匹配。极繁主义设计需要详尽的代码以及大量的动画和效果。极简主义或精致的设计需要克制、精准，并仔细关注间距、排版和微妙的细节。优雅源于对愿景的完美执行。

记住：Claude 有能力进行非凡的创造性工作。不要保留，展示当跳出框框思考并完全致力于独特的愿景时，真正能创造出什么。

---

模块二：Anthropic 品牌风格 (Anthropic Brand Styling)

概览

当需要访问 Anthropic 的官方品牌标识和风格资源时，使用此模块。

关键词：branding（品牌推广）, corporate identity（企业形象）, visual identity（视觉识别）, post-processing（后处理）, styling（样式设计）, brand colors（品牌色彩）, typography（排版）, Anthropic brand（Anthropic 品牌）, visual formatting（视觉格式化）, visual design（视觉设计）

品牌指南 (Brand Guidelines)

颜色 (Colors)

主色调 (Main Colors):

• 深色 (Dark): #141413 - 主要文本和深色背景
• 浅色 (Light): #faf9f5 - 浅色背景和深色背景上的文本
• 中灰色 (Mid Gray): #b0aea5 - 次要元素
• 浅灰色 (Light Gray): #e8e6dc - 微妙的背景

强调色 (Accent Colors):

• 橙色 (Orange): #d97757 - 首选强调色
• 蓝色 (Blue): #6a9bcc - 次选强调色
• 绿色 (Green): #788c5d - 第三强调色

排版 (Typography)

• 标题 (Headings): Poppins (回退字体：Arial)
• 正文 (Body Text): Lora (回退字体：Georgia)
• 注意: 为获得最佳效果，字体应预先安装在环境中。

特性 (Features)

智能字体应用 (Smart Font Application)

• 将 Poppins 字体应用于标题（24pt 及更大）
• 将 Lora 字体应用于正文文本
• 如果自定义字体不可用，自动回退到 Arial/Georgia
• 在所有系统中保持可读性

文本样式 (Text Styling)

• 标题 (24pt+): 使用 Poppins 字体
• 正文文本: 使用 Lora 字体
• 基于背景的智能颜色选择
• 保留文本层级和格式

形状和强调色 (Shape and Accent Colors)

• 非文本形状使用强调色
• 在橙色、蓝色和绿色强调色之间循环
• 在保持品牌风格的同时维持视觉趣味

技术细节 (Technical Details)

字体管理 (Font Management)

• 在可用时使用系统安装的 Poppins 和 Lora 字体
• 提供自动回退：Arial（标题）和 Georgia（正文）
• 无需安装字体 - 适用于现有系统字体
• 为获得最佳效果，请在您的环境中预安装 Poppins 和 Lora 字体

颜色应用 (Color Application)

• 使用 RGB 颜色值进行精确的品牌匹配
• 通过 python-pptx 的 RGBColor 类进行应用（如适用）
• 在不同系统中保持色彩保真度