鐵人賽第22天

今天主要還是在前端建置前討論，昨天是偏功能向的討論，今天則是偏視覺向的討論。
之前我有請AI去做過一些介面，但都千篇一律，跟其他人分享的界面都很相像。
這次機會難得，我想試試如果事前充分討論，AI建構的風格是否還是類似。
不過由於我對前端的理解不多，頂多知道一些html基本標籤，CSS大概知道是什麼，但理解不多，
所以可能效果不會太好，但也能真實反映出，新手與AI合作會出現哪些狀況。

首先開始前的老樣子，請AI同事了解應用現況。
我給AI的指令:

@ai_context.md @README.md @軟體核心架構規劃.md @功能需求總覽.md   了解目前現況

等他了解之後，由於昨天已經討論過前端規劃，今天先跟討論網站配色
我給AI的指令：

@agents/design/brand-guardian.md 請帶入你的腳色，@plan_sim/wireframes_description.md @plan_sim/TaskWhisker_Frontend_Development_Plan.md 參考這兩個文件的內容，幫我設計給前端使用的主色調、功能色、中性色等色彩架構給前端使用，還有系統識別組件與字體設定，來讓前端顯示的有一制性且有品牌識別度 。請用一問一答方式來釐清我想要的品牌感覺，問題請攜帶幾個選項與分析選項優劣   

我請AI同事先讀一下昨天的前端設計稿，去設計視覺配色設定，由於這部分不是我擅長的，我請AI同事用一問一答的方式幫我釐清。

首先AI同事詢問我的品牌偏向哪個風格，我選擇了現代簡潔，但希望能帶點友善。
接下來AI同事詢問我主色調偏向哪種感覺，AI同事給了我科技藍跟自然綠，但看起來都不太符合我要的。

這裡我想說去之前看到的一個網站，裡面有很多推薦配色可以選擇。
色彩範例網址
我在網站中找了一組我看順眼的配色給AI同事請他分析配色是否符合，AI同事反映符合需求(雖然這裡我覺得我給什麼他都會說符合就是)。

再來AI同事給了我一組顏色為功能色，這個看起來符合需求，我就直接確認AI同事推薦的顏色。
中性色看起來也符合需求，也直接使用AI同事推薦。
色彩框架完成後，接下來AI同事問我字體設定的需求，我請他以可免費商用來設計。
AI同事分別給我英文字體與中文字體：

• 英文品牌字體：Roboto
• 中文品牌字體：Noto Sans CJK TC

雖然AI同事說可以商用，但由於這個蠻重要的，因此我有在去查詢確認，的確都是免費開源商用。
確認好字體後，開始設計各種字體大小數值：

• Display (展示型)：3rem - 4.5rem
• H1 (主標題)：2rem - 2.5rem
• H2 (次標題)：1.5rem - 2rem
• H3 (小標題)：1.25rem - 1.5rem
• Body (正文)：1rem
• Small (小字)：0.875rem
• Caption (註解)：0.75rem

原本AI同事是打算用px單位，但我記得這個單位用在介面很容易跑版，因此請AI換一個不會跑版的單位
AI同事就建議我使用rem。

確認好字體大小，他另外設計了字重(字體粗細)：

• Regular (400)：用於大部分正文和普通文字。
• Medium (500)：用於 UI 元素、按鈕文字、導航項目。
• Bold (700)：用於重要標題、關鍵資訊。
• Light (300)：可選，用於特殊設計元素或極簡風格的標題。

由於我對這一塊較無概念，因此都先套用AI同事的設定，都之後實際建構後，才知道要不要調整。

在這時發生了意外，AI同事出現BUG錯誤，不管我輸入甚麼指令，他一直看不懂。
還好他勉強還看懂把當前輸出成檔案。
輸出完之後，我重開AI，請他讀取檔案內容，接續前端設計。
不過由於中途斷掉，他就沒有繼續一問一答釐清而直接生成後續內容。
但因為有讀檔案知道前面的風格，因此後面的間距與布局設定大致符合需求，我就沒請AI同事重新來過。
AI同事下面依序增加了：

• 間距與佈局原則
• 圓角標準
• 陰影/海拔系統
• 圖標風格
• 品牌語氣原則
• 資產結構組織
• 開發者交付套件
• 無障礙標準

看起來沒什麼問題，明天就會依照這套標準與昨天討論的前端功能開始建置。