SuperAPI AI 工具集

frontend-design

前端与建站

查看项目

更新于 10-13 16:27

技能介绍

该技能用于指导创建风格鲜明、达到生产级品质的前端界面,避免通用的“AI 感”设计美学,并落地可运行的代码,同时极度重视美学细节与创意选择。

用途:当用户提出构建 Web 组件、页面、应用程序或界面的需求时使用。用户会提供前端需求,可能附带关于用途、受众或技术约束的背景信息。

主要能力:技能提供一套设计思考流程与前端美学指南。设计思考包括:明确该界面解决什么问题、由谁使用;选定一个大胆的美学基调,例如极简、极繁混乱、复古未来、有机自然、奢华精致、玩乐玩具感、杂志编辑风、粗野原始、几何装饰、柔和粉彩、工业实用等;考虑技术约束(框架、性能、无障碍);思考差异化,即什么让界面令人难忘。技能强调要选择清晰的概念方向并精准执行,极繁与极简皆可,关键在于有意图而非强度。

使用方式:技能会输出真实可用的代码(HTML/CSS/JS、React、Vue 等),要求具备生产级且可运行、视觉醒目且令人难忘、具备清晰统一的美学观点,并在每个细节上精雕细琢。美学指南覆盖多个维度:字体排版上,选择美丽、独特、有趣的字体,避免 Arial、Inter 等通用字体,可用一款有辨识度的展示字体搭配一款精致正文字体;色彩与主题上,坚持统一美学,使用 CSS 变量保持一致性,以主色配尖锐点缀色优于平均分布;动效上,为效果与微交互加入动画,HTML 优先纯 CSS 方案,React 可用时使用 Motion 库,重视高冲击时刻,如一次编排良好的页面加载配合交错揭示,并使用滚动触发与惊喜的悬停状态;空间构图上,采用非预期布局、不对称、重叠、对角流动、打破网格的元素、大量留白或受控的密集;背景与视觉细节上,营造氛围与深度,而非默认纯色,加入与整体美学匹配的语境效果与纹理,如渐变网格、噪点纹理、几何图案、分层透明、戏剧化阴影、装饰边框、自定义光标与颗粒叠加。

适用场景:需要构建具有设计品质与个性化美学的前端组件、页面或应用的场景。

限制:技能明确禁止使用泛滥字体(Inter、Roboto、Arial、系统字体)、陈词滥调的配色(尤其白底紫色渐变)、可预测的布局与组件模式,以及缺乏语境特征的千篇一律设计。同时要求不得在不同生成中收敛于常见选择(例如 Space Grotesk)。技能还提示实现复杂度需与美学愿景匹配:极繁设计需要大量动画与效果的精细代码,极简或精致设计则需要克制、精准以及对间距、字体与细节的用心。关于是否收费、价格、具体平台支持范围等信息暂未提供。