wpds – WordPress 设计系统 Skill

Skill 详细介绍

wpds 是 Automattic 在 automattic/agent-skills 仓库中提供的一个 Agent Skill，完整识别标志为 automattic/agent-skills#wpds。它面向 WordPress 相关开发与设计工作，把 WordPress 官方设计体系（WordPress Design System，简称 WPDS）的规范、组件、模式与最佳实践整理成 Agent 可加载的指令集，让 AI Agent 在生成 WordPress 界面、主题、插件后台页面、区块编辑器界面时，能按 WordPress 官方设计语言输出，而不是自由发挥。

它本身不是一个可以独立运行的程序，也不是 WordPress 插件或主题。安装后，它给 Agent 增加的是一套关于 WordPress 界面设计与前端实现的约束性知识与流程：配色、排版、间距、组件用法、无障碍要求、命名与结构约定等。

核心用途

• 为 WordPress 后台、区块编辑器、插件设置页设计界面
• 按照 WPDS 规范生成或审查 CSS、组件结构与设计 token
• 在既有 WordPress 项目中保持视觉一致性与可访问性
• 把「WordPress 风格」的界面需求，翻译成可落地的前端实现

它不是什么

• 不是 WordPress 核心、Gutenberg 或某个主题的替代品
• 不是设计稿生成工具，不直接产出图片或 Figma 文件
• 不负责运行、部署或托管 WordPress 站点
• 不调用第三方设计 API，也不依赖在线设计资源

典型任务

• 生成符合 WPDS 的插件设置页面结构
• 审查现有 WordPress 界面的配色、间距、组件是否符合官方设计规范
• 把通用前端组件改造成 WordPress 后台风格
• 为自定义区块或管理界面提供符合规范的设计与实现建议

适合的用户：WordPress 插件 / 主题开发者、做 WordPress 定制项目的团队、需要让 AI 生成「看起来就是 WordPress 原生」界面的开发者。

不适合的需求：只想快速做通用 SaaS 后台、不打算遵循 WordPress 设计语言的项目；与 WordPress 无关的前端工作。

本质上，它更接近一份设计体系指令集与工作流指导，而不是一个功能型工具。它的价值取决于加载它的 Agent 是否具备前端生成与代码理解能力。

Skill 安全评估

总体判断：这是一个以设计规范与开发指导为主的 Skill，来源为 WordPress 母公司 Automattic 官方仓库，风险面相对可控。它主要影响 Agent 的输出内容与代码风格，并不天然要求高权限。

需要关注的点：

• 来源可信度：来自 automattic/agent-skills 官方仓库，作者为 WordPress 所属组织，来源可信度较高。
• Shell 权限：Skill 本身用于生成 / 审查界面代码。若 Agent 被授予自动执行 Shell 的权限，它可能生成并执行构建、测试命令。是否授权应取决于你的工作流，而不是 Skill 的需要。若只需生成建议，可关闭自动执行，由你手动运行命令。
• 文件读写：审查或改造现有 WordPress 项目时，Agent 可能读取并修改主题 / 插件文件。建议在版本控制（Git）下操作，先审查 diff 再合并。
• 网络访问：Skill 不依赖在线设计 API。是否联网主要由你使用的 Agent 决定，而非本 Skill 强制要求。
• 凭证 / API Key：Skill 本身不需要 WordPress、Automattic 或任何第三方账号与 API Key。若你后续让它操作真实站点，凭证依赖来自你的项目环境，不是该 Skill 带来的。
• Prompt Injection：设计类 Skill 一般不主动抓取外部内容，此类风险较低；但如果 Agent 同时读取外部网页素材，仍需警惕来源不明的指令注入。

降低风险的建议：

• 在 Git 管理的项目中让 Agent 修改文件，保留回滚能力
• 仅生成代码、不自动执行时，关闭自动 Shell 执行
• 不要把生产站点的写权限凭证交给 Agent
• 提交前人工审查涉及样式覆盖、全局 CSS 的改动

以上不属于「绝对安全」或「已审计」的结论，只是基于该 Skill 官方来源与任务性质的风险判断。具体安全行为以官方仓库当前说明为准。

Skill 使用要求

一、Agent / 客户端

该 Skill 来自 Automattic 官方 Agent Skills 仓库，属于通用的 Agent Skill 形态，官方未公布完整的第三方 Agent 兼容列表。在支持 Skills、自定义指令或类似加载机制的环境中通常可以尝试使用，包括 Claude Code、Codex、Cursor、Trae、OpenClaw、WorkBuddy 等。不同 Agent 的 Skill 加载方式与兼容程度可能不同，具体以对应 Agent 当前版本为准。如果你的 Agent 支持 Skills，优先在该 Agent 中加载。

二、运行环境 / 依赖

