SuperAPI AI 工具集

frontend-design

前端与建站

查看项目

更新于 10-16 11:22

技能介绍

用途:该技能引导创建独特、生产级且避免通用“AI 感”审美的前端界面,并输出真实可用的代码,强调对美学细节与创意选择的关注。用户提供前端需求,如要构建的组件、页面、应用或界面,也可包含用途、受众或技术约束等背景。

主要能力:先做设计思考,再写代码;包括明确用途(解决什么问题、谁使用)、确定语气并选择一种极端的审美方向(如极简、极繁、复古未来、自然有机、奢华精致、玩趣、杂志编辑、粗野、几何装饰、柔和粉彩、工业实用等)、考虑技术约束(框架、性能、可访问性)以及差异化(什么让界面令人难忘)。

实现方式:用 HTML/CSS/JS、React、Vue 等写可用代码,要求生产级且功能正常、视觉醒目且令人难忘、审美观点统一、细节精炼。

设计准则:字体选择要美丽、独特、有趣,避免 Arial、Inter 等通用字体,用有特色的展示字体搭配精致正文字体;色彩与主题要统一,用 CSS 变量保持一致,主色加锐利点缀;动效用于效果与微交互,HTML 优先使用纯 CSS 方案,React 可用时使用 Motion 库,强调高冲击时刻,如一次编排良好的页面加载配合交错揭示(animation-delay),并用滚动触发与悬停状态制造惊喜;空间构图鼓励不对称、重叠、斜向流动、打破网格、大量留白或受控密度;背景与视觉细节要营造氛围与深度,可加入渐变网格、噪点纹理、几何图案、分层透明、戏剧阴影、装饰边框、自定义光标和颗粒叠加等。

明确禁止:使用被过度使用的字体(Inter、Roboto、Arial、系统字体)、陈词滥调配色(尤其白底紫色渐变)、可预测布局与组件模式,以及缺乏语境特征的模板化设计;也要求跨生成避免收敛到常见选择(如 Space Grotesk),不同设计应在明暗主题、字体与审美间变化。

限制与注意:资料未提供安装方式、收费、价格、平台支持或具体使用步骤;技能要求实现复杂度与审美愿景匹配,极繁设计需要更复杂的代码和动效,极简设计则需要克制、精确与对间距、字体和细节的细致把控。