演示网页应用设置文档
项目概述
这是一个使用以下技术构建的演示网页应用：
- Next.js 15 - 使用App Router的React框架
- TypeScript - 类型安全的开发
- Tailwind CSS - 实用性优先的样式设计
- DaisyUI - 用户界面组件库
- Playwright MCP（注：MCP在此处可能是一个特定项目、组织或技术的缩写，没有具体上下文难以给出确切翻译，但按照常规理解，可译为）“Playwright的MCP（或特定项目/组织/技术名称）” - 用于Claude Code的浏览器自动化
项目结构
web-dev-ai/
├── app/
│ ├── layout.tsx # Root layout with theme support
│ ├── page.tsx # Main landing page
│ └── globals.css # Global styles with Tailwind
├── components/
│ └── ThemeToggle.tsx # Dark/light theme switcher
├── package.json
├── tsconfig.json
├── tailwind.config.ts # Tailwind + DaisyUI config
└── next.config.js特点/特性
网页应用功能
- 带有菜单项的响应式导航栏
- 切换深色/浅色主题（月/日图标）
- 带有行动号召的英雄板块
- 展示技术栈的特色卡片
- 包含指标的统计部分
- 行动号召部分
- 页脚
使用的DaisyUI组件
navbar- 导航栏hero- 主角区域（或：英雄区域）card- 特性卡片stats- 统计数据显示btn- 各种样式的按钮（主要、次要、强调、幽灵）menu- 菜单项
安装与设置
项目初始设置
- 安装依赖项：
npm install- 运行开发服务器：
npm run dev应用程序将在 http://localhost:3000 上可用
关键依赖项
{
"dependencies": {
"next": "^15",
"react": "^18",
"react-dom": "^18"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"daisyui": "^5.3.7",
"eslint": "^8",
"eslint-config-next": "^15",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"typescript": "^5"
}
}Playwright MCP 服务器设置
什么是Playwright MCP？
Playwright MCP（模型上下文协议）服务器使Claude Code能够以编程方式控制和与网页浏览器进行交互。这实现了：
- 浏览器自动化
- 屏幕截图捕捉
- 控制台日志监控
- JavaScript 执行
- 表单填写与互动
- 缓存管理
安装步骤
- 全局安装 Playwright MCP：
npm install -g @playwright/mcp- 添加到Claude代码配置中：
claude mcp add playwright -- mcp-server-playwright- 验证安装：
which mcp-server-playwright
# Should output: /Users/[username]/nvm/nodejs/bin/mcp-server-playwright- 重启Claude代码 启动MCP服务器
配置详情
- 二进制位置：
/Users/jc/nvm/nodejs/bin/mcp-server-playwright - 包装：
@playwright/mcp@0.0.43 - 配置文件：
~/.claude.json（项目特定的） - Playwright 版本： 1.57.0-测试版-2025-10-16
为何选择全球部署？
我们选择了全局安装（npm install -g) over（在中文中，"over" 通常翻译为“在……之上”或“超过”，具体翻译取决于上下文） npx for：对于；为了；因为；给
- 更快的启动速度（每次运行无需下载）
- 可预测的二进制位置
- 更好的性能
- 更便捷的版本管理
Playwright MCP（可能指某种特定配置或模块）功能
一旦Claude Code与MCP服务器一起重启，将具备以下功能：
1. 浏览器控件
- 导航至URL
- 点击元素
- 填写表格
- 等待元素出现
- 执行JavaScript
2. 控制台日志管理
- 查看控制台消息（日志、警告、错误）
- 清除控制台
- 过滤控制台输出
- 将控制台日志保存到文件中
3. 截图与HTML
- 捕获全屏截图
- 捕获元素截图
- 保存HTML快照
- 视觉对比
4. 缓存与浏览器状态
- 清除浏览器缓存
- 强制重新加载页面
- 重置浏览器状态
- 重启浏览器实例
5. 调试
- 检查页面元素
- 监控网络请求
- 在页面上下文中执行JavaScript
- 访问浏览器无障碍树
使用示例
重启Claude代码后
一旦MCP服务器启动，您可以要求Claude执行以下操作：
- 打开并截取该应用的屏幕截图：
"Open my app at localhost:3000 and take a screenshot"- 检查控制台日志：
"Navigate to the app and check for any console errors"- 测试交互：
"Click the theme toggle button and verify it switches themes"- 调试问题：
"Open the app, click 'Get Started' and show me any errors"- 保存控制台输出：
"Capture all console logs from the app and save them to a file"可用的MCP工具
Playwright MCP 提供了这些工具命名空间（以前缀 mcp__playwright_):
navigate- 导航至网址screenshot- 截取屏幕截图console- 控制台日志操作click- 点击元素fill- 填写表单字段execute- 执行JavaScriptwait- 等待条件满足reload- 重新加载并使用缓存选项
故障排除
MCP服务器不可用
- 验证安装：
npm list -g @playwright/mcp - 检查二进制文件：
which mcp-server-playwright - 重启Claude代码
- 检查配置：
cat ~/.claude.json
开发服务器问题
- 确保开发服务器正在运行：
npm run dev - 检查端口3000是否可用
- 查看服务器输出以查找错误
主题切换功能失效
- 该组件使用客户端JavaScript（
"use client") - 检查浏览器控制台中的错误
- 验证主题属性是否已设置 `` 元素
下一步行动
重启Claude代码后：
- 使用演示应用程序测试浏览器自动化
- 验证所有MCP功能是否正常工作
- 用于调试和测试应用程序
- 记录任何额外的工作流程
资源
版本信息
- Next.js 版本：15.5.6
- React：18.x
- DaisyUI: 5.3.7
- Playwright MCP：0.0.43
- Node.js: 24.10.0（通过 nvm 安装）