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本指南以 AASagentic-awesome-skills仓库中的baseline-ui技能为主体讲解如何通过一套强约束 UI 基线快速审查并修复 AI 生成的界面代码——重点覆盖间距spacing、层级hierarchy、排版typography与小型布局问题。读完本文你将掌握/baseline-ui的两种调用方式、六大类硬性约束技术栈/组件/交互/动画/排版/布局/性能/设计的具体判定标准以及如何输出违规行 影响 修复建议三段式评审结果让界面清理deslop从一个模糊的直觉判断变成可执行、可复现的工程流程。技能定位什么是 baseline-uibaseline-ui是 AAS 仓库中一个面向 Claude 生态的 agentic skill其元数据定义在 SKILL.md 的文件头front matter中name:baseline-uidescription: 快速deslop UI 代码——修复间距、层级、排版和小型布局问题当界面需要快速清理或打磨polish pass时使用risk:critical高风险意味着应用约束可能改变现有界面行为需谨慎source_type:community上游为 ibelick/ui-skillsMIT 许可在仓库的 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针对指定文件逐一对照下文所有约束进行审查并输出三项内容violations违规项——引用文件中精确的违规行/代码片段why it matters为什么重要——一句话说明影响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约束级别说明使用 Tailwind CSS 默认值MUST除非项目已有自定义值或用户明确要求否则不得另造样式值JavaScript 动画使用motion/reactMUST即原framer-motion的新名入场/微动画优先用tw-animate-cssSHOULDTailwind CSS 生态下的动画方案类名逻辑使用cn工具MUST即clsxtailwind-merge组合其中cn是几乎所有现代 Tailwind 项目的标配工具函数clsx负责条件类名的合并tailwind-merge负责解决 Tailwind 类名冲突后声明的类覆盖先声明的类。要求 MUST 使用cn本质是杜绝手写字符串拼接类名导致的样式冲突和不可维护性。组件约束Components原文档对组件层的要求围绕无障碍accessibility与可访问原语展开MUST使用无障碍组件原语处理任何涉及键盘或焦点行为的组件Base UI、React Aria、Radix之一MUST优先使用项目已有的组件原语existing component primitives firstNEVER在同一交互面上混用多种原语体系例如不要在同一弹层里混用 Radix 和 Base UISHOULD在兼容现有技术栈的前提下新原语优先选用Base UIMUST为纯图标按钮icon-only buttons添加aria-labelNEVER手动重造键盘或焦点行为除非被明确要求。这些约束的动机非常清晰键盘导航、焦点管理和屏幕阅读器语义是 Web 可访问性中最容易出错且最难测试的部分AI 生成代码在此类问题上失败率极高。与其让 Agent 手写onKeyDown、tabIndex逻辑不如强制其复用经过测试的组件原语。同理不混用原语体系是为了避免焦点管理在两个体系间断裂。交互约束InteractionMUST对破坏性或不可逆操作使用AlertDialog确认对话框而非普通弹窗SHOULD加载状态使用结构化骨架屏structural skeletonsNEVER使用h-screen改用h-dvh动态视口高度MUST对固定定位fixed元素尊重safe-area-inset如 iOS 刘海屏安全区MUST错误提示显示在操作发生处附近errors next to where the action happensNEVER在input或textarea上阻止粘贴block paste。h-screen改用h-dvh是移动端适配的经典陷阱100vh在移动浏览器地址栏收放时会溢出或留白100dvhdynamic viewport height才是真正动态视口高度。这条约束连同safe-area-inset体现了 baseline 对移动端体验的明确立场。动画约束Animation动画是 AI 生成界面过度设计的重灾区原文档给出了整套限制NEVER未经明确要求就添加动画MUST只动画合成器属性compositor propstransform、opacityNEVER动画布局属性layout propertieswidth、height、top、left、margin、paddingSHOULD避免动画绘制属性paint properties如background、color除非是小范围局部 UI文字、图标SHOULD入场动画使用ease-outNEVER交互反馈时长超过200msMUST屏幕外off-screen时暂停循环动画SHOULD尊重prefers-reduced-motion用户系统级减少动态效果偏好NEVER引入自定义缓动曲线除非被明确要求SHOULD避免动画大图或全屏表面。这些规则的底层原理是浏览器渲染管线transform和opacity由合成器compositor直接处理不触发布局layout和绘制paint因此可以保持在主线程之外流畅运行而动画width/height等布局属性会引发回流reflow动画background等绘制属性会引发重绘repaint是卡顿的主要来源。200ms阈值则对应交互反馈的心理学感知区间——超过该时长用户会感觉迟滞。排版约束TypographyMUST标题使用text-balance正文/段落使用text-prettyMUST数据数字、表格等使用tabular-nums等宽数字避免跳动SHOULD密集 UI 使用truncate或line-clamp截断文本NEVER修改letter-spacingtracking-*除非被明确要求。text-balance与text-pretty是 Tailwind CSS 3.4 引入的文本换行优化text-balance让标题各行长度均衡、视觉更整齐text-pretty优化正文换行点避免出现孤行orphans。tabular-nums对数据密集型界面表格、仪表盘、价格至关重要——等宽数字在数值变化时不会导致列宽抖动。布局约束LayoutMUST使用固定的z-index刻度体系禁止随意使用任意值z-*如z-[9999]SHOULD正方形元素使用size-*工具Tailwind 3.4 的size-*同时设置宽高替代w-*h-*组合。固定 z-index 刻度是大型前端项目的常见规范将z-10、z-20、z-50modal、z-100toast等语义化分配避免各组件各自为政导致层叠混乱。size-*则是对 Tailwind 工具类的简化减少心智负担与出错概率。性能约束PerformanceNEVER动画大面积的blur()或backdrop-filter毛玻璃表面NEVER在非活跃动画期间应用will-changeNEVER能用渲染逻辑表达的状态改用useEffect。这三条都直指运行时性能blur()/backdrop-filter是 GPU 开销极高的滤镜大面积动画几乎必然掉帧will-change会为元素创建独立的合成层滥用会导致内存暴涨因此只在动画激活期间使用useEffect中派生状态会引入额外的渲染往返render → effect → re-render能用纯计算render logic表达时应直接在渲染期推导。视觉设计约束DesignNEVER使用渐变除非被明确要求NEVER使用紫色或多色渐变NEVER将发光效果glow作为主要视觉提示primary affordancesSHOULD使用 Tailwind CSS 默认阴影体系除非被明确要求MUST空状态empty states给出一个清晰的下一步动作one clear next actionSHOULD每个视图的强调色accent color限制为一个SHOULD优先使用既有主题或 Tailwind CSS 颜色 token而非引入新颜色。禁用紫色/多色渐变与禁用 glow 做主提示是对 AI 生成界面的典型审美矫正——这类效果是一眼 AI的主要视觉标签。而空状态必须给一个清晰的下一步动作则是一条产品原则空状态不应只是空白占位而应引导用户继续使用产品。约束总表MUST / SHOULD / NEVER 一图流为便于在评审时快速对照可将全部约束归纳为三级强度强度约束领域MUSTTailwind 默认值、cn、motion/react技术栈MUST无障碍原语、图标按钮aria-label组件MUSTAlertDialog用于破坏性操作、h-dvh、safe-area-inset、就近错误提示、不禁粘贴交互MUST只动画合成器属性、循环动画离屏暂停、≤200ms 反馈动画MUSTtext-balance/text-pretty、tabular-nums排版MUST固定 z-index 刻度布局MUST空状态一个下一步动作设计SHOULDtw-animate-css、Base UI、骨架屏、size-*、ease-out、prefers-reduced-motion、line-clamp、默认阴影、单一强调色、颜色 token 复用全部NEVER混用原语体系、手写焦点行为、h-screen、禁粘贴、未经要求的动画、动画布局/绘制属性、自定义缓动、大面积模糊、滥用will-change、useEffect派生状态、渐变、紫色渐变、glow 主提示、改tracking-*全部在 AAS 的目录模型中这份约束集合通过 catalog.json 的triggers字段与用户请求语义匹配当对话中出现UI 清理、deslop、间距、层级、排版等信号时Agent 可自动加载该技能把上述约束注入当前上下文。局限性Limitations原文档明确给出三条使用边界评审与执行时必须遵守仅当任务与上游来源及本地项目上下文明确匹配时使用——不要对与 UI 无关的任务套用本技能应用变更前验证命令、生成代码、依赖、凭证及外部服务行为——技能给出的建议是草案不是免检通行证不要将示例视为环境特定测试、安全审查或破坏性/高成本操作的用户审批的替代品——涉及破坏性操作仍需人工批准。结合其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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考