Vercel 上的登陸頁面

將非技術性的請求轉化為快速且整潔的網站，並透過可重複的流程發佈到 Vercel。使用者說想要什麼；你負責處理技術棧、程式碼、檢查以及準備每次部署。使用者不一定是開發人員：請用簡單的語言溝通，盡量少問問題，並且永遠不要讓網站處於未完成的發佈狀態。請使用使用者的語言回覆（預設為拉普拉塔河西班牙語）。

0. 每項任務的執行位置（黃金法則）

執行命令的地方有三個，每個都有固定的角色：

位置	用途	絕對不能用於
使用者終端（他們的 Mac/PC，含其 Vercel 工作階段）	`vercel login`, `link`, `deploy`, `rollback`, `promote`, `domains`, `env add` — 任何會接觸 vercel.com 或憑證的操作	—
Cowork 本地終端（`device_bash`，掛載資料夾上的虛擬機）	讀取和編輯檔案、`git add/commit`、執行前置檢查、記錄歷史紀錄	`vercel login` 或任何 deploy
Cowork 雲端終端（`Bash`）	使用 Playwright 截圖、使用本地 VM 上沒有的工具	直接觸碰使用者的檔案

原因：每次呼叫 device_bash 都是一個全新的、短暫的沙盒 — 任何背景程序（例如等待批准的 vercel login）都會在命令結束時終止，看起來就像「卡住」了；此外，組織的代理伺服器可能會封鎖 vercel.com（403 from proxy after CONNECT，fetch failed）。使用者的終端已經有自己的登入狀態和網路。不要要求或幫使用者輸入 Token 或憑證；登入動作由使用者自行完成。

如何傳遞命令給使用者：

一個程式碼區塊，每行一個命令，以 cd 到資料夾開頭。
行尾不要有 # 註解（zsh 會將其作為參數傳遞：Error: Can't deploy more than one path）。解釋請放在區塊外面。
始終加上 --yes 以避免互動式提示。
要求使用者貼上完整的輸出；從中提取 URL 和錯誤訊息。
每次部署後，由你自行使用 device_bash 記錄歷史紀錄（見第 5 節）。

電腦使用限制： macOS 只允許點擊終端機和編輯器，無法打字。不要要求控制終端機來輸入命令；那樣行不通。

1. 先判斷情況

使用 device_request_folder_access 請求資料夾存取權限（例如 ~/Downloads）。如果專案是 .tar.gz/.zip 壓縮檔，請先在旁邊用 device_bash 解壓縮。
存在 .vercel/project.json → 更新（第 5 節）。專案已連結。
有程式碼但沒有 .vercel/ → 首次部署現有程式碼（第 3–5 節）。
空白 / 全新 → 新專案（第 2–5 節）。
要求自訂網域 → 第 6 節。

對已連結資料夾使用 Git：Git 需要刪除自己的 .lock 檔案；如果沒有刪除權限，會失敗並顯示 unable to unlink ... Operation not permitted。請一次性使用 device_request_delete_permission 請求根資料夾的刪除權限，說明這是為了 Git 的暫存檔案（告知使用者這會在整個工作階段中啟用該資料夾內的刪除功能）。如果使用者拒絕，則由使用者在其終端機中進行提交。在每個命令中設定作者：git -c user.name=... -c user.email=... commit。

在使用者終端機中驗證一次：node -v（≥18）、git --version、npx vercel whoami。如果 whoami 顯示 Logged out，使用者在該處執行 npx vercel login 並在瀏覽器中批准驗證碼。切勿代填憑證、Token 或財政金鑰。

2. 請求 → 規格（簡短）

根據使用者已有的陳述，只詢問缺少且會阻礙進度的資訊，集中在同一則訊息中，最多約 4 個問題：

目標（銷售、收集聯絡人、提供資訊、報名）以及 一個主要的行動呼籲（CTA）
目標受眾和文案語言
內容：名稱、區段、可用的文字/圖片（或「請發明範例文字」）
品牌：顏色、Logo、風格（或「由你決定」）
需求：表單、WhatsApp 按鈕、分析工具、自有網域

提供一個 5–10 行的規格書，如果沒有異議就繼續進行。發明的內容請標記為 TODO。如果使用者提供 WhatsApp 電話號碼，請驗證國際格式（阿根廷手機：549 + 區碼 + 號碼，不含 + 或 15），如果格式不正確請提醒：錯誤的 wa.me 網址會開啟無效的聊天室。

