# Frontend Design > 创建具有高设计质量、独特的生产级前端界面，或应用 Anthropic 官方品牌视觉风格指南。当用户要求构建 Web 组件、页面、应用程序时，生成富有创意且打磨精良的代码；当涉及品牌色彩、风格指南或公司设计标准时，应用 Anthropic 的外观和感觉。 Use when this capability is needed. - Skill: `tomevault-io/frontend-design-25` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/frontend-design-25` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/frontend-design-25/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/frontend-design-25 --- 此技能包含两个主要模块：**前端设计 (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` 类进行应用（如适用） - 在不同系统中保持色彩保真度 --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/namewta) — claim your Tome and manage your conversions.