網站建置 SOP

| 12 | 技術名洩漏到行銷頁 | 客戶看到「Home Assistant」「Zigbee」「Intel N100」會去比價。行銷頁用品牌化命名（AiHub C1），部落格保留 SEO 關鍵字。做完用 grep -rn "關鍵字" src/pages/ --include="*.astro" \| grep -v blog 檢查 | | 13 | 聯絡頁格式反覆重構 | 三卡格式有三種：橫排小卡、直排小卡、正方卡。直接參考模板的 travel blog contact.astro 格式，不要從零設計 | | 14 | 光暈風格不統一 | rounded-full（亮）vs rounded-md（淡）vs 有/無 dark:shadow。全站 badge 統一用 rounded-md + dark:shadow-[0_0_15px_rgba(255,255,255,0.1)] | | 15 | 建完之後補齊 hover + blur | 所有頁面建完後，檢查 3 件事：① 所有卡片有 hover 效果嗎？② 所有區塊有 blur 背景嗎？③ 所有 badge 格式統一嗎？ | | 16 | global.css !important 全域 transition | 不要用 *, *::before, *::after { transition-duration: Xms !important; } — 會讓所有 HTML 的 duration-[1200ms] class 失效，除錯極難 | | 17 | 暗色模式連結不明顯 | 瀏覽器預設藍色連結在暗色背景下難以辨識（深藍字 + 深灰底 = 看不到）。改用 site accent color：<a class="text-[主色] dark:text-[輔色] hover:underline">。兩站都碰到過，客戶說「連結點了沒反應」因為看不到 | | 18 | 暗色模式 <hr> 分隔線刺眼 | 預設 <hr> 在暗色模式下是白色 / 淺灰色，極度刺眼。統一加 dark:border-gray-700。ming-website 踩坑後統一修正 |

C.6 全站 transition 統一規範（重要！）

問題： 在兩個真實專案（ming-travel-blog、ming-website）中，都發生了部分卡片使用 duration-300（0.3秒快速突兀）、部分使用 duration-[1200ms]（1.2秒慢速自然），造成 hover 效果不一致、視覺上的微妙跳動感。

標準規範：

修正方式（兩個專案經驗）：

# 步驟 1：全站 duration-300 → duration-[1200ms]
for f in $(grep -rl "duration-300" src/pages/); do
  sed -i '' 's/duration-300/duration-[1200ms]/g' "$f"
done

# 步驟 2：裸 transition-all → 補上 1200ms
for f in $(find src/pages src/layouts src/components -name "*.astro"); do
  sed -i '' 's/transition-all\([^ ]\)/transition-all duration-[1200ms]\1/g' "$f"
done

# 步驟 3：檢查雙重
grep -c "duration-\[1200ms\] duration-\[1200ms\]" src/pages/*.astro

# 步驟 4：確認零 300ms
grep -c "duration-300" src/pages/**/*.astro

為什麼 1200ms： 首頁卡片（如「本地端中樞」「深度自動化」）從專案初期就使用 1200ms，這是視覺基準。後續新增的區塊若使用其他時間，hover 時會顯得「跳太快」。統一後，全站所有互動回饋節奏一致，體驗感提升明顯。

新專案注意： 每次 OpenCode 新增卡片區塊時，可能預設用 duration-300。完成所有頁面後，務必執行上述 4 步驟，確保全站一致。同時跑段落 D 的完整審計腳本（見 [[#pre-work-spec|§0.5 前置作業規範 → 段落 D]]）檢查 shadow 公式、!important、技術名等。

[[#table-of-contents|← 回目錄]]

附錄 D：客戶工具包

D.1 客戶類型 × 網站場景對照

D.2 客戶需求面談問卷

第一次見面給客戶填（Google 表單或紙本），15 分鐘填完：

1. 網站的主要用途是什麼？
   ☐ 增加曝光（讓人在 Google 找到我）
   ☐ 展示作品 / 服務項目
   ☐ 建立專業形象（名片式網站）
   ☐ 賣東西（電商，需串接第三方）

2. 您的目標客群一句話描述？
   （例：「25-40 歲、喜歡自助旅行的上班族」）

3. 希望訪客看完網站後採取什麼行動？
   ☐ 填聯絡表單   ☐ 打電話   ☐ 加 LINE   ☐ 直接購買   ☐ 預約諮詢

4. 上線後誰會更新內容？
   ☐ 我自己   ☐ 公司小編   ☐ 沒人會更新（建立後就不動）

5. 如果自己更新，頻率大約是？
   ☐ 每週 1-2 篇   ☐ 每月 1-2 篇   ☐ 偶爾更新   ☐ 幾乎不更新

6. 提供 3 個你覺得「好看」的網站（同業或非同業皆可）：
   ① __________________
   ② __________________
   ③ __________________

7. 提供 1-2 個你覺得「不好看」的網站，簡述原因：
   ______________________________

D.3 報價結構參考

以下為台灣個人接案 / 小型工作室市場行情（2026 年參考）：

一次性建置費

月維護方案

收費結構建議

客戶特別要求加價參考

D.4 合約關鍵條款

以下為建議，正式合約請諮詢律師。

A. 交付範圍

• 明確列出：頁面數量、collection 數量、功能細項
• 明確排除：內容填寫、照片拍攝、SEO 排名保證、新功能開發

B. 付款條件

• 簽約後 3 日內付簽約金 40%
• 網站上線後 3 日內付尾款 60%
• 逾期：每逾一日加收總價 0.1% 滯納金（最高 20%）

C. 保固範圍（30 天）

• 包含：部署異常、後台無法登入、頁面顯示錯誤
• 不包含：新功能開發、風格變更、內容更新、SEO 排名、第三方服務故障

D. 智慧財產權

• 網站程式碼：歸開發者所有，客戶取得永久使用授權
• 客戶提供的內容（文字、照片、商標）：歸客戶所有
• 開放原始碼元件（Astro、Tailwind、Sveltia CMS）：依各別授權條款

E. 終止條件

• 任一方未履行義務，書面通知 14 日未改善，可終止合約
• 終止時已完成工作按比例計價、未完成部分不另收費

D.5 客戶常問 FAQ（17 題）