diff --git a/prototype/docs-index.html b/prototype/docs-index.html
index 593fdb2..2efd00e 100644
--- a/prototype/docs-index.html
+++ b/prototype/docs-index.html
@@ -23,16 +23,6 @@
         .stat-item {
             background: linear-gradient(135deg, var(--primary-blue), #40a9ff);
         }
-        .doc-content {
-            margin-top: 1rem;
-            padding: 2rem;
-            background: white;
-            border-radius: 0.5rem;
-            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-        }
-        .doc-content.hidden {
-            display: none;
-        }
         .markdown-body h1, .markdown-body h2 { border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5em; margin-bottom: 1em; }
         .markdown-body pre { background: #1f2937; color: #e5e7eb; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; }
         .markdown-body code { background: #f3f4f6; padding: 0.2em 0.4em; border-radius: 0.25rem; }
@@ -155,11 +145,10 @@
                                         <span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">技术架构</span>
                                         <span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">数据模型</span>
                                     </div>
-                                    <a href="#" onclick="toggleDoc('prd.md'); return false;" class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700">
+                                    <a href="view-doc.html?doc=prd.md" target="_self" class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700">
                                         <i class="fas fa-eye mr-2"></i>查看文档
                                     </a>
                                 </div>
-                                <div id="doc-prd.md" class="doc-content hidden"></div>
                             </div>
                         </div>
                     </div>
@@ -202,11 +191,10 @@
                                         <span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">色彩系统</span>
                                         <span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">无障碍</span>
                                     </div>
-                                    <a href="#" onclick="toggleDoc('ux-design-specification.md'); return false;" class="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700">
+                                    <a href="view-doc.html?doc=ux-design-specification.md" target="_self" class="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700">
                                         <i class="fas fa-eye mr-2"></i>查看文档
                                     </a>
                                 </div>
-                                <div id="doc-ux-design-specification.md" class="doc-content hidden"></div>
                             </div>
                         </div>
                     </div>
@@ -249,11 +237,10 @@
                                         <span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">任务制定</span>
                                         <span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">AI抽背</span>
                                     </div>
-                                    <a href="#" onclick="toggleDoc('ai-tutor-requirements.md'); return false;" class="px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700">
+                                    <a href="view-doc.html?doc=ai-tutor-requirements.md" target="_self" class="px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700">
                                         <i class="fas fa-eye mr-2"></i>查看文档
                                     </a>
                                 </div>
-                                <div id="doc-ai-tutor-requirements.md" class="doc-content hidden"></div>
                             </div>
                         </div>
                     </div>
@@ -338,39 +325,5 @@
         </div>
     </footer>
 
-    <script>
-    const md = window.markdownit({ html: true, linkify: true, breaks: true });
-    function toggleDoc(docFile) {
-        const container = document.getElementById('doc-' + docFile);
-        const isHidden = container.classList.contains('hidden');
-
-        // 隐藏所有其他文档
-        document.querySelectorAll('.doc-content').forEach(el => {
-            el.classList.add('hidden');
-        });
-
-        if (isHidden) {
-            // 显示加载动画
-            container.innerHTML = '<div class="text-center py-12"><i class="fas fa-spinner fa-spin text-4xl text-blue-500"></i><p class="mt-4 text-gray-600">正在加载文档...</p></div>';
-            container.classList.remove('hidden');
-            loadDoc(docFile, container);
-        }
-    }
-    async function loadDoc(doc, container) {
-        const paths = ['/planning-artifacts/' + doc, '/' + doc];
-        for (const path of paths) {
-            try {
-                const res = await fetch(path);
-                if (res.ok) {
-                    const text = await res.text();
-                    const html = md.render(text);
-                    container.innerHTML = '<div class="markdown-body">' + html + '</div>';
-                    return;
-                }
-            } catch (e) { continue; }
-        }
-        container.innerHTML = '<div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">无法加载文档: ' + doc + '</div>';
-    }
-    </script>
 </body>
 </html>
diff --git a/prototype/index.html b/prototype/index.html
index ebb7b17..694f2b0 100644
--- a/prototype/index.html
+++ b/prototype/index.html
@@ -295,10 +295,10 @@
                     基于 PRD 和 UX 设计规范自动生成 | 2026-03-28
                 </div>
                 <div class="flex items-center gap-4 text-sm">
-                    <a href="#" onclick="toggleDoc('prd.md'); return false;" class="text-gray-400 hover:text-white">
+                    <a href="view-doc.html?doc=prd.md" class="text-gray-400 hover:text-white">
                         <i class="fas fa-file-alt mr-1"></i>PRD
                     </a>
-                    <a href="#" onclick="toggleDoc('ux-design-specification.md'); return false;" class="text-gray-400 hover:text-white">
+                    <a href="view-doc.html?doc=ux-design-specification.md" class="text-gray-400 hover:text-white">
                         <i class="fas fa-palette mr-1"></i>UX
                     </a>
                 </div>
@@ -306,60 +306,5 @@
         </div>
     </footer>
 
-    <style>
-    .doc-content {
-        margin: 2rem auto;
-        max-width: 1200px;
-        padding: 2rem;
-        background: white;
-        border-radius: 0.5rem;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    }
-    .doc-content.hidden {
-        display: none;
-    }
-    </style>
-
-    <div id="doc-prd.md" class="doc-content hidden"></div>
-    <div id="doc-ux-design-specification.md" class="doc-content hidden"></div>
-
-    <script src="https://cdn.jsdelivr.net/npm/markdown-it@14.0.0/dist/markdown-it.min.js"></script>
-    <script>
-    const md = window.markdownit({ html: true, linkify: true, typographer: true, breaks: true });
-
-    function toggleDoc(docFile) {
-        const container = document.getElementById('doc-' + docFile);
-        const isHidden = container.classList.contains('hidden');
-
-        // 隐藏所有文档
-        document.querySelectorAll('.doc-content').forEach(el => {
-            el.classList.add('hidden');
-        });
-
-        if (isHidden) {
-            container.innerHTML = '<div class="text-center py-12"><i class="fas fa-spinner fa-spin text-4xl text-blue-500"></i><p class="mt-4 text-gray-600">正在加载...</p></div>';
-            container.classList.remove('hidden');
-            loadDoc(docFile, container);
-            // 滚动到文档位置
-            container.scrollIntoView({ behavior: 'smooth', block: 'start' });
-        }
-    }
-
-    async function loadDoc(docFile, container) {
-        const paths = ['/planning-artifacts/' + docFile, '/' + docFile];
-        for (const path of paths) {
-            try {
-                const res = await fetch(path);
-                if (res.ok) {
-                    const text = await res.text();
-                    const html = md.render(text);
-                    container.innerHTML = html;
-                    return;
-                }
-            } catch (e) { continue; }
-        }
-        container.innerHTML = '<p class="text-red-600">无法加载文档: ' + docFile + '</p>';
-    }
-    </script>
 </body>
 </html>
diff --git a/prototype/server.js b/prototype/server.js
index a54e800..0f65b96 100644
--- a/prototype/server.js
+++ b/prototype/server.js
@@ -45,7 +45,7 @@ const MIME_TYPES = {
 // 创建服务器
 const server = http.createServer((req, res) => {
     // 解析 URL
-    let urlPath = req.url;
+    let urlPath = req.url.split('?')[0] || '/';
 
     // 处理根路径
     if (urlPath === '/') {
diff --git a/prototype/view-doc.html b/prototype/view-doc.html
index 45db797..f6dd822 100644
--- a/prototype/view-doc.html
+++ b/prototype/view-doc.html
@@ -8,93 +8,284 @@
     <script src="https://cdn.jsdelivr.net/npm/markdown-it@14.0.0/dist/markdown-it.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
-        .markdown-body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.6; color: #24292f; }
-        .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { margin-top: 24px; margin-bottom: 16px; font-weight: 600; line-height: 1.25; }
-        .markdown-body h1 { font-size: 2em; border-bottom: 1px solid #d8dee4; padding-bottom: 0.3em; }
-        .markdown-body h2 { font-size: 1.5em; border-bottom: 1px solid #d8dee4; padding-bottom: 0.3em; }
-        .markdown-body h3 { font-size: 1.25em; }
-        .markdown-body h4 { font-size: 1em; }
-        .markdown-body p { margin-top: 0; margin-bottom: 16px; }
-        .markdown-body code { padding: 0.2em 0.4em; margin: 0; font-size: 85%; background-color: rgba(175, 184, 193, 0.2); border-radius: 6px; font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; }
-        .markdown-body pre { padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; background-color: #1f2937; border-radius: 6px; margin-bottom: 16px; }
-        .markdown-body pre code { background-color: transparent; padding: 0; color: #e5e7eb; }
-        .markdown-body ul, .markdown-body ol { padding-left: 2em; margin-top: 0; margin-bottom: 16px; }
-        .markdown-body li { margin-top: 0.25em; }
-        .markdown-body table { border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-bottom: 16px; width: 100%; }
-        .markdown-body table th { font-weight: 600; background-color: #f6f8fa; border: 1px solid #d8dee4; padding: 6px 13px; }
-        .markdown-body table td { border: 1px solid #d8dee4; padding: 6px 13px; }
-        .markdown-body table tr:nth-child(2n) { background-color: #f6f8fa; }
-        .markdown-body blockquote { padding: 0 1em; color: #57606a; border-left: 0.25em solid #d8dee4; margin: 0 0 16px 0; }
-        .markdown-body a { color: #0969da; text-decoration: none; }
-        .markdown-body a:hover { text-decoration: underline; }
-        .markdown-body img { max-width: 100%; box-sizing: content-box; background-color: #fff; }
-        .markdown-body hr { height: 0.25em; padding: 0; margin: 24px 0; background-color: #d8dee4; border: 0; }
-        .loading { display: flex; justify-content: center; align-items: center; height: 200px; }
-        .loading-spinner { width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite; }
-        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
-        .error { background-color: #fee; border: 1px solid #fcc; padding: 16px; border-radius: 6px; color: #c33; }
+        /* Markdown 内容样式 */
+        .markdown-body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+            font-size: 16px;
+            line-height: 1.6;
+            color: #24292f;
+        }
+        .markdown-body h1,
+        .markdown-body h2,
+        .markdown-body h3,
+        .markdown-body h4,
+        .markdown-body h5,
+        .markdown-body h6 {
+            margin-top: 24px;
+            margin-bottom: 16px;
+            font-weight: 600;
+            line-height: 1.25;
+        }
+        .markdown-body h1 {
+            font-size: 2em;
+            border-bottom: 1px solid #d8dee4;
+            padding-bottom: 0.3em;
+        }
+        .markdown-body h2 {
+            font-size: 1.5em;
+            border-bottom: 1px solid #d8dee4;
+            padding-bottom: 0.3em;
+        }
+        .markdown-body h3 {
+            font-size: 1.25em;
+        }
+        .markdown-body h4 {
+            font-size: 1em;
+        }
+        .markdown-body p {
+            margin-top: 0;
+            margin-bottom: 16px;
+        }
+        .markdown-body code {
+            padding: 0.2em 0.4em;
+            margin: 0;
+            font-size: 85%;
+            background-color: rgba(175, 184, 193, 0.2);
+            border-radius: 6px;
+            font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+        }
+        .markdown-body pre {
+            padding: 16px;
+            overflow: auto;
+            font-size: 85%;
+            line-height: 1.45;
+            background-color: #1f2937;
+            border-radius: 6px;
+            margin-bottom: 16px;
+        }
+        .markdown-body pre code {
+            background-color: transparent;
+            padding: 0;
+            color: #e5e7eb;
+        }
+        .markdown-body ul,
+        .markdown-body ol {
+            padding-left: 2em;
+            margin-top: 0;
+            margin-bottom: 16px;
+        }
+        .markdown-body li {
+            margin-top: 0.25em;
+        }
+        .markdown-body table {
+            border-spacing: 0;
+            border-collapse: collapse;
+            margin-top: 0;
+            margin-bottom: 16px;
+            width: 100%;
+        }
+        .markdown-body table th {
+            font-weight: 600;
+            background-color: #f6f8fa;
+            border: 1px solid #d8dee4;
+            padding: 6px 13px;
+        }
+        .markdown-body table td {
+            border: 1px solid #d8dee4;
+            padding: 6px 13px;
+        }
+        .markdown-body table tr:nth-child(2n) {
+            background-color: #f6f8fa;
+        }
+        .markdown-body blockquote {
+            padding: 0 1em;
+            color: #57606a;
+            border-left: 0.25em solid #d8dee4;
+            margin: 0 0 16px 0;
+        }
+        .markdown-body a {
+            color: #0969da;
+            text-decoration: none;
+        }
+        .markdown-body a:hover {
+            text-decoration: underline;
+        }
+        .markdown-body img {
+            max-width: 100%;
+            box-sizing: content-box;
+            background-color: #fff;
+        }
+        .markdown-body hr {
+            height: 0.25em;
+            padding: 0;
+            margin: 24px 0;
+            background-color: #d8dee4;
+            border: 0;
+        }
+
+        /* 加载动画 */
+        .loading {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 200px;
+        }
+        .loading-spinner {
+            width: 40px;
+            height: 40px;
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #3498db;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        /* 错误提示 */
+        .error {
+            background-color: #fee;
+            border: 1px solid #fcc;
+            padding: 16px;
+            border-radius: 6px;
+            color: #c33;
+            text-align: center;
+        }
     </style>
 </head>
 <body class="bg-gray-50">
+    <!-- 顶部导航栏 -->
     <nav class="bg-white shadow-sm sticky top-0 z-50">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex justify-between items-center h-16">
-                <div class="flex items-center">
-                    <button onclick="goBack()" class="mr-4 p-2 rounded-lg hover:bg-gray-100 transition"><i class="fas fa-arrow-left text-gray-600"></i></button>
-                    <h1 id="doc-title" class="text-xl font-semibold text-gray-800">文档查看器</h1>
-                </div>
-                <div class="flex items-center gap-2">
-                    <button onclick="copyLink()" class="px-3 py-1.5 text-sm bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition"><i class="fas fa-link mr-1"></i>复制链接</button>
-                    <button onclick="printDoc()" class="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"><i class="fas fa-print mr-1"></i>打印</button>
-                </div>
+        <div class="max-w-7xl mx-auto px-4 py-3 flex items-center gap-4">
+            <a href="docs-index.html" class="text-gray-600 hover:text-gray-800">
+                <i class="fas fa-arrow-left"></i> 返回文档中心
+            </a>
+            <h1 id="doc-title" class="text-xl font-semibold flex-1">文档加载中...</h1>
+            <div class="flex items-center gap-2">
+                <button onclick="copyLink()" class="px-3 py-1.5 text-sm bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200">
+                    <i class="fas fa-link mr-1"></i>复制链接
+                </button>
+                <button onclick="printDoc()" class="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700">
+                    <i class="fas fa-print mr-1"></i>打印
+                </button>
             </div>
         </div>
     </nav>
-    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <div id="loading" class="loading"><div class="loading-spinner"></div></div>
+
+    <!-- 主内容区 -->
+    <main class="max-w-7xl mx-auto px-4 py-8">
+        <!-- 加载动画 -->
+        <div id="loading" class="loading">
+            <div class="loading-spinner"></div>
+        </div>
+        <!-- 错误提示 -->
         <div id="error" class="error hidden"></div>
+        <!-- Markdown 内容 -->
         <article id="content" class="markdown-body bg-white rounded-xl shadow-sm p-8 hidden"></article>
     </main>
-    <footer class="bg-white border-t mt-12">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-            <p class="text-center text-sm text-gray-500">© 2026 AI 智能抽背助手 | 基于 <a href="https://markdown-it.github.io/" target="_blank" class="text-blue-600 hover:underline">markdown-it</a> 渲染</p>
-        </div>
+
+    <!-- 页脚 -->
+    <footer class="text-center py-6 text-sm text-gray-500">
+        © 2026 AI 智能抽背助手 | 基于 markdown-it 渲染
     </footer>
+
     <script>
-        const md = window.markdownit({ html: true, linkify: true, typographer: true, breaks: true });
-        function getQueryParam(name) { const params = new URLSearchParams(window.location.search); return params.get(name); }
-        function goBack() { if (window.history.length > 1) { window.history.back(); } else { window.location.href = 'docs-index.html'; } }
-        function copyLink() { const url = window.location.href; navigator.clipboard.writeText(url).then(() => { alert('链接已复制到剪贴板'); }).catch(err => { console.error('复制失败:', err); }); }
-        function printDoc() { window.print(); }
-        async function loadAndRenderDoc() {
-            const docPath = getQueryParam('doc');
-            if (!docPath) { showError('未指定文档路径'); return; }
-            const title = docPath.replace(/\.md$/, '').replace(/-/g, ' ');
-            document.getElementById('doc-title').textContent = title;
-            try {
-                const possiblePaths = [`/planning-artifacts/${docPath}`, `/${docPath}`, `/../${docPath}`];
-                let markdown = null;
-                for (const docUrl of possiblePaths) {
-                    try {
-                        const response = await fetch(docUrl);
-                        if (response.ok) { markdown = await response.text(); break; }
-                    } catch (err) { continue; }
-                }
-                if (!markdown) { throw new Error(`无法加载文档: ${docPath}`); }
-                const html = md.render(markdown);
-                document.getElementById('loading').classList.add('hidden');
-                document.getElementById('content').classList.remove('hidden');
-                document.getElementById('content').innerHTML = html;
-            } catch (error) {
-                console.error('加载文档失败:', error);
-                showError(`加载文档失败: ${error.message}`);
-            }
+        // 初始化 markdown-it
+        const md = window.markdownit({
+            html: true,
+            linkify: true,
+            typographer: true,
+            breaks: true
+        });
+
+        // 获取 URL 参数
+        function getQueryParam(name) {
+            const params = new URLSearchParams(window.location.search);
+            return params.get(name);
         }
+
+        // 复制链接
+        function copyLink() {
+            const url = window.location.href;
+            navigator.clipboard.writeText(url)
+                .then(() => {
+                    alert('链接已复制到剪贴板');
+                })
+                .catch(err => {
+                    console.error('复制失败:', err);
+                });
+        }
+
+        // 打印文档
+        function printDoc() {
+            window.print();
+        }
+
+        // 显示错误信息
         function showError(message) {
             document.getElementById('loading').classList.add('hidden');
             document.getElementById('error').classList.remove('hidden');
             document.getElementById('error').textContent = message;
         }
+
+        // 加载并渲染文档
+        async function loadAndRenderDoc() {
+            const docPath = getQueryParam('doc');
+            if (!docPath) {
+                showError('未指定文档路径，请使用 ?doc=文件名.md 参数访问');
+                return;
+            }
+
+            // 从文件名提取标题
+            const title = docPath
+                .replace(/\.md$/, '')
+                .replace(/-/g, ' ')
+                .replace(/\b\w/g, l => l.toUpperCase());
+            document.getElementById('doc-title').textContent = title;
+
+            // 尝试多个路径查找文档
+            const possiblePaths = [
+                `../planning-artifacts/${docPath}`,
+                `../docs/${docPath}`,
+                `../${docPath}`,
+                `planning-artifacts/${docPath}`,
+                `docs/${docPath}`,
+                docPath
+            ];
+
+            let markdown = null;
+            let loadedPath = null;
+
+            for (const path of possiblePaths) {
+                try {
+                    const response = await fetch(path);
+                    if (response.ok) {
+                        markdown = await response.text();
+                        loadedPath = path;
+                        break;
+                    }
+                } catch (err) {
+                    // 继续尝试下一个路径
+                    continue;
+                }
+            }
+
+            if (!markdown) {
+                showError(`无法加载文档: ${docPath}<br>已尝试以下路径:<br>${possiblePaths.join('<br>')}`);
+                return;
+            }
+
+            // 渲染 Markdown
+            const html = md.render(markdown);
+
+            // 显示内容
+            document.getElementById('loading').classList.add('hidden');
+            document.getElementById('content').classList.remove('hidden');
+            document.getElementById('content').innerHTML = html;
+        }
+
+        // 页面加载完成后执行
         window.addEventListener('DOMContentLoaded', loadAndRenderDoc);
     </script>
 </body>