ui-web

ui-web 技能概览

ui-web 是做什么的

ui-web 技能帮助你设计和美化 web UI 组件，而且明显偏向可访问、可直接投入生产的界面。它最适合用在 React 风格前端的搭建或打磨过程中，尤其是那些大量使用 Tailwind 的代码库：视觉细节、深色模式和交互状态都需要保持一致。如果你需要的是一个引导组件样式处理的 ui-web skill，而不是泛泛的 UI 点子发散，这个技能很合适。

谁应该使用它

如果你的工作是把粗糙的界面想法变成可用的网页屏幕、组件更新或设计修正，并尽量少出可访问性错误，那么就该用 ui-web。它尤其适合处理按钮、表单、卡片、导航和布局细节这类地方，因为对比度、间距和可见性往往直接决定成败。如果你更需要的是品牌策略、产品 UX 研究，或者非 Web 设计系统，它就不太适合。

它的不同之处

ui-web 指南最大的区别不只是“好看”，而是会把输出强约束到 WCAG 2.1 AA 合规、可见控件和实用的组件样式规则上。之所以重要，是因为 AI 生成 UI 最常见的失败模式就是“提示里很好看，浏览器里却坏掉了”。这个技能的目标就是通过把可访问性和元素可见性设为硬要求，尽量避免这种问题。

如何使用 ui-web 技能

安装并确认作用范围

先在你的技能管理器里走 ui-web install 流程，然后确认这个技能实际挂到了你要改的文件上。仓库元数据表明它面向 **/*.tsx、**/*.jsx、**/*.css、**/*.scss 和 tailwind.config.*，所以它最好用于真实的 UI 源码文件，而不是单独的设计稿。如果你的项目不是基于 React/Tailwind，ui-web usage 的价值会很快下降。

给技能正确的输入

一个有力的提示词应该写清楚组件、用户目标、运行环境，以及最关键的约束。例如：“更新 src/components/AuthForm.tsx 里的注册表单，在不改变布局的前提下提升暗色模式下的对比度、焦点状态和按钮可见性。”这比“把这个 UI 做得更好”强得多，因为它明确告诉 ui-web 要保留什么、要修什么，以及优先处理哪类可访问性风险。

先读这些文件

先看 SKILL.md，因为里面放的是必须遵守的规则。然后检查组件文件、最近的样式表，以及代码库里如果使用了 token 或主题扩展时的 tailwind.config.*。这个仓库没有额外的参考目录，所以主要价值在于把核心规则直接应用到你正在编辑的组件上。

能产出更好结果的工作流

把 ui-web 当作约束过滤器，而不是完整设计系统的替代品。先确定 UI 元素，再检查它的文本对比度、边框、悬停状态和焦点状态是否满足技能规则，最后要求在保留结构的前提下修正薄弱点。这个流程在你需要一个 ui-web guide 来快速落地、同时又要避免不可访问控件时尤其有用。

ui-web 技能 FAQ

ui-web 适合新手吗？

适合，如果你已经能编辑组件并看懂 CSS 或 Tailwind 类名。规则写得比较明确，新手也能照着做，但这个技能仍然默认你知道组件放在哪、样式是怎么在项目里生效的。如果你刚接触前端代码，最好先拿一个小组件试用 ui-web。

它和普通提示词有什么不同？

普通提示词可能只能改善视觉方向，而 ui-web 会把模型推向可执行的 UI 决策：对比度、可见边框、触控目标大小和状态样式。这让它更适合实施层面的工作，而不是只给出一个“好看答案”。如果你需要的是更接近生产约束而不是发散构思的 ui-web for UI Design 流程，这会是更好的选择。

什么时候不该用它？

如果你的任务主要是文案、信息架构或产品发现，就不要用 ui-web。对于不支持的 Web 文件类型项目，它也不是最佳选择，因为它的指导本来就是围绕组件和样式表编辑设计的。如果问题更偏向整体 UX 方向，而不是具体 UI 实现，通用设计提示词可能更快。

最大的落地风险是什么？

最大的风险是以为技能会在没有上下文的情况下自动修好所有视觉问题。它最有效的前提，是你提供明确的组件、目标屏幕和不能违反的约束。否则，输出可能技术上合规，但过于泛化，根本不适合直接上线。

如何改进 ui-web 技能

提供更紧的组件上下文

最好的结果来自对组件、状态和周边布局的明确命名。不要只说“优化这个卡片”，而要说“更新 PricingCard.tsx 里的定价卡片，让 CTA 按钮有可见边框、深色背景下文字对比度达标，并且悬停状态仍然可访问”。这种输入能帮助 ui-web skill 把注意力放在正确的权衡点上，而不是把整个界面都重做一遍。

把硬约束讲清楚

如果你在意某个具体问题，就直接说出来：对比度、深色模式、焦点环可见性、触控目标大小，或者按钮可感知性。这个技能最强的规则集中在 WCAG 2.1 AA 合规上，所以把约束点说得越明确，输出质量越高，返工越少。在视觉质量参差不齐的代码库里使用 ui-web usage 时，这一点尤其有用。

留意常见失败模式

最常见的漏项是没有边框的“幽灵按钮”、对比度过低的灰字，以及看起来可点击但悬停或焦点状态很弱的控件。另一种失败模式，是把设计语言改得太多，导致组件不再符合应用整体风格。如果出现这种情况，就要求它在修复可访问性和可见性问题的同时，保留原有布局和层级。

用前后对照持续迭代

第一次输出后，要分别在浅色和深色模式下检查组件，并重点看交互状态，而不只是默认渲染。如果还有不清楚的地方，就发起第二轮、进一步收窄范围：“保持间距不变，只提高对比度”，或者“保留颜色，增加可见边框和更强的焦点状态”。这是把 ui-web 从样式助手变成可靠实施工具的最快方式。