用途
Frontend Design 是一个前端设计方向的技能，定位为「前端设计专家」，用于创建具有鲜明辨识度、达到生产级水准的前端界面。它适用于 UI/UX、排版、配色方案、动画以及独特视觉美学的设计工作。
主要能力
该技能围绕以下几个设计维度展开指导：
设计思考：在编码之前，先确立一个大胆的美学方向，从三个问题入手——目的（这个界面解决什么问题）、调性（选择一种美学风格，如极简、极繁、复古未来、有机、奢华、俏皮、编辑风、粗野主义、装饰艺术、工业风）、差异化（「什么让它令人难忘？」）。资料强调：关键是选择清晰的概念方向并精确执行。
排版：选择有辨识度、有性格的字体，避免通用选项。资料明确列出应避免 Inter、Roboto、Arial，建议考虑展示型字体搭配精致的正文字体；对于俄语项目，使用高质量的西里尔字体。
色彩与主题：坚持统一的审美，通过 CSS 变量定义调色板。资料给出的示例为：
:root {
/* Define your palette with CSS variables */
--primary: #1A237E;
--secondary: #FF6B35;
--accent: #4CAF50;
--background: #0A0A0A;
--text: #FAFAFA;
}
资料指出，主导色配合锐利的点缀色，效果优于保守的配色方案。
动效与交互：使用动画实现效果与微交互。资料给出纯 CSS 的交错揭示动画示例：
/* CSS-only for HTML */
@keyframes reveal {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.staggered-reveal > * {
animation: reveal 0.6s ease forwards;
}
.staggered-reveal > *:nth-child(1) { animation-delay: 0.1s; }
.staggered-reveal > *:nth-child(2) { animation-delay: 0.2s; }
.staggered-reveal > *:nth-child(3) { animation-delay: 0.3s; }
对于 React，资料建议使用 Motion 库，编排页面加载揭示的交错动画与滚动触发交互。
空间构图：采用出人意料的布局，包括不对称与重叠、对角线流向、打破网格的元素、充裕或受控的负空间。
背景与视觉细节：通过渐变网格、噪点纹理、几何图案、分层透明、戏剧性阴影、装饰性边框、自定义光标、颗粒叠加等营造氛围。
使用方式
资料未提供具体的安装命令或调用步骤，仅说明这是一个前端设计专家技能，用于创建 UI/UX、排版、配色、动画与独特视觉美学。
适用场景
适用于需要打造具有强烈视觉个性、非模板化前端界面的设计任务，包括 UI/UX 设计、字体排版、配色方案制定、动画与微交互设计，以及整体视觉美学方向的确定。
限制与注意事项
资料明确列出应避免的做法：不要默认使用通用的 AI 审美，包括过度使用的字体族（Inter、Roboto、Arial）、陈词滥调的配色方案（紫色渐变）、可预测的布局，以及缺乏语境特征的模板化设计。
在实现哲学上，资料强调实现复杂度应与美学愿景相匹配：极繁主义设计应使用繁复的代码、大量动画与效果；极简主义设计则应克制、精确，注重间距、排版与微妙细节。资料最后提醒：不要保留实力，展示在跳出框架思考并全力投入独特愿景时真正能创造出的东西。