Skill 本身以指令集形式提供，通常不要求额外安装运行时。真正需要的是你后续要处理的 WordPress 项目环境。

官方未明确指定 Node.js、PHP 或其他依赖的最低版本，请以你项目自身要求为准。

三、权限

• 文件读取：可选，用于审查现有项目界面代码
• 文件写入：可选，用于生成或修改样式 / 组件文件
• Shell：可选，仅在需要运行构建或测试时
• 网络：非必需
• GitHub / 浏览器 / Docker：与 Skill 无关

四、账号 / API Key

Skill 本身不需要任何账号、API Key 或 Token。若你把 Agent 接入实际 WordPress 站点或第三方服务，那是你项目环境的凭证，与该 Skill 本身无关。

最小使用条件

• 一个支持加载 Skill / 自定义指令的 AI Agent
• 一个可供 Agent 阅读或修改的 WordPress 相关代码 / 项目（可选）
• 必要时具备前端基础以审查生成的代码

Skill 安装、使用与卸载教程

一、安装

可以直接复制本页面提供的 Skill 安装指令，粘贴到你的 Agent 或终端执行。不同 Agent 的安装机制不同，如果不确定自己的 Agent 如何安装，可以直接向当前 Agent 提问：

如何安装 automattic/agent-skills#wpds？

如何在 Claude Code 中安装 automattic/agent-skills#wpds？

如何在 Cursor 中安装 automattic/agent-skills#wpds？

让当前 Agent 根据自己的 Skill 加载与管理机制指导你完成安装。官方未公布需要额外手工操作的特殊安装条件，按本页安装指令或 Agent 指引操作即可。

二、安装后如何使用

安装后，当你的任务涉及 WordPress 界面设计、后台页面、区块或插件前端样式时，Agent 会加载该 Skill 的规范来组织输出。触发方式通常依赖 Agent 的 Skill 自动匹配或你显式点名。

可以这样向 Agent 描述需求：

使用 wpds，帮我设计一个符合 WordPress 官方设计规范的插件设置页面。

使用 wpds，审查这个 WordPress 后台界面的配色和间距是否符合 WPDS 规范。

使用 wpds，把这段通用 CSS 改造成 WordPress 后台风格的组件样式。

描述需求时，尽量说明：是哪个界面（后台 / 区块 / 插件页）、什么技术栈、是否需要可访问性支持。给出的信息越具体，输出越贴近规范。

三、卸载

卸载方式取决于你的 Agent：可以使用对应 Agent 或 Skill 管理器提供的删除方式移除该 Skill，也可以直接向当前 Agent 询问：

如何卸载 automattic/agent-skills#wpds？

不同 Agent 的 Skill 安装位置和管理方式可能不同。如果没有统一的卸载命令，直接让当前 Agent 移除该 Skill 通常更稳妥。官方未提供专门的卸载命令时，不建议自行猜测删除路径。

常见问题

1. 安装后 Agent 没有按 WPDS 规范输出，为什么？

先确认 Skill 是否被 Agent 成功识别和加载。可以在提问时显式点名「使用 wpds」。另外，不同 Agent 对 Skill 的触发机制不同，有的需要显式调用，有的自动匹配。若仍未生效，可询问当前 Agent 该 Skill 是否已加载。

2. 可以同时安装到多个 Agent 吗？

通常可以。Skill 一般按 Agent 各自的目录或管理机制安装，互不冲突。具体以各 Agent 的 Skill 管理方式为准。

3. Skill 更新后需要重新安装吗？

取决于你的 Agent 如何管理 Skill。有的 Agent 支持拉取更新，有的需要重新安装。可询问当前 Agent「如何更新 automattic/agent-skills#wpds」。官方未统一说明更新机制。

4. 它会不会直接修改我的 WordPress 项目文件？

是否修改文件由 Agent 的权限和你给出的指令决定，而不是 Skill 强制。如果只想获得建议，可以要求 Agent 只输出代码片段、不写入文件；需要在项目中落地时，建议在 Git 下操作并先审查改动。

5. 是否可以关闭 Shell 权限后使用？

可以。该 Skill 主要产出设计规范与代码建议，Shell 并非必需。关闭自动执行后，由你手动运行构建或测试命令即可，安全性更高。

6. 在中国大陆使用是否有网络要求？

该 Skill 本身不强制联网，也不依赖特定海外服务。是否需要网络取决于你的 Agent 和任务。若涉及从国外源安装或拉取仓库，网络可达性可能受环境影响，按你所在环境的实际情况处理。

7. 它和通用的前端设计 Skill 有什么区别？

区别在于它专门围绕 WordPress 官方设计体系。通用前端 Skill 输出的是通用 Web 风格，而 wpds 的目标是让输出符合 WordPress 原生设计语言，更适合做 WordPress 插件、主题与后台界面的项目。