跳转到使用指南
baseline-ui作者 Julien Thibeaut

Baseline UI Skill.

一个用于设计审查的 Claude Code 和 Codex skill,通过修复间距、层次、排版和小型布局问题快速优化 UI 代码。

  • Design Review & Accessibility
  • UI 代码
ibelick/ui-skills · skills/baseline-ui/SKILL.mdSKILL.md
--- name: baseline-ui description: Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass. --- ## How to use ## Stack ## Components ## Interaction ## Animation ## Typography
前言和章节标题读取自上游文件,时间 2026-09-14 · 完整内容 3,417 字符

01 功能说明

baseline-ui Skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物,均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

Baseline UI 是一个审查类 skill,通过强制执行一套明确的 UI 基线来阻止代码库中出现 AI 生成的界面粗糙感。它面向使用 React primitive 的 Tailwind CSS 项目,可作为对话中所有 UI 工作的常驻约束安装,也可作为文件级审查流程使用。

它的独特之处在于词汇的精确性:它明确指出应使用或避免的具体 utility 与 prop,从用 h-dvh 替代 h-screen、为标题使用 text-balance,到仅使用合成器动画且时长上限为 200ms、禁止使用任意 z-index 值。当界面需要快速清理或打磨时,可使用它。

它产出什么

  • 用一句话解释每条违规为何重要。
  • 针对每项发现给出具体到代码层面的修复方案。
查看示例提示词 ↗

工作方式

  1. 01
    将其作为整段对话的约束集来调用

    直接运行该命令,会将此文件中的所有约束应用于该对话中进行的所有 UI 工作,而不仅是某一个文件。

  2. 02
    或将其指向单个文件

    传入一个文件目标会将 skill 切换为审查模式,用下方列出的所有约束对该文件进行检查。

  3. 03
    返回一份分三部分的违规报告

    每项发现都会引用违规代码片段,用一句简短的话说明其重要性,并给出代码层面的修复方案。

  4. 04
    按顺序逐一处理各约束组

    该文件将规则组织为 Stack、Components、Interaction、Animation、Typography、Layout、Performance 和 Design,每组内混合了 MUST、SHOULD 和 NEVER 条目。

02 找到适合场景

何时使用 baseline-ui Skill

在 Claude Code 或 Codex 中使用 baseline-ui skill 进行此类设计审查工作。适用范围和限制取自 skill 自身文件。

适合场景

  • 对已偏离一致基线的界面进行快速清理或打磨。
  • 审查某个特定文件的间距、层级、字体和小的布局问题。

了解边界

  • 依赖渐变、自定义缓动曲线或自定义字间距的设计工作,这些都需要明确请求才能启用。
  • 手工实现键盘或焦点行为,除非明确要求,否则不允许这样做。

需要提供的信息

  • 要审查的文件可选。指定文件后,skill 会切换为审查模式,只报告该文件的违规情况。

03 Skill 内部

baseline-ui Skill 为 Claude Code 和 Codex 设定的规则

SKILL.md 为 Agent 设定的 8 条具体指令、默认值与限制——文件中真正改变结果的部分。

  1. 保持 Tailwind CSS 默认值

    只有当自定义值已存在于项目中,或曾被明确要求时才可接受;否则 Agent 必须使用 Tailwind 的默认值。

  2. 未经要求不得添加动画

    动画默认关闭。当明确要求时,只能对合成属性做动画,绝不能对 width、height、top、left、margin 或 padding 做动画。

  3. 将交互反馈时长上限设为 200ms

    入场动画应使用 ease-out,循环动画在离屏时必须暂停,并应遵循 prefers-reduced-motion。

  4. 绝不要混用原语系统

    任何涉及键盘或焦点行为的内容都需要来自 Base UI、React Aria 或 Radix 的无障碍原语,优先使用项目已有的原语,除非明确要求,禁止手工重建键盘或焦点行为。

  5. 使用 h-dvh,绝不使用 h-screen

    交互部分还要求固定元素遵循 safe-area-inset,错误提示要显示在操作发生的位置旁边。

  6. 使用固定的 z-index 层级

    不允许使用任意的 z- 值,正方形元素应使用 size- 而不是成对的 w- 和 h- 工具类。

  7. 保持排版工具类的字面用法

    标题使用 text-balance,正文使用 text-pretty,数据使用 tabular-nums,除非明确要求,否则不得改动 letter-spacing。

  8. 默认不使用渐变或发光效果

    渐变需要明确要求才能使用,紫色和多色渐变一律排除,发光效果不能作为主要的可操作提示。

04 投入使用

在 Claude Code 或 Codex 中安装 baseline-ui

一条 npx skills add 命令,然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 baseline-ui 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行;安装程序会询问要把它添加到哪个 Agent。

