用途
frontend-design 是一个用于创建独特、生产级前端界面的技能。当用户要求构建 Web 组件、页面或应用时，该技能引导开发者产出具有高设计质量、避免通用“AI 感”审美的界面，并以真实可运行的代码实现，同时高度关注美学细节与创意选择。
主要能力
该技能的核心能力在于将设计思考与前端实现结合。它要求在接受前端需求（组件、页面、应用或界面）后，先理解上下文并确定一个大胆的美学方向，再编写生产级代码。
设计思考阶段关注以下方面：
- 用途：这个界面解决什么问题？谁在使用？
- 基调：选择一个极端方向，例如极度极简、极繁混乱、复古未来、有机自然、奢华精致、玩具般俏皮、杂志编辑风、粗野原始、装饰艺术几何、柔和粉彩、工业实用等。这些方向可作为灵感，但应设计出真正忠于所选美学方向的作品。
- 约束：技术需求（框架、性能、可访问性）。
- 差异化：什么让这个界面令人难忘？人们会记住的那一件事是什么？
关键点在于：选择一个清晰的概念方向并精准执行。大胆的极繁与精致的极简都可行，核心是有意图，而非强度。
实现阶段要求代码具备以下特征：生产级且功能可用；视觉醒目且令人难忘；风格统一且有清晰的美学观点；每个细节都经过精心打磨。
使用方式
用户提供前端需求，包括要构建的组件、页面、应用或界面，并可附带关于用途、受众或技术约束的上下文。技能随后引导完成设计思考，并以 HTML/CSS/JS、React、Tailwind 等实现可运行代码。
技能内置前端美学指南，聚焦以下方面：
- 字体排印：选择美丽、独特、有趣的字体。避免 Arial、Inter 等通用字体，选择能提升前端美感的独特字体；将独特的展示字体与精致的正文字体搭配。
- 色彩与主题：坚持统一的美学。使用 CSS 变量保持一致性。主色加锐利点缀，优于胆怯、均匀分布的调色板。
- 动效：用动画实现效果与微交互。HTML 优先使用纯 CSS 方案；React 在可用时使用 Motion 库。聚焦高冲击力时刻：一次精心编排的页面加载配合错落显现（animation-delay），比零散的微交互更能带来愉悦感。使用滚动触发和令人惊喜的悬停状态。
- 空间构图：非预期布局、非对称、重叠、对角线流动、打破网格的元素、充裕的留白或受控的密度。
- 背景与视觉细节：营造氛围与深度，而非默认使用纯色。添加与整体美学匹配的上下文效果与纹理。运用渐变网格、噪点纹理、几何图案、分层透明、戏剧性阴影、装饰边框、自定义光标、颗粒叠加等创意形式。
技能明确禁止使用通用的 AI 生成审美，例如过度使用的字体族（Inter、Roboto、Arial、系统字体）、陈词滥调的配色方案（尤其是白底紫色渐变）、可预测的布局与组件模式，以及缺乏上下文特色的千篇一律设计。
技能要求创造性地诠释并做出非预期选择，让设计真正贴合上下文。没有两个设计应该相同。在浅色与深色主题、不同字体、不同美学之间变化。避免在不同生成中趋同于常见选择（例如 Space Grotesk）。
技能强调：实现复杂度需与美学愿景匹配。极繁设计需要精心编写的代码，包含大量动画与效果。极简或精致设计则需要克制、精准，以及对间距、字体和微妙细节的细致关注。优雅来自对愿景的良好执行。
适用场景
适用于用户要求构建 Web 组件、页面、应用或界面，并希望获得独特、生产级、高设计质量前端产出的场景。尤其适合需要避免通用 AI 审美、追求鲜明美学方向与创意表达的前端开发任务。
限制
资料未提供该技能的具体收费、价格、支持平台、安装命令或版本信息，暂未提供。