SuperAPI AI 工具集

frontend-design

前端与建站

查看项目

更新于 10-16 07:15

技能介绍

用途:这是一项前端设计技能,用于引导创建独特、达到生产级质量的前端界面,避免泛化的“AI 感”审美,并以真实可运行的代码实现,注重美学细节与创意选择。用户需提供前端需求:一个组件、页面、应用或界面,并可附上用途、受众或技术约束等背景。

主要能力与设计思路:编码前先理解背景并确定大胆的美学方向,包括目的(解决什么问题、给谁用)、基调(在极简、极繁混沌、复古未来、有机自然、奢华精致、玩具感、杂志编辑、粗野原始、装饰几何、柔和粉彩、工业实用等方向中选择一个极端并贯穿)、约束(框架、性能、无障碍等技术要求)与差异化(什么让它令人难忘)。强调有明确概念方向并精准执行,极繁与极简都可成立,关键在于有意为之。

美学要点:排版上选择美观、独特、有性格的字体,避免 Arial、Inter 等通用字体,用特色展示字体搭配精致正文字体;色彩与主题上保持统一美学,用 CSS 变量保证一致性,以主色配锐利强调色优于平均分布的保守配色;动效用于效果与微交互,HTML 优先纯 CSS 方案,React 可用时使用 Motion 库,重视高冲击时刻(如一次精心编排的页面加载错峰展现,用 animation-delay 实现),并用滚动触发与悬停状态带来惊喜;空间构成追求非对称、重叠、对角流动、打破网格的元素,以及充裕留白或受控密度;背景与视觉细节用于营造氛围与深度,可加入渐变网格、噪点纹理、几何图案、层叠透明、戏剧性阴影、装饰边框、自定义光标和颗粒叠加等。

实现要求:输出可运行代码(HTML/CSS/JS、React、Vue 等),需生产级、功能可用、视觉醒目且记忆点强,风格统一并保持清晰的审美立场,细节精细。实现复杂度需匹配美学愿景:极繁需要丰富动画与效果,极简或精致风格则需要克制、精准并关注间距、排版与微妙细节。

限制:资料未提供安装命令、平台或收费信息。