docs: 創建完整規格文檔並統一用詞為慣用語

📚 新增規格文檔：
- AI生成網頁前端需求規格.md (完整需求分析)
- AI生成網頁前端功能規格.md (功能實現規格)
- AI生成網頁前端技術規格.md (技術架構規格)

🔤 統一用詞：
- 前端卡片標籤更新為更友善的表達：
  - 「太簡單啦」(簡單詞彙)
  - 「重點學習」(適中詞彙)
  - 「有點挑戰」(艱難詞彙)
  - 「慣用語」(慣用語)
- 需求規格文檔中統一使用「慣用語」

📖 文檔特色：
- 包含詳細的用戶故事和驗收標準
- 完整的技術架構和性能規格
- 具體的測試案例和品質指標
- CEFR等級比較機制詳細說明

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/app/generate/page.tsx

@@ -582,25 +582,25 @@ function GenerateContent() {
                   {/* 簡單詞彙卡片 */}
                   <div className="bg-gray-50 border border-dashed border-gray-300 rounded-lg p-3 sm:p-4 text-center">
                     <div className="text-xl sm:text-2xl font-bold text-gray-600 mb-1">{vocabularyStats.simpleCount}</div>
-                    <div className="text-gray-600 text-xs sm:text-sm font-medium">簡單詞彙</div>
+                    <div className="text-gray-600 text-xs sm:text-sm font-medium">太簡單啦</div>
                   </div>
 
                   {/* 適中詞彙卡片 */}
                   <div className="bg-green-50 border border-green-200 rounded-lg p-3 sm:p-4 text-center">
                     <div className="text-xl sm:text-2xl font-bold text-green-700 mb-1">{vocabularyStats.moderateCount}</div>
-                    <div className="text-green-700 text-xs sm:text-sm font-medium">適中詞彙</div>
+                    <div className="text-green-700 text-xs sm:text-sm font-medium">重點學習</div>
                   </div>
 
                   {/* 艱難詞彙卡片 */}
                   <div className="bg-orange-50 border border-orange-200 rounded-lg p-3 sm:p-4 text-center">
                     <div className="text-xl sm:text-2xl font-bold text-orange-700 mb-1">{vocabularyStats.difficultCount}</div>
-                    <div className="text-orange-700 text-xs sm:text-sm font-medium">艱難詞彙</div>
+                    <div className="text-orange-700 text-xs sm:text-sm font-medium">有點挑戰</div>
                   </div>
 
                   {/* 片語與俚語卡片 */}
                   <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 sm:p-4 text-center">
                     <div className="text-xl sm:text-2xl font-bold text-blue-700 mb-1">{vocabularyStats.phraseCount}</div>
-                    <div className="text-blue-700 text-xs sm:text-sm font-medium">片語俚語</div>
+                    <div className="text-blue-700 text-xs sm:text-sm font-medium">慣用語</div>
                   </div>
                 </div>
               )}
@@ -653,7 +653,7 @@ function GenerateContent() {
 
                   return (
                     <div className="bg-gray-50 rounded-lg p-4 mt-4">
-                      <h3 className="font-semibold text-gray-900 mb-2 text-left">片語俚語</h3>
+                      <h3 className="font-semibold text-gray-900 mb-2 text-left">慣用語</h3>
                       <div className="flex flex-wrap gap-2">
                         {phrases.map((phrase, index) => (
                           <span