不會寫程式，也可以擁有自己的電子名片網站。
這篇教你用 ChatGPT 從零設計一頁式個人名片，加入 LINE、Email、LinkedIn、vCard 下載與 QR Code 分享，最後完成網站發布。最方便的是：我們還做了一個「填資料就能產生完整提示詞」的免費工具。
立即使用提示詞產生器 ↓獨立開啟工具 ↗一、什麼是一頁式電子名片？
傳統名片能交換基本資訊，但對方若想看你的專業服務、作品、課程或社群平台，還得另外搜尋。一頁式電子名片（One-Page Digital Business Card）把這些內容整合成一個手機即可瀏覽的網站，透過網址或 QR Code 就能分享。
二、開始前：先整理自己的資料
不需要一次準備得非常完整，但至少建議先有姓名、職稱、品牌或公司、簡短介紹，以及一種公開聯絡方式。有專業形象照、品牌 Logo 或主色更好，沒有也能先做。
| 項目 | 示例（請自行替換） |
|---|---|
| 姓名與職稱 | 王小明／品牌行銷顧問 |
| 一句話介紹 | 協助中小企業運用 AI 提升行銷效率 |
| 專長 | AI 應用、內容創作、社群行銷 |
| 公開聯絡管道 | 工作信箱、LINE 官方帳號、LinkedIn |
| 設計偏好 | 深色科技風、現代極簡、日系自然風 |
三、Step 1：打開 ChatGPT，說明你要做的是「網站」
如果帳號支援 ChatGPT Sites，請在 ChatGPT 網頁的 Work 模式，或桌面應用程式的 Work／Codex 中提出「建立網站」需求，也可以提及 @Sites。完成初稿後可預覽、要求修改，再設定分享與發布權限。功能依方案及工作空間權限提供。
參考：OpenAI 官方 ChatGPT Sites 教學 ↗如果沒有 Sites，直接要求 ChatGPT 製作完整的 index.html，使用 HTML、CSS、JavaScript 完成可以獨立運作的頁面，再用靜態網站託管服務發布。選擇路線不同，名片的內容規劃與設計提示詞仍然適用。
四、Step 2：直接複製三組 ChatGPT 指令
我把操作拆成「先做出網站 → 修改排版 → 上線檢查」三個階段。你可以點擊一鍵複製，把指令貼到 ChatGPT；如果不想逐欄替換，往下使用互動式產生器。
也可點進文字框，全選後自行複製；方括號請替換成自己的資料。
第一組用來產出初版。完成後請先看手機版：上方是否清楚顯示姓名、專業以及最重要的聯絡按鈕？不需要第一次就把所有細節做完。
也可點進文字框，全選後自行複製；方括號請替換成自己的資料。
第二組特別適合覺得 AI 產生的版型太像制式模板時使用。請把自己的品牌風格、目標客群與希望強調的服務補充進去。
也可點進文字框，全選後自行複製；方括號請替換成自己的資料。
五、加碼工具：填寫資料，自動產生完整提示詞
不想自己整理方括號、手動修改每一行？直接用下方 Workation Lab 免費提示詞產生器。填入姓名、品牌、聯絡資訊，選擇配色和語言，工具就會在你的瀏覽器內組合完整指令。可以分別複製建站、設計優化、上線 QA 三種版本。
這個工具不會代替你註冊帳號或自動對外發布網站，而是產生可直接貼給 ChatGPT 的完整指令。輸入的資料只用於瀏覽器當下的文字組合，不需要提交給 Workation Lab 伺服器；但當你把指令貼到 ChatGPT 時，請自行確認分享內容是否適合。
六、Step 3：加上真正實用的名片功能
1. 直接聯絡
建議把主要 CTA 設定為「LINE 聯絡」或「Email 合作邀約」，其他社群連結作為次要按鈕。避免只做出好看的社群圖示，實際卻沒有連到正確網址。
2. 一鍵下載 vCard
請 ChatGPT 生成符合 vCard 格式的 .vcf 聯絡資訊檔。手機或通訊錄軟體通常可匯入，但操作方式會依裝置不同而異。請下載一次，確認姓名、職稱與信箱沒有亂碼。
3. QR Code 名片分享
等網站取得可公開瀏覽的網址後，再製作 QR Code，放到簡報末頁、活動識別證、海報或紙本名片。記得掃碼測試，確認別人不需要用你的帳號登入就能瀏覽。
七、Step 4：發布網站與檢查搜尋分享設定
先確認網站預覽和隱私，再從分享設定選擇適合的存取對象；若要讓任何人瀏覽，需使用允許公開發布的權限，最後按下 Publish 並複製網站網址。若你的工作空間不提供公開分享，請勿誤以為拿到連結就代表所有人都能看見。
要求 ChatGPT 匯出可獨立執行的 index.html（如有圖片請一併整理資料夾），再使用 Netlify Drop 部署。部署後用不同裝置打開公開網址，重新檢查連結與手機版排版。
分享前的 SEO／OG 最低檢查
| 項目 | 用途與檢查重點 |
|---|---|
| SEO Title | 描述個人與服務，例如「王小明｜品牌行銷顧問」 |
| Meta Description | 簡短說明專長、服務與合作對象 |
| Open Graph | FB、LINE 分享時的標題、描述、圖片 |
| OG 分享圖 | 建議準備 1200×630 px 橫式圖，實際裁切會依平台而異 |
| 手機與無障礙 | 文字易讀、圖片替代文字、可點擊區域足夠大 |
八、常見問題 FAQ
Q1：完全不會寫程式，可以完成嗎？
可以。ChatGPT 能根據自然語言需求產出網站或 HTML。你仍要負責檢查資料、功能與發布權限。
Q2：一定要付費嗎？
不一定。是否能直接使用 ChatGPT Sites 取決於帳號方案與工作空間；也可以產出 HTML 再使用提供免費額度的託管服務。免費方案與額度依各平台現行政策為準。
Q3：一定要買網域嗎？
不用。先使用網站平台提供的公開網址，就可以分享；想要累積個人品牌，再考慮購買專屬網域。
Q4：網站做好後可以再修改嗎？
可以。ChatGPT Sites 可從對應網站專案繼續編修並發布新版；若是 HTML 網站，修改檔案後需要重新部署。
Q5：我沒有照片，可以製作嗎？
可以先用字體排版、品牌 Logo 或單色圖形做主視覺，等日後有合適的照片再更新。
結語｜AI 最重要的是把想法變成可以使用的作品
電子名片是一個很適合 AI 初學者練習的實務題目：資料不複雜，卻可以完整體驗需求整理、提示詞設計、網頁生成、手機測試與公開發布。
與其只是問 ChatGPT「可以幫我做什麼」，不如親手做出第一個可以分享的數位作品。**先從一張自己的名片開始**，未來也可以延伸成作品集、服務介紹、報名頁與個人品牌網站。
Workation Lab 工作生活研究室｜分享 AI 工具、數位行銷、內容創作與企業數位轉型的實務應用。
.jpg)
