Menu
创建具有高设计质量、独特的生产级前端界面，或应用 Anthropic 官方品牌视觉风格指南。当用户要求构建 Web 组件、页面、应用程序时，生成富有创意且打磨精良的代码；当涉及品牌色彩、风格指南或公司设计标准时，应用 Anthropic 的外观和感觉。
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle SOC
| name | frontend-design |
| description | 创建具有高设计质量、独特的生产级前端界面，或应用 Anthropic 官方品牌视觉风格指南。当用户要求构建 Web 组件、页面、应用程序时，生成富有创意且打磨精良的代码；当涉及品牌色彩、风格指南或公司设计标准时，应用 Anthropic 的外观和感觉。 |
| tags | ["frontend"] |
此技能包含两个主要模块：前端设计 (Frontend Design) 与 Anthropic 品牌风格 (Anthropic Brand Styling)。请根据用户需求的上下文选择适用的模块。
此模块指导创建独特的、生产级的前端界面，避免通用的“AI 废料（AI slop）”审美。实现真实可用的代码，并对审美细节和创意选择给予极大的关注。
用户提供前端需求：要构建的组件、页面、应用程序或界面。他们可能包含关于目的、受众或技术限制的上下文。
在编码之前，理解上下文并致力于一个大胆的审美方向：
关键 (CRITICAL)：选择一个清晰的概念方向并精确执行。大胆的极繁主义和精致的极简主义都行之有效——关键在于意图，而非强度。
然后实现工作代码（HTML/CSS/JS, React, Vue 等），需满足：
专注于：
绝不使用通用的 AI 生成审美，如过度使用的字体家族（Inter, Roboto, Arial, 系统字体）、陈词滥调的配色方案（特别是白色背景上的紫色渐变）、可预测的布局和组件模式，以及缺乏特定上下文特征的千篇一律的设计。
进行创造性的解读，做出感觉像是为该语境量身定制的意想不到的选择。没有设计应该是相同的。在明暗主题、不同字体、不同审美之间变化。绝不要在不同生成中收敛于共同的选择（例如 Space Grotesk）。
重要 (IMPORTANT)：将实现复杂度与审美愿景相匹配。极繁主义设计需要详尽的代码以及大量的动画和效果。极简主义或精致的设计需要克制、精准，并仔细关注间距、排版和微妙的细节。优雅源于对愿景的完美执行。
记住：Claude 有能力进行非凡的创造性工作。不要保留，展示当跳出框框思考并完全致力于独特的愿景时，真正能创造出什么。
当需要访问 Anthropic 的官方品牌标识和风格资源时，使用此模块。
关键词：branding（品牌推广）, corporate identity（企业形象）, visual identity（视觉识别）, post-processing（后处理）, styling（样式设计）, brand colors（品牌色彩）, typography（排版）, Anthropic brand（Anthropic 品牌）, visual formatting（视觉格式化）, visual design（视觉设计）
主色调 (Main Colors):
#141413 - 主要文本和深色背景#faf9f5 - 浅色背景和深色背景上的文本#b0aea5 - 次要元素#e8e6dc - 微妙的背景强调色 (Accent Colors):
#d97757 - 首选强调色#6a9bcc - 次选强调色#788c5d - 第三强调色python-pptx 的 RGBColor 类进行应用（如适用）在任何创造性工作之前必须使用此技能——创建功能、构建组件、添加功能或修改行为。在实现之前先探索用户意图、需求和设计。
在需要根据本地改动自动完成提交、推送和语义化打标时使用，尤其适用于发布流程要求 CHANGELOG 存在对应版本条目的场景。
当你有规格说明或需求用于多步骤任务时使用，在动手写代码之前
当创建新技能、编辑现有技能或在部署前验证技能是否有效时使用
Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.
当用户询问 VS Code API 的定义、methods、interfaces、events、types，或希望了解可用的 VS Code APIs 时使用。 触发场景包括类似 “what does vscode.X do”、“how to use VS Code API”、“VS Code type definition”，或检查 API compatibility 的问题。