在Day 05中，我們確定了實戰專案《VibePulse》的PRD與系統架構圖。從今天開始，我們將正式進入代碼實作階段。

在傳統開發中，刻一個全新的Dashboard畫面通常需要花上數小時：設計Grid佈局、處理Flexbox對齊、調整Padding/Margin、尋找適合的Icon套件，並反覆在瀏覽器中微調。

在Vibe Coding的模式下，我們可以透過自然語言直接描述畫面結構與風格，讓AI在幾秒鐘內為我們生成乾淨、具備響應式設計（RWD）的Tailwind CSS+React組件。

1.自然語言描述UI的黃金三要素
向AI描述畫面時，若只給幫我畫一個漂亮的儀表板，AI產出的風格往往無法預測。要讓AI一次到位，Prompt必須包含以下三個要素：

版面結構（Layout Structure）：明確指出Grid欄位數、Flex軸向、Header / Sidebar / Main Content的相對位置。

設計系統與元件庫（Design System & Components）：指定使用的工具（Tailwind CSS、Shadcn UI、Lucide Icons）。

資料與視覺層級（Visual Hierarchy & Mock Data）：說明元件內應包含哪些卡片、文字大小、顏色與數據種類。

2.實戰演練：建立VibePulse主儀表板(Dashboard)
我們將為VibePulse建立主頁面頂部的數據概覽卡片（Overview Metrics Cards）與學習進度列表(Skill Progress List)。

步驟1：發送結構化UI Prompt
開啟Cursor，對著@app/page.tsx發送以下Prompt：
@docs/PRD.md (請參考專案 PRD 需求)

請幫我使用React(TypeScript)、Tailwind CSS與Lucide Icons，撰寫VibePulse Dashboard的主畫面頂部區塊。

畫面需求：

1.頂部數據統計區（Grid 4欄，響應式）：

• 卡片 1：連續學習天數（Streak Count，12天）
• 卡片 2：總學習時數（Total Hours，48小時）
• 卡片 3：掌握中的技能數（Active Skills，6個）
• 卡片 4：本週完成任務數（Weekly Tasks，18個）
• 每張卡片需包含Icon、標題、數據大字體與較上週變化的百分比標籤（+12%）。

2. 樣式規範：
   • 使用Tailwind的 grid-cols-1 md:grid-cols-2 lg:grid-cols-4 確保RWD。
   • 卡片風格：圓角 rounded-xl、半透明邊框 border border-slate-800、暗色背景 bg-slate-900/50。
   • 文字使用階層顏色：標題 text-slate-400，數字 text-slate-100。

3.AI產出的程式碼範例
AI生成了獨立且結構清晰的React Component：
import React from 'react';
import { Flame, Clock, Target, CheckCircle2, TrendingUp } from 'lucide-react';

interface MetricCardProps {
title: string;
value: string;
change: string;
icon: React.ElementType;
iconColor: string;
}

const MetricCard: React.FC = ({
title,
value,
change,
icon: Icon,
iconColor,
}) => (

export default function DashboardOverview() {
return (



學習總覽 Dashboard
追蹤你的 Vibe Coding 學習節奏與技能成長

  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
    <MetricCard
      title="連續學習天數"
      value="12 天"
      change="+2 天"
      icon={Flame}
      iconColor="text-orange-500"
    />
    <MetricCard
      title="累積學習時數"
      value="48.5 hrs"
      change="+14%"
      icon={Clock}
      iconColor="text-blue-500"
    />
    <MetricCard
      title="掌握中的技能"
      value="6 項"
      change="+1 本月"
      icon={Target}
      iconColor="text-purple-500"
    />
    <MetricCard
      title="本週打卡任務"
      value="18 項"
      change="+8%"
      icon={CheckCircle2}
      iconColor="text-emerald-500"
    />
  </div>
</section>

);
}

4.人類審查與UI品質控制心法
在接收（Accept）AI產出的UI程式碼時，請重點檢查以下三點：

RWD響應式切換：縮放瀏覽器視窗，檢查卡片在手機版（Single Column）與桌機版（4 Columns）是否自適應。

顏色一致性：確認AI是否使用了全域定義的Theme顏色，而非隨機引入不協調的Hex色碼。

組件抽離度：AI是否有自動將重複出現的卡片邏輯抽離成可重用的子組件（上例中的MetricCard）？如果沒有，應發送Prompt請AI進行拆分重構。

5.今日小結
今天我們展現了自然語言在UI佈局上的高速運作：

不需要手寫數十行CSS Flexbox/Grid語法。

只要提供清晰的結構與風格語義，AI能在10秒內生成語義化、漂亮且響應式的元件。

目前畫面已經初具雛形，但這些數據目前都是靜態的寫死內容（Hardcoded Mock Data）。