免學程式也能開發!利用ChatGPT Codex輕鬆打造個人網站與應用程式

更新 發佈閱讀 6 分鐘

大部分人想到 ChatGPT,可能就是拿來聊天、查資料、或是問一些生活上的小問題。例如問它今天的天氣、幫忙寫信、甚至是整理讀書筆記。 但你可能不知道,其實GPT最近更新了一個非常強大的技能,叫做 Codex ——它能幫你「寫程式」。

只要你有訂閱GPT就有這個功能。這絕對不是業配!

這代表什麼? 就算你沒有工程師背景,也可以像開發者一樣,告訴 AI 你想要的功能,它就會幫你把程式碼生出來。甚至,你還可以做出一個簡單的網頁或小遊戲。這感覺有點像是你突然擁有了一個會寫程式的朋友。

Vibe Coding

最近很流行的一個名詞叫 Vibe Coding。聽起來有點潮,意思其實很單純,就是「用自然語言描述你要的東西,AI 幫你完成程式碼」。

傳統的寫程式方式是:

  1. 學會語法
  2. 熟悉框架
  3. 一行一行敲出程式

但 Vibe Coding 的核心思維是:重「意圖」勝過重「語法」。你只要告訴 AI:「我想要一個可以顯示倒數計時的網頁」,它就會自動幫你生出 HTML、CSS、JavaScript,甚至可以用 React、Vue 或其他框架。

再來如果想要修改的話,你還能跟 AI 對話修正。例如:

  • 「字體太小了,幫我調大一點」
  • 「背景顏色改成深色模式」
  • 「按鈕加一點動畫效果」

AI 會馬上更新程式碼,讓你立刻看到效果。這就像是你和一個設計師兼工程師的助理並肩工作。

Codex 的使用方式

既然 Codex 這麼強大,那要怎麼用呢?目前主要有三種方法:

1. CLI 工具

CLI 全名是 Command Line Interface,也就是「命令列介面」。聽起來有點硬派,但其實就是打開終端機(Terminal),輸入指令,讓 Codex 幫你跑程式。

安裝方法:

  • macOS:
    brew install codex 
  • Windows / Linux:
    npm install -g @openai/codex 

安裝好後,只要在專案目錄進入終端機並且輸入 codex,就能開始跟它互動。例如輸入:「請幫我新增一個計算 BMI 的函式」,它就會直接在檔案裡幫你產生程式碼。這種方式適合稍微熟悉電腦的使用者,可以快速整合到專案。而且也可以再你熟悉的編輯器使用。

raw-image

如果你老闆和我老闆一樣,只對 Vscode copilot 情有獨鍾,如果給他看到你用其他的AI他就會抓狂。那這種在終端機使用的方法就很適合你。

2. VS Code 擴充

如果你不熟悉命令列,建議直接用 VS Code 擴充

步驟很簡單:

  1. 打開 VS Code
  2. 在 Marketplace 搜尋「Codex」
  3. 安裝之後,側邊欄就會出現一個對話視窗
raw-image

接著,你就可以像跟 ChatGPT 對話一樣,把需求打進去。 例如:

「請幫我建立一個顯示個人社群連結的頁面,使用 React 和 Tailwind CSS」

Codex 會自動幫你建立新檔案,產出 React + Tailwind 的程式碼,讓你馬上看到成果。

而且過程中,它還會讀取你的檔案結構,確保程式碼放在正確的位置。這對新手來說超級方便,就算不太懂電腦使用,也能做出一個漂亮的頁面。

3. GitHub 專案連結

Codex 甚至可以直接和 GitHub 專案綁定。 意思是你可以把自己的程式碼放在 GitHub 上,然後讓 Codex 幫你在線上修改。

這功能有點像是把 AI 當成「遠端協作者」,不過因為涉及到程式碼版本控制,建議稍微有點程式經驗再來試。

raw-image

實際測試:做一個 Linktree 頁面

那我們就實際來試一下吧!我用 VS Code 的擴充,請 Codex 幫我做一個「Linktree 頁面」。

