frontend-design 是一个前端设计技能，核心目标是引导创建独特、达到生产级水准的前端界面，避开常见的、缺乏个性的“AI slop”式审美，并以真实的、可运行的代码实现，同时在美学细节和创意选择上给予高度关注。
【用途】 当用户提出前端需求——包括要构建的组件、页面、应用或界面——时可使用该技能。用户可能会附带关于用途、受众或技术约束的背景信息。技能的作用是先引导设计思考，再进入编码实现。
【主要能力】
- 设计思考引导：在编码之前先理解上下文，并确定一个大胆的美学方向。具体包括：
- 目的（Purpose）：这个界面解决什么问题？由谁使用？
- 语气（Tone）：选择一个极致的方向，例如极度极简、极繁混沌、复古未来主义、有机/自然、奢华/精致、俏皮/玩具感、编辑/杂志风、粗野主义/原始、装饰艺术/几何、柔和/粉彩、工业/实用主义等。资料强调这些方向可用于启发灵感，但应设计出真正忠于某个美学方向的作品。
- 约束（Constraints）：技术层面的要求（框架、性能、可访问性）。
- 差异化（Differentiation）：什么让这个界面令人难忘？最让人记住的那一点是什么？ 资料特别指出：要选择一个清晰的概念方向并精确执行。大胆的极繁主义和精致的极简主义都可行，关键在于“有意为之”，而非强度。
- 代码实现：随后实现可运行的代码（HTML/CSS/JS、React、Vue 等），要求达到生产级且功能可用、视觉上引人注目且令人难忘、风格统一且具有清晰的美学观点、每个细节都精心打磨。
【前端美学准则】
- 字体排版（Typography）：选择美观、独特、有趣的字体。避免通用字体如 Arial 和 Inter；转而选择能提升前端美感的独特字体；采用出人意料、有性格的字体选择。将独特的展示字体与精致的正文字体搭配。
- 颜色与主题（Color & Theme）：坚持统一的美学。使用 CSS 变量保持一致。资料指出，主导色配以鲜明点缀的效果优于怯懦、平均分布的调色板。
- 动效（Motion）：用动画实现效果与微交互。对 HTML 优先采用纯 CSS 方案；对 React 在可用时使用 Motion 库。聚焦高冲击力时刻：一次编排良好的页面加载，配以错开的揭示效果（animation-delay），比零散的微交互更有愉悦感。使用能带来惊喜的滚动触发和悬停状态。
- 空间构图（Spatial Composition）：采用出人意料的布局、不对称、重叠、对角线流向、打破网格的元素、大面积留白或有控制的密集。
- 背景与视觉细节（Backgrounds & Visual Details）：营造氛围与深度，而非默认使用纯色。添加与整体美学相匹配的语境化效果与纹理。运用渐变网格、噪点纹理、几何图案、分层透明、戏剧性阴影、装饰性边框、自定义光标、颗粒叠加等创意形式。 资料明确要求：绝不使用通用的 AI 生成式审美，例如被过度使用的字体族（Inter、Roboto、Arial、系统字体）、陈词滥调的配色方案（尤其是白底紫色渐变）、可预测的布局与组件模式，以及缺乏语境特定性格的模板化设计。 资料还强调：应进行创造性诠释，做出让人感觉真正为语境而设计、出乎意料的选择。没有两个设计应当相同。在浅色与深色主题、不同字体、不同美学之间变化。绝不要在不同生成中收敛到常见选择（例如 Space Grotesk）。 资料提示：实现复杂度要与美学愿景匹配。极繁主义设计需要精心编写的代码，包含大量动画与效果。极简或精致设计则需要克制、精确，以及对间距、排版和细微细节的用心。优雅来自对愿景的良好执行。
【使用方式】 该技能以技能（skill）形式提供，随所属技能集使用；具体的安装命令与配置方式暂未提供。使用时由用户提出前端需求，技能据此前置完成设计思考，再产出可运行代码。
【适用场景】 适合需要构建 Web 组件、页面、应用或界面的场景，尤其是希望获得独特、有明确美学方向、生产级可用且细节精致的前端实现，而非模板化、通用风格输出的场合。
【限制】 资料未提供该技能的收费、价格、平台支持范围、效果保证或具体使用步骤等信息。代码语言与框架支持情况（HTML/CSS/JS、React、Vue 等为资料中列举的示例）以资料为准，其余细节暂未提供。