SuperAPI AI 工具集

frontend-design

前端与建站

查看项目

更新于 10-15 22:41

技能介绍

用途:当用户需要构建 Web 组件、页面或应用时,该技能引导创建独特、生产级且设计精良的前端界面,避免通用的“AI 味”审美,并落地为可运行的真实代码。

主要能力:先做设计思考,明确界面要解决的问题与用户,选定一个鲜明甚至极端的美学方向(如极简、繁复、复古未来、奢华、编辑杂志、粗野主义等),考虑框架、性能、无障碍等技术约束,并确定差异化记忆点。随后用 HTML/CSS/JS、React、Vue 等实现功能性、视觉突出、风格统一且细节精致的代码。

美学要点:排版上选择独特美观、有个性的字体,避免 Arial、Inter 等通用字体,可搭配展示字体与正文衬线字体;用 CSS 变量统一色彩主题;用动画和微交互制造高冲击时刻,HTML 优先纯 CSS,React 可用 Motion 库;布局强调不对称、叠压、对角线、打破网格与留白或密度控制;背景用渐变网格、噪点、几何图案、层叠透明、阴影、边框、自定义光标等营造氛围。

安全边界:若已有设计系统或品牌语言,不得忽视;不得为视觉新奇牺牲无障碍、响应式或可维护性;未经必要且项目可接受,不添加外部资源、字体或库;不覆盖请求范围之外的无关注 UI 行为或全局样式。

限制与说明:该资料未提供具体安装命令、收费方式、平台要求或量化效果,暂未提供相关信息。实现复杂度需匹配美学设想,繁复风格需要大量动画与效果代码,极简风格则需要克制与精准。