Divi5-ToolKit
首个基于Claude的Divi 5开发工具包，提供代码生成、兼容性检查与项目审计。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Divi5-ToolKit。 它的用途是：首个基于Claude的Divi 5开发工具包，提供代码生成、兼容性检查与项目审计。 完整的 Skill 内容见：https://321skill.com/skills/divi5-toolkit/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“/divi5-toolkit:generate 一个具有渐变背景和悬停动画的号召性用语按钮”，它会生成包含所有必要Divi 5选择器、CSS变量和响应式断点的完整CSS代码块，并提示你粘贴到何处。或者，
对AI说：“/divi5-toolkit:validate 检查这段CSS在Divi 5中的兼容性”，它会分析你的代码，指出潜在的特异性冲突、无效选择器或性能问题。
介绍
Divi5-ToolKit是专为Divi 5主题开发设计的Claude Code插件，旨在解决开发者在Divi 5环境下编写兼容CSS、构建页面组件和诊断项目问题时的效率与准确性问题。它深度理解Divi 5的模块系统、选择器规则和响应式框架，能自动生成可直接使用的代码。
使用时，开发者只需通过简单的自然语言指令（如“生成一个带金色悬停状态的主按钮”），插件便能输出符合Divi 5规范的CSS代码，支持多种输出格式（如主题选项、代码模块、子主题等）。它还提供项目级CSS健康度审计、响应式设备检查、无障碍合规性验证等高级功能。
该工具特别适合为使用Divi 5构建网站的前端开发者、全栈开发者和WordPress主题开发者。它尤其适用于需要快速产出高质量、可维护且符合Divi最新架构代码的团队或个人。
建议在项目初期就配置好CSS类前缀，并定期使用其自更新功能（/divi5-toolkit:research）来同步Divi 5的最新知识，以确保生成的代码始终与官方更新保持兼容。
核心特点
与官方Divi AI（基于GPT-3.5且仅限可视化构建器内使用）不同，本工具基于Claude模型，提供更优的代码生成质量，并能在终端、编辑器或CI/CD流水线中独立运行，具备完整的Divi 5知识库，无需手动提供上下文。
注意事项
该工具主要面向Divi 5.6及以上版本，对于旧版Divi或非Divi的WordPress主题开发支持有限。
常见问题
这个工具和Divi自带的AI有什么区别？
Divi AI基于GPT-3.5且只能在可视化编辑器内使用。本工具基于Claude，代码质量更高，并能在开发环境（终端、编辑器）中独立运行，具备更深的Divi 5架构知识。
需要连接浏览器才能测试响应式吗？
不需要。它提供两种模式：连接浏览器MCP服务器可进行实时视口测试和截图；无浏览器时，可进行静态CSS风险分析。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/divi5-toolkit/raw/index.md 读取 Divi5-ToolKit 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/divi5-toolkit/raw/index.md（查看排版版本）