| name | frontend-design |
| description | 打造独具特色、达到生产级质量的前端界面，具备高水平的设计品质。当用户要求构建网页组件、页面、产品、海报或应用程序时（例如网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任何网页 UI 进行样式美化）使用此技能。生成富有创意且精良的代码和 UI 设计，避免落入千篇一律的 AI 美学俗套。 |
| license | 完整条款见 LICENSE.txt |
本技能指导创建独特且达到生产级质量的前端界面，避免平庸的“AI 敷衍”美学。需实现真实可用的代码，并在美学细节与创意选择上格外用心。
用户提出前端需求：需构建一个组件、页面、应用程序或界面。他们可能会提供用途、受众或技术约束等相关背景信息。
设计思路
在编码之前，先理解上下文，并坚定选择一种大胆的美学方向：
至关重要：选择一个清晰的概念方向，并精准执行。大胆的极繁主义和精致的极简主义都行之有效——关键在于有意为之，而非强度本身。
然后实现可运行的代码（HTML/CSS/JS、React、Vue 等），需满足：
-
生产级且功能完备
-
视觉上引人注目且令人难忘
-
风格统一，具有清晰的美学观点
-
每个细节都经过精心雕琢
前端美学指南
重点关注：
-
排版：选择美观、独特且富有趣味的字体。避免使用 Arial 和 Inter 等通用字体；应选用能提升前端美感的特色字体；做出出人意料、富有性格的字体选择。将独特的展示字体与精致的正文字体搭配使用。
-
色彩与主题：坚定采用统一的美学风格。使用 CSS 变量保持一致性。主色调搭配鲜明强调色，远比平均分配色彩的调色板效果更佳。
-
动效：利用动画实现效果和微交互。优先使用纯 CSS 解决方案。若可使用 Motion 库则为 React 项目优先选用。专注于高影响力时刻：一次精心编排的页面加载（利用 animation-delay 实现错落展现）比零散的微交互更能带来愉悦感。使用滚动触发和令人惊喜的悬停状态。
-
空间构成：出人意料的布局。不对称。重叠。斜向流动。打破网格的元素。大面积的负空间或受控的密集感。
-
背景与视觉细节：营造氛围与深度，避免仅使用纯色。添加与整体美学相符的上下文特效与纹理。运用创意形式，如渐变网格、噪点纹理、几何图案、多层透明、戏剧性阴影、装饰性边框、自定义光标及颗粒叠加层。
永远不要使用 AI 生成的通用美学，例如过度使用的字体系列（Inter、Roboto、Arial、系统字体）、老套的配色方案（尤其是白色背景上的紫色渐变）、可预测的布局和组件模式，以及缺乏上下文特色的千篇一律设计。
进行创造性诠释，做出出人意料的选择，使其感觉是为该上下文量身打造。每项设计都不应雷同。在亮色与暗色主题、不同字体、不同美学风格之间切换。永远不要在多次生成中趋同于常见选择（例如 Space Grotesk）。
重要提示：实现复杂度需与美学愿景相匹配。极繁主义设计需要包含大量动画和特效的复杂代码。极简或精致的设计则需要克制、精准，并在间距、排版和细微细节上格外用心。优雅来自于对愿景的出色执行。
记住：Claude 有能力完成非凡的创意工作。不要有所保留，展示出当你跳出常规思维、坚定投入独特愿景时真正能够创造出的成果。