Terminal
npx skills add https://github.com/ibelick/ui-skills --skill baseline-ui

针对 skills/baseline-ui/SKILL.md 的通用 skills CLI 形式;仓库可能会记录其自己的路径。

为 Skill 提供第一个设计审查任务

按 skill 自身的术语撰写;把括号中的部分换成你的内容。

Starter prompt
Review [src/components/SettingsDialog.tsx] against the baseline UI constraints. We generated this dialog quickly and the spacing, hierarchy and layout feel off, so report the violations with the exact lines, why they matter, and the code-level fix for each.

来源:依据 SKILL.md,按 skill 自身的术语撰写。

检查首次结果

SKILL.md 本身如何描述正确的结果:

  • 确认没有在 transform 和 opacity 之外的属性上做动画。
  • 确认仅含图标的按钮带有 aria-label,破坏性操作放在 AlertDialog 之后。

在 OpenDesign 中通过其 SKILL.md 链接导入 baseline-ui:Plugins → Add → Skill → Import from link,然后在顶部栏中选择它。

05 开源、可追溯

来源、许可与验证

本页面事实的来源,以及最后检查时间。

Repository
github.com/ibelick/ui-skills Branch main
Skill 文件
skills/baseline-ui/SKILL.md 验证时记录的内容校验和;commit 79081ab
License
MIT 来自 LICENSE。
仓库星标数
8,402 GitHub 快照拍摄于 2026-09-14,针对整个 ibelick/ui-skills 代码库,该库在此目录中包含 5 个 skills。不是 baseline-ui 的评分或使用计数。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序(检查日期 2026-08-28);本页面未记录实际运行。

SKILL.md 内部

  1. 使用方法两种调用模式:裸命令应用约束,文件参数触发违规报告。
  2. 技术栈Tailwind CSS 默认值、用于 JS 动画的 motion/react、tw-animate-css,以及 cn 工具函数。
  3. 组件仅使用无障碍基础组件,优先使用项目已有的基础组件,仅含图标的按钮要带 aria-label。
  4. 交互破坏性操作使用 AlertDialog,加载时使用骨架屏,使用 h-dvh、safe-area-inset,不阻止粘贴。
  5. 动画除非要求,否则不使用动画;仅使用合成器属性,ease-out,时长上限 200ms,遵循 reduced-motion。
  6. 排版标题使用 text-balance,正文使用 text-pretty,数据使用 tabular-nums,不改动字间距。
  7. 布局使用固定的 z-index 层级而非任意值,正方形元素使用 size-*。
  8. 性能避免大范围的模糊或 backdrop-filter 动画,限定 will-change 的作用范围,优先使用渲染逻辑而非 useEffect。
  9. 设计不使用渐变或发光提示,使用默认阴影层级,只用一种主色,复用已有的 token。
Skill 自身的描述
"通过修复间距、层级、排版和小型布局问题快速清理 UI 代码。适用于界面需要快速清理或优化的场景。"

来自 SKILL.md 的前置描述。完整文件约 3,417 字符。在 GitHub 上阅读完整文件。

06 安装之前

关于 baseline-ui Skill 的常见问题

以下回答来自 2026-09-14 读取到的 SKILL.md,而非某次实际运行的记录。

它假设使用什么技术栈?

Tailwind CSS 默认值;需要 JavaScript 动画时使用 motion/react(原 framer-motion);入场和微动画使用 tw-animate-css;以及基于 clsx 和 tailwind-merge 构建的 cn 工具函数。

它会为了让效果更好看而添加动画或渐变吗?

不会。除非明确要求,绝不添加动画;除非明确要求,也不使用渐变。紫色和多色渐变一律排除在外。

它允许使用哪些组件库?

对于任何具有键盘或焦点行为的内容,使用 Base UI、React Aria 或 Radix,并优先采用项目现有的 primitives。若与技术栈兼容,Base UI 是新 primitives 的推荐选择,且在同一交互界面中混用不同的 primitive 体系是不允许的。

Baseline UI

在真实设计审查任务中运行 baseline-ui。

下载 OpenDesign,从 SKILL.md 链接导入 baseline-ui,粘贴上述提示词,在查看结果前先阅读计划。

终端
npx skills add https://github.com/ibelick/ui-skills --skill baseline-ui

OpenDesign 桌面客户端

一套设计系统,让每一次创作都保持品牌一致

在完整的 Vibe Design Workspace 中,用同一套品牌规则生成网页、PPT、可交互原型、数据看板、图像与 HTML 视频。连接本地 Codex、Claude Code、Cursor 等编程助手,即可免费创作。

  • 覆盖网页、PPT、原型、数据看板、图像与视频
  • 140+ 设计系统,以及完整模板与技能库
  • 连接本地 Codex 与 21+ 款编程助手 · 免费使用
免费下载

支持 macOS 与 Windows