SuperAPI AI 工具集

frontend-design

前端与建站

查看项目

更新于 10-16 09:48

技能介绍

用途:frontend-design 是一个前端设计技能,用于创建独特、生产级的前端界面,避免通用的"AI 生成"审美。当用户要求构建 Web 组件、页面、应用或界面时使用。用户需提供前端需求,可能包含用途、受众或技术约束等背景。

主要能力:在编码前先理解上下文并确定大胆的美学方向,包括目的(解决什么问题、谁使用)、语气(极简、繁复、复古未来、自然、奢华、玩趣、编辑杂志风、粗野、装饰几何、柔和粉彩、工业实用等)、约束(框架、性能、无障碍)与差异化(什么让它令人难忘)。随后实现可运行的代码(HTML/CSS/JS、React、Vue 等),要求生产级、功能可用、视觉醒目、风格统一、细节精炼。

美学指南:字体上选择美观独特、有性格的字体,避免 Arial、Inter 等通用字体,搭配独特的展示字体与精致的正文字体;色彩用 CSS 变量保持一致性,主色配锐利点缀;动效用于效果与微交互,HTML 优先 CSS 方案,React 可用时使用 Motion 库,重视页面加载的编排式错峰呈现,并用滚动触发与悬停状态制造惊喜;空间构图上使用不对称、重叠、对角线、破格元素,并善用留白或受控密度;背景与视觉细节上创造氛围与纵深,使用渐变网格、噪点纹理、几何图案、层叠透明、戏剧性阴影、装饰边框、自定义光标与颗粒叠加等。

限制与注意:不得使用重复的通用字体系列(Inter、Roboto、Arial、系统字体)、陈词滥调的配色(尤其白底紫色渐变)、可预测的布局与组件模式。需根据上下文做创意诠释,避免每次生成趋同。实现复杂度要与美学愿景匹配:繁复设计需要大量动画与效果,精致极简设计则需要克制与精确。

其他:该技能未提供具体安装命令、收费或平台信息。