返回市场
拉拉维尔-克劳德代码配置

拉拉维尔-克劳德代码配置

作者:laraben266 星标更新:2025-07-17

项目介绍

Laravel Claude Code 安装 🚀

一键安装用于 Laravel 开发的 Claude Code。自动配置所有 MCP 服务器,提供终极的 AI 驱动的 Laravel 开发体验,包括Figma 集成

🎯 功能概述

安装并配置 Claude Code,构建完整的开发生态系统:

🌐 全局 MCP 服务器(跨项目共享)

  • GitHub 集成 - 访问所有仓库,管理 PR(自动配置令牌!)
  • 记忆系统 - 跨项目记住决策
  • Context7 - 获取最新的 Laravel/PHP 文档
  • Web 抓取 - 访问外部 API 和资源
  • Figma 集成 - 设计到代码的工作流程,自动提取设计令牌

📁 项目特定 MCP 服务器

  • 文件系统访问 - 读写特定的 Laravel 项目文件
  • 数据库集成 - 直接访问项目的数据库
  • Laravel DebugBar - 实时调试(如果已安装)

🎨 新功能:Figma 设计集成

  • 设计到代码工作流程 - 将 Figma 设计直接转换为 Laravel/Livewire 组件
  • 自动设计令牌提取 - 提取颜色、字体和间距以供 Tailwind CSS 使用
  • 组件规范 - 根据 Figma 设计获取精确的实现细节
  • 无缝集成 - 与现有的 Laravel + Livewire + Filament + Tailwind 堆栈集成

安装程序智能地设置全局服务器一次,并为每个 Laravel 项目添加项目特定的服务器。

🚀 快速安装

选项 1:直接安装(推荐)

在 Laravel 项目根目录运行以下单个命令:

curl -fsSL https://raw.githubusercontent.com/laraben/laravel-claude-code-setup/main/install.sh | bash

选项 2:预配置令牌

如果您想跳过交互式提示:

export GITHUB_TOKEN="your_github_personal_access_token"
export FIGMA_ACCESS_TOKEN="your_figma_access_token"
curl -fsSL https://raw.githubusercontent.com/laraben/laravel-claude-code-setup/main/install.sh | bash

选项 3:下载并运行

为了更多的控制或如果您希望先查看脚本:

# 下载脚本
curl -fsSL https://raw.githubusercontent.com/laraben/laravel-claude-code-setup/main/install.sh -o setup.sh

# 设置可执行权限
chmod +x setup.sh

# 运行脚本
./setup.sh

📋 先决条件

在运行安装程序之前,请确保您已经具备:

  1. 已安装 Claude Code下载地址
  2. 已安装 Node.js & npm
  3. 已安装 Go 1.22+(用于数据库 MCP 服务器)
  4. 配置了 .env 文件的 Laravel 项目
  5. GitHub 个人访问令牌(安装程序会引导您完成)
  6. Figma 个人访问令牌(可选,用于设计集成)

🔑 令牌设置

GitHub 令牌设置

您需要一个 GitHub 个人访问令牌来访问私有仓库:

  1. 前往 GitHub 设置 → 开发者设置 → 个人访问令牌 → 令牌(经典)
  2. 点击“生成新的令牌(经典)”
  3. 选择这些范围:
    • repo(完全控制私有仓库)
    • read:user(读取用户资料数据)
    • user:email(访问用户电子邮件地址)
  4. 当安装程序提示时复制生成的令牌

🎨 Figma 令牌设置(可选)

对于设计到代码的工作流程:

  1. 前往 Figma 设置 → 个人访问令牌
  2. 点击“创建新令牌”
  3. 给它一个描述性名称(例如,“Claude Code MCP”)
  4. 当安装程序提示时复制生成的令牌

🎮 安装后使用

安装完成后,在您的 Laravel 项目中打开 Claude Code:

cd /path/to/your/laravel/project
claude

然后测试一切是否正常工作:

📊 数据库及项目分析

  • “显示数据库结构”
  • “这个项目使用的是哪个 Laravel 版本?”
  • “读取我的 .env 文件并提出优化建议”

🐙 GitHub 集成

  • “列出我私有 GitHub 仓库的最近提交”
  • “显示开放的拉取请求”
  • “当前分支状态是什么?”

🎨 Figma 设计集成

🧠 记忆与学习

  • “记住我们使用 Filament 来构建管理面板”
  • “在这个项目中我们遵循哪些编码标准?”
  • “关于身份验证系统我们做出了哪些决定?”

🔧 开发快捷方式

# 加载有用的别名
source .claude/shortcuts.sh

# 快捷命令
pa migrate              # php artisan migrate
make-livewire Button   # php artisan make:livewire Button
serve                  # php artisan serve

🛠️ 安装内容

脚本智能地管理全局与项目特定资源:

全局 MCP 服务器(安装一次,所有项目共享)

  1. GitHub MCP 服务器 - 跨项目访问仓库
  2. 记忆 MCP 服务器 - 共享知识库
  3. Context7 - 文档访问
  4. Web 抓取 - 外部 API 访问
  5. Figma MCP 服务器 - 设计文件访问和分析

项目特定 MCP 服务器(每个 Laravel 项目)

  1. 文件系统 MCP 服务器 - 访问项目文件
  2. 数据库 MCP 服务器 - 连接到项目的数据库
  3. Laravel DebugBar MCP(如果可用)

