baseline-ui

baseline-ui 概览

baseline-ui 的作用

baseline-ui skill 可以帮助你在 Tailwind CSS 项目中，围绕一个带有明确风格倾向的 baseline 来审查或生成 UI 工作。它适用于你不希望 AI 输出继续偏离到间距不一致、可访问性薄弱，或者不必要的动画效果上的场景。如果你在判断是否要安装 baseline-ui，那么它的核心价值不是“更多 UI 点子”，而是更收紧的 UI 决策。

适合谁使用

baseline-ui 最适合开发者、用代码做设计的设计师，以及需要一个实用组件输出基线的 AI 辅助构建者。它尤其适合 React/Tailwind 技术栈，并且当你希望 baseline-ui skill 在问题进入评审前就先把关时，它会很有用。如果你的团队已经有严格的 design tokens 和 component primitives，这个 skill 可以强化它们，而不是替代它们。

它最擅长什么

baseline-ui 指南聚焦动画限制、排版纪律、可访问性基础能力，以及避免布局反模式。这使它非常适合 UI Design 任务，目标是稳定一致地实现，而不只是追求视觉精致度。当 prompt 比较模糊、而你又希望模型默认做出更安全的选择时，这个 skill 最有价值。

如何使用 baseline-ui skill

安装并调用 baseline-ui

要安装 baseline-ui，请使用仓库提供的 skill 安装流程：npx skills add ibelick/ui-skills --skill baseline-ui。在实际使用中，baseline-ui skill 通常通过引用 /baseline-ui 或 /baseline-ui <file> 来对某次对话或某个文件发起调用。如果你是把 baseline-ui 用在 UI Design 评审上，请确保目标文件或请求里包含真实的组件、路由或布局上下文。

给 skill 正确的输入形状

当你一开始就提供目标组件、框架和约束级别时，baseline-ui 的效果最好。弱一点的 prompt 会说“把这个卡片做得更好”。更强的 prompt 会说“审查这个 React/Tailwind 卡片的间距、motion、键盘行为，以及只用图标按钮的可访问性，并保持现有 primitives 不变”。第二种写法更有利于 baseline-ui usage，因为它给了模型明确的失败模式去检查。

先读这些文件

先从 SKILL.md 开始，然后检查仓库里任何定义项目技术栈或组件规则的文件。在这个仓库中，没有额外的 rules/、resources/ 或 scripts/ 文件夹，所以 SKILL.md 是主要事实来源。如果周边项目有自己的 primitives 或 tokens，在让 baseline-ui 修改输出之前，先读这些内容。

能提升结果的工作流

把 baseline-ui 当作审查关卡，而不只是一个生成快捷方式。先让模型生成 UI，再让 baseline-ui 按 skill 规则审计它，最后只修正被标出来的部分。这个流程在你想要简洁、代码级修复，而不是大范围重设计时尤其有效。baseline-ui skill 的优势在于任务足够具体，能够暴露真实违规点。

baseline-ui skill 常见问题

baseline-ui 只适用于 Tailwind CSS 吗？

不是。Tailwind CSS 是最主要的适配场景，但这个 skill 本质上是在围绕间距、motion、primitives 和可访问性来执行 UI 约束。如果你的技术栈不用 Tailwind，某些 stack 规则的相关性会降低，不过审查逻辑仍然能提供帮助。若想获得最佳的 baseline-ui install 价值，建议在 Tailwind-first 项目中使用它。

它和普通 prompt 有什么不同？

普通 prompt 可能只会要求“干净的 UI”，但这太开放了。baseline-ui 给你的是一个可重复的基线，用来检查动画、排版、primitives 和反模式，这样模型就不太容易凭空发明出不一致的模式。相比临时起意式 prompting，这让 baseline-ui 指南在团队工作流里更可靠。

baseline-ui 适合新手吗？

可以，只要你已经知道要处理的是哪个文件或哪个 UI 表面。新手在提供具体组件，并要求列出违规点和修复方案时，通常能获得最大价值。如果你还在决定架构，baseline-ui 可能更像一个约束检查器，而不是教学工具。

什么时候不该用它？

当你想要高度实验性的 motion、Tailwind 默认之外的自定义 design system，或者完整的视觉品牌重塑时，不要使用 baseline-ui。它是一个 baseline enforcement skill，而不是自由发挥的 branding assistant。如果项目是有意打破常见 UI 规范，baseline-ui 可能会给出过于严格的反馈。

如何改进 baseline-ui skill

明确说明 UI 表面

最强的 baseline-ui 结果来自于直接点名具体组件、状态和交互表面。要说明你是在审查 modal、nav menu、form row，还是 empty state。这样 baseline-ui skill 才能把注意力放在键盘行为、焦点处理、motion 和组件选择上，而不是猜产品形态。

说明哪些内容必须保持不变

如果你的项目已经在使用某套 component primitive system，就明确说明。baseline-ui 的设计目标就是优先使用现有 primitives，并避免在同一个表面混用不同系统。还要说明 Tailwind defaults、animation libraries 或现有 class helpers 是否必须保留，因为这些约束会实质影响建议的修复方式。

要求证据和修复方案

对于审查类任务，建议你要求给出精确的违规片段、简短原因，以及代码级修正。这个格式与 baseline-ui 的预期用法一致，也让输出更容易直接用于 code review。如果第一次结果太宽泛，就把 prompt 收窄到一个文件或一个交互，再用相同 baseline 加上你想修正的具体失败点重新运行 baseline-ui。