SuperAPI AI 工具集

frontend-excellence

前端与建站

查看项目

更新于 10-16 00:04

技能介绍

用途:在编写前端代码前,先为界面确定明确的美学方向,避免通用化、模板化的“AI slop”风格,让界面真正贴合其使用场景。适用于网页 UI、React 组件、落地页等前端构建任务。

主要能力:提供设计思考流程,要求先回答用途(解决什么问题、谁使用)、基调(如粗野主义、极繁主义、复古未来、有机、奢华、 playful、编辑风、装饰艺术、柔和粉彩、工业风等极端方向)、约束(框架、性能、无障碍)与差异化(最令人记住的一点)。同时列出应避免的反模式:字体上避免 Inter、Roboto、Arial、系统字体及被过度使用的 Space Grotesk;颜色上避免白底紫色渐变、均匀保守的配色与框架默认色;布局上避免过度居中、可预测的对称、千篇一律的组件模式与统一圆角。

使用方式:给出字体、配色、空间构图、视觉细节与动效的具体建议。字体可用极端对比(72pt 标题对 11pt 正文)、全大写宽字距标题、等宽字体处理数据、展示字体与正文字体搭配、描边文字等。配色提供多组调色板,如 Classic Blue、Black & Gold、Teal & Coral、Sage & Terracotta、Bold Red、Deep Purple、Forest Green 等,建议使用主导色加锐利点缀。构图可用非对称栏宽(30/70、40/60、25/75)、重叠、对角流、破格与留白。视觉细节包括对角分隔、旋转标题、几何边框、粗单边边框、角括号、渐变与噪点纹理等。动效优先页面加载的错落揭示、滚动触发、悬停变换;HTML 以 CSS 为主,React 可用 Motion 库。

限制与要求:需匹配复杂度与愿景,极繁设计用复杂代码,极简设计讲求克制与精确;用 CSS 变量统一颜色,建立间距尺度(4px 到 64px),重复视觉模式;无障碍方面需满足 WCAG AA 对比度、不单靠颜色传达含义、正文至少 16px、支持键盘导航。资料未提供具体安装命令、收费或平台信息。