项目文件(在 .claude/ 中创建)

  • instructions.md - AI 优化的开发指南,包含 Figma 使用指南
  • project_context.md - 项目特定上下文和技术堆栈
  • coding_standards.md - Laravel/Livewire/Filament 最佳实践
  • memory_prompts.md - AI 学习的记忆初始化
  • shortcuts.sh - 开发别名和快捷方式
  • README.md - 安装文档

MCP 服务器二进制文件及依赖项

  • Context7 - 通过 npm 构建
  • 数据库 MCP - 通过 Go 源代码构建
  • Web 抓取 - 通过 TypeScript 源代码构建
  • 其他所有服务器 - 通过 npm 全局安装

安装程序根据您的 Laravel .env 文件自动配置一切。

🎨 Figma 集成功能

设计到代码工作流程

graph LR
    A[Figma 设计] --> B[与 Claude 分享 URL]
    B --> C[分析设计结构]
    C --> D[提取设计令牌]
    D --> E[生成 Laravel 组件]
    E --> F[应用 Tailwind 样式]
    F --> G[添加 Alpine.js 交互]

示例 Figma 命令

# 分析完整的设计
> 请分析这个 Figma 设计并创建相应的 Laravel 视图

# 提取设计系统
> 从这个 Figma 文件中提取所有颜色、字体和间距以供我们的 Tailwind 配置使用

# 创建特定组件
> 将这个 Figma 卡片组件转换为具有适当验证的 Livewire 组件

# 生成管理界面
> 根据这个 Figma 管理面板设计创建 Filament 资源

支持的 Figma 功能

  • 设计令牌提取 - 颜色、字体、间距
  • 组件分析 - 按钮、表单、卡片、布局
  • 布局理解 - 网格系统、响应式设计
  • 自动布局解释 - Flexbox 和网格生成
  • 样式指南创建 - 一致的设计系统实现

🔧 高级配置

多个项目

安装程序可以在多个 Laravel 项目中运行。全局 MCP 服务器是共享的,而项目特定的服务器是每个项目独有的。

自定义数据库连接

支持 MySQL、PostgreSQL 和 SQLite。安装程序会自动检测您的数据库配置来自 .env

团队协作

所有团队成员都可以使用相同的设置。分享您的 .claude/ 文件夹(除了敏感令牌),以便团队中的一致 AI 辅助。

🐛 故障排除

交互模式不起作用?

如果您通过 curl | bash 运行且交互提示不起作用:

# 直接下载并运行以启用交互模式
curl -fsSL https://raw.githubusercontent.com/laraben/laravel-claude-code-setup/main/install.sh -o setup.sh
chmod +x setup.sh
./setup.sh

GitHub 私有仓库访问问题?

安装程序应该自动配置此功能。如果您仍然无法访问私有仓库:

  1. 检查您的令牌是否已配置:
claude mcp list
  1. 手动更新 Claude 配置中的令牌:
# 编辑配置文件
nano ~/.claude.json

# 将您的令牌添加到 GitHub MCP 服务器配置中

Figma 集成不起作用?

  1. 验证您的 Figma 令牌是否有效
  2. 检查您尝试访问的文件是否不是私有的(除非您有权访问)
  3. 使用完整的 Figma URL 格式:https://www.figma.com/design/FILE_KEY/File-Name

数据库连接失败?

确保您的 Laravel .env 文件中有有效的数据库凭据,然后再运行安装程序。

缺少依赖项?

安装程序会告诉您缺少什么,但您可以手动检查:

# 检查 Claude Code
claude --version

# 检查 Node.js
node --version

# 检查 Go
go version

# 检查 npm
npm --version

🆕 v1.0 新特性

🎨 Figma 集成

  • 完整的从设计到代码的工作流程,使用 Framelink Figma MCP 服务器
  • 自动设计令牌提取,供 Tailwind CSS 使用
  • 交互式令牌管理,带有适当的更新提示
  • 针对 Laravel 的特定设计模式和组件生成

🔧 用户体验增强

  • 改进的交互检测 - 正确处理 curl | bash
  • 更好的令牌管理 - 对于令牌更新有适当的提示
  • 优雅的错误处理 - 即使某些组件失败也能继续安装
  • 智能回退 - 多种安装方法以提高可靠性

🧠 AI 优化的指令

  • Figma 使用指南 - 详细的集成指导
  • 错误处理文档 - 对常见问题的清晰指导
  • 针对 Laravel 的特定工作流程 - 优化了 Laravel + Livewire + Filament + Tailwind

🛠️ 技术改进

  • 强大的配置管理 - 更好地处理现有设置
  • 跨平台兼容性 - 增强对不同环境的支持
  • 性能优化 - 更快的安装和启动时间

🔗 链接与资源

🤝 贡献

发现了一个 bug 或想要添加一个功能?欢迎提交 PR!

  1. 分叉仓库
  2. 创建一个功能分支
  3. 进行更改
  4. 如果适用,添加测试
  5. 提交合并请求

📝 许可

MIT 许可 - 欢迎在您的项目中使用!

🙏 致谢

  • Claude Code 团队,提供了出色的 AI 开发平台
  • Laravel 社区,提供了令人惊叹的框架和生态系统
  • Figma 团队,提供了设计工具和 API
  • MCP 服务器开发者,提供了各种集成工具

@laraben 为 Laravel 社区制作

用 AI 助力您的 Laravel 开发!🚀