<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCP Probe Kit - AI 驱动的完整研发工具集 | 21个工具覆盖开发全流程</title>
<!-- SEO Meta Tags -->
<meta name="description" content="MCP Probe Kit 提供 21 个 AI 驱动的研发工具，覆盖需求分析、代码开发、质量保障、Bug修复、版本发布全流程。支持 Cursor、Cline、Claude Desktop，100% 结构化输出。">
<meta name="keywords" content="MCP Probe Kit, AI开发工具, 代码生成, 代码审查, Git工具, UI开发, 研发效率, Cursor, Cline, Claude, MCP Server">
<meta name="author" content="小墨 (Kyle) - ByteZoneX">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://mcp-probe-kit.bytezonex.com/">
<link rel="icon" type="image/x-icon" href="https://www.bytezonex.com/favicon.ico">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://mcp-probe-kit.bytezonex.com/">
<meta property="og:title" content="MCP Probe Kit - AI 驱动的完整研发工具集">
<meta property="og:description" content="21 个 AI 工具覆盖开发全流程，从需求到上线一站式解决。支持 Cursor、Cline、Claude Desktop。">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://mcp-probe-kit.bytezonex.com/">
<meta property="twitter:title" content="MCP Probe Kit - AI 驱动的完整研发工具集">
<meta property="twitter:description" content="21 个 AI 工具覆盖开发全流程，从需求到上线一站式解决。">
<script src="assets/js/tailwind.js" data-cfasync="false"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: {
DEFAULT: '#2563EB',
hover: '#1D4ED8',
light: '#3B82F6',
},
text: {
primary: '#0F172A',
secondary: '#475569',
tertiary: '#64748B',
},
bg: {
page: '#F8FAFC',
card: '#FFFFFF',
hover: '#F1F5F9',
},
border: {
DEFAULT: '#E2E8F0',
hover: '#CBD5E1',
},
},
boxShadow: {
sm: '0 1px 2px rgba(0, 0, 0, 0.05)',
md: '0 4px 6px rgba(0, 0, 0, 0.07)',
lg: '0 10px 15px rgba(0, 0, 0, 0.1)',
},
fontFamily: {
sans: ['-apple-system', 'BlinkMacSystemFont', '"PingFang SC"', '"Microsoft YaHei"', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', '"Noto Sans CJK SC"', 'sans-serif'],
mono: ['ui-monospace', '"SF Mono"', '"Cascadia Code"', '"Consolas"', 'Menlo', 'Monaco', '"PingFang SC"', '"Microsoft YaHei"', '"Courier New"', 'monospace']
},
}
}
}
</script>
<style>
html { scroll-behavior: smooth; }
.card-link:hover .link-arrow { transform: translateX(4px); }
.link-arrow { transition: transform 0.2s; }
/* 移动端侧边栏 */
.sidebar-drawer { transition: transform 0.3s ease; }
@media (max-width: 767px) {
.sidebar-drawer { transform: translateX(-100%); }
.sidebar-drawer.open { transform: translateX(0); }
}
.backdrop { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.backdrop.active { opacity: 1; pointer-events: auto; }
/* i18n 加载优化：防止内容闪烁 */
body:not(.i18n-ready) [data-i18n] {
visibility: hidden;
}
body.i18n-ready [data-i18n] {
visibility: visible;
}
</style>
</head>
<body class="font-sans bg-bg-page text-text-primary leading-relaxed min-h-screen flex flex-col">
<!-- A. 顶部导航栏 -->
<nav class="fixed top-0 left-0 right-0 h-14 bg-white/95 backdrop-blur-md border-b border-border z-50">
<div class="h-full px-4 flex items-center justify-between max-w-[1200px] mx-auto">
<a href="./index.html" class="flex items-center gap-2 text-base font-semibold text-text-primary no-underline">
<span>🚀</span>
<span class="sm:inline hidden">MCP Probe Kit</span>
</a>
<div class="flex items-center gap-3">
<div class="hidden md:flex items-center gap-4">
<a href="./pages/all-tools.html" class="text-text-secondary text-sm font-medium hover:text-primary transition-colors" data-i18n="nav.docs">文档</a>
<a href="https://www.bytezonex.com/" target="_blank" rel="noopener" class="text-text-secondary text-sm font-medium hover:text-primary transition-colors flex items-center gap-1">
<span data-i18n="nav.mainSite">主站</span> ByteZoneX<span class="text-xs">↗</span>
</a>
<a href="https://github.com/mybolide/mcp-probe-kit" target="_blank" rel="noopener" class="text-text-secondary text-sm font-medium hover:text-primary transition-colors flex items-center gap-1">GitHub<span class="text-xs">↗</span></a>
<a href="https://www.npmjs.com/package/mcp-probe-kit" target="_blank" rel="noopener" class="text-text-secondary text-sm font-medium hover:text-primary transition-colors flex items-center gap-1">npm<span class="text-xs">↗</span></a>
<div id="lang-switcher-container"></div>
</div>
<button onclick="toggleSidebar()" class="md:hidden p-2 text-text-secondary hover:text-primary transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</div>
</div>
</nav>
<!-- 侧边栏遮罩 -->
<div class="fixed inset-0 bg-black/50 z-40 backdrop opacity-0 pointer-events-none transition-opacity duration-300 md:hidden" onclick="toggleSidebar()" id="backdrop"></div>
<!-- 移动端侧边栏 -->
<aside class="fixed left-0 top-14 bottom-0 w-64 bg-white border-r border-border z-50 sidebar-drawer overflow-y-auto md:hidden" id="sidebar">
<div class="p-4">
<div class="mb-4">
<div class="text-xs font-semibold text-text-tertiary uppercase tracking-wider mb-2 px-2">快速开始</div>
<a href="./index.html" class="flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium bg-blue-50 text-primary no-underline border-l-3 border-primary">
<span>🏠</span>
<span>文档首页</span>
</a>
<a href="./pages/getting-started.html" class="flex items-center gap-2 px-3 py-2 rounded-md text-sm text-text-secondary hover:bg-bg-page hover:text-primary transition-colors no-underline">
<span>📖</span>
<span>安装配置</span>
</a>
</div>
<div class="mb-4">
<div class="text-xs font-semibold text-text-tertiary uppercase tracking-wider mb-2 px-2">工具文档</div>
<a href="./pages/all-tools.html" class="flex items-center gap-2 px-3 py-2 rounded-md text-sm text-text-secondary hover:bg-bg-page hover:text-primary transition-colors no-underline">
<span>🛠️</span>
<span>所有工具</span>
<span class="ml-auto bg-bg-page text-xs px-2 py-0.5 rounded-full">39</span>
</a>
</div>
<div class="mb-4">
<div class="text-xs font-semibold text-text-tertiary uppercase tracking-wider mb-2 px-2">指南</div>
<a href="./pages/migration.html" class="flex items-center gap-2 px-3 py-2 rounded-md text-sm text-text-secondary hover:bg-bg-page hover:text-primary transition-colors no-underline">
<span>🚀</span>
<span>迁移指南</span>
</a>
<a href="./pages/examples.html" class="flex items-center gap-2 px-3 py-2 rounded-md text-sm text-text-secondary hover:bg-bg-page hover:text-primary transition-colors no-underline">
<span>💡</span>
<span>最佳实践</span>
</a>
</div>
<div class="pt-4 border-t border-border">
<a href="https://github.com/mybolide/mcp-probe-kit" target="_blank" rel="noopener" class="flex items-center gap-2 px-3 py-2 rounded-md text-sm text-text-secondary hover:bg-bg-page hover:text-primary transition-colors no-underline">
<span>💻</span>
<span>GitHub</span>
<span class="ml-auto text-xs">↗</span>
</a>
<a href="https://npmjs.com/package/mcp-probe-kit" target="_blank" rel="noopener" class="flex items-center gap-2 px-3 py-2 rounded-md text-sm text-text-secondary hover:bg-bg-page hover:text-primary transition-colors no-underline">
<span>📦</span>
<span>npm</span>
<span class="ml-auto text-xs">↗</span>
</a>
</div>
<!-- QR Code -->
<div class="mt-4 pt-4 border-t border-border">
<div class="text-center">
<div class="text-xs font-semibold text-text-tertiary mb-2">关注公众号</div>
<img src="https://oss.bolzjb.com/wx_qrcode.jpg" alt="微信公众号" class="w-[100px] h-[100px] mx-auto rounded-lg border border-border" />
<div class="text-xs text-text-tertiary mt-2">获取更多技术分享</div>
</div>
</div>
</div>
</aside>
<!-- B. Hero 首屏 -->
<section class="bg-gradient-to-br from-primary to-primary-hover text-white py-12 px-6 text-center mt-14">
<div class="max-w-[800px] mx-auto">
<h1 class="text-3xl sm:text-4xl md:text-5xl font-bold mb-3 tracking-tight" data-i18n="hero.title">🚀 MCP Probe Kit</h1>
<p class="text-base sm:text-lg opacity-95 mb-2" data-i18n="hero.subtitle">AI 开发增强工具集 · 文档中心</p>
<div class="inline-block bg-white/20 px-3 py-1 rounded-full text-sm font-semibold mb-6 md:mb-8">v3.0.5</div>
<div class="flex gap-3 md:gap-4 justify-center flex-wrap">
<a href="./pages/getting-started.html" class="bg-white text-primary px-5 py-2.5 sm:px-6 sm:py-3 rounded-md text-sm sm:text-base font-semibold hover:-translate-y-0.5 hover:shadow-lg transition-all duration-200 inline-flex items-center gap-1.5 no-underline cursor-pointer border-0" data-i18n="hero.quickStart">快速开始</a>
<a href="https://www.bytezonex.com/" target="_blank" rel="noopener" class="bg-white/15 text-white px-5 py-2.5 sm:px-6 sm:py-3 rounded-md text-sm sm:text-base font-semibold hover:bg-white/25 transition-all duration-200 inline-flex items-center gap-1.5 no-underline border border-white/30" data-i18n="hero.visitMainSite">
访问主站 ByteZoneX ↗
</a>
</div>
</div>
</section>
<!-- C. 主内容区 -->
<main class="flex-1 max-w-[1200px] mx-auto px-4 sm:px-6 py-8 md:py-12 w-full">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
<!-- 1. 快速开始 -->
<article class="bg-bg-card border border-border rounded-lg p-4 sm:p-6 transition-all duration-300 ease-out shadow-sm hover:-translate-y-1 hover:shadow-lg hover:border-primary">
<div class="flex items-center justify-between mb-3 pb-3 border-b border-border">
<h2 class="flex items-center gap-2 text-lg sm:text-xl font-semibold text-text-primary">
<span>📖</span>
<span data-i18n="sections.quickStart.title">快速开始</span>
</h2>
</div>
<p class="text-text-secondary text-sm mb-4 leading-relaxed" data-i18n="sections.quickStart.description">5 分钟快速上手 MCP Probe Kit v3.0.5</p>
<nav class="flex flex-col gap-0">
<a href="./pages/getting-started.html" class="flex items-center justify-between px-3 py-2.5 -mx-3 text-text-primary text-sm font-medium rounded-md transition-all duration-200 hover:bg-bg-hover hover:text-primary no-underline">
<span data-i18n="sections.quickStart.installConfig">安装配置</span>
<span class="link-arrow text-text-tertiary text-base">→</span>
</a>
</nav>
</article>
<!-- 2. 工具文档 -->
<article class="bg-bg-card border border-border rounded-lg p-4 sm:p-6 transition-all duration-300 ease-out shadow-sm hover:-translate-y-1 hover:shadow-lg hover:border-primary">
<div class="flex items-center justify-between mb-3 pb-3 border-b border-border">
<h2 class="flex items-center gap-2 text-lg sm:text-xl font-semibold text-text-primary">
<span>🛠️</span>
<span data-i18n="sections.tools.title">工具文档</span>
</h2>
</div>
<p class="text-text-secondary text-sm mb-4 leading-relaxed" data-i18n="sections.tools.description">21 个实用工具的完整参考</p>
<nav class="flex flex-col gap-0">
<a href="./pages/all-tools.html" class="flex items-center justify-between px-3 py-2.5 -mx-3 text-text-primary text-sm font-medium rounded-md transition-all duration-200 hover:bg-bg-hover hover:text-primary no-underline">
<div class="flex items-center gap-2">
<span data-i18n="sections.tools.allTools">所有工具</span>
<span class="bg-bg-hover text-text-secondary px-2 py-0.5 rounded-full text-xs font-semibold">21</span>
</div>
<span class="link-arrow text-text-tertiary text-base">→</span>
</a>
</nav>
</article>
<!-- 3. 指南 -->
<article class="bg-bg-card border border-border rounded-lg p-4 sm:p-6 transition-all duration-300 ease-out shadow-sm hover:-translate-y-1 hover:shadow-lg hover:border-primary">
<div class="flex items-center justify-between mb-3 pb-3 border-b border-border">
<h2 class="flex items-center gap-2 text-lg sm:text-xl font-semibold text-text-primary">
<span>📚</span>
<span data-i18n="sections.guides.title">指南</span>
</h2>
</div>
<p class="text-text-secondary text-sm mb-4 leading-relaxed" data-i18n="sections.guides.description">迁移指南和最佳实践</p>
<nav class="flex flex-col gap-0">
<a href="./pages/migration.html" class="flex items-center justify-between px-3 py-2.5 -mx-3 text-text-primary text-sm font-medium rounded-md transition-all duration-200 hover:bg-bg-hover hover:text-primary no-underline">
<span data-i18n="sections.guides.migration">v2.x → v3.0 迁移指南</span>
<span class="link-arrow text-text-tertiary text-base">→</span>
</a>
<a href="./pages/examples.html" class="flex items-center justify-between px-3 py-2.5 -mx-3 text-text-primary text-sm font-medium rounded-md transition-all duration-200 hover:bg-bg-hover hover:text-primary no-underline">
<span data-i18n="sections.guides.bestPractices">最佳实践</span>
<span class="link-arrow text-text-tertiary text-base">→</span>
</a>
</nav>
</article>
<!-- 4. 资源 -->
<article class="bg-bg-card border border-border rounded-lg p-4 sm:p-6 transition-all duration-300 ease-out shadow-sm hover:-translate-y-1 hover:shadow-lg hover:border-primary">
<div class="flex items-center justify-between mb-3 pb-3 border-b border-border">
<h2 class="flex items-center gap-2 text-lg sm:text-xl font-semibold text-text-primary">
<span>🔗</span>
<span data-i18n="sections.resources.title">资源</span>
</h2>
</div>
<p class="text-text-secondary text-sm mb-4 leading-relaxed" data-i18n="sections.resources.description">源代码和社区支持</p>
<nav class="flex flex-col gap-0">
<a href="https://www.bytezonex.com/" target="_blank" rel="noopener" class="flex items-center justify-between px-3 py-2.5 -mx-3 text-text-primary text-sm font-medium rounded-md transition-all duration-200 hover:bg-bg-hover hover:text-primary no-underline">
<div class="flex items-center gap-2">
<span data-i18n="sections.resources.mainSite">ByteZoneX 主站</span>
<span class="text-xs text-text-tertiary">↗</span>
</div>
<span class="link-arrow text-text-tertiary text-base">→</span>
</a>
<a href="https://github.com/mybolide/mcp-probe-kit" target="_blank" rel="noopener" class="flex items-center justify-between px-3 py-2.5 -mx-3 text-text-primary text-sm font-medium rounded-md transition-all duration-200 hover:bg-bg-hover hover:text-primary no-underline">
<div class="flex items-center gap-2">
<span data-i18n="sections.resources.githubRepo">GitHub 仓库</span>
<span class="text-xs text-text-tertiary">↗</span>
</div>
<span class="link-arrow text-text-tertiary text-base">→</span>
</a>
<a href="https://www.npmjs.com/package/mcp-probe-kit" target="_blank" rel="noopener" class="flex items-center justify-between px-3 py-2.5 -mx-3 text-text-primary text-sm font-medium rounded-md transition-all duration-200 hover:bg-bg-hover hover:text-primary no-underline">
<div class="flex items-center gap-2">
<span data-i18n="sections.resources.npmPackage">npm 包</span>
<span class="text-xs text-text-tertiary">↗</span>
</div>
<span class="link-arrow text-text-tertiary text-base">→</span>
</a>
<a href="https://github.com/mybolide/mcp-probe-kit/issues" target="_blank" rel="noopener" class="flex items-center justify-between px-3 py-2.5 -mx-3 text-text-primary text-sm font-medium rounded-md transition-all duration-200 hover:bg-bg-hover hover:text-primary no-underline">
<div class="flex items-center gap-2">
<span data-i18n="sections.resources.issues">问题反馈</span>
<span class="text-xs text-text-tertiary">↗</span>
</div>
<span class="link-arrow text-text-tertiary text-base">→</span>
</a>
</nav>
</article>
</div>
</main>
<!-- D. Footer -->
<footer class="bg-bg-card border-t border-border px-4 sm:px-6 py-6 mt-auto">
<div class="max-w-[1200px] mx-auto flex flex-col sm:flex-row justify-between items-center gap-4 text-sm text-text-secondary">
<div><span data-i18n="footer.madeWith">Made with ❤️ by</span> <a href="https://www.bytezonex.com/" target="_blank" rel="noopener" class="text-primary hover:text-primary-hover transition-colors duration-200 no-underline">小墨 (Kyle)</a></div>
<div>
© 2024-2026 MCP Probe Kit · <span data-i18n="footer.license">MIT License</span> ·
<a href="https://www.bytezonex.com/" target="_blank" rel="noopener" class="text-primary hover:text-primary-hover transition-colors duration-200 no-underline"><span data-i18n="footer.mainSite">主站 ByteZoneX</span> ↗</a>
</div>
</div>
</footer>
<script>
// 侧边栏切换
function toggleSidebar() {
const sidebar = document.getElementById('sidebar');
const backdrop = document.getElementById('backdrop');
const isOpen = sidebar.classList.contains('open');
if (isOpen) {
sidebar.classList.remove('open');
backdrop.classList.remove('active');
} else {
sidebar.classList.add('open');
backdrop.classList.add('active');
}
}
</script>
<script src="./assets/js/i18n.js"></script>
</body>
</html>
