SuperAPI AI 工具集

frontend-design

前端与建站

查看项目

更新于 10-16 05:42

技能介绍

用途:在用户要求构建 Web 组件、页面或界面(artifact 等)时,指导生成独特、生产级质量的前端界面,避免常见“AI 味”审美。用户需提供前端需求:组件、页面、应用或界面,可能附带用途、受众或技术约束背景。

主要能力:先做设计思考,再实现可运行代码(HTML/CSS/JS、React、Vue 等)。设计思考包括明确用途(界面解决什么问题、谁使用)、选定极端化的调性(极简、极繁、复古未来、自然、奢华、玩具感、杂志编辑、粗野主义、装饰艺术、柔和粉彩、工业实用等)、确认技术约束(框架、性能、可访问性)、确定差异化记忆点。要求选定清晰概念方向并精准执行,极繁与极简皆可,关键是有意图而非强度。

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

禁止通用 AI 审美:避免过度使用的字体、俗套配色(尤其白底紫色渐变)、可预测布局与组件模式。要求每次设计不同,在明暗主题、字体、美学间变化,不收敛到常见选择。

限制:实现复杂度需匹配美学愿景——极繁需精细代码与大量动画效果,极简需克制、精准及对间距、排版、细节的细致处理。资料未提供收费、价格、平台或具体安装命令等信息。