SuperAPI AI 工具集

frontend-design

前端与建站

查看项目

更新于 10-16 05:06

技能介绍

用途:该技能引导创建独特、生产级的前端界面,避免通用的“AI 味”美学,并实现真正可运行的代码,注重审美细节与创意选择。用户提供前端需求:要构建的组件、页面、应用或界面,可能附带用途、受众或技术约束等背景。

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

美学要点:字体选择美丽独特、避免 Arial 与 Inter 等通用字体,用特色展示字体搭配精致正文字体;色彩与主题保持统一,用 CSS 变量,主色配锐利点缀;动效用于效果与微交互,HTML 优先纯 CSS,React 可用 Motion 库,重视页面加载的错落揭示与滚动、悬停状态;空间构图追求不对称、重叠、对角流动、打破网格,或大量留白或受控密度;背景与视觉细节营造氛围与深度,如渐变网格、噪点纹理、几何图案、分层透明、戏剧阴影、装饰边框、自定义光标、颗粒叠加。

限制与注意:明确禁止通用 AI 美学,如滥用字体族(Inter、Roboto、Arial、系统字体)、陈词滥调配色(尤其白底紫色渐变)、可预测布局与组件模式、缺乏上下文特色的模板化设计。要求创意诠释并做出意外选择,不同设计不应雷同,在明暗主题、字体与美学间变化,避免跨生成收敛到常见选择(如 Space Grotesk)。实现复杂度需匹配美学愿景:极繁设计需大量动画与效果,极简设计需克制、精确并关注间距、字体与微妙细节。资料未提供具体安装命令、收费或平台信息。