【投稿】原创文章发布于 https://figma-file.store/blog/4586.html

核心导读： 本文深入剖析 8 个 Claude Skills，覆盖从高保真设计到无障碍审计、性能优化、组件架构和移动端 UI 模式的完整链路。适合希望将 AI 融入设计工作流的前端开发者与 UX 设计师。

如果你常逛知乎、掘金、站酷或 Figma Community 社区，应该已经注意到设计师和前端开发者对 AI 工具的态度正在悄然转变。

两年前，大家还在讨论"AI 会不会彻底取代设计师"，这种焦虑至今未消，但更多务实的声音开始浮现——设计师们分享着一种新工作流：让 AI 处理繁琐重复的事务，自己专注于真正需要创造力的部分。

数据印证了这一趋势。据 Loop11 年度调查 显示，2025 年国内 UX 研究者对 AI 的采用率已跃升至 80%。资深设计师反馈，他们现在能产出过去三人团队才能完成的工作量，由此催生了"超级个体"这一新角色——他们像一家独立设计工作室般高效运作。

在技术社区中，开发者用 Claude Code 在 30 分钟内搭建完整原型已成常态。在设计师平台上，创作者们发布着详尽的工作流指南，教人们如何用 Claude 自动将设计转换为暗黑模式、生成无障碍组件变体、对照 WCAG 标准审计页面。

AI 生成器擅长快速产出初稿原型与脚手架代码，但在定制化微调、细腻交互模式，以及那种需要多年观察真实用户在真实界面中挣扎才能积累的设计判断力面前，仍显笨拙。

质疑声依然存在，且这种质疑是健康的。91% 的 UX 研究者担心输出准确性与幻觉问题。AI 无法替代设计师的审美眼光，但它能接管重复性工作：

  • 生成响应式变体
  • 检查对比度
  • 搭建组件样板
  • 对照清单审计

让人类有更多精力投入真正关键的决策。

资深设计师和社区开发者演示了如何使用 Bolt 和 Figma 一起构建网站，展示了前端开发者正在采用的 AI 辅助设计工作流。

Claude Skills 是进入这种工作流的有趣入口之一。 如果你还未接触过，它们值得了解，因为在 Claude 生态中占据独特位置。

一、Claude 技能是什么（以及不是什么）

Claude 生态中存在多种扩展机制，容易混淆。快速厘清如下：

CLAUDE.md

持久化的项目记忆。每次会话自动加载，告知 Claude"本项目使用 Tailwind v4"或"始终采用 2 空格缩进"。它是始终在线的上下文，而非按需启用的能力。

自定义斜杠命令

