tomevault-io 此技能包含两个主要模块：前端设计 (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 — claim your Tome and manage your conversions.