refactor: 重新命名review-tests為review-design

- 資料夾從review-tests重命名為review-design
- 導航標籤改為🎨設計，更明確UI設計用途
- 頁面標題更新為"Review 組件設計"
- 統一外層排版與review頁面一致
- 移除測驗組件外層卡片包裝，直接展示在背景上

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

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

frontend/app/review-design/page.tsx

@@ -66,13 +66,14 @@ export default function ReviewTestsPage() {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
       <Navigation />
 
-      <div className="max-w-7xl mx-auto px-4 py-8">
+      <div className="max-w-4xl mx-auto px-4 py-8">
         {/* 頁面標題 */}
         <div className="mb-8">
-          <h1 className="text-3xl font-bold text-gray-900 mb-2">Review Tests 組件展示</h1>
+          <h1 className="text-3xl font-bold text-gray-900 mb-2">Review 組件設計</h1>
+          <p className="text-gray-600">所有 review-tests 組件的 UI 設計頁面</p>
         </div>
 
         {/* Tab 導航 */}
@@ -98,12 +99,12 @@ export default function ReviewTestsPage() {
 
 
         {/* 當前測驗組件展示 */}
-        <div className="bg-white rounded-lg shadow-md overflow-hidden">
+        <div className="mb-8">
-          <div className={`px-6 py-4 border-b ${testComponents.find(c => c.id === activeTab)?.color}`}>
+          <div className="mb-6">
             <h2 className="text-2xl font-semibold text-gray-900">{activeTab}</h2>
             <p className="text-sm text-gray-600 mt-1">{testComponents.find(c => c.id === activeTab)?.name}</p>
           </div>
-          <div className="p-8">
+          <div>
             {/* 條件渲染當前選中的測驗組件 */}
             {activeTab === 'FlipMemoryTest' && (
               <FlipMemoryTest