SuperAPI AI 工具集

frontend-design

前端与建站

查看项目

更新于 10-16 06:44

技能介绍

用途:根据用户给出的前端需求(组件、页面、应用或界面),指导生成独特、生产级且具有高设计质量的前端界面,避免通用化的“AI slop”审美,并实现真正可运行的代码。

主要能力:在编码前先做设计思考,明确用途(解决什么问题、谁使用)、基调(如极简、极繁、复古未来、自然、奢华、玩具感、杂志编辑、粗野主义、装饰几何、柔和粉彩、工业实用等)、技术约束(框架、性能、无障碍)与差异化记忆点。随后用 HTML/CSS/JS、React、Vue 等实现生产级、功能可用、视觉醒目、风格统一且细节精炼的代码。

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

限制与注意:不要使用过度常见的字体、俗套配色(如白底紫色渐变)、可预测布局和缺乏语境特征的模板化设计;不同生成之间应变化明暗主题、字体与美学,避免趋同。实现复杂度需匹配美学愿景:极繁设计需要大量动画与效果,极简设计则需克制、精确并关注间距、排版与微妙细节。资料未提供具体安装命令、收费、价格、平台或效果数据。