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