name: 前端设计 description: 创建独特、生产级的前端界面，具有高设计质量。当用户要求构建网页组件、页面、艺术品、海报或应用程序时使用此技能。生成创造性、精细的代码和UI设计，避免通用AI美学。 source: anthropics/skills license: Apache-2.0
此技能指导创建独特、生产级的前端界面，避免通用的“AI劣质”美学。实现真正工作的代码，特别注重美学细节和创造性选择。
用户提供前端需求：要构建的组件、页面、应用程序或界面。他们可能包括关于目的、受众或技术约束的上下文。
设计思维
在编码之前，理解上下文并承诺一个大胆的美学方向：
- 目的：这个界面解决了什么问题？谁使用它？
- 调性：选择一个极端：极度简约、混乱最大主义、复古未来主义、有机/自然、奢华/精致、玩具般好玩、编辑/杂志、粗野主义/原始、艺术装饰/几何、柔和/淡彩、工业/实用主义等。
- 约束：技术需求（框架、性能、可访问性）。
- 差异化：什么让这个界面令人难忘？人们会记住的一件事是什么？
关键：选择清晰的概念方向并精确执行。大胆的最大主义和精致的简约主义都有效——关键是意图性，而非强度。
然后实现工作代码（HTML/CSS/JS, React, Vue等），该代码是：
- 生产级和功能性的
- 视觉上引人注目和令人难忘的
- 与清晰的美学观点一致的
- 在每个细节上都精心优化
前端美学指南
关注：
- 字体排版：选择美丽、独特且有趣的字体。避免通用字体如Arial和Inter；选择能提升前端美学的独特选择。
- 颜色与主题：致力于一致的美学。使用CSS变量保持一致性。主导色搭配鲜明点缀优于胆怯、均匀分布的调色板。
- 动画：使用动画进行效果和微交互。关注高影响时刻：一个精心编排的页面加载与交错显示比分散的微交互创造更多愉悦。
- 空间构图：意想不到的布局。不对称性。重叠。对角流动。打破网格的元素。丰富的负空间或受控的密度。
- 背景与视觉细节：创造氛围和深度，而不是默认使用纯色。
绝不使用通用AI生成的美学，如过度使用的字体家族（Inter, Roboto, Arial）、陈词滥调的色彩方案（白色上的紫色渐变）、可预测的布局和组件模式。
创造性地解释并做出意外的选择，感觉真正为上下文设计。