SuperAPI AI 工具集

baseline-ui

通用与其它

查看项目

更新于 10-15 23:24

技能介绍

用途:Baseline UI 为 Tailwind CSS 项目提供一套有主见的 UI 基线约束,目标是防止 AI 生成的界面出现“界面垃圾”(UI slop)。它既可作为对话中的约束规则,也可用于审查具体文件。

主要能力:覆盖技术栈、组件、交互、动画、排版、布局、性能与设计多个维度。技术栈要求默认使用 Tailwind CSS 默认值,JS 动画用 motion/react,入场与微动画用 tw-animate-css,类逻辑用 cn(clsx + tailwind-merge)。组件要求键盘/焦点行为使用可访问原语(Base UI、React Aria、Radix),优先复用项目已有原语,同一交互面不混用原语系统,图标按钮必须加 aria-label。交互要求破坏性操作使用 AlertDialog,加载用结构骨架,禁用 h-screen 改用 h-dvh,固定元素尊重 safe-area-inset,错误就近展示,禁止阻止粘贴。动画要求非明确要求不加动画,只动画 transform 与 opacity,交互反馈不超过 200ms,离屏暂停循环动画,尊重 prefers-reduced-motion。排版要求标题用 text-balance、正文用 text-pretty、数据用 tabular-nums。布局要求固定 z-index 层级,方形元素用 size-*。性能要求不动画大 blur/backdrop-filter,不在动画外使用 will-change。设计要求非明确要求不用渐变,不用紫色或多色渐变,空状态给出一个明确下一步动作。

使用方式:在对话中输入 /baseline-ui 将约束应用到本次会话的所有 UI 工作;输入 /baseline-ui <file> 则按全部约束审查该文件,输出违规处(引用具体行/片段)、原因(一句话)和具体修复建议(代码级)。

适用场景:Tailwind CSS 项目的 UI 开发与代码审查,尤其适合约束 AI 生成界面的一致性。

限制:资料未提供安装命令、收费、价格、平台支持与效果数据,暂未提供。