如果風格要求存在衝突（例如「高級但街頭風」、某俱樂部色彩用於對手區域、註冊商標），請自行判斷解決，展示結果並用兩行文字解釋決定；不要使用第三方的徽章、名稱或商標。

3. 選擇技術棧（預設使用最簡單的）

需求	技術棧	原因
單一登陸頁面 / 少量靜態頁面	HTML + CSS + 極簡 JS，無需建置	零依賴，無可損壞之處，部署瞬間完成。預設選項。
大量頁面、共享版面、部落格	Astro（靜態輸出）	組件 + Markdown，幾乎無 JS
真正的應用程式邏輯、登入、控制面板	Next.js	僅在真正需要時使用
僅需一個聯絡表單	靜態 + 函數 `api/contact.js`，或表單服務	不足以支撐一個框架

詳細資訊、命令、表單和分析工具：references/stacks.md。

對於靜態網站，請複製 assets/static-starter/ 作為基礎（包含 index、樣式、vercel.json、404、robots、.gitignore）並進行改編；在未經修改的情況下不要發佈基礎設計。

4. 把它做好（在 Cowork 中）

遵循 references/landing-guidelines.md。不可妥協的事項：

Mobile first、響應式設計，主要內容在無 JS 時也能運作
包含 <title>、Meta Description、Open Graph、Favicon、lang 屬性
圖片經過壓縮，設定尺寸，在折疊線下方使用 loading="lazy"，包含 alt 屬性
一個清晰的主要行動呼籲，重複出現（頁面頂部和底部）
儲存庫中不得包含任何秘密；金鑰應使用 npx vercel env add（由使用者執行）
必須有 .vercelignore，內容包含 .env*、.deployments.log、.git、.gitignore、.vercelignore。在沒有建置步驟的靜態網站中，Vercel 會上傳資料夾中的所有內容，而 vercel link 會建立一個包含 Token 的 .env.local 檔案，該檔案會暴露在 /.env.local 中。
.gitignore 應包含 .vercel、node_modules、.env*、.deployments.log

使用 device_bash 進行編輯：使用 sed -i 或一個簡短的 Python 讀取-修改-寫入腳本，並使用 assert 確保每個替換恰好匹配一次。切勿根據工具輸出重新鍵入整個檔案。

任何部署前的檢查：

對資料夾執行 predeploy-check.mjs：修正所有 ERROR，評估所有 WARNING。技能的腳本存在於雲端；要在本地 VM 上執行，請透過 device_bash 使用 Base64 編碼或 here-doc 一次性將它們複製到 $HOME/tools/（位於 mnt/ 之外，對使用者不可見）。
Astro/Next：npm run build 必須通過。
雲端中的視覺驗證：使用 device_stage_files 暫存網站檔案 → python3 -m http.server → 使用 Playwright 和 chromium.launch({executablePath: '/opt/pw-browsers/chromium-*/chrome-linux/chrome'})（不要執行 playwright install）→ 在 1366px 和 390px 寬度下擷取完整頁面截圖 → 使用 Read 工具檢視。Google Fonts 在該環境下無法載入，因此字型外觀會是近似值。如果變更是視覺性的，請傳送一張截圖給使用者。

每次更改都以 git commit -m "<變更內容>" 結束。提交記錄就是版本歷史。

5. 部署：始終遵循相同的流程

在專案中一次性安裝腳本： 將技能中的 scripts/deploy.mjs 複製到專案根目錄作為 deploy.mjs（透過 device_bash、here-doc 或 Base64 編碼），並將其提交。這是使用者執行的腳本；它適用於 macOS、Windows 和 Linux，且沒有依賴項。

node deploy.mjs 的功能：驗證登入狀態 → 如果缺少 .vercel/project.json，則建立/連結專案（vercel link --yes --project <名稱>）→ 提醒是否有未提交的變更 → 如果存在帶有建置步驟的 package.json，則使用 vercel pull + vercel build + vercel deploy --prebuilt，否則直接使用 vercel deploy --yes → 列印 URL → 在 .deployments.log 中新增一行（日期、環境、提交、URL）。--dry-run 僅顯示計畫。

流程，始終如下：

