AI 驅動網站設計編譯器：從需求轉譯到視覺共創的設計流程應用
AI 驅動網站設計編譯器：從需求轉譯到視覺共創的設計流程應用
網站設計的起點，是理解企業的經營目標，並將需求轉化為具體的資訊架構與視覺呈現。然而，客戶經常以「有質感」、「簡潔」、「具品牌特色」等抽象語句表達期待，設計團隊則必須透過訪談、資料整理與反覆提案，逐步確認方向。當需求、修改意見與設計版本分散於不同文件或通訊紀錄時，也容易產生資訊遺漏與認知落差。
誠翊資訊科技有限公司於「AI 驅動網站設計編譯計畫」中，將生成式 AI 導入需求分析、網站架構規劃、視覺樣稿及設計紀錄等工作，發展以設計師為核心的協作流程。「編譯器」在本計畫中的意義，是將客戶的商業語言逐步轉化為設計與開發可使用的規格，串接需求、提案、修正與交付之間的資訊。
以結構化資料建立設計依據
系統流程由 C-1 至 C-4 的客戶需求階段展開，涵蓋需求簡述、風格選項、AI 彙整分析與設計需求摘要（Brief）。透過一致的欄位，整理品牌背景、網站目標、功能需求、參考資料及視覺偏好，作為後續分析的共同基礎。
技術應用上，運用大型語言模型的語意整理能力，搭配預先規劃的提示詞與輸出格式，協助將訪談內容轉為條理清楚的需求摘要。例如，客戶希望「讓訪客更容易了解服務並聯絡店家」，即可進一步整理為服務介紹、常見問題、聯絡資訊及行動引導等規劃方向。AI 產出的建議仍須經設計人員檢視，資料不足之處則保留待確認事項，避免將推測當成客戶已確認的需求。
串接網站架構與視覺設計
進入設計編譯階段後，D-1 需求轉譯與 D-2 網站架構圖（Sitemap）產出，將需求摘要整理為頁面層級、內容區塊與功能配置，協助團隊確認網站範圍及資訊順序。透過先確認架構、再展開視覺設計的方式，使各頁面的安排能對應實際使用目的。
D-3 設計風格調校則進一步處理配色、字體層級、留白、圖文比例及版面構圖。系統以提示詞指令集與素材資料作為輔助，將抽象的風格描述轉化為可執行的設計條件。例如，「自然、明亮、簡約」可細化為淺色背景、清楚的標題層級、適度留白與大幅情境圖片，使生成方向具備明確依據，也便於後續檢查與修正。
以可修改原型支援視覺共創
D-4 視覺樣稿階段著重於讓客戶實際理解網站的呈現方式。現階段採用設計需求匯出、AI 協作製稿及成果匯回的流程：先彙整專案需求、網站架構、風格指令與素材，再透過 AI 協作製作 HTML 與 CSS 網頁原型，經設計人員確認後匯回專案，銜接版本保存與後續修編。
網頁原型可呈現頁面捲動、內容排列及不同裝置寬度下的版面變化，讓討論具體落在標題大小、圖片比例、區塊順序與閱讀動線。設計師可依客戶意見持續調整，同時保留已確認的設計條件。此階段的原型主要用於設計確認，正式網站所需的後台、資料串接與功能整合，仍須依開發範圍另行建置與測試。
保留修正歷程與交付依據
D-5 客戶修編紀錄、D-6 設計文件定案及 D-7 客戶回饋紀錄，將視覺提案延伸至修正、確認與成果回饋。流程重點是建立修改意見與設計版本之間的對應關係，讓團隊了解變更內容及確認依據，減少交接時重複詢問或引用錯誤版本的情形。
其中，AI 可協助彙整修改意見，將口語回饋整理成具體的調整項目；設計人員則負責判斷修改範圍、處理相互衝突的要求，並確認最終規格。搭配素材元件庫與提示詞指令集的整理，也能逐步累積可供後續專案參考的設計方法，提升團隊作業的一致性。
設計服務能量的提升與驗證
本計畫的技術重點，在於整合生成式 AI、結構化需求、視覺原型及版本紀錄，建立可追溯的網站設計協作流程。AI 協助處理資料彙整與初步產出，設計師則專注於品牌判斷、使用者體驗與品質確認，讓專業人力能投入更需要判斷與溝通的工作。
計畫規劃透過企業場域試煉，觀察需求確認時間、樣稿製作工時、修正次數及使用者回饋，作為流程改善的評估依據。實際成效應以專案操作紀錄與測試結果呈現。透過持續驗證與調整，AI 驅動網站設計編譯器將協助誠翊資訊累積標準化的設計流程與知識資產，深化服務在地企業的數位設計能力。
