不用寫程式！教你用 ChatGPT 5 分鐘做出專屬電子名片網頁

在商務世界裡，名片一直是拓展人脈的基本工具。隨著數位化浪潮，傳統紙本名片逐漸被電子名片取代，因為它更方便傳遞、更容易保存，也能結合品牌形象。
但一提到「製作電子名片」，很多人腦中浮現的第一反應就是麻煩，甚至覺得一定要找設計師或工程師。

其實並不需要這麼複雜……如果你只是想先快速擁有一張電子名片，AI 工具就能幫上忙。

而這篇文章，我不只會告訴你 ChatGPT 怎麼生成電子名片，
還會把整個操作流程與注意事項完整整理好，
等於是把「整包教學」直接送給你！！

內容目錄

用 ChatGPT 製作電子名片：零基礎也能上手

現在最熱門的 AI 工具之一，ChatGPT，不只可以幫你寫文案、回答問題，還能協助製作電子名片。只要透過提示（Prompt）清楚告訴它「你的姓名、職稱、公司名稱、聯絡方式、品牌色調」，它就能幫你輸出一份 HTML 或簡單設計的電子名片樣式。
這代表，即使你沒有程式基礎，也能在幾分鐘內生成一個可用的版本。

ChatGPT 電子名片製作步驟教學

如果你也想自己動手試試，可以照以下流程：

步驟 1：開啟 ChatGPT
先登入 ChatGPT，準備好一個新的對話視窗。

步驟 2：輸入基本資訊
在提示詞（Prompt）裡輸入你的名片資訊，例如：姓名、職稱、公司名稱、電話、Email、品牌顏色。

你是一位專業網頁設計師，請幫我設計一張一頁式的個人電子名片網頁，風格以「黑金配色、高級質感、專業形象」為核心，請使用 HTML 與 CSS（可內嵌）。整體風格簡潔俐落、有高級品牌氛圍。內容請包含以下區塊：

1. 📌 基本資訊區塊：
- 姓名
- 職稱
- 公司名稱（搭配公司 Logo 圖片）
- 聯絡資訊：電話、Email、個人網站網址

2. 📸 品牌強化區塊：
- 個人專業頭像
- 公司 Logo 放置於視覺重要區位（例如 header 或背景浮水印）

3. ✨ 互動引導區塊（CTA）：
- 一鍵加入 LINE（可使用假連結）
- 查看作品集（連結外部網址）
- 導向社群（FB、IG、LinkedIn）

4. 💡 加值資訊區塊：
- 顯示 QR Code 圖片（可使用 `<img>` 模擬）
- Google 評論截圖佔位圖
- 連結部落格 / 專案案例頁

5. 🎨 設計風格要求：
- 主色：#000000（黑）、輔色：#D4AF37（金色）
- 背景使用深色系（例如漸層黑、霧面深灰），搭配金色文字或邊框線條
- 字體請使用「Noto Sans TC」或類似高辨識度無襯線字體
- 按鈕請設計有金框、hover 效果
- 留白適度，整體需呈現簡約、高級、有品牌感
- 採 RWD 響應式設計，適合手機與桌面裝置

請產出完整 HTML 與內嵌 CSS。

步驟 3：複製 AI 給的程式碼