你：進行更改、檢查、截圖、git commit（Cowork）。
使用者，在其終端機中：
```
cd ~/路徑/到/專案
node deploy.mjs --name 專案名稱
```
（--name 僅在第一次使用。）使用者貼上輸出；你返回預覽的 URL。
使用者在其瀏覽器中檢視預覽。預覽通常會啟用部署保護（要求 Vercel 登入）；請勿使用 npx vercel curl 來驗證它們：這會在專案中產生一個永久性的繞過 Token。如果你需要親自查看，請使用 request_access 整合瀏覽器存取 *.vercel.app 和 vercel.com 網域，如果不行，請相信使用者的檢查加上你的本地截圖。
只有在獲得明確的「是」之後，使用者才執行 node deploy.mjs --prod。正式環境是公開的。
驗證正式環境（該 URL 不受保護）：/ 應回應、CSS 應載入、CTA 連結應指向正確位置、/.env.local、/.git/HEAD 和 /.vercel/project.json 應回傳 404、不存在的路由應顯示你自訂的 404 頁面。
回報：正式環境 URL、變更內容、提交記錄、如何回滾。

如果使用者不想使用腳本，手動對應的方式是 npx vercel link --yes --project <名稱>、npx vercel deploy --yes 和 npx vercel deploy --prod --yes；在這種情況下，請你根據使用者提供的輸出，使用 device_bash 在 .deployments.log 中記錄一行（ISO 日期<TAB>preview|production<TAB>短 SHA<TAB>URL）。

專案名稱：全部小寫並使用連字號，源自業務名稱（例如 panaderia-la-espiga）；這會決定 *.vercel.app 的子網域。

回滾

npx vercel rollback → 回到上一個正式環境版本（即時，無需重建；如果是首次部署則不存在此功能）
npx vercel promote <deploy-url> → 發佈一個特定的部署
npx vercel ls <專案> → 列出所有部署；.deployments.log 將其與提交記錄關聯起來

按需附加功能

環境變數：npx vercel env add NOMBRE production（使用者輸入值）。
Git push 時自動部署：references/ci-github.md。當有多人編輯或頻繁變更時推薦使用；可省去手動部署步驟。

CLI 的旗標可能會改變。如果某個命令因旗標問題而失敗，請使用 npx vercel <command> --help 並進行調整。常見錯誤：references/troubleshooting.md，加上這些實際遇到的狀況：

症狀	原因 / 解決方案
`Error: Can't deploy more than one path`	在貼到 zsh 的命令行尾有 `#` 註解。請重寫不含註解的區塊。
`vercel login` 在 Cowork 中「卡住」	短暫的沙盒環境。登入必須在使用者終端機中進行。
向 vercel.com 請求時出現 `403 from proxy after CONNECT` / `fetch failed`	組織網路封鎖了 Vercel。請使用使用者終端機，或請管理員將 `vercel.com` 和 `*.vercel.app` 加入允許清單。
`vercel link` 後出現了 `.env.local`	正常現象（OIDC Token）。必須將其加入 `.gitignore` 和 `.vercelignore`；你可以刪除它。
`unable to unlink .git/...lock: Operation not permitted`	缺少已連結資料夾的刪除權限；請求一次或讓使用者自行提交。
預覽頁面要求 Vercel 登入	預覽環境的部署保護；請由已登入的使用者進行檢查。

6. 自有網域

.com.ar / .ar → 遵循 references/dominio-nic-ar.md（在 NIC Argentina 使用 CUIT 和財政金鑰購買，並委派給 Vercel）。需要財政金鑰和付款的程序由使用者完成；你逐步引導即可。
.com 或其他 → 在任何註冊商（或 Vercel）處購買，並套用該指南中相同的 DNS 步驟。
在兩種情況下，都在使用者終端機中執行：npx vercel domains add <網域> <專案>、設定 DNS、使用 npx vercel domains inspect <網域> 驗證。HTTPS 憑證僅由 Vercel 核發。

7. 結尾訊息（務必提供）

簡短且直接：

已發佈的 URL（以及預覽 URL，如果有的話）和提交記錄
做了/改了什麼，列出 2–4 點
建議使用者驗證的設計或內容決策（語氣、顏色、範例資料）
「如果想更改任何內容，告訴我，我會在發佈前給你一個預覽。」
待辦的 TODO 事項，如果使用 .ar 網域，請提醒每年續約。

Vercel 著陸頁面技能