智能体技能

Claude Code 技能选型：设计与开发

比较用于界面设计、UI 审查与开发规划的 Claude Code Skills；核对来源与范围，再按客户端安装指南接入。

按工作流选技能提交作品

vibeforthat 编辑整理资料更新 2026-11-04

本页内容

选一个入口继续

7 个入口

界面设计

Frontend Design 技能：设计简报与界面检查

Frontend Design 是 Anthropic 提供的界面设计指导，将字体、构图、颜色与交互的选择联系起来，在项目技术约束内形成清晰视觉方向。

继续阅读

界面设计

UI UX Pro Max 技能：设计系统与界面选择

UI UX Pro Max 是面向设计的技能项目，包含设计系统工具与参考资料，为编码代理的视觉选择和可复用界面模式提供更有结构的起点。

继续阅读

界面设计

Web Design Guidelines 技能：界面审查

Vercel 的 Web Design Guidelines 技能按持续维护的 Web Interface Guidelines 审查界面代码，针对所选文件返回关联代码位置的问题，适合改善已有 UI。

继续阅读

智能体技能

Superpowers 技能：规划与验证

Superpowers 是技能框架与开发方法，串联设计澄清、计划、实现和审查，强调测试驱动开发与明确检查，并为不同编码代理环境提供安装路线。

继续阅读

智能体技能

Vercel Agent Skills：任务与前置条件

Vercel Agent Skills 是官方维护的代理指令与脚本仓库。集合页负责导航，具体任务再落到单个技能。

继续阅读

智能体技能

SkillsMP：发现技能并检查原始来源

SkillsMP 索引公开智能体技能及原始来源，可用于发现案例。使用前应查看作者、范围与配套文件。

继续阅读

智能体技能

GitHub Spec Kit：在现有项目里从规格走到任务

在现有仓库里用 GitHub Spec Kit 跑一次小改动，实施前核对规格、计划和任务。

继续阅读

搭配使用的 UI 组件库

设计方向确定后，可以继续比较这些组件与界面资源。各资源页列出了技术栈、使用范围及源码入口。

图解流程图

Claude Code

Codex

Cursor

发现、加载并使用编程技能

01明确缺少的指导区分视觉方向、界面审查与开发规划。

02在正确范围加载选择客户端的个人或仓库加载路线。

03检查包的边界识别配套脚本、工具与打包的连接器。

01区分设计生成、界面审查和实施规划。

02区分项目共享工作流与个人工作流。

03技能除指令外，也可以包含脚本和参考资料。

先做一项可验证的任务

选择适合重复任务的技能，比如规划功能或检查界面。看清指令和输入要求，再在实际项目里试一个小任务。

安装并验证 Claude Code 技能

为具体缺口选择技能

Frontend Design 关注视觉方向，UI UX Pro Max 提供更广的设计参考流程，Web Design Guidelines 用于界面审查，Superpowers 组织规划与实现。明确各自职责后，可以组合使用。

技能	适合任务	使用前查看	结果验收
Frontend Design	为新界面确定一致的视觉方向	发布方指令及项目现有设计令牌	在实际页面检查字体、层级与响应式表现
UI UX Pro Max	探索设计参考并转化为实施选择	附带脚本、参考资料与本地依赖	检查设计方向是否符合产品及现有组件
Web Design Guidelines	按设计与可访问性指引审查现有界面	审查指令及覆盖的文件、页面	在相关交互与视口中核实具体问题
Superpowers	组织规划、实施与验证流程	工作流阶段、配套工具与仓库约定	确认目标结果和项目检查的执行证据