AI設計革命：如何用AI工具加速你的網站設計流程？

文、Raymond老師

對大多數的工程師而言，AI 工具最大的效用莫過於在已深度整合到各種編輯器中的輔助工具。不管是前陣子十分火紅的 Cursor，或是高度整合在 VSCode 中的 Copilot，這些工具都能有效提升開發效率，特別是 AI 驅動的 autocomplete 更是讓程式設計變得更加流暢。本文將簡單介紹與探討如何妥善運用這些 AI 工具在網頁設計的開發之中。

功能簡介

雖然現在AI輔助開發的工具遍地開花，但對於天天都需要碰到程式碼的工程師來說，以下兩點無非是最常用且最常見的功能：

程式碼自動補全（autocomplete）
 

在行內即時編寫程式碼時，所有的編輯器都早已有針對各個語言的關鍵字補全功能，讓工程師們可以少打非常多的字，不過autocomplete的功能是建立在AI即時的讀取目前編輯內容的上下文後，去提示出可能符合當下開發情境的內容，例如下圖我僅僅只是打出了其中一項要return的內容，Copilot便去讀取上下文認為猜測我可能是在撰寫有關Select元件選單的相關程式（會需要label以及value等元素），於是就提示了下一行給我。

透過prompt生成程式碼
 

透過下達prompt（提供給AI的提示詞或指令），我們也能在IDE中直接生成大段落的功能以及程式碼，在清楚目前所需的內容或是架構的情形，工程師能靠描述現在所需的功能去讓AI給出基本的prototype，再來做後續修正補全，甚至相反過來，在已經完成建構的內容中，讓AI直接修改程式碼或是提出修正建議，透過Copilot Edit或是Cusor Composer都能很好地完成以上的工作。

對網頁設計開發的影響

在目前競爭十分激烈的AI編輯器中，往往每過幾週或一兩個月，就能迭代出新的功能或是產品，尤其是前端網頁的開發，由於有大量的資料能夠訓練且部分靜態內容AI開發的速度遠遠超過人工，只要思路夠清晰、結構夠完備，短短幾分鐘內就能產出大量的網頁內容，甚至社群媒體上不乏充斥著那些「AI幫我在半小時內完成網站」或「Cursor讓我增加了三倍效率」等等內容，開發速度確實是帶來了不小的衝擊，不過對於網頁設計開發來說，僅僅做出能看的東西只能被稱作demo page，而不是一個好的web page，即便做出來了也還得經過安全性或效能等等的驗證，大語言模型的運作原理本質上就是一種多數決，但不代表是最佳解。

不論是使用哪種AI工具，Copilot也好、Cursor也罷，在能妥善運用他們工程師面前確實是如虎添翼，之所以有這樣的效果是因為他們「本來就知道要做什麼」，若是有從頭到尾自己設計並開發過一個網站的人便能理解，產出目前的內容只是剛開始，後續如何迭代更新與維護才是重點所在，保持著信任並驗證的開發習慣，更能讓自己上手各種推陳出新的AI工具。

⭐點我加入官方LINE，獲得第一手最新消息⭐

FB粉絲團：https://www.facebook.com/lccnetzone
YouTube頻道：https://www.youtube.com/@Lccnet-TW
痞客邦Blog：http://lccnetvip.pixnet.net/blog