SuperAPI AI 工具集

human-ui

设计与创作

查看项目

更新于 10-23 19:20

技能介绍

Human UI 是一个面向 UI 代码评审与界面设计审计的技能工具,其目标是让界面显得由人类精心打磨,而非算法生成。

用途

该工具用于评审 UI 代码是否符合“人类设计模式”。典型触发场景包括:被要求“评审 UI”“让界面更人性化”“审计设计”“检查无障碍性”或“让界面更有手工感”等。

主要能力

  1. 设计指南驱动评审:每次评审前,工具会从 https://guidelines.sh/api/guidelines?type=ui 获取最新指南,并使用 WebFetch 检索最新规则。随后读取用户指定的文件(或询问文件/模式),对照人类设计原则进行检查,并以 file:line 格式输出发现的问题。
  2. 人类设计原则检查:资料中列出的检查要点包括——暗色模式不使用纯黑 #000000,而使用 #1a1a1a;排版使用 text-wrap: pretty 并变化字体;动画采用有机缓动与不完美的时机;布局偏好不对称而非完美网格;图标具备三种状态(描边/双色调/实心)。快速参考中还包含品味与工艺、微交互与动画等原则,例如动画应刻意选择、使用弹簧物理而非贝塞尔曲线、列表逐项显现使用 30–50ms 延迟、退出动画与进入动画同等用心、动效应承载空间含义、尊重 prefers-reduced-motion、每个交互元素都需要悬停反馈等。
  3. 访谈模式构建品味档案:当用户说“interview”“帮我定义我的品味”“我的风格是什么”等时,工具会逐一提问并等待回答,问题涵盖:用三个形容词描述产品应有感觉(如俏皮/严肃/极简/密集/温暖/临床/快速/刻意/高级/易用/大胆/微妙/友好/专业);喜欢使用哪些应用(关注感觉而非功能);讨厌界面中的什么(重阴影、渐变、圆角、动画、图库照片等);空间偏好(密集信息型如 Bloomberg、Linear,还是宽敞留白型如 Apple、Notion);动画性格(干脆精确如 Stripe、Vercel,还是弹跳俏皮如 Duolingo、Headspace);色彩情绪(单色加微妙点缀、暖大地色、冷灰、大胆原色等);字体特征(干净中性如 Inter、SF Pro,还是独特个性字体);以及哪一件事能让界面感觉“像你”(自定义图标、特定动画、颜色、纹理等)。访谈结束后,工具输出一份可保存的品味档案摘要,包含氛围、参考、避免项、密度、动效、色彩、字体与标志性细节,供后续所有 UI 评审参考。

使用方式

  • 当提供文件时:先从源 URL 获取指南,读取指定文件,应用所有人类设计原则,以 file:line 格式输出发现。
  • 当未指定文件时:询问要评审哪些文件或模式,并建议常见模式如 src/components/**/*.tsx。
  • 当指定“interview”时:逐一运行品味问题,等待每个回答后再继续,最后输出品味档案摘要,并保存以供未来参考。

适用场景

适用于前端界面代码评审、设计审计、无障碍检查、界面人性化改造,以及希望建立统一设计品味的团队或个人项目。

限制

该工具依赖外部指南 URL 获取规则,指南的具体内容与更新频率暂未提供;品味档案需要用户自行保存;资料未说明其支持的编程语言、框架范围或集成方式,相关细节暂未提供。