企业官网建设流程全解析

Baseline UI 技能实战：用一套强约束基线清除 AI 生成界面的 UI Slop

【免费下载链接】agentic-awesome-skillsAAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 2,600+ agentic skills. Includes CLI, local MCP, catalog, plugins, and Workbench.项目地址: https://gitcode.com/GitHub_Trending/an/agentic-awesome-skills

本指南以 AAS（agentic-awesome-skills）仓库中的baseline-ui技能为主体，讲解如何通过一套"强约束 UI 基线"快速审查并修复 AI 生成的界面代码——重点覆盖间距（spacing）、层级（hierarchy）、排版（typography）与小型布局问题。读完本文，你将掌握/baseline-ui的两种调用方式、六大类硬性约束（技术栈/组件/交互/动画/排版/布局/性能/设计）的具体判定标准，以及如何输出"违规行 + 影响 + 修复建议"三段式评审结果，让界面清理（deslop）从一个模糊的直觉判断变成可执行、可复现的工程流程。

技能定位：什么是 baseline-ui

baseline-ui是 AAS 仓库中一个面向 Claude 生态的 agentic skill，其元数据定义在 SKILL.md 的文件头（front matter）中：

• name:baseline-ui
• description: 快速"deslop" UI 代码——修复间距、层级、排版和小型布局问题；当界面需要快速清理或打磨（polish pass）时使用
• risk:critical（高风险，意味着应用约束可能改变现有界面行为，需谨慎）
• source_type:community，上游为 ibelick/ui-skills，MIT 许可

在仓库的 catalog.json 中，该技能被索引为一条独立目录记录，其触发词（triggers）包含baseline、ui、quickly、deslop、spacing、hierarchy、typography、layout等，说明 Agent 可以通过这些关键词自动路由到该技能。它在目录中的category目前为uncategorized，也意味着它更像一套跨前端框架的通用审查准则，而非绑定某一业务模块。

一句话概括它的设计意图：对 AI 生成的界面强制施加一套有主见（opinionated）的质量基线，从源头预防"AI 界面泛滥成灾"（AI-generated interface slop）。

什么时候使用

按原文档的定义，满足以下情况即可启用本技能：

• 需要快速清理或打磨 UI 代码（fast cleanup / polish pass）；
• 界面存在明显的间距、层级、排版或小型布局问题；
• 希望在上屏前，让 AI 生成的代码先过一遍统一的质量基线，避免"一眼 AI"的廉价感。

值得注意的是，它与仓库中的另一个 UI 技能 anti-ui-slop 定位互补：anti-ui-slop侧重"从产品本身出发、基于设计系统构建产品专属界面"，强调先看产品 brief 与本地设计系统，再决定是否引入外部证据；而baseline-ui侧重"事后快速修正"，是一套即插即用的约束检查清单。两者可形成"设计时防 slop + 交付前清 slop"的闭环。

两种调用方式与输出协议

原文档定义了两种用法：

• /baseline-ui：将全部约束应用到当前对话中的任何 UI 工作（相当于为整个会话注入基线）；
• /baseline-ui <file>：针对指定文件，逐一对照下文所有约束进行审查，并输出三项内容：
  1. violations（违规项）——引用文件中精确的违规行/代码片段；
  2. why it matters（为什么重要）——一句话说明影响；
  3. a concrete fix（具体修复）——给出代码级的修复建议。

这种"引用原文 → 说明影响 → 给出修复"的三段式输出协议，是让 Agent 的审查结果可被工程师直接落地的关键：它强制 Agent 不得泛泛而谈，必须给出可定位、可修改的具体结论。

原文档给出的典型用户请求示例为：

Review this interface with @baseline-ui, identify the highest-impact design problems, and propose an implementation-ready improvement.

即：让 Agent 找出影响力最大的设计问题，并给出"可直接实现"（implementation-ready）的改进方案——这正是下文约束体系要支撑的产出。

技术栈约束（Stack）

其中cn是几乎所有现代 Tailwind 项目的标配工具函数：clsx负责条件类名的合并，tailwind-merge负责解决 Tailwind 类名冲突（后声明的类覆盖先声明的类）。要求 MUST 使用cn，本质是杜绝"手写字符串拼接类名"导致的样式冲突和不可维护性。

