npx skills add https://github.com/oakoss/agent-skills --skill ui-ux-polish一种迭代增强的工作流程,将可运行的 Web 应用程序从尚可提升至世界级水平。涵盖桌面端和移动端优化(作为独立的模式)、视觉设计模式和无障碍标准。
使用时机:应用程序功能正确,具备基本样式,你希望通过迭代优化来提升视觉质量。也适用于应用特定的设计模式(玻璃态、新拟态、便当网格)或进行无障碍审计。
避免使用时机:应用程序存在故障或错误(先修复错误)、样式存在根本性错误(需要彻底重做),或者尚未建立基本的设计系统。
| 模式 | 技术 | 关键点 |
|---|---|---|
| 迭代优化 | 运行相同的优化提示 10 次以上 | 微小的改进会带来巨大的复合效应 |
| 桌面/移动端分离 | 独立优化每种模式 | 避免因妥协而损害两者 |
| 玻璃态 | backdrop-blur-xl + bg-white/70 + 边框 | 功能性的深度与可读性 |
| 新拟态 | 双向盒阴影 | 在浅色模式下效果最佳;为无障碍添加边框 |
| 便当网格 | 使用 单元格的 CSS Grid |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
rounded-3xl| 主单元格跨越多列/多行 |
| WCAG 2.2 AA 标准 | 对比度 + 目标尺寸 + 焦点可见性 | 文本 4.5:1,UI 元素 3:1,目标尺寸 24x24 像素 |
| 减少动画 | prefers-reduced-motion: reduce | 为对运动敏感的用户禁用动画 |
| 语义化 HTML | 地标 + 标题层级 + 原生元素 | 使用 <button> 而非 <div role="button"> |
| 包容性设计 | 多种输入方式 + 错误容错 | 平等支持键盘、语音和触摸输入 |
| 排版层级 | 具有清晰层级的统一比例 | 字体大小、字重和间距节奏 |
| 间距节奏 | 统一的填充和边距比例 | 使用设计标记的倍数(4px、8px、16px) |
| 悬停/焦点状态 | 所有交互元素上的可见反馈 | 键盘用户需要可见的焦点指示器 |
| 动画/过渡 | 进入 ease-out,退出 ease-in,100-300 毫秒 | 优先使用 transform/opacity 以利用 GPU 合成 |
| 微交互 | 按钮按下、切换、焦点、成功/错误状态 | 始终尊重 prefers-reduced-motion |
| 错误 | 正确模式 |
|---|---|
| 在存在故障的应用上进行优化 | 首先修复所有功能性问题,然后进行迭代优化 |
| 进行一次大型修改而非多次小修改 | 运行 10 次以上迭代;增量改进会产生复合效应 |
| 同时优化桌面端和移动端 | 将每种模式视为独立的,并分别进行优化 |
| 在变化看起来微小时停止 | 继续迭代;细微的间距和排版调整会累积效果 |
| 对所有元素应用玻璃态效果 | 仅在卡片和模态框上策略性地使用玻璃效果 |
| 新拟态效果没有无障碍边框 | 为低视力用户添加 1px 边框(满足对比度要求) |
忽略 prefers-reduced-motion | 在 CSS 中始终尊重系统的运动偏好设置 |
使用带有点击处理器的 <div> 而非 <button> | 使用原生的语义化 HTML 元素以获得内置的无障碍支持 |
Task 代理为每种模式分别运行优化流程Explore 代理检查优化迭代是否破坏了布局或无障碍功能Plan 代理建立间距、排版和颜色模式accessibility 技能进行深入的 WCAG 合规性、ARIA 模式、焦点管理和屏幕阅读器测试每周安装量
75
代码仓库
GitHub 星标数
6
首次出现
2026 年 2 月 20 日
安全审计
安装于
opencode71
cursor71
codex70
gemini-cli70
kimi-cli69
github-copilot69
Iterative enhancement workflow that takes working web applications from decent to world-class. Covers desktop and mobile optimization as separate modalities, visual design patterns, and accessibility standards.
When to use : The app works correctly with basic styling in place and you want to improve visual quality through iterative refinement. Also use for applying specific design patterns (glassmorphism, neumorphism, bento grids) or auditing accessibility.
When NOT to use : The app is broken or buggy (fix bugs first), styling is fundamentally wrong (needs complete overhaul), or no basic design system exists yet.
| Pattern | Technique | Key Point |
|---|---|---|
| Iterative polish | Run the same polish prompt 10+ times | Small improvements compound dramatically |
| Desktop/mobile split | Optimize each modality independently | Prevents compromises that hurt both |
| Glassmorphism | backdrop-blur-xl + bg-white/70 + border | Functional depth with legibility |
| Neumorphism | Dual-direction box shadows | Best in light mode; use borders for a11y |
| Bento grid | CSS Grid with rounded-3xl cells | Hero cell spans multiple columns/rows |
| WCAG 2.2 AA | Contrast ratios + target sizes + focus visible | 4.5:1 text, 3:1 UI, 24x24px targets |
| Reduced motion | prefers-reduced-motion: reduce | Disable animations for motion-sensitive users |
| Semantic HTML | Landmarks + heading hierarchy + native elements | Use <button> not <div role="button"> |
| Inclusive design | Multiple input methods + error forgiveness | Support keyboard, voice, and touch equally |
| Typography hierarchy | Consistent scale with clear levels | Font size, weight, and spacing rhythm |
| Spacing rhythm | Consistent padding and margin scale | Use design token multiples (4px, 8px, 16px) |
| Hover/focus states | Visible feedback on all interactive elements | Keyboard users need visible focus indicators |
| Animation/transitions | ease-out enter, ease-in exit, 100-300ms | Prefer transform/opacity for GPU compositing |
| Micro-interactions | Button press, toggle, focus, success/error | Always respect prefers-reduced-motion |
| Mistake | Correct Pattern |
|---|---|
| Running polish on a broken app | Fix all functional bugs first, then apply iterative polish |
| Making one large pass instead of many small ones | Run 10+ iterations; incremental improvements compound |
| Optimizing desktop and mobile simultaneously | Treat each as a separate modality and optimize independently |
| Stopping after changes appear minimal | Keep iterating; subtle spacing and typography tweaks add up |
| Applying glassmorphism to all elements | Use glass effects strategically on cards and modals only |
| Neumorphism without accessibility borders | Add a 1px border for low-vision users (contrast requirement) |
Ignoring prefers-reduced-motion | Always respect system motion preferences in CSS |
Using <div> with click handlers instead of <button> |
Task agent to run separate polish passes for each modalityExplore agent to check that polish iterations have not broken layout or accessibilityPlan agent to establish spacing, typography, and color patterns before polishingaccessibility skill for in-depth WCAG compliance, ARIA patterns, focus management, and screen reader testingWeekly Installs
75
Repository
GitHub Stars
6
First Seen
Feb 20, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode71
cursor71
codex70
gemini-cli70
kimi-cli69
github-copilot69
前端设计技能指南:避免AI垃圾美学,打造独特生产级界面
49,900 周安装
iOS应用可发现性优化指南:通过App Intents、App Shortcuts和Core Spotlight提升应用曝光
159 周安装
加密货币交易顾问:AI驱动的加密数据分析与风险管理指南
164 周安装
Swift Testing异步代码测试指南:axiom-testing-async使用模式与迁移教程
159 周安装
AI生成部署文档指南:CI/CD流水线、容器编排与云基础设施最佳实践
160 周安装
反逆向工程技术详解:合法授权下的恶意软件分析与二进制保护绕过指南
163 周安装
iOS应用本地化指南:Xcode字符串目录、SwiftUI/UIKit国际化与RTL支持
159 周安装
| Use native semantic HTML elements for built-in accessibility |