Linktree 是一種把你所有社群連結集中在一個頁面的服務,像是 IG、YouTube、Podcast、GitHub 都能放在上面。

我下的指令是:

「請幫我做一頁 Linking Tree 頁面,使用 React 和 Tailwind CSS,謝謝!」

(對 AI 還是要有禮貌一點,未來如果 AI 統治世界,說不定會對我好一點 😆)

Codex 的處理流程是這樣的:

  1. 它會先讀取專案檔案
  2. 找到合適的資料夾
  3. 建立新檔案,產生 React + Tailwind 程式碼

Codex 會跑出來下面的畫面,他會先搜尋檔案,閱讀並且修改新建檔案並且達成你的目標。

raw-image

最後結果是一個可以直接跑的 Linktree 頁面,看起來還蠻完整的。 如果我覺得版面不夠好看,也能再回覆它:「按鈕改成圓角」、「加個背景漸層」,AI 就會再更新程式碼。

以下是成果,其實感覺還不錯啦。

raw-image

如果還有什麼想要修改的,也可以請他在修改,可以和他溝通來回修改。

例如請可以請 GPT 幫你把底色換掉,或是加一些按鈕什麼的。

有了AI人人都可以是工程師

Codex 的出現,讓「寫程式」這件事不再只是工程師的專利,而是每個人都能嘗試的創作工具。無論你是想要做一個小工具方便生活,還是打造一個完整的網站、甚至遊戲,都能透過和 AI 對話,一步步實現。Vibe Coding 的思維,就是把繁瑣的語法交給 AI,自己只需要專注在「想要做什麼」。或許在不久的將來,我們會更少聽到「你會不會寫程式」這個問題,而是「你想讓 AI 幫你做什麼」。

現在就打開的的GPT 試試看吧!