ChatGPT 會輸出一份 HTML/CSS 程式碼，把它完整複製起來。

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>黑金質感個人電子名片</title>
  <style>
    :root {
      --black: #000000;
      --gold: #D4AF37;
      --bg-dark: #111111;
      --text-light: #F5F5F5;
      --font: 'Noto Sans TC', sans-serif;
    }

    body {
      margin: 0;
      padding: 0;
      font-family: var(--font);
      background: linear-gradient(135deg, var(--black), #1a1a1a);
      color: var(--text-light);
    }

    .container {
      max-width: 880px;
      margin: 0 auto;
      padding: 48px 24px;
    }

    h1, h2, h3, p {
      margin: 0 0 16px;
    }

    a {
      color: var(--gold);
      text-decoration: none;
    }

    /* ==== HEADER 品牌強化區塊 ==== */
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      padding-bottom: 32px;
      border-bottom: 1px solid var(--gold);
    }

    .logo {
      height: 48px;
    }

    .avatar {
      width: 120px;
      height: 120px;
      object-fit: cover;
      border-radius: 50%;
      border: 2px solid var(--gold);
    }

    /* ==== 基本資訊區塊 ==== */
    .basic-info {
      margin-top: 32px;
    }

    .basic-info h1 {
      font-size: 32px;
      color: var(--gold);
    }

    .basic-info h2 {
      font-size: 20px;
      color: #bbbbbb;
    }

    .contact p {
      margin: 4px 0;
    }

    /* ==== CTA 區塊 ==== */
    .cta {
      margin-top: 40px;
    }

    .cta a {
      display: inline-block;
      border: 2px solid var(--gold);
      color: var(--gold);
      padding: 12px 24px;
      margin: 8px 12px 8px 0;
      border-radius: 999px;
      font-weight: bold;
      transition: background 0.3s ease, color 0.3s ease;
    }

    .cta a:hover {
      background-color: var(--gold);
      color: var(--black);
    }

    .social {
      margin-top: 16px;
    }

    .social a {
      margin-right: 16px;
    }

    /* ==== 加值資訊區塊 ==== */
    .extras {
      display: flex;
      flex-wrap: wrap;
      gap: 32px;
      margin-top: 48px;
    }

    .extras .block {
      flex: 1 1 260px;
    }

    .extras img {
      width: 100%;
      height: auto;
      border-radius: 16px;
      border: 1px solid #333;
    }

    /* ==== RWD 響應式 ==== */
    @media (max-width: 600px) {
      header {
        flex-direction: column;
        align-items: flex-start;
      }

      .cta a {
        display: block;
        margin-bottom: 12px;
      }

      .social {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
      }
    }
  </style>
</head>
<body>

  <div class="container">

    <!-- 📸 品牌強化區塊 -->
    <header>
      <img src="https://via.placeholder.com/140x48.png?text=公司Logo" alt="公司 Logo" class="logo" />
      <img src="https://via.placeholder.com/120.png?text=頭像" alt="個人頭像" class="avatar" />
    </header>

    <!-- 📌 基本資訊區塊 -->
    <section class="basic-info">
      <h1>林小明</h1>
      <h2>品牌網站設計師</h2>
      <p>小林設計顧問有限公司</p>
      <div class="contact">
        <p>📞 0912-345-678</p>
        <p>📧 <a href="mailto:hello@example.com">hello@example.com</a></p>
        <p>🌐 <a href="https://example.com" target="_blank">https://example.com</a></p>
      </div>
    </section>

    <!-- ✨ CTA 區塊 -->
    <section class="cta">
      <a href="#">➕ 一鍵加入 LINE</a>
      <a href="https://example.com/portfolio" target="_blank">🎨 查看作品集</a>
      <div class="social">
        <a href="#" target="_blank">Facebook</a>
        <a href="#" target="_blank">Instagram</a>
        <a href="#" target="_blank">LinkedIn</a>
      </div>
    </section>

    <!-- 💡 加值資訊區塊 -->
    <section class="extras">
      <div class="block">
        <h3>📱 名片 QR Code</h3>
        <img src="https://via.placeholder.com/200.png?text=QR+Code" alt="QR Code" />
      </div>
      <div class="block">
        <h3>📷 Google 評論截圖</h3>
        <img src="https://via.placeholder.com/300x180.png?text=Google+Review" alt="Google 評論截圖" />
      </div>
      <div class="block">
        <h3>🔗 部落格 / 專案頁</h3>
        <a href="https://example.com/blog" target="_blank">https://example.com/blog</a>
      </div>
    </section>

  </div>

</body>
</html>

步驟 4：建立檔案並預覽
在電腦上開啟記事本或 VS Code，貼上程式碼，存檔為 index.html，再用瀏覽器開啟，就能看到電子名片效果。

步驟 5：進階調整
如果想要調整字型、顏色或排版，可以直接修改程式碼中的 CSS。
這裡 ChatGPT 也能再幫你做修改，只要輸入「把字型改成微軟正黑體」或「按鈕顏色改成 #80C1B0」即可。