（.claude/commands/*.md）曾是简单的提示模板，通过 /command-name 触发。现已实质并入 Skills。在 frontmatter（文件头元数据）中定义 argument-hint 的技能可作为斜杠命令调用，其余则基于任务上下文自动激活。

MCP 服务器

通过 Model Context Protocol 暴露工具和数据源的常驻进程，让 Claude 能调用 API、查询数据库或与外部服务交互。需要服务器进程和代码支持。

Claude Connectors

通过远程 MCP 服务器与 OAuth，将 Claude 连接至飞书、钉钉、Figma 等外部服务。

Claude Apps

指 Claude 运行的平台（Claude.ai、Claude Code、移动端、桌面端），而非 Claude 的扩展。

Plugins

将技能、代理、钩子和 MCP 服务器打包在一起的分发形式。

Claude Skills（核心）

包含 SKILL.md 文件（YAML frontmatter 文件头元数据 + markdown 指令）的目录，可附带脚本、模板、参考文档等支持文件。其独特之处在于：

目录结构： 技能可捆绑 shell 脚本、Python 辅助工具、参考文档和资源文件，而非单文件。

渐进式披露： 启动时，Claude 仅从 YAML frontmatter 加载每个技能的名称和描述（约 100 token（词元）/技能），类似 MCP 工具描述的注入方式。匹配成功后，加载完整 SKILL.md 指令。支持文件仅在执行期间显式需要时加载。这种三层架构让上下文窗口保持精简，即使安装数十个技能也不臃肿。

可执行代码： 技能可在 scripts/ 中包含脚本供 Claude 执行，也可使用 !command`` 语法将动态输出注入提示上下文。

开放标准： Agent Skills 规范 已被 Claude Code、OpenAI Codex、Cursor、Gemini CLI 等采纳，具备可移植性。

斜杠命令注册： YAML frontmatter 中包含 argument-hint 的技能可直接以 /skill-name 调用。无 argument hint 的技能则上下文激活，即 Claude 在任务匹配描述时自动拾取。

延伸阅读：

二、安装 Claude 技能

安装一个技能约需 30 秒。

项目级（通过版本控制与团队共享）

your-project/
└── .claude/
    └── skills/
        └── skill-name/
            ├── SKILL.md
            └── scripts/
                └── helper.sh

用户级（个人私有，跨项目可用）

~/.claude/
└── skills/
    └── skill-name/
        ├── SKILL.md
        └── references/
            └── REFERENCE.md

通过插件（用于技能集合，如 Vercel）

/plugin marketplace add vercel-labs/agent-skills
/plugin menu

优先级规则： 命名冲突时，企业级技能 > 个人技能 > 项目技能。

⚠️ 安全警告： Agent Skills 生态尚新且发展迅速，供应链安全至关重要。相关安全研究发现，36% 的受测技能存在提示注入问题，整个生态中检测到 1,467 个恶意载荷。安装前务必审查技能的 SKILL.md 和捆绑脚本。对待技能应像对待环境中运行的任何第三方代码一样谨慎。

开源维护者福利：如果你正在创建或维护开源 Claude Skill 或 MCP 服务器，建议关注开源安全扫描工具，为项目提供企业级安全保护。社区中有多种安全工具可供选择，帮助维护者扫描依赖漏洞和代码安全问题。

三、八大 Claude 技能详解

以下八个技能（及技能集合）覆盖从高保真前端设计到无障碍审计、React 性能优化、组件架构和移动端 UI 模式的完整链路。

# 技能 Star 数 聚焦领域 来源
1 Anthropic Frontend Design 65,847 大胆美学的独特、生产级 UI anthropics/skills
2 Vercel Web Design Guidelines 19,487 Web 界面审计（100+ 规则、无障碍、UX） vercel-labs/agent-skills
3 Vercel React Best Practices 19,487 React/Next.js 性能（57 条规则、8 个类别） vercel-labs/agent-skills
4 Vercel Composition Patterns 19,487 React 组件架构和设计模式 vercel-labs/agent-skills
5 UI/UX Pro Max 29,636 设计智能：50 种风格、97 种调色板、9 个技术栈 nextlevelbuilder/ui-ux-pro-max-skill
6 Bencium UX Designer 72 全面的 UX，含无障碍、响应式设计、动效规范 bencium/bencium-claude-code-design-skill
7 AccessLint 8 WCAG 2.1 无障碍审计、对比度检查、重构 accesslint/claude-marketplace
8 Vercel React Native Skills 19,487 移动端 UI 性能、动画、导航模式 vercel-labs/agent-skills

技能 1：Anthropic frontend-design

一句话总结： 打破 AI 生成的"千篇一律"界面，让 Claude 产出大胆、独特的视觉设计。

属性 详情
来源 anthropics/skills（路径：skills/frontend-design/）和 anthropics/claude-code（路径：plugins/frontend-design/）
Star 数 65,847（skills 仓库）/ 65,362（claude-code 仓库）
许可证 Custom（见 LICENSE.txt）
最后更新 2026 年 2 月
验证 SKILL.md 是

问题背景： AI 生成的前端界面千篇一律。到处都是渐变色配大白底。千篇一律的默认字体。毫无惊喜的卡片布局。技能描述中称之为"AI 流水账"，指令集专为打破这些模式而构建。

设计理念： 技能读起来像一位厌倦了套模板的资深设计总监的设计简报。在编写任何代码前，它要求 Claude 思考四个维度：

  1. 目的（谁用、为何用）
  2. 调性（选定特定美学方向）
  3. 约束（框架、性能、无障碍）
  4. 差异化（什么让界面令人眼前一亮）
核心指令集涵盖五大领域

字体排版： 选择有辨识度的字体。技能明确禁用那些"烂大街"的字体组合，如千篇一律的思源黑体+微软雅黑。推崇意外组合，如用站酷酷黑搭配思源宋体这类有特色的展示字体搭配精致的正文字体。

色彩与主题： 坚持统一配色。使用 CSS 变量（CSS variables）保持一致。主色调配锐利点缀，而非胆怯的均匀分布。拒绝那些看腻了的配色方案。

动效设计： 优先高冲击力时刻。一次精心编排的页面加载配合错落显现，比零散的微交互更能创造惊喜。HTML 用纯 CSS 方案，React 用 Motion 动画库。

空间构图： 打破常规布局。不对称、重叠、对角线流、破格元素、充裕负空间。

背景与视觉细节： 渐变网格、噪点纹理、几何图案、层叠透明、戏剧性阴影、装饰边框、自定义光标、颗粒叠加。

适用场景： 官网、活动页、作品集项目和任何需要视觉个性的场景。

安装方式：

git clone https://github.com/anthropics/skills.git
# 或
git clone https://github.com/anthropics/claude-code.git

使用示例：

设计一个 SaaS（软件即服务）产品的落地页，要有个性
创建一个有辨识度的作品集网站
设计一个有视觉冲击力的营销活动页

适用人群： 希望 Claude 生成视觉独特界面而非通用模板的前端开发者和设计师。特别适合落地页、作品集站点、营销页面和任何需要美学个性的项目。

技能 2：Vercel web design guidelines

一句话总结： UI/UX 最佳实践的代码检查工具（类似 ESLint），自动审计你的界面代码。

属性 详情
来源 vercel-labs/agent-skills（路径：skills/web-design-guidelines/）
Star 数 19,487
许可证 MIT
最后更新 2026 年 1 月
验证 SKILL.md 是

定位： 如果说 Anthropic 的 frontend-design 技能聚焦创意方向，这个 Vercel 技能则聚焦正确性。它对照 Web Interface Guidelines（一套涵盖无障碍、性能、UX 最佳实践的 100+ 条规则综合体系）审查你的现有 UI 代码。

工作流程
  1. 从源 URL 获取最新指南（规则存储在 vercel-labs/web-interface-guidelines 仓库中，保持更新）
  2. 读取你指定的文件
  3. 逐条对照所有规则检查
  4. 以 file:line 简洁格式输出发现

检查范围： 恰当的 ARIA 属性、可见焦点状态、带标签输入、触控目标尺寸、减少动效支持、语义化 HTML、键盘导航、恰当标题层级等数十项。

这不是创意技能，而是质量门禁。可视为 UI/UX 最佳实践的代码检查工具（类似 ESLint），捕获会导致无障碍审计失败或给键盘和屏幕阅读器用户造成真实可用性问题的各类隐患。

安装方式：

git clone https://github.com/vercel-labs/agent-skills.git
cp -r agent-skills/skills/web-design-guidelines ~/.claude/skills/

使用示例：

/web-design-guidelines src/components/*.tsx

适用人群：

  • 希望在开发过程中自动进行 UI/UX 质量检查的前端开发者
  • 需要跨代码库强制执行一致性的设计系统工程师
  • 任何准备无障碍审计的人

相关资源：

技能 3：Vercel React best practices

一句话总结： 57 条性能优化规则，横跨 8 个类别，按影响力优先级排序。

属性 详情
来源 vercel-labs/agent-skills（路径：skills/react-best-practices/）
Star 数 19,487
许可证 MIT
最后更新 2026 年 1 月
验证 SKILL.md 是

核心理念： 性能即 UX。一个设计精美但需 4 秒才能交互的界面，无论字体多出色，都是糟糕的用户体验。

规则分类
优先级 类别 影响程度 规则数
1 消除瀑布流 极高 5
2 包体积优化 极高 5
3 服务端性能 高 7
4 客户端数据获取 中高 4
5 重渲染优化 中 12
6 渲染性能 中 9
7 JavaScript 性能 中低 12
8 高级模式 低 3

优先级排序至关重要。它反映了真实工程经验：消除请求瀑布和优化包体积对感知性能的影响，远大于微调重渲染行为。太多开发者（和 AI 助手）一上来就用 useMemo 和 React.memo，而真正的瓶颈是顺序 API 调用瀑布或导入整个图标库的 barrel 文件（集中导出文件）。

核心亮点
  • async-suspense-boundaries：用 Suspense（suspense 挂起组件）流式传输内容，而非等待所有数据渲染
  • bundle-barrel-imports：直接导入，避免 barrel 文件（集中导出文件，设计系统库常见问题）
  • bundle-dynamic-imports：对重型组件使用 next/dynamic（动态导入）
  • rerender-derived-state：订阅派生布尔值，而非原始值
  • rendering-content-visibility：长列表使用 CSS content-visibility（内容可见性）
  • rendering-activity：显隐模式使用 Activity（活动）组件

安装方式：

git clone https://github.com/vercel-labs/agent-skills.git
cp -r agent-skills/skills/react-best-practices ~/.claude/skills/

使用示例：

为什么这个组件频繁重渲染？
优化这个数据获取逻辑的性能
审查这个 Next.js 应用的性能问题

适用人群： 希望 Claude 默认写出高性能代码的 React 和 Next.js 开发者。构建大规模组件库、性能至关重要的设计系统工程师。

安全研究人员测试 Claude 生成的代码是否能通过安全扫描，发现真实漏洞如正则表达式拒绝服务攻击。像 Vercel 的 React Best Practices 这样的技能帮助 Claude 生成既高性能又遵循既定模式的代码。

相关资源：

  • Next.js 最严重的漏洞警示（Next.js 开发者必看）
  • npm 安全：防御供应链攻击（了解依赖安全风险）
  • 10 条 npm 安全最佳实践（日常开发安全指南）

技能 4：Vercel composition patterns

一句话总结： 教你构建可扩展的 React 组件架构，告别布尔 props 泛滥。

属性 详情
来源 vercel-labs/agent-skills（路径：skills/composition-patterns/）
Star 数 19,487
许可证 MIT
最后更新 2026 年 1 月
验证 SKILL.md 是

问题背景： 如果你曾接手过一个带 15 个布尔 props（属性参数）（isCompact、showHeader、isRounded、hasBorder、isHighlighted…）的 React 组件，就理解这个技能解决的问题。布尔 props 泛滥是最常见的设计系统反模式之一，让组件难以理解、测试和扩展。

这个技能教授 Claude 可扩展的组合模式：复合组件、上下文提供者、显式变体和恰当的状态管理架构。

规则分类
优先级 类别 影响程度 规则数
1 组件架构 高 2
2 状态管理 中 3
3 实现模式 中 2
4 React 19 APIs 中 1
核心模式
  • architecture-avoid-boolean-props：不添加布尔 props（属性参数）定制行为，使用组合替代。这是基础规则，对组件 API 质量影响最大。
  • architecture-compound-components：用共享上下文构建复杂组件（类似 Radix UI 中 <Select>、<Select.Trigger>、<Select.Content> 的工作方式）。
  • state-decouple-implementation：只有提供者知道状态如何管理，组件消费干净接口。
  • state-context-interface：用 state（状态）、actions（动作）、meta（元数据）定义通用接口用于依赖注入。
  • patterns-explicit-variants：创建显式变体组件而非布尔模式（如 <Alert.Destructive> 而非 <Alert isDestructive>）。
  • patterns-children-over-render-props：用 children（子元素）组合而非 renderX props（渲染属性）。
  • react19-no-forwardref：React 19+ 跳过 forwardRef，新 use() hook（钩子）替代 useContext()。

安装方式：

git clone https://github.com/vercel-labs/agent-skills.git
cp -r agent-skills/skills/composition-patterns ~/.claude/skills/

使用示例：

用复合组件模式重构这个组件
我应该如何构建这个复杂的表单组件？
审查这个组件 API 的组合模式

适用人群： 设计系统工程师、组件库维护者、构建可复用 UI 组件的前端开发者。当你在设计其他开发者将消费的组件 API 时，这个技能尤其有价值。

技能 5：UI/UX pro max

一句话总结： 最全面的设计智能技能，50+ UI 风格、97 种配色、57 种字体组合，横跨 9 个技术栈。

属性 详情
来源 nextlevelbuilder/ui-ux-pro-max-skill
Star 数 29,636
许可证 MIT
最后更新 2026 年 2 月
验证 SKILL.md 是

这是当前生态中最全面的设计智能技能。如果说 Anthropic 的 frontend-design 技能赋予 Claude 审美品味，Vercel 的技能聚焦工程模式，UI/UX Pro Max 则赋予 Claude 可搜索的设计数据库：50+ UI 风格、97 种配色、57 种字体组合、99 条 UX 指南、25 种图表类型，横跨 9 个技术栈。

四步工作流

第一步： 分析需求。从用户请求中提取产品类型、风格关键词、行业、技术栈。

第二步： 生成设计系统（必需）。运行 --design-system 获取带推理的完整推荐。并行搜索 5 个领域（产品、风格、色彩、落地页、字体），应用 CSV（逗号分隔值）数据集的推理规则，返回完整设计系统：pattern（模式）、style（风格）、colors（配色）、typography（排版）、effects（效果）和需避免的反模式。

第三步： 补充详细搜索。查询单个领域（风格、图表、UX、字体、落地页）获取额外细节。

第四步： 获取技术栈指南。拉取特定技术栈的实现最佳实践（html-tailwind、react、nextjs、vue、svelte、swiftui、react-native、flutter、shadcn、jetpack-compose）。

持久化设计系统： 采用 master + overrides（主文件 + 覆盖文件）模式。运行 --design-system --persist 创建 design-system/MASTER.md 文件（全局事实来源）和 design-system/pages/ 目录用于页面级覆盖。这是大型项目的贴心设计——仪表板页面可能需要与营销页面不同的密度规则，同时共享相同的核心配色和字体。

规则优先级分类
优先级 类别 影响程度
1 无障碍 极高
2 触控与交互 极高
3 性能 高
4 布局与响应式 高
5 字体与色彩 中
6 动效 中
7 风格选择 中
8 图表与数据 低

无障碍检查： 最小 4.5:1 对比度、可见焦点环、描述性 alt 文本、ARIA 标签、键盘导航、恰当表单标签。交付前检查清单涵盖视觉质量、交互、亮/暗模式对比、布局和无障碍。

实用细节： 技能包含《专业 UI 通用规则》章节，罗列常被忽视的问题：

  • 不用 emoji 图标（用 SVG）
  • 所有可点击元素用 cursor-pointer
  • 150-300ms 平滑过渡
  • 亮色模式玻璃卡片需 bg-white/80 或更高不透明度，而非 bg-white/10
  • 亮暗模式边框可见性检查

安装方式：

git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
cp -r ui-ux-pro-max-skill ~/.claude/skills/

使用示例：

为金融科技仪表盘生成一套设计系统
什么配色适合医疗健康类应用？
为奢侈品品牌网站推荐字体组合

适用人群： 希望 Claude 基于产品类型、行业和美学方向做出明智设计决策，而非生成通用默认的设计师和开发者。持久化设计系统功能使其对多页面应用团队特别有用。

技能 6：Bencium UX designer

一句话总结： 超过 28,000 字符的完整 UX 设计参考文档，涵盖设计思维、视觉标准、交互设计和无障碍。

属性 详情
来源 bencium/bencium-claude-code-design-skill
Star 数 72
许可证 未指定
最后更新 2025 年 11 月
验证 SKILL.md 是（2 个变体）

这是 Claude Skills 生态中对 UX 设计基础最全面的单技能处理。其他技能聚焦特定关注点（无障碍、性能、美学），Bencium 的技能是一份完整的 UX 设计参考文档，超过 28,000 字符，涵盖设计思维、视觉标准、交互设计和无障碍。

两个变体：

  • bencium-innovative-ux-designer：鼓励大胆、创意、独特的设计选择（理念类似 Anthropic 的 frontend-design 技能，但深度远超）
  • bencium-controlled-ux-designer：用于一致性和控制比创意更重要的项目

两者包含相同参考文档：ACCESSIBILITY.md、RESPONSIVE-DESIGN.md、MOTION-SPEC.md、DESIGN-SYSTEM-TEMPLATE.md。

核心设计理念
  • 简化即美： 从复杂开始，刻意删减直至最简单有效方案
  • 材质诚实： 数字材质有独特属性，拥抱它们
  • 功能分层： 通过字体层级、色彩对比和空间关系创建层次
  • 细节执着： 每个像素都是有意决策
  • 连贯设计语言： 每个元素应视觉传达其功能
  • 技术隐形： 用户专注内容和目标，而非理解界面
视觉设计标准
  • 完整色彩系统架构（基础中性色板 + 点缀色板，背景、文本、按钮、状态指示器和交互状态的应用规则）
  • 字体卓越（功能型 vs 情感型字体、字体层级、间距/可读性规则、响应式字体、按钮/表单标签/输入框/错误消息的 UI 特定指南）
  • 布局与空间设计（构图平衡、网格纪律、注意力引导）
交互设计
  • 直接操作模式（拖拽优于上下按钮，行内编辑优于独立表单）
  • 每次交互 100ms 内即时反馈
  • 容错模式（预防策略 + 恢复策略）
  • 渐进式披露（摘要、详情、高级）
  • 现代 UX 模式：对话界面、自适应布局、大胆视觉表达

安装方式：

git clone https://github.com/bencium/bencium-claude-code-design-skill.git
cp -r bencium-claude-code-design-skill ~/.claude/skills/

使用示例：

设计一个用户资料页面，要用规范的UX模式
审查这个表单的无障碍和可用性问题
创建一个有渐进式披露的导航组件

适用人群： 希望 Claude 理解并应用 UX 设计基础，而非仅审美偏好的 UX 设计师和前端开发者。两个变体（创新 vs 控制）使其适应创意项目和系统化项目。

技能 7：AccessLint plugin

一句话总结： Claude 的专用无障碍工具包，含 4 个技能、1 个 AI 审查代理和 1 个 MCP 服务器。

属性 详情
来源 accesslint/claude-marketplace
Star 数 8
许可证 MIT
最后更新 2025 年 11 月
验证 SKILL.md 是

AccessLint 是 Claude 的专用无障碍工具包。不同于本列表中其他技能内置的无障碍功能（将 a11y（无障碍，accessibility 的缩写）作为众多关注点之一），AccessLint 将全部焦点放在无障碍上。它包含四个专门技能、一个 AI 审查代理和一个捆绑的 MCP 服务器，用于程序化色彩对比分析。

4 个技能
技能 功能描述
contrast-checker 交互式色彩对比检查器。计算 WCAG 比例，检查 AA/AAA 合规，建议保留设计意图的无障碍替代方案
refactor 自动修复多文件中的无障碍问题。添加缺失 alt 文本、ARIA 标签、语义化 HTML。处理多文件重构同时保留代码风格
use-of-color WCAG 1.4.1 合规检查器。查找仅用颜色区分的链接、仅用颜色显示的表单错误、仅用颜色的状态指示器、仅用颜色的交互元素悬停/焦点
link-purpose 检查链接文本的描述性和上下文
1 个代理

accesslint:reviewer 代理执行全面的多步无障碍代码审查。扫描代码库中的 WCAG 2.1 A 级和 AA 级合规问题，浏览代码库理解完整上下文，生成结构化审计报告，含优先问题、严重级别和 WCAG 引用。

MCP 服务器

插件还捆绑 MCP 服务器（@accesslint/mcp），暴露三个工具：

  • calculate_contrast_ratio：计算两色间的 WCAG 对比度
  • analyze_color_pair：所有内容类型和 WCAG 级别的详细通过/失败分析
  • suggest_accessible_color：获取满足 WCAG 要求同时保留设计意图的无障碍色彩替代

组合使用： MCP 工具对所有其他技能和代理可用，意味着可将 AccessLint 与本列表其他设计技能组合。对比检查工具与生成调色板的技能配对时特别有用。

WCAG 覆盖范围
  • 可感知： Alt text、语义结构、色彩对比
  • 可操作： 键盘导航、焦点管理、焦点可见性
  • 可理解： 清晰标签、错误识别、一致行为
  • 健壮： 恰当 ARIA 使用、可访问名称和角色

安装方式：

git clone https://github.com/accesslint/claude-marketplace.git
cp -r claude-marketplace/plugins/accesslint ~/.claude/skills/

使用示例：

检查这个设计的色彩对比度
重构这个组件以满足 WCAG 标准
审查这个页面的无障碍问题

适用人群： 任何认真对待无障碍的 UI/UX 工程师。需要强制执行 WCAG 合规的设计系统团队。准备无障碍审计的开发者。

相关资源：

  • 什么是跨站脚本攻击 (XSS)？（Web 安全基础）
  • 内容安全策略如何防御 XSS？（CSP 防护指南）

技能 8：Vercel React Native Skills

一句话总结： 移动端 UI 性能优化指南，覆盖列表性能、动画、导航和 10 条移动端特定 UI 模式。

属性 详情
来源 vercel-labs/agent-skills（路径：skills/react-native-skills/）
Star 数 19,487
许可证 MIT
最后更新 2026 年 1 月
验证 SKILL.md 是

背景： 移动端 UI/UX 有自身的性能约束和交互模式。React Native 和 Expo 应用需要在内存受限设备上保持 60fps，处理基于手势的导航，尊重 iOS 和 Android 不同的平台惯例。这个技能捕捉对移动端 UI 性能最重要的模式。

规则分类
优先级 类别 影响程度 规则数
1 列表性能 极高 8
2 动画 高 3
3 导航 高 1
4 UI 模式 高 10
5 状态管理 中 5
6 渲染 中 2
7 Monorepo（单一代码仓库） 中 2
8 配置 低 3

列表性能排名第一： 因为列表是移动应用最常见的性能瓶颈。

8 条列表规则： 使用 FlashList（高效列表组件）替代 FlatList、记忆化列表项、稳定回调引用、避免内联样式对象、提取函数到渲染外、优化列表中的图片、将昂贵操作移出列表项、对异构列表使用 item types（列表项类型）。

10 条移动端 UI 模式
  • 所有图片使用 expo-image（推荐图片组件，非 React Native 内置 Image）
  • 用 Pressable（可按压组件）替代 TouchableOpacity（触摸不透明组件）
  • 处理 ScrollViews 中的安全区域
  • 滚动视图中的头部使用 contentInset
  • 使用原生上下文菜单和原生模态框
  • 视图测量用 onLayout 替代 measure()
  • 样式用 StyleSheet.create 或 NativeWind

动画规则： 聚焦 GPU（图形处理器）加速属性：仅动画 transform 和 opacity，计算动画用 useDerivedValue，手势驱动交互用 Gesture.Tap 替代 Pressable。

安装方式：

git clone https://github.com/vercel-labs/agent-skills.git
cp -r agent-skills/skills/react-native-skills ~/.claude/skills/

使用示例：

为什么这个 FlatList（扁平列表）滚动这么卡？
优化这个 React Native 列表的性能
实现一个流畅的页面过渡动画
审查这个 Expo 应用的性能问题

适用人群： 构建 UI 性能至关重要的移动应用的 React Native 和 Expo 开发者。维护跨平台组件库的设计系统工程师。

四、安装技能时的安全考量

讽刺的是： 用 AI 技能改进设计工作流的同时，技能生态本身存在安全风险。

相关安全研究发现，13% 的受测技能含严重安全漏洞，部分甚至主动试图外泄凭证。安全研究演示了技能文件中三行 markdown 即可授予攻击者对你机器的 shell 访问权限。

安装前必做清单

  1. 阅读 SKILL.md 和任何捆绑脚本。 技能是 markdown 和 shell 脚本，非编译二进制。你可以阅读每一行。
  2. 检查来源。 来自知名组织（Anthropic、Vercel）和知名维护者的技能风险较低。社区技能值得更多审查。
  3. 审查权限。 allowed-tools frontmatter（文件头元数据）字段显示技能可使用哪些工具。需要 Bash 访问的技能比仅用 Read 和 Grep 的更值得审查。
  4. 使用安全扫描工具。 如果你已在使用代码安全扫描工具或 MCP 集成，可以像扫描任何代码一样扫描技能脚本。
  5. 对含 Python 脚本的技能格外谨慎。 UI/UX Pro Max 含 Python 搜索工具。运行前通读 scripts/search.py。本例中工具查询本地 CSV 数据，是安全的，但一般原则适用。

一般原则： 信任，然后验证。

社区开发者演示了如何使用 Claude Code 构建安全应用，然后扫描 AI 生成的输出以发现漏洞。这是你在安装技能脚本前可以采用的同样的扫描修复工作流。

五、总结

Claude Skills 位于"只是一个提示"和"完整集成"之间的甜蜜点。对 UI/UX 工程师而言，它们解决了一个真实问题：AI 编码助手很强大，但除非给予恰当上下文，否则倾向于产出通用输出。精心设计的技能就是那种上下文，以高效加载、相关时激活的方式打包。

生态分类

类别 包含技能 价值
创意方向 Anthropic Frontend Design、Bencium UX Designer 推动 Claude 走向独特、有意图的设计
设计智能 UI/UX Pro Max 可搜索的风格、调色板、字体和 UX 指南数据库
质量与合规 Vercel Web Design Guidelines、AccessLint 确保输出满足无障碍标准和 web 最佳实践
工程模式 React Best Practices、Composition Patterns、React Native Skills 编码了区分专业组件库与原型的性能和架构知识

最佳实践

最有效的方式是组合多类技能：

  • 安装 Frontend Design 技能保障美学质量
  • Web Design Guidelines 技能保障无障碍合规
  • React Best Practices 技能保障性能

它们不冲突，而是互补，各自为 Claude 的输出增加不同质量层。

UI/UX 社区对 AI 工具的拥抱并非关于替代设计判断，而是消除设计师和前端开发者已知道如何做但觉得繁琐的任务中的摩擦：

  • 搭建无障碍组件变体
  • 检查对比度
  • 对照最佳实践清单审计
  • 编写响应式布局

技能将那种委托形式化。

如果你已在使用 Claude Code 进行前端工作，安装几个技能是 5 分钟的投资，首次让 Claude 生成真正具有字体个性的落地页、在上线前捕获无障碍违规、或将属性参数繁重的组件重构为干净复合组件模式时即可获得回报。

Logo
DeepSeek技术社区

欢迎加入DeepSeek 技术社区。在这里，你可以找到志同道合的朋友，共同探索AI技术的奥秘。

更多推荐

DeepSeek总结的欢迎来到 ORDER BY 丛林

这篇文章揭示了SQL中ORDER BY子句的复杂行为，指出开发者常误解其工作原理。作者通过示例展示：裸标识符（如ORDER BY a）会查找SELECT列表别名，而表达式（如ORDER BY -a）则查找FROM子句中的列。这种差异导致看似相似的查询产生不同结果。文章还探讨了GROUP BY、窗口函数和UNION中ORDER BY的特殊行为，以及大小写敏感、括号和类型转换等微妙影响。最终指出这些复

avatar DeepSeek技术社区

DeepSeek总结的PostgreSQL 18.4, 17.10, 16.14, 15.18 和 14.23 发布

PostgreSQL发布18.4、17.10、16.14、15.18和14.23版本更新，修复了11个安全漏洞和60多个错误。关键安全修复包括：CREATE TYPE权限绕过(CVE-2026-6472)、内存分配不足导致的越界写入(CVE-2026-6473)、timeofday()内存泄露(CVE-2026-6474)等。同时提醒PostgreSQL 14将于2026年11月12日终止支持，建

avatar DeepSeek技术社区

2026 年 AI 编程工具终极横评：GitHub Copilot vs Cursor vs Claude Code，万字实测告诉你选哪个

2023 年：代码补全 = AI 编程，GitHub Copilot 几乎没对手2024 年：Cursor 横空出世，Agent 概念走红2025 年：多 Agent 编排成熟，价格战开打2026 年：三家各有千秋，"选工具"本身成了一个需要深思熟虑的工程决策你的工作流在 IDE 里还是终端里？你每天写的最多的是什么代码？（单文件补全 vs 跨文件架构变更）你的预算是 $10/月还是 $20/月，

avatar DeepSeek技术社区