| name | frontend-design |
| description | 创建独特、生产级的前端界面，具有高设计质量。用于用户要求构建 Web 组件、页面、 artifacts、海报或应用程序时（示例包括网站、落地页、仪表板、React 组件、HTML/CSS 布局，或对任何 Web UI 进行样式美化）。生成创意、精致的代码和 UI 设计，避免通用的 AI 美学。 |
| license | MIT |
| compatibility | opencode |
| metadata | {"author":"anthropics","version":"1.0.0"} |
Frontend Design
此 skill 指导创建独特、生产级的前端界面，避免通用的"AI slop"美学。实现真正可工作的代码，注重美学细节和创意选择。
用户提供前端需求：要构建的组件、页面、应用程序或界面。可能包含关于目的、受众或技术约束的上下文。
设计思维
在编码之前，理解上下文并确定一个大胆的美学方向：
- 目的：这个界面解决什么问题？谁使用它？
- 风格：选择一个极端：残酷的极简主义、混乱的最大化主义、复古未来主义、有机/自然、奢华/精致、玩具般的趣味、编辑/杂志风格、粗野主义/原始、装饰艺术/几何、柔和/粉彩、工业/功利主义等等。有很多风格可供选择。以此为灵感但设计一个符合美学方向的真正方案。
- 约束：技术要求（框架、性能、可访问性）。
- 差异化：是什么让这令人难忘？人们会记住的一件小事是什么？
关键：选择一个清晰的概念方向并精确执行。大胆的最大化主义和精致的极简主义都可以工作——关键是有意性，而不是强度。
然后实现可工作的代码（HTML/CSS/JS、React、Vue 等）：
- 生产级且功能完整
- 视觉上令人难忘且独特
- 具有清晰美学观点的 cohesive
- 在每个细节上精炼
前端美学指南
专注于：
- 字体选择：选择美丽、独特、有趣的字体。避免通用字体如 Arial 和 Inter；选择提升前端美学的独特选择；意想不到的、有个性的字体选择。将独特的展示字体与精致的正文字体配对。
- 颜色与主题：致力于连贯的美学。使用 CSS 变量保持一致性。带有尖锐强调色的主色比胆怯的、均匀分布的调色板更好。
- 动画：使用动画实现效果和微交互。优先使用 HTML 的纯 CSS 解决方案。使用 Motion 库用于 React（当可用时）。关注高Impact时刻：一个精心编排的页面加载与交错揭示（animation-delay）比分散的微交互创造更多愉悦。使用滚动触发和悬停状态带来惊喜。
- 空间构成：意想不到的布局。不对称。重叠。对角线流动。打破网格的元素。慷慨的负空间或受控密度。
- 背景与视觉细节：创造氛围和深度，而不是默认纯色。添加符合整体美学的上下文效果和纹理。应用创意形式，如渐变网格、噪点纹理、几何图案、层叠透明度、戏剧性阴影、装饰边框、自定义光标和颗粒叠加。
永远不要使用通用的 AI 生成美学，如过度使用的字体系列（Inter、Roboto、Arial、系统字体）、老套的配色方案（特别是白色背景上的紫色渐变）、可预测的布局和组件模式，以及缺乏上下文特定性的cookie-cutter设计。
有创意地解释并做出意想不到的选择，感觉像是为上下文真正设计的。没有两个设计是一样的。在浅色和深色主题、不同的字体、不同的美学之间变化。永远不要跨代收敛于共同选择。
重要：将实现复杂度与美学愿景匹配。最大化主义设计需要包含大量动画和效果的复杂代码。极简主义或精致的设计需要克制、精确，以及对间距、字体和微妙细节的精心关注。优雅来自于很好地执行愿景。
记住：你有能力做出非凡的创意工作。不要犹豫，展示真正跳出框框思考和完全承诺独特愿景时能创造什么。
