# 🏅 Day 20 - ✨ 用 AI 畫出你的專案架構圖：SVG 的高性價比視覺化

## 🚀 學習目標：了解 SVG 如何製圖

在 Day 18、19，校長有提供了一個用 Google Sheet 連結網站的範本，但有時你或許想瞭解整體網站架構，或是伺服器跟資源間的連結

有的時候你會希望用鳥勘的方式，全覽整個架構的話，校長很建議你用 SVG 繪圖方式，讓我們開始吧 :D

### 💡 為什麼 SVG 是的最佳選擇？

- **高性價比 (無限放大)：** SVG 是用程式碼繪製的，因此無論網頁被放大多少倍，它都不會模糊失真。這代表你只需一個檔案，就能適用所有手機和高解析度螢幕。

- **高修改性 (CSS 操控)：** SVG 本身就是一段程式碼。你可以直接用 CSS 改變它的顏色、大小、甚至動畫，不需要回到繪圖軟體修改圖片。

---

## 步驟一：熱身 - 體驗 AI 的 SVG 繪圖能力

我們先來個輕鬆的熱身，讓 AI 為你畫一個 Logo，感受一下 SVG 碼的生成速度與輸出品質。

1. 開啟你的 AI 助教 (Gemini, ChatGPT, Copilot 等)。

2. 請給予 AI 以下提示詞 (Prompt)：

> **🎯 提示詞 (Prompt A)：AI LOGO 設計師**
>
> **【需求】**：請為一個名為 **「FUTURE 3C」** 的店面設計一個 Logo。 **【格式要求】**：請你直接輸出 **完整的 SVG 程式碼** (從 `<svg>` 開頭到 `</svg>` 結束)，並確保 Logo 內容是單色的。

---

## 步驟二：核心任務 - 讓 AI 畫出你的 Day 18 流程圖

現在，我們將學習到的 SVG 應用到 **架構視覺化** 上，讓 AI 畫出你 Day 18 專案的資料流程圖。

1. 將下面這個 **流程描述** 貼給 AI。

2. **讓 AI 輸出 SVG 流程圖：**

🎯 提示詞 (Prompt B) 網站架構、程式碼流程圖 

【繪圖目標】：請你根據我 Day 18 專案的資料流向，
畫出一個 SVG 程式碼架構流程圖，並能即時預覽

需要有外部 API 接接、介面 → 程式流程 → 結果 等交互式架構圖 
且有 functioin、資料流、DOM流向、事件綁定

以下提供我寫的網頁程式碼

>>> 張貼您整的 day18 的 3C index.html 程式碼 <<<<

## 校長使用免費版的範例(選用畫布模式、繪製好後就能點選預覽按鈕)


---

## 題目(也可嘗試其他模型)

1. **實作 SVG Logo：** 使用 AI 生成一個 Logo 的 **SVG 程式碼**`<h1>FUTURE 3C</h1>`。

2. **實作 SVG 架構圖：** 使用 AI 生成 Day 18 專案的 **SVG 流程圖，也可以請他直接調整 svg 內的內容，修改裡面的箭頭或流程試試看**

## 回報格式

1. **成果截圖**：截圖顯示你的專案中，**Logo** 和 **架構流程圖** 都已成功顯示，證明你成功將 AI 輸出的 SVG 程式碼應用到網頁上。
2. 回饋思考：能否用在目前日常中？prompt 你會想如何微調？使用的感想如何、或是比較模型差異