AI导哈

Chrome DevTools MCP Server 活动官网

这是一个为 Google DevFest Workshop 创建的活动官网，展示 Chrome DevTools MCP Server 的功能和应用场景，采用黑白极简风格设计，具有响应式布局和流畅动画效果。

  • by SiinXu
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 SiinXu/devtools

使用说明

Google DevFest Workshop - Chrome DevTools MCP Server

一个展示 Google DevFest Workshop 的现代化活动官网，主题为 Chrome DevTools MCP Server。

🎯 项目概述

这是一个为 Google DevFest Workshop 创建的活动官网，采用黑白极简风格设计，展示了以下内容：

  • 首页：Workshop 总体信息展示（时间、地点、亮点）
  • GDG & DevFest：介绍 GDG 社区和 DevFest 活动
  • DevTools MCP：详细介绍 Chrome DevTools MCP Server 的功能和应用场景
  • 关于我：个人介绍（Siin - AI PM，Vibe Designer）

📋 活动信息

  • 时间：2025年11月22日
  • 地点：上海
  • 主题：Chrome DevTools MCP Server
  • 组织方：Google Developers Group (GDG)

🎨 设计特点

  • 黑白极简风格：现代化的极简设计
  • 响应式布局：完全适配各种屏幕尺寸
  • 流畅动画：精心设计的过渡和动画效果
  • 毛玻璃效果：现代化的视觉设计元素

🛠️ 技术栈

  • React 18：UI 框架
  • Tailwind CSS：样式框架
  • Font Awesome 6：图标库
  • Babel：JavaScript 编译器

📦 文件结构

devtools/
├── index.html           # 主 HTML 文件
├── app.js              # React 应用逻辑
├── styles.css          # 自定义样式
├── package.json        # 项目配置
├── README.md           # 项目文档
├── .gitignore          # Git 忽略文件
└── .github/
    └── workflows/
        └── deploy.yml  # GitHub Actions 工作流

🚀 快速开始

本地开发

# 启动本地服务器
npm start

# 或使用 Python
python3 -m http.server 8000

然后在浏览器中打开 http://localhost:8000

部署

该项目已配置 GitHub Actions 自动部署到 GitHub Pages。只需推送到 main 分支即可自动部署。

📱 页面导航

  • 首页 (/)：Workshop 总体信息
  • GDG & DevFest (/#gdg)：社区介绍
  • DevTools MCP (/#devtools)：技术详情
  • 关于我 (/#about)：个人介绍

👤 关于作者

Siin - AI Product Manager & Vibe Designer

  • 专业领域：AI 产品策略、用户体验设计、开发者工具设计
  • 兴趣爱好：Vibe Design、社区运营、技术创新
  • 联系方式：@SiinXu

📄 许可证

MIT License

🤝 贡献

欢迎提交 Issue 和 Pull Request！

Designed with ♥ by Siin

相关 MCP