UI/UX 设计

这个 accessibility skill 可帮助你基于 WCAG 2.2 AA 指南来设计、实现和审计可访问的 UI，适用于 Web、iOS 和 Android。它可用于梳理组件的角色、标签、状态、焦点行为和无障碍特性，并为 UX 审计和实现评审提供实用的无障碍用法参考。

ux-designer 是一套结构化的 UX 设计技能，覆盖用户研究、无障碍、信息架构、交互流程、线框图指导和 UX 文案。它通过 `AGENTS.md` 与聚焦的规则文件，帮助团队把粗略的产品想法转化为更清晰、基于评估标准的设计决策。

browse 是一款快速的无头浏览器 skill，适用于 QA、自用验证（dogfooding）和 browser automation。可用它打开页面、与元素交互、验证状态、对比操作前后变化、截取截图，并检查响应式布局、表单、上传、对话框和元素状态。需要浏览器证据而不是通用提示词时，安装 browse。

gstack 是一款由浏览器驱动的 AI 技能，适用于 QA 测试、dogfooding、发布检查和 bug 取证。它会打开真实页面，点击操作 UI，验证状态，比较前后变化，测试响应式布局，并采集带截图证据的结果。对于需要从 gstack 技能获得可靠浏览器结果的场景，尤其适合用于 UI 设计评审和部署验证。

ui-ux-pro-max 是一款面向 AI 辅助 UI/UX 设计的综合技能，提供网页和移动端项目的布局、风格、配色体系、字体排版及 UX 规则等结构化指导。适合需要在 React、Next.js、Vue、Svelte、Tailwind、shadcn/ui、SwiftUI、React Native、Flutter 及 HTML/CSS 等技术栈中做出实用设计决策的开发者和团队。可用于 UI 规划、评审与优化，提升设计智能。

vercel-react-native-skills 是一个面向 React Native 和 Expo 的 skill，适合注重性能的前端开发。可用于优化列表渲染、动画、导航、UI 模式、状态管理以及原生模块配置。它提供实用规则、安装指引和使用模式，帮助你更少猜测地排查移动端应用瓶颈。

shape 是一项以规划优先为核心的 UI/UX 设计技能，会先进行结构化需求探索访谈，再在编码前产出设计简报。适合用来梳理用户问题、约束条件与设计方向，然后将简报交接给后续实现环节。

quieter 是一项用于打磨 UI 设计的 refinement 技能，适合在界面显得过于强烈、嘈杂或造成感官负担时使用，在保留清晰度、层级关系和品牌意图的前提下降低视觉攻击性。它最适合在父级 `$impeccable` 技能之后使用，帮助团队先判断强烈感的来源，再做有针对性的调整。

harden skill 用于把 UI 设计和界面规范打磨到可上线状态，重点检查边界情况、空状态、错误处理、超长文本、本地化、权限限制以及其他真实环境中的失败场景。若你在做面向 UI Design 的 harden，希望减少布局意外并补齐更完整的交互与行为规则，这个技能会很合适。

critique 可帮助你从 UX 视角评审界面、功能、页面或组件，提供结构化评分、基于 persona 的测试、启发式检查以及可落地的改进建议。如果你需要一套可重复使用的 UI/UX Design 评审方法，而不是笼统模糊的点评，就适合使用 critique。它最适合在背景明确的前提下，针对某个具体区域进行聚焦式评审。

使用 delight skill 为成功、加载、空状态和引导流程加入得体的 UI 润色、micro-interactions 与产品个性，同时不牺牲可用性或分散用户注意力。

clarify 可优化容易引起困惑的 UX 文案、错误消息、标签、引导步骤和操作说明，让用户更少靠猜就能完成动作。它适合技术写作、支持内容以及需要把界面文案写得更清楚的产品团队。这个技能会先明确上下文、受众和用户状态，再进行改写，因此输出会更直接、更具体，也更便于实际使用。

figma-create-new-file 会在草稿中创建一个全新的空白 Figma Design 文件或 FigJam 白板。适合在进行更深入的 Figma 操作（包括 use_figma）之前，先建立一个干净的起点。它支持 design 或 figjam、可选文件命名，并且在需要时可通过 whoami 解析权限方案。

使用 figma 从 Figma MCP server 中拉取设计上下文、截图、变量和资源，然后把 Figma 节点转化为可直接落地的 UI 决策。这个 figma skill 适合你手头有 Figma URL 或 node ID，需要用于设计转代码、配置或排障的准确 figma 用法时使用。

layout 技能用于审查并优化 UI 的构图、间距、层级、对齐和视觉节奏。它尤其适合界面拥挤或结构薄弱的页面，但使用前依赖 /impeccable 先完成上下文收集。

shape 是一款以前期规划为核心的 UX/UI skill：先进行 discovery interview，在写代码之前把回答整理成 design brief。将它与 /impeccable 配合使用，可帮助你明确用户目标、约束条件、状态设计以及面向 UI Design 的实现方向。

site-architecture 可用于规划或重构网站的信息架构，包括页面层级、导航、URL 规则与站内链接策略。你可以用它产出 sitemap、导航规范、URL map，以及用于营销与 UI/UX 规划的 Mermaid 或 ASCII 网站结构图。

onboard skill 可帮助产品团队优化新手引导流程、空状态和首次使用体验。它通过一套实用工作流指导安装与使用，明确要求依赖 `/frontend-design`，并提示你定义 aha moment、用户水平以及关键激活步骤。

distill 是一项用于 UI 设计精简的 skill，帮助你把页面、组件和流程收束到最核心的目标上。适合用来减少杂乱、视觉噪音和功能膨胀，但要注意，distill 依赖 /frontend-design，某些情况下还需要先使用 /teach-impeccable。

critique skill 可帮助团队对页面、功能和组件开展结构化的 UX 评审。它会评估信息层级、认知负荷、启发式原则以及基于 persona 的风险，并将发现的问题整理为可执行的改进建议。最适合在完成 /frontend-design 之后使用，同时提供清晰的截图、目标和用户背景信息。

clarify 用于改写容易让人困惑的 UI 文案、错误信息、标签和操作说明，帮助提升 UX。最适合在 pbakaus/impeccable 工作流中、完成 /frontend-design 之后使用；如果同时提供受众水平和用户当下的心理状态，结果通常会更好。

bolder 是一项面向 UI 设计的技能，适合用来强化那些平淡、过于保守的界面，通过提升对比、层级和个性，让设计更有表现力。建议在完成 /frontend-design 上下文收集后使用；如果还没有设计上下文，也可先用 /teach-impeccable。这样能在不牺牲可用性的前提下，获得更犀利、也更可落地的设计改进建议。

adapt skill 用于将现有 UI 重新设计为适配新的设备或使用场景。本文介绍 adapt 的工作流程、必需的 frontend-design 依赖、安装路径，以及它在移动端、平板、打印和跨平台 UI/UX 设计调整中的实际用法。

onboard skill 可帮助优化 onboarding flow、empty states 和首次使用体验，加快用户激活。它要求先使用 /frontend-design，可能还需要 /teach-impeccable，并且在目标用户、aha moment 和用户体验背景明确时效果最佳。