免學程式也能開發!利用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
還在煩惱平凡日常該如何增添一點小驚喜嗎?全家便利商店這次聯手超萌的馬來貘,推出黑白配色的馬來貘雪糕,不僅外觀吸睛,層次豐富的雙層口味更是讓人一口接一口!本文將帶你探索馬來貘雪糕的多種創意吃法,從簡單的豆漿燕麥碗、藍莓果昔,到大人系的奇亞籽布丁下午茶,讓可愛的馬來貘陪你度過每一餐,增添生活中的小確幸!
Thumbnail
還在煩惱平凡日常該如何增添一點小驚喜嗎?全家便利商店這次聯手超萌的馬來貘,推出黑白配色的馬來貘雪糕,不僅外觀吸睛,層次豐富的雙層口味更是讓人一口接一口!本文將帶你探索馬來貘雪糕的多種創意吃法,從簡單的豆漿燕麥碗、藍莓果昔,到大人系的奇亞籽布丁下午茶,讓可愛的馬來貘陪你度過每一餐,增添生活中的小確幸!
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 快速創建解決問題的名單,並進行格式化以供下載。同時提供了加速發展成功的線上服務業務的建議和相關資源。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News