mcp-shrimp-task-manager
Version:
Shrimp Task Manager is a task tool built for AI Agents, emphasizing chain-of-thought, reflection, and style consistency. It converts natural language into structured dev tasks with dependency tracking and iterative refinement, enabling agent-like develope
1,375 lines (1,343 loc) • 85.4 kB
HTML
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
Shrimp Task Manager - 為AI編程助手提供結構化任務管理的智能系統
</title>
<meta
name="description"
content="Shrimp Task Manager是一個專為AI編程助手設計的結構化任務管理系統，提供智能任務規劃、自動分解、執行追蹤和完整性驗證等功能。"
/>
<meta
name="keywords"
content="MCP, Shrimp Task Manager, AI編程助手, 任務管理, 結構化任務"
/>
<!-- Favicon -->
<link rel="icon" href="assets/icons/favicon.svg" type="image/svg+xml" />
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- AOS.js 滾動動畫庫 -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<!-- Prism.js 代碼高亮 -->
<link
href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-okaidia.min.css"
rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-javascript.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-typescript.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-json.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-bash.min.js"></script>
<!-- 自定義樣式 -->
<link rel="stylesheet" href="css/styles.css" />
<!-- 多語系支援 -->
<script src="js/i18n.js"></script>
</head>
<body class="bg-gray-50 font-sans text-gray-900">
<!-- 導航欄 -->
<header class="sticky top-0 z-50 bg-white shadow-md">
<nav
class="container mx-auto px-4 py-3 flex justify-between items-center"
>
<div class="flex items-center space-x-2">
<img
src="assets/icons/logo.svg"
alt="Shrimp Task Manager Logo"
class="h-8 w-8"
data-i18n-alt="nav.logo.alt"
/>
<span class="text-xl font-bold text-gradient" data-i18n="hero.title"
>Shrimp Task Manager</span
>
</div>
<div class="hidden xl:flex items-center">
<div class="flex space-x-5">
<a
href="#pain-points"
class="hover:text-blue-600 transition"
data-i18n="nav.pain-points"
>痛點</a
>
<a
href="#features"
class="hover:text-blue-600 transition"
data-i18n="nav.features"
>功能</a
>
<a
href="#workflow"
class="hover:text-blue-600 transition"
data-i18n="nav.workflow"
>工作流程</a
>
<a
href="#prompt-customization"
class="hover:text-blue-600 transition"
data-i18n="nav.prompt-custom"
>提示詞配置</a
>
<a
href="#installation"
class="hover:text-blue-600 transition"
data-i18n="nav.installation"
>安裝配置</a
>
<a
href="https://github.com/cjo4m06/mcp-shrimp-task-manager"
target="_blank"
class="flex items-center space-x-1 hover:text-blue-600 transition"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"
/>
</svg>
<span data-i18n="nav.github">GitHub</span>
</a>
</div>
<!-- 語言切換按鈕 -->
<div class="language-switcher ml-6">
<button
data-lang="zh-TW"
class="lang-btn active"
data-i18n="common.lang.zh-tw"
>
中
</button>
<button data-lang="en" class="lang-btn" data-i18n="common.lang.en">
EN
</button>
</div>
</div>
<button class="xl:hidden" id="menu-toggle">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
</button>
</nav>
<!-- 移動端菜單 -->
<div
class="hidden md:hidden bg-white px-4 py-2 shadow-lg"
id="mobile-menu"
>
<div class="flex flex-col space-y-3">
<a
href="#pain-points"
class="hover:text-blue-600 transition py-1"
data-i18n="nav.pain-points"
>痛點</a
>
<a
href="#features"
class="hover:text-blue-600 transition py-1"
data-i18n="nav.features"
>功能</a
>
<a
href="#workflow"
class="hover:text-blue-600 transition py-1"
data-i18n="nav.workflow"
>工作流程</a
>
<a
href="#prompt-customization"
class="hover:text-blue-600 transition py-1"
data-i18n="nav.prompt-custom"
>提示詞配置</a
>
<a
href="#installation"
class="hover:text-blue-600 transition py-1"
data-i18n="nav.installation"
>安裝配置</a
>
<a
href="https://github.com/cjo4m06/mcp-shrimp-task-manager"
target="_blank"
class="flex items-center space-x-1 hover:text-blue-600 transition py-1"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"
/>
</svg>
<span data-i18n="nav.github">GitHub</span>
</a>
<!-- 移動端語言切換按鈕 -->
<div class="language-switcher py-1">
<button
data-lang="zh-TW"
class="lang-btn active"
data-i18n="common.lang.zh-tw"
>
中
</button>
<button data-lang="en" class="lang-btn" data-i18n="common.lang.en">
EN
</button>
</div>
</div>
</div>
</header>
<!-- 頁面內容區域劃分 -->
<main>
<!-- 英雄區 -->
<section
id="hero"
class="bg-gradient-to-r from-blue-600 to-indigo-700 text-white py-16 md:py-24 section-padding"
>
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
<div data-aos="fade-right" data-aos-duration="1000">
<h1
class="text-4xl md:text-5xl font-bold mb-4"
data-i18n="hero.title"
>
Shrimp Task Manager
</h1>
<p class="text-xl mb-6 text-blue-100" data-i18n="hero.subtitle">
為AI編程助手提供結構化任務管理的智能系統
</p>
<p class="mb-8 text-blue-100" data-i18n="hero.description">
讓AI助手擁有長期記憶能力，高效管理複雜任務，提供結構化的任務分解和執行追蹤，讓您的編程體驗更加流暢和高效。
</p>
<div class="flex flex-wrap gap-4">
<a
href="#installation"
class="btn btn-primary"
data-i18n="hero.start"
>開始使用</a
>
<a
href="#features"
class="btn btn-secondary"
data-i18n="hero.learn-more"
>了解更多</a
>
</div>
</div>
<div
class="flex justify-center md:justify-end"
data-aos="fade-left"
data-aos-duration="1000"
data-aos-delay="200"
>
<div
class="p-2 bg-white bg-opacity-10 rounded-lg backdrop-blur-sm"
>
<img
src="assets/images/workflow-simple.svg"
alt="智能任務管理工作流程"
class="w-full max-w-lg"
loading="lazy"
data-src="assets/images/workflow-simple.svg"
data-i18n-alt="hero.workflow-image.alt"
/>
</div>
</div>
</div>
<!-- 浮動裝飾元素 -->
<div
class="absolute top-1/4 left-10 w-4 h-4 rounded-full bg-blue-300 opacity-20"
></div>
<div
class="absolute top-1/3 right-1/4 w-6 h-6 rounded-full bg-indigo-300 opacity-20"
></div>
<div
class="absolute bottom-1/4 right-10 w-5 h-5 rounded-full bg-blue-200 opacity-20"
></div>
</div>
</section>
<!-- 痛點解決方案區 -->
<section id="pain-points" class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2
class="text-3xl font-bold mb-2 text-center"
data-i18n="pain-points.title"
>
痛點與解決方案
</h2>
<p
class="text-center text-gray-600 mb-12 max-w-3xl mx-auto"
data-i18n="pain-points.subtitle"
>
Shrimp Task Manager 專為解決 AI
編程助手在任務管理中面臨的三大核心痛點而設計。
</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- 痛點1：記憶缺失 -->
<div
class="rounded-lg overflow-hidden shadow-lg"
data-aos="fade-up"
data-aos-delay="0"
>
<div class="p-6 bg-red-50 flex justify-center">
<img
src="assets/icons/memory-loss.svg"
alt="記憶缺失"
class="h-24 w-24"
data-i18n-alt="pain-points.memory-loss.icon.alt"
/>
</div>
<div class="p-6 bg-white">
<h3
class="text-xl font-bold mb-3 text-red-600"
data-i18n="pain-points.memory-loss.title"
>
記憶缺失
</h3>
<p
class="text-gray-700 mb-4"
data-i18n="pain-points.memory-loss.description"
>
AI助手缺乏跨對話的任務記憶能力，導致無法追蹤長期任務進度，重複解釋相同需求，浪費時間和資源。
</p>
<div class="border-t border-gray-200 my-4"></div>
<div class="flex items-center justify-center my-4">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-8 w-8 text-green-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 14l-7 7m0 0l-7-7m7 7V3"
/>
</svg>
</div>
<div class="p-4 bg-green-50 rounded-lg">
<div class="flex justify-center mb-3">
<img
src="assets/icons/memory-solution.svg"
alt="任務記憶功能"
class="h-16 w-16"
data-i18n-alt="pain-points.memory-loss.solution.icon.alt"
/>
</div>
<h4
class="text-lg font-semibold mb-2 text-green-600"
data-i18n="pain-points.memory-loss.solution.title"
>
任務記憶功能
</h4>
<p
class="text-gray-700"
data-i18n="pain-points.memory-loss.solution.description"
>
自動保存執行歷史，提供長期記憶能力，讓AI助手能夠記住之前的任務進度，無縫繼續未完成任務。
</p>
</div>
</div>
</div>
<!-- 痛點2：結構混亂 -->
<div
class="rounded-lg overflow-hidden shadow-lg"
data-aos="fade-up"
data-aos-delay="200"
>
<div class="p-6 bg-orange-50 flex justify-center">
<img
src="assets/icons/structure-chaos.svg"
alt="結構混亂"
class="h-24 w-24"
data-i18n-alt="pain-points.structure-chaos.icon.alt"
/>
</div>
<div class="p-6 bg-white">
<h3
class="text-xl font-bold mb-3 text-orange-600"
data-i18n="pain-points.structure-chaos.title"
>
結構混亂
</h3>
<p
class="text-gray-700 mb-4"
data-i18n="pain-points.structure-chaos.description"
>
複雜任務缺乏系統化管理導致效率低下，缺少依賴關係管理，子任務執行混亂，難以追蹤總體進度。
</p>
<div class="border-t border-gray-200 my-4"></div>
<div class="flex items-center justify-center my-4">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-8 w-8 text-green-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 14l-7 7m0 0l-7-7m7 7V3"
/>
</svg>
</div>
<div class="p-4 bg-yellow-50 rounded-lg">
<div class="flex justify-center mb-3">
<img
src="assets/icons/structure-solution.svg"
alt="結構化任務分解"
class="h-16 w-16"
data-i18n-alt="pain-points.structure-chaos.solution.icon.alt"
/>
</div>
<h4
class="text-lg font-semibold mb-2 text-yellow-600"
data-i18n="pain-points.structure-chaos.solution.title"
>
結構化任務分解
</h4>
<p
class="text-gray-700"
data-i18n="pain-points.structure-chaos.solution.description"
>
自動將複雜任務分解為可管理的子任務，建立清晰的依賴關係，提供有序執行路徑，確保高效完成。
</p>
</div>
</div>
</div>
<!-- 痛點3：重複工作 -->
<div
class="rounded-lg overflow-hidden shadow-lg"
data-aos="fade-up"
data-aos-delay="400"
>
<div class="p-6 bg-blue-50 flex justify-center">
<img
src="assets/icons/repeat-work.svg"
alt="重複工作"
class="h-24 w-24"
data-i18n-alt="pain-points.repeat-work.icon.alt"
/>
</div>
<div class="p-6 bg-white">
<h3
class="text-xl font-bold mb-3 text-blue-600"
data-i18n="pain-points.repeat-work.title"
>
重複工作
</h3>
<p
class="text-gray-700 mb-4"
data-i18n="pain-points.repeat-work.description"
>
無法有效利用過往經驗與解決方案，每次對話都需從零開始，缺乏知識積累和經驗參考系統。
</p>
<div class="border-t border-gray-200 my-4"></div>
<div class="flex items-center justify-center my-4">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-8 w-8 text-green-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 14l-7 7m0 0l-7-7m7 7V3"
/>
</svg>
</div>
<div class="p-4 bg-purple-50 rounded-lg">
<div class="flex justify-center mb-3">
<img
src="assets/icons/knowledge-solution.svg"
alt="知識積累和經驗參考"
class="h-16 w-16"
data-i18n-alt="pain-points.repeat-work.solution.icon.alt"
/>
</div>
<h4
class="text-lg font-semibold mb-2 text-purple-600"
data-i18n="pain-points.repeat-work.solution.title"
>
知識積累與經驗參考
</h4>
<p
class="text-gray-700"
data-i18n="pain-points.repeat-work.solution.description"
>
自動記錄成功解決方案，建立任務知識庫，支持相似任務快速參考，實現經驗積累和知識復用。
</p>
</div>
</div>
</div>
</div>
<div class="mt-12 text-center">
<a
href="#features"
class="btn btn-primary inline-flex items-center"
>
<span data-i18n="pain-points.explore">探索核心功能</span>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 ml-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z"
clip-rule="evenodd"
/>
</svg>
</a>
</div>
</div>
</section>
<!-- 核心功能展示區 - 將由後續任務完成 -->
<section id="features" class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<h2
class="text-3xl font-bold mb-2 text-center"
data-i18n="features.title"
>
核心功能
</h2>
<p
class="text-center text-gray-600 mb-12 max-w-3xl mx-auto"
data-i18n="features.subtitle"
>
Shrimp Task Manager
提供六大核心功能，幫助您高效管理、執行和追蹤複雜任務。
</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- 功能1：智能任務規劃與分析 -->
<div
class="bg-white rounded-lg shadow-lg overflow-hidden transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl"
data-aos="fade-up"
data-aos-delay="0"
>
<div class="flex justify-center p-6 bg-indigo-50">
<img
src="assets/icons/feature-planning.svg"
alt="智能任務規劃與分析"
class="h-20 w-20"
data-i18n-alt="features.planning.icon.alt"
/>
</div>
<div class="p-6">
<h3
class="text-xl font-bold mb-3 text-indigo-600"
data-i18n="features.planning.title"
>
智能任務規劃與分析
</h3>
<p
class="text-gray-700"
data-i18n="features.planning.description"
>
通過深入分析需求和約束條件，生成結構化任務計劃。自動評估範圍、風險和優先級，提供理性和全面的實施策略。
</p>
</div>
</div>
<!-- 功能2：自動任務分解與依賴管理 -->
<div
class="bg-white rounded-lg shadow-lg overflow-hidden transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl"
data-aos="fade-up"
data-aos-delay="100"
>
<div class="flex justify-center p-6 bg-green-50">
<img
src="assets/icons/feature-decomposition.svg"
alt="自動任務分解與依賴管理"
class="h-20 w-20"
data-i18n-alt="features.decomposition.icon.alt"
/>
</div>
<div class="p-6">
<h3
class="text-xl font-bold mb-3 text-green-600"
data-i18n="features.decomposition.title"
>
自動任務分解與依賴管理
</h3>
<p
class="text-gray-700"
data-i18n="features.decomposition.description"
>
智能將複雜任務分解為可管理的小任務，識別任務間依賴關係，建立優化執行路徑，避免資源衝突與執行瓶頸。
</p>
</div>
</div>
<!-- 功能3：執行狀態追蹤 -->
<div
class="bg-white rounded-lg shadow-lg overflow-hidden transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl"
data-aos="fade-up"
data-aos-delay="200"
>
<div class="flex justify-center p-6 bg-blue-50">
<img
src="assets/icons/feature-tracking.svg"
alt="執行狀態追蹤"
class="h-20 w-20"
data-i18n-alt="features.tracking.icon.alt"
/>
</div>
<div class="p-6">
<h3
class="text-xl font-bold mb-3 text-blue-600"
data-i18n="features.tracking.title"
>
執行狀態追蹤
</h3>
<p
class="text-gray-700"
data-i18n="features.tracking.description"
>
實時監控每個任務的執行狀態，提供進度視覺化顯示，自動更新依賴項狀態，並在任務完成時提供詳細執行報告。
</p>
</div>
</div>
<!-- 功能4：任務完整性驗證 -->
<div
class="bg-white rounded-lg shadow-lg overflow-hidden transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl"
data-aos="fade-up"
data-aos-delay="300"
>
<div class="flex justify-center p-6 bg-amber-50">
<img
src="assets/icons/feature-verification.svg"
alt="任務完整性驗證"
class="h-20 w-20"
data-i18n-alt="features.verification.icon.alt"
/>
</div>
<div class="p-6">
<h3
class="text-xl font-bold mb-3 text-amber-600"
data-i18n="features.verification.title"
>
任務完整性驗證
</h3>
<p
class="text-gray-700"
data-i18n="features.verification.description"
>
全面檢查任務完成度，確保所有需求與標準都已滿足，提供驗證報告與質量評估，確保產出符合預期要求。
</p>
</div>
</div>
<!-- 功能5：任務複雜度評估 -->
<div
class="bg-white rounded-lg shadow-lg overflow-hidden transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl"
data-aos="fade-up"
data-aos-delay="400"
>
<div class="flex justify-center p-6 bg-purple-50">
<img
src="assets/icons/feature-complexity.svg"
alt="任務複雜度評估"
class="h-20 w-20"
data-i18n-alt="features.complexity.icon.alt"
/>
</div>
<div class="p-6">
<h3
class="text-xl font-bold mb-3 text-purple-600"
data-i18n="features.complexity.title"
>
任務複雜度評估
</h3>
<p
class="text-gray-700"
data-i18n="features.complexity.description"
>
基於多維度標準評估任務複雜度，提供資源需求估算，識別高風險組件，幫助合理分配資源與時間。
</p>
</div>
</div>
<!-- 功能6：任務記憶功能 -->
<div
class="bg-white rounded-lg shadow-lg overflow-hidden transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl"
data-aos="fade-up"
data-aos-delay="500"
>
<div class="flex justify-center p-6 bg-red-50">
<img
src="assets/icons/feature-memory.svg"
alt="任務記憶功能"
class="h-20 w-20"
data-i18n-alt="features.memory.icon.alt"
/>
</div>
<div class="p-6">
<h3
class="text-xl font-bold mb-3 text-red-600"
data-i18n="features.memory.title"
>
任務記憶功能
</h3>
<p
class="text-gray-700"
data-i18n="features.memory.description"
>
提供跨會話的任務記憶能力，自動保存執行歷史與上下文，允許隨時恢復任務並繼續執行，無需重複解釋需求。
</p>
</div>
</div>
</div>
<div class="mt-16 text-center">
<a
href="#workflow"
class="btn btn-primary inline-flex items-center"
>
<span data-i18n="features.learn-workflow">了解工作流程</span>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 ml-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z"
clip-rule="evenodd"
/>
</svg>
</a>
</div>
</div>
</section>
<!-- 工作流程展示區 - 將由後續任務完成 -->
<section id="workflow" class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2
class="text-3xl font-bold mb-2 text-center"
data-i18n="workflow.title"
>
工作流程
</h2>
<p
class="text-center text-gray-600 mb-12 max-w-3xl mx-auto"
data-i18n="workflow.subtitle"
>
Shrimp Task Manager
提供完整的工作流程，從任務規劃到任務完成的每個步驟都經過精心設計。
</p>
<!-- 水平時間軸 (桌面版) -->
<div class="hidden md:block relative">
<!-- 七個步驟 -->
<div class="relative z-10 flex justify-center items-top gap-8">
<!-- 步驟1：任務規劃 -->
<div
class="workflow-step"
data-aos="fade-up"
data-aos-delay="0"
data-step="1"
>
<div class="workflow-icon bg-blue-100">
<img
src="assets/icons/workflow-plan.svg"
alt="任務規劃"
class="h-8 w-8"
data-i18n-alt="workflow.step1.icon.alt"
/>
</div>
<h4
class="text-lg font-bold mt-4 text-blue-600 min-h-[56px]"
data-i18n="workflow.step1.title"
>
任務規劃
</h4>
<p
class="text-sm text-gray-600 mt-2 max-w-[150px]"
data-i18n="workflow.step1.description"
>
初始化並詳細規劃任務流程
</p>
</div>
<!-- 步驟2：深入分析 -->
<div
class="workflow-step"
data-aos="fade-up"
data-aos-delay="100"
data-step="2"
>
<div class="workflow-icon bg-green-100">
<img
src="assets/icons/workflow-analyze.svg"
alt="深入分析"
class="h-8 w-8"
data-i18n-alt="workflow.step2.icon.alt"
/>
</div>
<h4
class="text-lg font-bold mt-4 text-green-600 min-h-[56px]"
data-i18n="workflow.step2.title"
>
深入分析
</h4>
<p
class="text-sm text-gray-600 mt-2 max-w-[150px]"
data-i18n="workflow.step2.description"
>
深入分析需求並評估技術可行性
</p>
</div>
<!-- 步驟3：方案反思 -->
<div
class="workflow-step"
data-aos="fade-up"
data-aos-delay="200"
data-step="3"
>
<div class="workflow-icon bg-indigo-100">
<img
src="assets/icons/workflow-reflect.svg"
alt="方案反思"
class="h-8 w-8"
data-i18n-alt="workflow.step3.icon.alt"
/>
</div>
<h4
class="text-lg font-bold mt-4 text-indigo-600 min-h-[56px]"
data-i18n="workflow.step3.title"
>
方案反思
</h4>
<p
class="text-sm text-gray-600 mt-2 max-w-[150px]"
data-i18n="workflow.step3.description"
>
批判性審查分析結果並優化方案
</p>
</div>
<!-- 步驟4：任務分解 -->
<div
class="workflow-step"
data-aos="fade-up"
data-aos-delay="300"
data-step="4"
>
<div class="workflow-icon bg-purple-100">
<img
src="assets/icons/workflow-split.svg"
alt="任務分解"
class="h-8 w-8"
data-i18n-alt="workflow.step4.icon.alt"
/>
</div>
<h4
class="text-lg font-bold mt-4 text-purple-600 min-h-[56px]"
data-i18n="workflow.step4.title"
>
任務分解
</h4>
<p
class="text-sm text-gray-600 mt-2 max-w-[150px]"
data-i18n="workflow.step4.description"
>
將複雜任務分解為可管理的子任務
</p>
</div>
</div>
<div
class="relative z-10 flex justify-center items-top mt-16 gap-8"
>
<!-- 步驟5：任務執行 -->
<div
class="workflow-step"
data-aos="fade-up"
data-aos-delay="400"
data-step="5"
>
<div class="workflow-icon bg-red-100">
<img
src="assets/icons/workflow-execute.svg"
alt="任務執行"
class="h-8 w-8"
data-i18n-alt="workflow.step5.icon.alt"
/>
</div>
<h4
class="text-lg font-bold mt-4 text-red-600 min-h-[56px]"
data-i18n="workflow.step5.title"
>
任務執行
</h4>
<p
class="text-sm text-gray-600 mt-2 max-w-[150px]"
data-i18n="workflow.step5.description"
>
按照預定計劃執行特定任務
</p>
</div>
<!-- 步驟6：結果驗證 -->
<div
class="workflow-step"
data-aos="fade-up"
data-aos-delay="500"
data-step="6"
>
<div class="workflow-icon bg-amber-100">
<img
src="assets/icons/workflow-verify.svg"
alt="結果驗證"
class="h-8 w-8"
data-i18n-alt="workflow.step6.icon.alt"
/>
</div>
<h4
class="text-lg font-bold mt-4 text-amber-600 min-h-[56px]"
data-i18n="workflow.step6.title"
>
結果驗證
</h4>
<p
class="text-sm text-gray-600 mt-2 max-w-[150px]"
data-i18n="workflow.step6.description"
>
全面驗證任務完成度和質量
</p>
</div>
<!-- 步驟7：任務完成 -->
<div
class="workflow-step"
data-aos="fade-up"
data-aos-delay="600"
data-step="7"
>
<div class="workflow-icon bg-emerald-100">
<img
src="assets/icons/workflow-complete.svg"
alt="任務完成"
class="h-8 w-8"
data-i18n-alt="workflow.step7.icon.alt"
/>
</div>
<h4
class="text-lg font-bold mt-4 text-emerald-600 min-h-[56px]"
data-i18n="workflow.step7.title"
>
任務完成
</h4>
<p
class="text-sm text-gray-600 mt-2 max-w-[150px]"
data-i18n="workflow.step7.description"
>
標記任務為完成狀態並生成報告
</p>
</div>
</div>
</div>
<!-- 垂直時間軸 (移動版) -->
<div class="md:hidden relative">
<!-- 連接線 -->
<div
class="absolute w-1 bg-gray-200 top-0 bottom-0 left-6 z-0"
></div>
<!-- 七個步驟 -->
<div class="relative z-10">
<!-- 步驟1：任務規劃 -->
<div class="flex items-start mb-10" data-aos="fade-right">
<div class="workflow-icon-mobile bg-blue-100">
<img
src="assets/icons/workflow-plan.svg"
alt="任務規劃"
class="h-6 w-6"
data-i18n-alt="workflow.step1.icon.alt"
/>
</div>
<div class="ml-6">
<h4
class="text-lg font-bold text-blue-600"
data-i18n="workflow.step1.title"
>
任務規劃
</h4>
<p
class="text-gray-600 mt-2"
data-i18n="workflow.step1.description"
>
初始化並詳細規劃任務流程，建立明確的目標與成功標準，可選擇參考現有任務進行延續規劃。
</p>
<a
href="#"
class="text-blue-500 hover:text-blue-700 text-sm mt-2 inline-block workflow-detail-link"
data-step="1"
data-i18n="workflow.learn-more-link"
>
了解更多 →
</a>
</div>
</div>
<!-- 步驟2：深入分析 -->
<div
class="flex items-start mb-10"
data-aos="fade-right"
data-aos-delay="50"
>
<div class="workflow-icon-mobile bg-green-100">
<img
src="assets/icons/workflow-analyze.svg"
alt="深入分析"
class="h-6 w-6"
data-i18n-alt="workflow.step2.icon.alt"
/>
</div>
<div class="ml-6">
<h4
class="text-lg font-bold text-green-600"
data-i18n="workflow.step2.title"
>
深入分析
</h4>
<p
class="text-gray-600 mt-2"
data-i18n="workflow.step2.description"
>
深入分析任務需求並系統性檢查代碼庫，評估技術可行性與潛在風險，提供初步解決方案建議。
</p>
<a
href="#"
class="text-green-500 hover:text-green-700 text-sm mt-2 inline-block workflow-detail-link"
data-step="2"
data-i18n="workflow.learn-more-link"
>
了解更多 →
</a>
</div>
</div>
<!-- 步驟3：方案反思 -->
<div
class="flex items-start mb-10"
data-aos="fade-right"
data-aos-delay="100"
>
<div class="workflow-icon-mobile bg-indigo-100">
<img
src="assets/icons/workflow-reflect.svg"
alt="方案反思"
class="h-6 w-6"
data-i18n-alt="workflow.step3.icon.alt"
/>
</div>
<div class="ml-6">
<h4
class="text-lg font-bold text-indigo-600"
data-i18n="workflow.step3.title"
>
方案反思
</h4>
<p
class="text-gray-600 mt-2"
data-i18n="workflow.step3.description"
>
批判性審查分析結果，評估方案完整性並識別優化機會，確保解決方案符合最佳實踐。
</p>
<a
href="#"
class="text-indigo-500 hover:text-indigo-700 text-sm mt-2 inline-block workflow-detail-link"
data-step="3"
data-i18n="workflow.learn-more-link"
>
了解更多 →
</a>
</div>
</div>
<!-- 步驟4：任務分解 -->
<div
class="flex items-start mb-10"
data-aos="fade-right"
data-aos-delay="150"
>
<div class="workflow-icon-mobile bg-purple-100">
<img
src="assets/icons/workflow-split.svg"
alt="任務分解"
class="h-6 w-6"
data-i18n-alt="workflow.step4.icon.alt"
/>
</div>
<div class="ml-6">
<h4
class="text-lg font-bold text-purple-600"
data-i18n="workflow.step4.title"
>
任務分解
</h4>
<p
class="text-gray-600 mt-2"
data-i18n="workflow.step4.description"
>
將複雜任務分解為獨立且可追蹤的子任務，建立明確的依賴關係和優先順序，支援多種更新模式。
</p>
<a
href="#"
class="text-purple-500 hover:text-purple-700 text-sm mt-2 inline-block workflow-detail-link"
data-step="4"
data-i18n="workflow.learn-more-link"
>
了解更多 →
</a>
</div>
</div>
<!-- 步驟5：任務執行 -->
<div
class="flex items-start mb-10"
data-aos="fade-right"
data-aos-delay="200"
>
<div class="workflow-icon-mobile bg-red-100">
<img
src="assets/icons/workflow-execute.svg"
alt="任務執行"
class="h-6 w-6"
data-i18n-alt="workflow.step5.icon.alt"
/>
</div>
<div class="ml-6">
<h4
class="text-lg font-bold text-red-600"
data-i18n="workflow.step5.title"
>
任務執行
</h4>
<p
class="text-gray-600 mt-2"
data-i18n="workflow.step5.description"
>
按照預定計劃執行特定任務，確保每個步驟的輸出符合質量標準，處理執行過程中的異常情況。
</p>
<a
href="#"
class="text-red-500 hover:text-red-700 text-sm mt-2 inline-block workflow-detail-link"
data-step="5"
data-i18n="workflow.learn-more-link"
>
了解更多 →
</a>
</div>
</div>
<!-- 步驟6：結果驗證 -->
<div
class="flex items-start mb-10"
data-aos="fade-right"
data-aos-delay="250"
>
<div class="workflow-icon-mobile bg-amber-100">
<img
src="assets/icons/workflow-verify.svg"
alt="結果驗證"
class="h-6 w-6"
data-i18n-alt="workflow.step6.icon.alt"
/>
</div>
<div class="ml-6">
<h4
class="text-lg font-bold text-amber-600"
data-i18n="workflow.step6.title"
>
結果驗證
</h4>
<p
class="text-gray-600 mt-2"
data-i18n="workflow.step6.description"
>
全面驗證任務完成度，確保所有需求與技術標準都已滿足，並無遺漏細節，提供質量評估報告。
</p>
<a
href="#"
class="text-amber-500 hover:text-amber-700 text-sm mt-2 inline-block workflow-detail-link"
data-step="6"
data-i18n="workflow.learn-more-link"
>
了解更多 →
</a>
</div>
</div>
<!-- 步驟7：任務完成 -->
<div
class="flex items-start"
data-aos="fade-right"
data-aos-delay="300"
>
<div class="workflow-icon-mobile bg-emerald-100">
<img
src="assets/icons/workflow-complete.svg"
alt="任務完成"
class="h-6 w-6"
data-i18n-alt="workflow.step7.icon.alt"
/>
</div>
<div class="ml-6">
<h4
class="text-lg font-bold text-emerald-600"
data-i18n="workflow.step7.title"
>
任務完成
</h4>
<p
class="text-gray-600 mt-2"
data-i18n="workflow.step7.description"
>
正式標記任務為完成狀態，生成詳細的完成報告，並更新關聯任務的依賴狀態，確保工作流程的連續性。
</p>
<a
href="#"
class="text-emerald-500 hover:text-emerald-700 text-sm mt-2 inline-block workflow-detail-link"
data-step="7"
data-i18n="workflow.learn-more-link"
>
了解更多 →
</a>
</div>
</div>
</div>
</div>
<!-- 步驟詳情彈窗 -->
<div
id="workflow-detail-modal"
class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden"
>
<div class="bg-white rounded-lg max-w-2xl w-full mx-4 p-6">
<div class="flex justify-between items-center mb-4">
<h3 id="modal-title" class="text-2xl font-bold"></h3>
<button
id="close-modal"
class="text-gray-500 hover:text-gray-700"
aria-label="關閉"
data-i18n-aria-label="modal.close-button-aria"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<div id="modal-content" class="prose max-w-none"></div>
<div class="mt-6 flex justify-end">
<button
id="close-modal-btn"
class="btn btn-primary"
data-i18n="modal.close-button"
>
關閉
</button>
</div>
</div>
</div>
</div>
</section>
<!-- 代碼示例區 - 將由後續任務完成 -->
<section id="examples" class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<!-- 代碼示例內容區 -->
<div class="code-content-wrapper">
<!-- 任務規劃與分解流程示例 -->
<div id="planning-example" class="code-content-section active">
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
<!-- 左側說明區 -->
<div class="lg:col-span-2" data-aos="fade-right">
<div class="bg-white p-6 rounded-lg shadow-md">
<h3
class="text-2xl font-bold mb-4 text-blue-600"
data-i18n="examples.planning.title"
>
任務規劃與分解流程
</h3>
<p class="mb-4" data-i18n="examples.planning.intro">
這個示例展示了如何使用MCP Shrimp Task
Manager來規劃和分解複雜任務。整個流程包括四個主要步驟：
</p>
<ol class="list-decimal ml-5 mb-6 space-y-2">
<li class="text-gray-700">
<span
class="font-semibold text-blue-600"
data-i18n="workflow.step1.title"
>任務規劃</span
>
-
<span data-i18n="examples.planning.step1"
>初始化並詳細規劃任務，明確目標與成功標準</span
>
</li>
<li class="text-gray-700">
<span
class="font-semibold text-green-600"
data-i18n="workflow.step2.title"
>深入分析</span
>
-
<span data-i18n="examples.planning.step2"
>深入了解任務，分析技術可行性和潛在挑戰</span
>
</li>
<li class="text-gray-700">
<span
class="font-semibold text-indigo-600"
data-i18n="workflow.step3.title"
>方案反思</span
>
-
<span data-i18n="examples.planning.step3"
>批判性審查分析結果，優化提案</span
>
</li>
<li class="text-gray-700">
<span
class="font-semibold text-purple-600"
data-i18n="workflow.step4.title"
>任務分解</span
>
-
<span data-i18n="examples.planning.step4"
>將複雜任務分解為可管理的子任務</span
>
</li>
</ol>
<p
class="text-sm text-gray-600"
data-i18n="examples.planning.conclusion"
>
通過這種方法，您可以將複雜的大型任務轉化為結構化的、可執行的工作單元，同時保持整體視角。
</p>
</div>
</div>
<div class="lg:col-span-2" da