SuperAPI AI 工具集

frontend-ui-ux

前端与建站

查看项目

更新于 10-15 20:13

技能介绍

用途:该技能将角色设定为“由设计师转型的开发者”,目标是在没有设计稿(mockup)的情况下,构思并实现视觉惊艳、富有情感吸引力的界面,同时保持代码质量。

主要能力与原则:强调像素级细节、流畅动画与直观交互;工作原则包括只完成被要求的任务、不扩大范围、改动后保持项目可运行、动手前先研究现有模式与提交历史(git log)、与既有代码风格无缝融合、逐步说明并透明汇报成功与失败。

设计流程:编码前先确定大胆的美学方向,包括目的(解决什么问题、谁使用)、基调(如极简、极繁、复古未来、自然、奢华、玩具感、杂志编辑、粗野主义、装饰艺术、柔和粉彩、工业实用等)、约束(框架、性能、无障碍)与差异化(最令人记住的一点)。随后用 HTML/CSS/JS、React、Vue、Angular 等实现可运行、生产级、视觉突出且风格统一的代码。

美学指南:排版上避免 Arial、Inter、Roboto、系统字体、Space Grotesk,主张特色展示字体搭配精致正文字体;配色坚持统一色板并使用 CSS 变量,避免白底紫色渐变;动效聚焦高冲击时刻,如带错落延迟的页面加载,优先纯 CSS,React 可用 Motion 库;空间构图鼓励非对称、重叠、对角流动、打破网格;视觉细节可用渐变网格、噪点纹理、几何图案、分层透明、戏剧阴影、装饰边框、自定义光标等。

反模式:通用字体、陈词滥调配色、可预测布局、缺乏语境特色的模板化设计、跨生成趋同。

限制:资料未提供具体安装命令、收费、平台支持或版本信息,暂未提供。