SuperAPI AI 工具集

frontend-design

前端与建站

查看项目

更新于 10-16 05:50

技能介绍

用途:在用户要求构建组件、页面或应用界面时,提供一套前端设计思路并落地为可运行代码,强调独特美学与生产级质量,避免千篇一律的 AI 生成风格。

主要能力:先做设计思考——明确界面解决的问题与使用者,选定鲜明的审美方向(如极简、极繁、复古未来、有机自然、奢华精致、编辑杂志、粗野主义、艺术装饰、工业实用等),考虑框架、性能、无障碍等约束,并找出让人记住的差异化点。随后实现可运行代码(HTML/CSS/JS、React、Vue 等),要求功能可用、视觉醒目、风格统一、细节精炼。

美学准则:字体选用美观独特、有个性的字体,避免 Arial、Inter 等通用字体,常见做法是独特展示字体搭配精致正文字体;用 CSS 变量保持配色与主题一致,主色加锐利点缀优于平均分布;动效用于效果与微交互,HTML 优先纯 CSS,React 可用 Motion 库,重视一次精心编排的加载错峰呈现与滚动、悬停惊喜;空间构图可不对称、重叠、对角流动、打破网格,负空间与密度皆可;背景与视觉细节追求氛围与层次,可用渐变网格、噪点纹理、几何图案、层叠透明、戏剧阴影、装饰边框、自定义光标与颗粒叠加。明确避免滥用字体、俗套配色(尤其白底紫渐变)、可预测布局和缺乏语境个性的模板化设计。实现复杂度需匹配美学愿景:极繁需要丰富动画与特效,极简则需要克制、精确与对间距、排版的细致处理。

交互细节:在前端代码中,始终为按钮、可点击卡片、链接、图标、开关、复选框、下拉菜单及任何带 onClick 的元素添加 cursor: pointer,确保交互元素有可点击感。

适用场景:设计并实现网页组件、页面或应用界面,尤其是希望视觉有辨识度、避免通用 AI 审美的场景。

限制:资料未提供安装命令、价格、平台或具体依赖说明,暂未提供。