留言
avatar-img
留言分享你的想法!
avatar-img
Tom的沙龍
15會員
52內容數
我是一個從科技業轉職的軟體工程師
你可能也想看
Thumbnail
嗨~我是夢夢 ♡ 每年到這個時候,我都會默默開始列購物清單 畢竟「蝦皮雙11」真的太好買啦 🛒✨ 這次就想跟大家分享幾樣我自己平常有在用、也準備趁雙11補貨的好物, 順便聊聊我最近開始玩的「蝦皮分潤計畫」,怎麼讓分享變成小小被動收入 💰
Thumbnail
嗨~我是夢夢 ♡ 每年到這個時候,我都會默默開始列購物清單 畢竟「蝦皮雙11」真的太好買啦 🛒✨ 這次就想跟大家分享幾樣我自己平常有在用、也準備趁雙11補貨的好物, 順便聊聊我最近開始玩的「蝦皮分潤計畫」,怎麼讓分享變成小小被動收入 💰
Thumbnail
分享如何透過蝦皮解決毛孩(多芬)因換季和食物引發的皮膚過敏問題,從選用單一蛋白質的火雞肉主食,到利用寵物防舔衣舒緩傷口,並結合蝦皮雙11購物節的優惠資訊與蝦皮分潤計畫的實用教學。
Thumbnail
分享如何透過蝦皮解決毛孩(多芬)因換季和食物引發的皮膚過敏問題,從選用單一蛋白質的火雞肉主食,到利用寵物防舔衣舒緩傷口,並結合蝦皮雙11購物節的優惠資訊與蝦皮分潤計畫的實用教學。
Thumbnail
程式設計與技術能力 在現代社會中的重要性越來越明顯,尤其是在人工智能(AI)和自動化技術迅速發展的背景下。理解編程語言,如Python、R等,以及熟悉相關技術架構和工具,能夠幫助個人在這樣的環境中更好地工作。這種能力不僅對技術專業人士至關重要,也對非技術領域的人士日益重要,因為基礎的程式設計知識已
Thumbnail
程式設計與技術能力 在現代社會中的重要性越來越明顯,尤其是在人工智能(AI)和自動化技術迅速發展的背景下。理解編程語言,如Python、R等,以及熟悉相關技術架構和工具,能夠幫助個人在這樣的環境中更好地工作。這種能力不僅對技術專業人士至關重要,也對非技術領域的人士日益重要,因為基礎的程式設計知識已
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
🔍 使用 AI 工具 (ChatGPT): ChatGPT 搭配 Notion 是我目前在使用的兩項主要工具,讓我能夠輕鬆地管理和組織我的工作和想法。透過 ChatGPT 的功能,我能夠更好地發想與內容創作,而 Notion 則提供了一個知識資料庫的整合,讓我能夠有效地記錄、規劃和分享各種內
Thumbnail
🔍 使用 AI 工具 (ChatGPT): ChatGPT 搭配 Notion 是我目前在使用的兩項主要工具,讓我能夠輕鬆地管理和組織我的工作和想法。透過 ChatGPT 的功能,我能夠更好地發想與內容創作,而 Notion 則提供了一個知識資料庫的整合,讓我能夠有效地記錄、規劃和分享各種內
Thumbnail
本文介紹了text-generation-webui的安裝方法和模型的選擇,包括模型的下載和擺放位置,並提供了相關的連結和建議。
Thumbnail
本文介紹了text-generation-webui的安裝方法和模型的選擇,包括模型的下載和擺放位置,並提供了相關的連結和建議。
Thumbnail
瞭解如何創建內容日曆以及對線上業務的重要性。內容的一致性、連續性和連接對於吸引客戶至關重要。透過ChatGPT提供的提示,建立符合這些理想的內容日曆。
Thumbnail
瞭解如何創建內容日曆以及對線上業務的重要性。內容的一致性、連續性和連接對於吸引客戶至關重要。透過ChatGPT提供的提示,建立符合這些理想的內容日曆。
Thumbnail
啟動從未如此簡單、輕鬆或快速! 記得我開始寫第一份電子報時,花了很長時間。 但現在不再是這樣了。 除了Logo之外,所有內容幾乎都可以在 Chat GPT 的幫助下創建完成。
Thumbnail
啟動從未如此簡單、輕鬆或快速! 記得我開始寫第一份電子報時,花了很長時間。 但現在不再是這樣了。 除了Logo之外,所有內容幾乎都可以在 Chat GPT 的幫助下創建完成。
Thumbnail
這篇文章將教你如何使用 ChatGPT 快速創建解決問題的名單,並進行格式化以供下載。同時提供了加速發展成功的線上服務業務的建議和相關資源。
Thumbnail
這篇文章將教你如何使用 ChatGPT 快速創建解決問題的名單,並進行格式化以供下載。同時提供了加速發展成功的線上服務業務的建議和相關資源。
Thumbnail
在前一篇「教你如何用ChatGPT來製作Notion Quotes」中,我們學到了如何運用ChatGPT創建個人語錄庫,以豐富Notion數位空間。今天,我們與大家分享已完成的Notion Quotes模板,可供免費下載,輕鬆建立屬於自己的個人語錄庫,為Notion空間增添更多層次與深度。
Thumbnail
在前一篇「教你如何用ChatGPT來製作Notion Quotes」中,我們學到了如何運用ChatGPT創建個人語錄庫,以豐富Notion數位空間。今天,我們與大家分享已完成的Notion Quotes模板,可供免費下載,輕鬆建立屬於自己的個人語錄庫,為Notion空間增添更多層次與深度。
Thumbnail
相信有許多人都使用跟接觸過 ChatGPT 了,在這個工具出來後我也開始大量使用,被他的反應跟能力給嚇到,但在使用一段時間跟看到大家的應用心得,還是發現了一些應用上的心得,他並不是全能的,但適當的應用絕對可以讓我們發揮更大產能。
Thumbnail
相信有許多人都使用跟接觸過 ChatGPT 了,在這個工具出來後我也開始大量使用,被他的反應跟能力給嚇到,但在使用一段時間跟看到大家的應用心得,還是發現了一些應用上的心得,他並不是全能的,但適當的應用絕對可以讓我們發揮更大產能。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News