组件约束（Components）

原文档对组件层的要求围绕"无障碍（accessibility）与可访问原语"展开：

• MUST使用无障碍组件原语处理任何涉及键盘或焦点行为的组件（Base UI、React Aria、Radix之一）；
• MUST优先使用项目已有的组件原语（existing component primitives first）；
• NEVER在同一交互面上混用多种原语体系（例如不要在同一弹层里混用 Radix 和 Base UI）；
• SHOULD在兼容现有技术栈的前提下，新原语优先选用Base UI；
• MUST为纯图标按钮（icon-only buttons）添加aria-label；
• NEVER手动重造键盘或焦点行为，除非被明确要求。

这些约束的动机非常清晰：键盘导航、焦点管理和屏幕阅读器语义是 Web 可访问性中最容易出错且最难测试的部分，AI 生成代码在此类问题上失败率极高。与其让 Agent 手写onKeyDown、tabIndex逻辑，不如强制其复用经过测试的组件原语。同理，"不混用原语体系"是为了避免焦点管理在两个体系间断裂。

交互约束（Interaction）

• MUST对破坏性或不可逆操作使用AlertDialog（确认对话框），而非普通弹窗；
• SHOULD加载状态使用结构化骨架屏（structural skeletons）；
• NEVER使用h-screen，改用h-dvh（动态视口高度）；
• MUST对固定定位（fixed）元素尊重safe-area-inset（如 iOS 刘海屏安全区）；
• MUST错误提示显示在操作发生处附近（errors next to where the action happens）；
• NEVER在input或textarea上阻止粘贴（block paste）。

h-screen改用h-dvh是移动端适配的经典陷阱：100vh在移动浏览器地址栏收放时会溢出或留白，100dvh（dynamic viewport height）才是真正"动态视口高度"。这条约束连同safe-area-inset，体现了 baseline 对移动端体验的明确立场。

动画约束（Animation）

动画是 AI 生成界面"过度设计"的重灾区，原文档给出了整套限制：

• NEVER未经明确要求就添加动画；
• MUST只动画合成器属性（compositor props）：transform、opacity；
• NEVER动画布局属性（layout properties）：width、height、top、left、margin、padding；
• SHOULD避免动画绘制属性（paint properties）如background、color，除非是小范围局部 UI（文字、图标）；
• SHOULD入场动画使用ease-out；
• NEVER交互反馈时长超过200ms；
• MUST屏幕外（off-screen）时暂停循环动画；
• SHOULD尊重prefers-reduced-motion（用户系统级"减少动态效果"偏好）；
• NEVER引入自定义缓动曲线，除非被明确要求；
• SHOULD避免动画大图或全屏表面。

这些规则的底层原理是浏览器渲染管线：transform和opacity由合成器（compositor）直接处理，不触发布局（layout）和绘制（paint），因此可以保持在主线程之外流畅运行；而动画width/height等布局属性会引发回流（reflow），动画background等绘制属性会引发重绘（repaint），是卡顿的主要来源。200ms阈值则对应交互反馈的心理学感知区间——超过该时长用户会感觉"迟滞"。

排版约束（Typography）

• MUST标题使用text-balance，正文/段落使用text-pretty；
• MUST数据（数字、表格等）使用tabular-nums（等宽数字，避免跳动）；
• SHOULD密集 UI 使用truncate或line-clamp截断文本；
• NEVER修改letter-spacing（tracking-*），除非被明确要求。

text-balance与text-pretty是 Tailwind CSS 3.4+ 引入的文本换行优化：text-balance让标题各行长度均衡、视觉更整齐；text-pretty优化正文换行点，避免出现孤行（orphans）。tabular-nums对数据密集型界面（表格、仪表盘、价格）至关重要——等宽数字在数值变化时不会导致列宽抖动。

布局约束（Layout）

• MUST使用固定的z-index刻度体系，禁止随意使用任意值z-*（如z-[9999]）；
• SHOULD正方形元素使用size-*工具（Tailwind 3.4+ 的size-*同时设置宽高），替代w-*+h-*组合。

