SuperAPI AI 工具集

frontend-desing

前端与建站

查看项目

更新于 10-15 23:46

技能介绍

用途:在构建或改进 Web UI 时,引导产出具有清晰美学方向和可上线实现的前端界面,避免通用、重复、看起来像 AI 生成的界面。

主要能力:

  1. 编码前先设计:明确界面用途与目标用户,选择大胆清晰的美学方向,显式说明假设;需求不清时请求澄清。若存在多种设计方向,简要给出 2–3 个选项,不随意选择且不作解释,也不在缺乏视觉方向时开始编码。
  2. 坚持一种美学方向:可参考极简/精炼、粗野/原始、编辑/杂志、奢华/高端、俏皮/玩具感、复古未来、工业/实用、有机/自然、极繁/表现等方向,从中择一并贯彻,避免混用冲突风格。
  3. 生产级实现:输出可为 HTML/CSS/JS、React、Vue 等的完整可运行代码,结构清晰,无伪代码或占位符,避免不完整片段与非功能性 UI。
  4. 视觉原则:排版避免默认字体,使用有表现力的字体搭配;用变量定义统一配色,偏强对比与层次,避免通用渐变与低对比配色;有意图地使用间距,考虑非对称、重叠与分层,必要时打破网格;用动画服务于页面加载、悬停与滚动等关键时刻,优先 CSS 动画;通过纹理、阴影、边框、背景处理增加深度,避免扁平呆板。

使用方式:在请求中说明要构建或改进的界面,例如“为 AI 初创公司创建落地页”。技能会先定义受众与方向,再确定排版、配色与布局,最后实现完整页面、样式化组件与交互,并确保不呈现通用 SaaS 外观。输出结构包含简短设计概念(1–3 句)和完整实现代码。

限制:资料未提供具体安装命令、收费方式与平台支持信息;其效果依赖对美学方向的判断与代码实现,不保证特定业务结果。