用途
frontend-design 是一个面向前端界面创建技能的指南，用于生成独特、生产级且具有高设计质量的前端界面。当用户要求构建网页组件、页面或应用时，可使用该技能。其核心目标是避免泛化的“AI 味”审美，转而产出真实可运行、视觉上引人注目且细节精心打磨的代码。
主要能力
该技能引导一套从设计思考到代码实现的流程。用户提供前端需求，即一个待构建的组件、页面、应用或界面，并可附带关于用途、受众或技术约束的背景信息。
在编码前，技能要求理解上下文并确定一个大胆的美学方向，具体包括：
- 用途：该界面解决什么问题，谁会使用。
- 语气：选择一个极端方向，例如极度极简、极繁主义混乱、复古未来主义、有机自然、奢华精致、俏皮玩具感、编辑杂志感、粗野原始、装饰艺术几何、柔和粉彩、工业实用等。这些可作为灵感来源，但应设计出真正贴合该美学方向的作品。
- 约束：技术要求，如框架、性能、无障碍。
- 差异化：什么让它令人难忘，什么是别人会记住的那一点。
技能强调选择一个清晰的概念方向并精确执行。大胆极繁与精致极简都可行，关键在于有意为之，而非强度大小。
随后实现可运行代码（HTML/CSS/JS、React、Vue 等），要求为：生产级且功能可用；视觉上引人注目且令人难忘；具有清晰美学观点且内部一致；每一个细节都经过精心打磨。
使用方式
该技能以用户的前端需求为输入，先进行设计思考，再产出实现代码。前端美学指南聚焦以下几个方面：
- 字体排印：选择美观、独特且有趣的字体，避免 Arial、Inter 等通用字体，改用能提升前端美感的独特选择，并配对使用独特的展示字体与精致的正文字体。
- 色彩与主题：坚持一致的美学，使用 CSS 变量保证一致性，以主导色配鲜明点缀色，优于保守且均匀分布的调色板。
- 动效：用动画实现效果与微交互。HTML 优先使用纯 CSS 方案；React 在可用时使用 Motion 库。聚焦高冲击力时刻，例如一次编排良好的页面加载配合交错显现（animation-delay），比零散的微交互更能带来愉悦感。使用滚动触发与令人惊喜的悬停状态。
- 空间构图：采用意想不到的布局、不对称、重叠、对角线流动、打破网格的元素、充裕留白或受控的密集。
- 背景与视觉细节：营造氛围与深度，而非默认纯色。加入与整体美学匹配的情境化效果与纹理，例如渐变网格、噪点纹理、几何图案、层叠透明、戏剧化阴影、装饰性边框、自定义光标和颗粒叠加。
技能明确要求绝不使用通用的人工智能生成式审美，例如被过度使用的字体族（Inter、Roboto、Arial、系统字体）、陈词滥调的配色方案（尤其是白底紫色渐变）、可预测的布局与组件模式，以及缺乏情境特征、千篇一律的设计。要求进行创造性诠释，做出真正为情境而设计、令人意想不到的选择，不重复同一种设计，在明暗主题、不同字体与不同美学之间变化，不在多次生成中收敛到常见选择（例如 Space Grotesk）。
同时强调：实现复杂度应与美学愿景相匹配。极繁设计需要配合大量动画与效果的精细代码；极简或精致设计则需要克制、精确，并仔细处理间距、字体排印与微妙细节。优雅来自对愿景的良好执行。
适用场景
适用于需要构建具有明确美学方向、高度差异化且可投入生产的网页组件、页面或应用界面的场景。用户可在需求中提供关于用途、受众或技术约束的背景信息，技能会据此推进设计思考与代码实现。
限制
资料未提供安装命令、价格、收费方式、支持平台或具体操作步骤等信息，这些内容暂未提供。技能输出的具体代码形式取决于用户需求与所用框架（如 HTML/CSS/JS、React、Vue 等），资料未限定特定框架或运行环境。