SuperAPI AI 工具集

another-frontend-design

前端与建站

查看项目

更新于 10-16 06:14

技能介绍

用途:当用户要求构建 Web 组件、页面、应用或界面时,该技能引导生成具有鲜明设计感、可直接投入生产的前端实现,避免千篇一律的“AI 生成”外观。

主要能力:在编码前先做设计思考,明确界面要解决的问题与使用者、选择一种极端而清晰的美学基调(如极简、极繁、复古未来、自然有机、奢华精致、玩具感、杂志编辑风、粗野主义、装饰几何、柔和粉彩、工业实用等)、考虑框架与性能、无障碍等技术约束,并确定让人记住的差异化点。随后用 HTML/CSS/JS、React、Vue 等实现可运行代码,要求功能完整、视觉突出、风格统一、细节精炼。

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

使用方式:用户提供前端需求(组件、页面、应用或界面)及可能的用途、受众、技术约束,技能据此先定方向再写代码。

限制与注意:明确禁止使用过度常见的字体、俗套配色(如白底紫色渐变)、可预测布局与模板化设计;不同生成之间应变化明暗主题、字体与美学,避免收敛到相同选择;实现复杂度需匹配美学愿景,极繁需丰富动画与效果,极简需克制与精准。资料未提供具体安装命令、收费方式或平台支持信息。