企業網站基礎結構生成：TypeScript＋Tailwind

用途

用結構化規格向 AI 生成一個響應式企業形象網站的單一 HTML 檔案，輸出 TypeScript JSDoc 標注、Tailwind CDN 樣式的乾淨程式碼，可以直接在瀏覽器開啟展示。

何時用

適合：要快速給客戶或主管看企業形象網站的雛形、或需要一個可維護的起點讓工程師繼續開發時。
不要用：已有網站結構只需要追加 SEO 設定——那時用「網站 SEO Meta 與 Schema.org 追加」；需要後端 CMS 或動態資料的生產級網站，單一 HTML 做不到。

Prompt

text

你是一位全端工程師，請依照以下規格生成企業形象網站。

公司資訊（YAML 格式，請直接填入）：
```yaml
company:
  name: "{{公司名稱}}"
  tagline: "{{一句話價值主張}}"
  services:
    - "{{服務1}}"
    - "{{服務2}}"
    - "{{服務3}}"
  about: "{{公司簡介，2-3句}}"
  contact:
    email: "{{聯絡信箱}}"
    phone: "{{電話}}"
    address: "{{地址}}"
design:
  primary_color: "{{主色，Hex 值，例：#1a56db}}"
  font: "{{字體風格，例：現代簡潔}}"

技術規格：

TypeScript JSDoc 標注（不是 .ts 檔，而是在 HTML 內的 script 標籤用 JSDoc）
Tailwind CSS via CDN
完全響應式（手機優先）
語義化 HTML（header / main / section / footer）

頁面結構（依序）：

導航列（公司名稱 + 頁面錨點連結，手機版漢堡選單）
Hero 區塊（大標語 + 副標 + CTA 按鈕）
服務 Grid（3 欄卡片，手機變 1 欄）
關於我們（圖左文右，手機改上下）
聯絡區塊（地圖 embed + 聯絡資訊）
頁尾（版權）

輸出：完整單一 HTML 檔案，程式碼加繁中關鍵註解。


## 範例 / 變體
- **填好變數**：公司名稱填 `雲端方程式數位科技`、標語填 `讓中小企業用得起 AI 自動化`、服務填 `n8n 工作流顧問/AI 導入培訓/Claude Code 工作坊`、主色填 `#2563eb`。
- **變體（加多語言切換）**：在頁面結構末尾加「導航右上角加繁中/English 切換，English 版文字另外提供」，適合有國際客戶的公司。
- **變體（簡報風格 landing page）**：把「關於我們」改成「客戶見證（3 則 quote 卡片）」、把聯絡區塊改成「CTA 倒數計時 + 填表單」，轉換為活動報名或課程銷售頁。

## 🎯 範例輸出（實測）

> 在 **Claude.ai** 跑這句、公司填「雲端方程式數位科技」、標語填「讓中小企業用得起 AI 自動化」、服務填「n8n 工作流顧問/AI 導入培訓/Claude Code 工作坊」、主色填「#2563eb」的結果：

::: details 點開看 AI 實際輸出
Claude 輸出完整單一 HTML 檔案，以下為關鍵段落示意：

**導航列（漢堡選單）：**
```text
<header class="bg-white shadow-sm sticky top-0 z-50">
  <nav class="max-w-5xl mx-auto px-4 flex items-center justify-between h-16">
    <span class="font-bold text-xl text-blue-600">雲端方程式</span>
    <!-- 桌面版連結 -->
    <ul class="hidden md:flex gap-6 text-sm text-gray-600">
      <li><a href="#services">服務</a></li>
      <li><a href="#about">關於我們</a></li>
      <li><a href="#contact">聯絡</a></li>
    </ul>
    <!-- 手機版漢堡 -->
    <button id="menu-toggle" class="md:hidden">☰</button>
  </nav>
</header>

Hero 區塊：

text

<section class="bg-gradient-to-br from-blue-600 to-blue-800 text-white py-24 px-4 text-center">
  <h1 class="text-4xl md:text-5xl font-bold mb-4">讓中小企業用得起 AI 自動化</h1>
  <p class="text-xl text-blue-100 mb-8">我們幫你把 n8n 和 Claude Code 變成真正跑起來的生產工具</p>
  <a href="#contact" class="bg-white text-blue-700 font-semibold px-8 py-3 rounded-full hover:bg-blue-50">
    預約免費諮詢
  </a>
</section>

服務 Grid（3欄，手機1欄）：

text

<section id="services" class="max-w-5xl mx-auto py-16 px-4">
  <h2 class="text-2xl font-bold text-center mb-10">我們的服務</h2>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <!-- 服務卡片 × 3，各含圖示、標題、描述 -->
  </div>
</section>

TypeScript JSDoc 標注範例（在 script 標籤內）：

text

/**
 * 切換手機導覽選單
 * @param {HTMLElement} menu - 選單元素
 * @returns {void}
 */
function toggleMenu(menu) { ... }

:::

💡 實測心得：YAML 格式的公司資訊填寫讓 AI 不會在「公司名稱要放哪」上做猜測，直接嵌入每個區塊。唯一要注意的是 Tailwind CDN 版本——Claude 有時會用 Tailwind v3 的 CDN 語法，而實際上 Tailwind CDN 現在是 Play CDN，功能有限，展示用沒問題但生產環境要另外設定。

延伸

網站生成完成之後，下一步通常是追加 SEO 設定，讓 Google 和 AI 搜尋都能正確索引。可以直接用「網站 SEO Meta 與 Schema.org 追加」——輸入和這道 prompt 的 YAML 格式相容，不用重新描述公司資訊。

企業網站基礎結構生成：TypeScript＋Tailwind ​

用途 ​

何時用 ​

Prompt ​

延伸 ​

企業網站基礎結構生成：TypeScript＋Tailwind

用途

何時用

Prompt

延伸