固定 z-index 刻度是大型前端项目的常见规范：将z-10、z-20、z-50（modal）、z-100（toast）等语义化分配，避免各组件各自为政导致层叠混乱。size-*则是对 Tailwind 工具类的简化，减少心智负担与出错概率。

性能约束（Performance）

• NEVER动画大面积的blur()或backdrop-filter（毛玻璃）表面；
• NEVER在非活跃动画期间应用will-change；
• NEVER能用渲染逻辑表达的状态改用useEffect。

这三条都直指运行时性能：blur()/backdrop-filter是 GPU 开销极高的滤镜，大面积动画几乎必然掉帧；will-change会为元素创建独立的合成层，滥用会导致内存暴涨，因此只在动画激活期间使用；useEffect中派生状态会引入额外的渲染往返（render → effect → re-render），能用纯计算（render logic）表达时应直接在渲染期推导。

视觉设计约束（Design）

• NEVER使用渐变，除非被明确要求；
• NEVER使用紫色或多色渐变；
• NEVER将发光效果（glow）作为主要视觉提示（primary affordances）；
• SHOULD使用 Tailwind CSS 默认阴影体系，除非被明确要求；
• MUST空状态（empty states）给出一个清晰的下一步动作（one clear next action）；
• SHOULD每个视图的强调色（accent color）限制为一个；
• SHOULD优先使用既有主题或 Tailwind CSS 颜色 token，而非引入新颜色。

"禁用紫色/多色渐变"与"禁用 glow 做主提示"是对 AI 生成界面的典型审美矫正——这类效果是"一眼 AI"的主要视觉标签。而"空状态必须给一个清晰的下一步动作"则是一条产品原则：空状态不应只是空白占位，而应引导用户继续使用产品。

约束总表：MUST / SHOULD / NEVER 一图流

为便于在评审时快速对照，可将全部约束归纳为三级强度：

在 AAS 的目录模型中，这份约束集合通过 catalog.json 的triggers字段与用户请求语义匹配：当对话中出现"UI 清理、deslop、间距、层级、排版"等信号时，Agent 可自动加载该技能，把上述约束注入当前上下文。

局限性（Limitations）

原文档明确给出三条使用边界，评审与执行时必须遵守：

1. 仅当任务与上游来源及本地项目上下文明确匹配时使用——不要对与 UI 无关的任务套用本技能；
2. 应用变更前，验证命令、生成代码、依赖、凭证及外部服务行为——技能给出的建议是草案，不是免检通行证；
3. 不要将示例视为环境特定测试、安全审查或破坏性/高成本操作的用户审批的替代品——涉及破坏性操作仍需人工批准。

结合其risk: critical的元数据（见 SKILL.md 文件头），本技能在 AAS 中属于"高影响"技能：约束会显著改变界面外观与交互，落地时建议逐项审查、逐步应用，并与项目的现有设计系统（参照 anti-ui-slop 的"先复用仓库语义 token 与交互惯例"原则）保持一致，而不是机械套用。

小结

baseline-ui的价值不在于它给出了多么新奇的界面方案，而在于它把"界面质量"拆解成了 50 余条可判定、可执行的机器约束：从技术栈选型（cn、motion/react）、无障碍原语（Base UI/Radix/React Aria）、交互安全（AlertDialog、h-dvh、不禁粘贴）、动画纪律（仅合成器属性、≤200ms、尊重prefers-reduced-motion）、排版规范（text-balance、tabular-nums）到视觉克制（禁渐变/glow、单一强调色），并通过/baseline-ui <file>的三段式输出协议（违规行 → 影响 → 修复）让每次评审都可直接落地。在 AAS 的技能生态中，它正好与 anti-ui-slop 形成"预防 + 清理"的组合，共同对抗 AI 生成界面的同质化与廉价感。

【免费下载链接】agentic-awesome-skillsAAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 2,600+ agentic skills. Includes CLI, local MCP, catalog, plugins, and Workbench.项目地址: https://gitcode.com/GitHub_Trending/an/agentic-awesome-skills