diff --git a/src/views/planCard.ts b/src/views/planCard.ts
index 6f2213a..c7fd3d1 100644
--- a/src/views/planCard.ts
+++ b/src/views/planCard.ts
@@ -61,10 +61,30 @@ export function getPlanCardStyles(): string {
     .plan-step:last-child {
       margin-bottom: 0;
     }
-    .step-num {
-      color: var(--vscode-textLink-foreground);
-      font-weight: 500;
-      margin-right: 6px;
+    .step-checkbox {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 16px;
+      height: 16px;
+      margin-right: 8px;
+      border: 2px solid var(--vscode-textLink-foreground);
+      border-radius: 4px;
+      background: transparent;
+      flex-shrink: 0;
+      opacity: 0.6;
+      transition: all 0.2s ease;
+    }
+    .step-checkbox.completed {
+      background: var(--vscode-textLink-foreground);
+      border-color: var(--vscode-textLink-foreground);
+      opacity: 1;
+    }
+    .step-checkbox.completed::after {
+      content: '✓';
+      color: var(--vscode-editor-background);
+      font-size: 11px;
+      font-weight: bold;
     }
     .plan-actions {
       display: flex;
@@ -151,7 +171,7 @@ export function getPlanCardScript(): string {
       }
 
       const stepsHtml = (segment.planSteps || []).map((step, i) =>
-        \`<div class="plan-step"><span class="step-num">\${i + 1}.</span> \${step}</div>\`
+        \`<div class="plan-step"><span class="step-checkbox"></span> \${step}</div>\`
       ).join('');
 
       // 选项按钮
@@ -231,7 +251,7 @@ export function getPlanCardScript(): string {
     function renderPlanCardStatic(segment, segmentDiv) {
       segmentDiv.className += ' segment-plan';
       const stepsHtml = (segment.planSteps || []).map((step, i) =>
-        \`<div class="plan-step"><span class="step-num">\${i + 1}.</span> \${step}</div>\`
+        \`<div class="plan-step"><span class="step-checkbox"></span> \${step}</div>\`
       ).join('');
 
       segmentDiv.innerHTML = \`