Agent Skills
› Automattic/studio
Automattic/studio
GitHub提供可视化标注功能，让用户在浏览器中点击网站元素并留下修改反馈。Agent读取标注后，通过WP-CLI或CSS修改WordPress站点内容、样式或模板，并截图验证结果。
Install All Skills
npx skills add Automattic/studio --all -g -y
Skills in Collection (35)
提供可视化标注功能，让用户在浏览器中点击网站元素并留下修改反馈。Agent读取标注后，通过WP-CLI或CSS修改WordPress站点内容、样式或模板，并截图验证结果。
用户希望直观地指定页面上需要修改的具体元素
用户希望通过点击而非文字描述来传达前端调整需求
npx skills add Automattic/studio --skill annotate -g -y
指导编写WordPress区块标记，规范使用核心区块、主题CSS及样式变体，限制HTML块用途，确保编辑器兼容性与可编辑性。
编写WordPress页面内容
编辑区块模板或图案
生成区块标记代码
npx skills add Automattic/studio --skill block-content -g -y
通过调用实时 API 获取 WordPress.com 计划名称、功能及价格，回答用户关于套餐升级和权益的咨询，严禁凭记忆作答。
询问 WordPress.com 套餐详情或定价
咨询特定功能在哪个层级可用
请求推荐合适的升级方案
npx skills add Automattic/studio --skill hosting-plans-helper -g -y
指导如何为网站生成AI图片，包括规划、指定路径（内容或主题）、批量调用及编写描述，确保正确放置文件并处理失败。
设计需要图片时
准备调用 generate_images 前
npx skills add Automattic/studio --skill imagery -g -y
将网站从URL或文件迁移至WordPress Studio，通过CLI导入并对比差异，使用块编辑器修复视觉和功能问题，确保站点还原度。
用户想要迁移、导入、移动或重建网站
用户提供网站URL或本地文件包
npx skills add Automattic/studio --skill liberate -g -y
对WordPress网站进行性能审计，测量核心Web指标和页面构成，并基于分析结果提供具体的优化建议。
用户请求检查WordPress网站性能
需要获取前端性能优化方案
npx skills add Automattic/studio --skill need-for-speed -g -y
指导在WordPress中为电商、表单、课程等核心块未覆盖的功能推荐首选插件（如WooCommerce、Jetpack），遵循优先使用核心块和已激活插件的规则，避免手写HTML。
需要实现电商或销售功能
需要构建表单或订阅功能
需要在线课程或测验功能
需要投票或调查功能
询问WordPress插件推荐
npx skills add Automattic/studio --skill plugin-recommendations -g -y
对WordPress站点进行SEO审计，检查元标签、标题结构等缺失项。优先检测已安装插件以提供精准配置建议或推荐替代方案，输出按优先级排序的修复清单。
用户请求优化网站搜索引擎排名
用户要求检查WordPress站点的SEO健康状况
npx skills add Automattic/studio --skill rank-me-up -g -y
在构建WordPress站点前，通过交互式问答收集用户布局偏好和插件需求，生成指导后续设计与开发的Site Spec。
用户指定了活跃站点并准备开始设计或开发
需要明确站点结构、页面数量及品牌名称等基础信息
npx skills add Automattic/studio --skill site-spec -g -y
WordPress分类体系优化技能，通过导出文章和分类数据，利用AI分析并建议合并重复、归档废弃、创建缺失分类及重新归类文章，提供安全预览与日志记录。
用户希望清理或改进WordPress网站的分类结构
需要合并重复分类或归档无效分类
npx skills add Automattic/studio --skill taxonomist -g -y
用于网站创建、重设计及视觉优化的技能，涵盖布局、排版、色彩及动效规划。通过选定艺术方向和签名概念，指导前端界面的视觉呈现与结构实现。
创建新网站或落地页
进行网站视觉重设计
定义界面风格系统
调整排版、色彩或动效
npx skills add Automattic/studio --skill visual-design -g -y
用于验证并修复网站构建或重设计后的视觉缺陷。通过读取真实DOM与意图对比，批量修复布局、间距等渲染问题，确保页面视觉效果符合设计规范。
网站构建完成后需要视觉检查
修复生成站点的设计瑕疵
验证重设计页面的渲染效果
npx skills add Automattic/studio --skill visual-polish -g -y
用于通过wpcom_request工具远程管理WordPress.com站点，涵盖API命名空间选择、端点发现及内容、主题、插件等操作。
需要查询或修改WordPress.com站点内容时
管理WordPress.com站点的插件或主题时
npx skills add Automattic/studio --skill wpcom-remote-management -g -y
指导构建新平台适配器以提取内容，涵盖平台检测、发现与提取流程。
需要支持新的内容平台
逆向工程平台接口
npx skills add Automattic/studio --skill adapt -g -y
提供从零创建 WordPress 区块的模板和指南，规范文件生成、交互逻辑及动态渲染，确保代码符合标准。
需要从零开始创建新的 WordPress 区块
询问关于 WordPress 区块开发的最佳实践或模板
npx skills add Automattic/studio --skill creating-blocks -g -y
指导从零开始创建全新的WordPress区块主题，强调首页设计、最小化模板集及FSE兼容性。不用于修改现有主题，需遵循特定文件结构和配置规范。
用户要求从零创建新的WordPress主题
生成符合Full Site Editing标准的主题文件
npx skills add Automattic/studio --skill creating-themes -g -y
基于HTML/CSS分析数据与部分脚手架，构建语义化设计基础JSON。优先使用聚合CSS证据，仅在歧义时调用截图验证，为WordPress主题生成提供标准化中间层。
需要构建或补全设计基础（Design Foundation）JSON时
在liberate_design_foundation_scaffold之后、主题生成之前执行时
npx skills add Automattic/studio --skill design-foundations -g -y
诊断数据采集失败或低质量原因的技能。通过日志分析和源头探测定位根因，解决高失败率、内容缺失、崩溃及质量低下等问题，提供系统性排查与修复方案。
采集大量页面失败
提取内容质量低
采集过程卡死或崩溃
用户报告导入后内容缺失
npx skills add Automattic/studio --skill diagnose -g -y
用于修改现有WordPress块文件的指南，指导理解架构、进行最小化变更及验证渲染。
修改已存在的WordPress块文件
更新块的属性或交互逻辑
npx skills add Automattic/studio --skill editing-blocks -g -y
指导修改现有WordPress块主题文件的技能，强调最小化变更、保留原有设计方向及特定文件操作规范，避免无关重写。
用户请求修改现有的WordPress主题文件
需要调整已有主题的模板、样式或配置
npx skills add Automattic/studio --skill editing-themes -g -y
指导生成WordPress主题区块模式的技能，重点处理Shopify等页面构建器内容，严格禁止改写或合成文案，确保所有可见文本源自古迹或占位符，维护内容保真度。
创建WordPress主题区块模式
转换页面构建器内容为WordPress区块
npx skills add Automattic/studio --skill generating-patterns -g -y
该技能是 /liberate 的别名，用于将网站或本地目录迁移到 WordPress。它不拥有独立工作流，而是直接调用 liberate 技能执行完整流程，支持 URL 和本地文件夹输入。
用户希望将现有网站迁移至 WordPress
用户希望将本地 HTML/CSS/JS 目录导入 WordPress
npx skills add Automattic/studio --skill migrate -g -y
分析本地静态站点的JS数据或HTML卡片，生成data-model.json以转换为WordPress驱动内容。
需要转换包含JS数据网格的静态站点
处理重复的静态HTML内容卡片
npx skills add Automattic/studio --skill model-local-data -g -y
用于内容迁移QA，对比WXR与源站页面，检查文本、标题、图片及链接缺失并修复，生成健康评分和结构化报告。
qa
check extraction
compare content
verify extraction quality
npx skills add Automattic/studio --skill qa -g -y
作为设计QA流程的子代理，将分歧的页面区块重建为符合规范的WordPress原生核心块标记。通过对比源HTML、截图和设计令牌，确保视觉一致性并遵循标准化约束，仅在前期步骤失败时触发。
设计QA流程中R1至R3步骤未能实现视觉一致性的区块重建
需要将特定HTML或截图内容转换为标准化的WordPress核心块结构
npx skills add Automattic/studio --skill rebuild-section -g -y
用于验证 JavaScript 文件语法错误的技能。通过 Node.js 检查 JS 文件，自动修复语法问题并报告结果，仅限语法检查，不修改业务逻辑或运行 ESLint。
需要检查 JavaScript 文件是否存在语法错误
批量验证项目中的 JS 文件语法
npx skills add Automattic/studio --skill testing-js -g -y
用于检测并修复 PHP 文件语法错误的技能。通过遍历项目 PHP 文件并使用 php -l 进行语法检查，自动修复错误并验证结果，限制最多3次修复循环，仅关注语法问题，不修改业务逻辑或运行代码规范工具。
需要检查 PHP 文件是否存在语法错误
发现 PHP 文件报错且怀疑是语法问题
提交代码前进行静态语法校验
npx skills add Automattic/studio --skill testing-php -g -y
指导使用 wp-now 在运行时验证 WordPress 插件或主题的正确加载情况，包括启动服务、检查 PHP 错误日志及 HTTP 响应状态，确保功能正常。
需要验证 WordPress 插件或主题的运行时加载状态
检查 WordPress 环境下的 PHP 致命错误或警告
npx skills add Automattic/studio --skill testing-wp-runtime -g -y
用于管理本地 WordPress 站点，包括创建、启动、停止、删除及配置。支持通过 URL 导入网站，利用 Data Liberation 工具进行数据迁移和静态站点生成，并处理认证与预览。
需要创建或管理本地 WordPress 站点
需要通过 URL 导入现有网站到本地环境
需要查看或修改本地站点的配置状态
npx skills add Automattic/studio --skill studio-cli -g -y
将单页渲染HTML和截图转换为WordPress块编辑器标记，确保内容准确、使用主题设计令牌并符合核心块规范。
需要将从源站提取的原始HTML转换为WordPress块标记
在流式处理循环中为单个页面生成post_content
npx skills add Automattic/studio --skill compose-page-blocks -g -y
用于主题复刻后的视觉QA闭环，通过截图对比、响应式及视觉一致性门禁检查，驱动自动化修复或人工升级，确保复刻站与源站高度一致。
主题复刻安装并导入内容后
需要验证复刻站点视觉保真度时
npx skills add Automattic/studio --skill design-qa -g -y
自动化前端视觉一致性校验技能，通过两阶段流程（全页测量与局部迭代修复）确保构建页面与源截图像素级一致，支持基于语义日志的重放与验证。
需要校验或修复前端页面与设计稿的视觉差异
执行设计质量保证(DQA)流程
重建后需重新应用之前的视觉修复意图
npx skills add Automattic/studio --skill match-page -g -y
通过视觉对比循环迭代，修正WordPress区块的样式以匹配源站设计。
需要精确复刻网页特定区域的视觉效果
修复确定性代码生成的布局与视觉差异
npx skills add Automattic/studio --skill match-section -g -y
负责在捕获后执行高保真主题重建，通过携带源HTML并隔离CSS，生成非区块编辑但视觉一致的主题。
用户选择“主题复制”功能
要求“携带HTML”或“作用域化源CSS”
npx skills add Automattic/studio --skill replicate-theme -g -y
基于规范驱动的全站区块主题重建技能，将提取的站点重构为响应式可编辑的WordPress块主题，确保布局与视觉设计的高度还原。
用户要求重建网站或复制设计
用户询问如何制作匹配源站布局的主题
npx skills add Automattic/studio --skill replicate-with-blocks -g -y
