将 Claude Code 打造成全栈 Web 应用专家 🔌

Source: Dev.to

为什么 Claude Code 需要一个 Wasp 插件

Claude Code 是一个很棒的编码助手，但它并不总是知道如何利用 Wasp 那套“开箱即用”的全栈框架特性。
Wasp 基于开发者（以及 AI）喜爱的流行工具——React、ExpressJS、Prisma 和 TanStack Query。正因为如此，Claude 往往倾向于直接使用这些工具来构建，而不是使用 Wasp 的高级抽象。

• 认证示例 – 如果你让 Claude 添加 Google 登录，它可能会建议使用 AuthJS 或 Better Auth 之类的库。Wasp 只需要几行代码就能完成，但 Claude 可能并不知道这个快捷方式。
• 幻觉与过时语法 – 作为一个新兴框架，Claude 可能会“幻觉”出 Wasp 的写法、使用已废弃的语法，或对全栈应用的构建方式做出错误假设。

为了解决这些问题，Wasp 团队创建了一个 Claude Code 插件，使 Claude 成为真正的 Wasp 专家。

将 Claude 打造成 Wasp 专家

Claude Code 支持用户自定义的命令、技能、钩子和规则，这些都可以作为知识来源和安全护栏。Wasp‑Claude 插件将关键组件打包，使 Claude 能够流畅地与 Wasp 项目协作。

安装

从 Claude 市场添加插件：

claude plugin marketplace add wasp-lang/claude-plugins

将其安装到你的项目中：

claude plugin install wasp@wasp-plugins --scope project

在 Claude Code 会话中初始化插件：

/wasp:init

功能

• 自动文档 – 在开发和调试期间，为你的项目版本获取正确的 Wasp 文档。
• 错误预防 – 提供 Wasp‑特有的提示、模式和最佳实践，避免幻觉或使用过时的方法。
• 引导式工作流 – 技能和命令引导你设置 Wasp 的开箱即用特性：认证、邮件、数据库、部署等。
• 完整调试可视化 – 启动受管数据库、开发服务器，并连接浏览器控制台，使 Claude 能看到整个栈。
• 版本护栏 – 钩子确保 Claude 在执行任务前检查项目的 Wasp 版本并拉取相应的 LLM‑友好文档。

示例命令

你可以让 Claude 处理各种与 Wasp 相关的任务，例如：

• “为我的应用添加 Google 认证”
• “将数据库从 SQLite 迁移到 PostgreSQL 并启动它”
• “帮我把应用部署到 Railway”
• “帮助我在应用中加入 ShadCN UI 来构建仪表盘”
• “使用 Wasp 的 SaaS 入门模板启动一个新的 SaaS 应用”
• “为什么我的定时任务没有运行？”

插件还提供类似 /wasp:help 的斜杠命令，便于快速查阅。

未来计划

首个版本侧重于为 Claude 打下坚实的 Wasp 基础。后续更新将加入：

• 更多护栏和高级技能
• 进一步加速开发的工作流
• 为 Open SaaS（基于 Wasp 的开源 SaaS 入门模板）单独提供插件，以简化 SaaS 应用的创建

欢迎提供反馈和想法，帮助我们改进插件。