使用 Baseline UI 防止 AI 生成低质量的 Tailwind CSS 界面

解决 AI 生成界面时常见的“随意性”问题：通过预设一套关于可访问性、动画性能、排版和布局的硬性约束，强制 AI 输出符合工业级标准的 Tailwind CSS 代码。

为什么需要这个技能

AI 在编写前端 UI 时经常会出现一些“坏习惯”，例如：随意使用 h-screen 导致移动端布局崩溃、使用性能低下的属性做动画、忽略 aria-label 等可访问性细节，或者生成过于花哨但缺乏一致性的渐变色。

Baseline UI 就像是一本 AI 专用的“前端代码审查手册”。它不再让 AI 根据概率随机猜测样式，而是强制其遵循一套经过验证的 UI 规范（如使用 h-dvh 代替 h-screen，仅动画化合成属性等），确保生成的界面在性能、交互和视觉上都达到生产级要求。

适用场景

• 构建 Tailwind UI 组件：当你需要 AI 编写新的 React/Vue 组件，且希望代码直接符合公司设计规范时。
• CSS 代码审计：将现有的 UI 文件交给 AI，检查其中是否存在布局反模式或性能隐患。
• 前端质量把控：防止 AI 生成过于泛泛的、缺乏细节的“AI 风格”界面（Interface Slop）。

核心工作流

该技能通过指令驱动，主要分为两种使用模式：

1. 全局约束模式：输入 /baseline-ui。 AI 将在接下来的所有对话中将此基线规范作为最高优先级，所有生成的 UI 代码必须符合上述约束。

2. 单文件审计模式：输入 /baseline-ui <file>。 AI 会对指定文件进行全量扫描，并输出以下结构化结果：

   • 违规项 (Violations)：直接引用代码片段。
   • 原因 (Why it matters)：用一句话说明该问题对性能或用户体验的影响。
   • 修复方案 (Concrete fix)：提供具体的代码级优化建议。

关键约束要点

• 动画性能：严禁动画化 width 或 height，必须使用 transform 和 opacity；交互反馈不得超过 200ms。
• 布局规范：强制使用 h-dvh 适配动态视口，使用 size-* 简化正方形元素定义。
• 可访问性：仅图标按钮必须携带 aria-label，破坏性操作必须使用 AlertDialog。
• 排版细节：标题强制使用 text-balance，正文使用 text-pretty。

下载和安装

下载 baseline-ui 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要

暂无推荐