先說結論：產出品質達到接案水準，但有兩條鐵律
frontend-design 是 Anthropic 官方出的 Skill，專門生成高品質的網頁設計稿。我用它做了兩個銷售頁設計稿：Dosha 慕絲旅行組促銷頁、占星課程痛點銷售頁：兩個都被我評為「接案水準」。但開始之前，先記住兩條鐵律，違反任何一條，產出的東西都不能用。
它是幹嘛的
你給它產品資訊、賣點、風格方向，它吐出一份完整的 HTML 設計稿：版式、配色、字體、段落節奏，一次到位。不是那種陽春的模板感，是真的有設計師味道的稿子。對我這種網頁設計師來說，它不是取代我，是把「從零排版」的時間省下來，我專心做策略和細修。
安裝：官方出品，一次到位
來源是 anthropics/skills Anthropic 官方的 skills 倉庫。用 find-skill 找到，全域安裝成功。官方出品的好處是文件齊全、更新有保障，十大裡最不用擔心跑路的一個。
鐵律一：數字要餵真的 Codex 不會自己查
這是血淚教訓：Codex 不會自己去查資料，你沒給的數字，它會自己編。價格、優惠、規格，全部要餵真實值，拿不到的就明確標「待補」。我做 Dosha 慕絲旅行組那稿，第一件事就是先跟自己確認：旅行組 NT$499 對，寫進去。占星課程那稿，價格我當時不知道，頁尾就老實寫「費用請見官方課程頁確認」 不編數字，是底線。
鐵律二：產品圖用真的——AI 瓶身不可靠
第二條鐵律跟我的 Dosha 慕絲短片 v1→v10 修煉有關（那是另一個故事）：AI 生成的產品瓶身，比例、標籤、水滴位置都會跑掉，客戶一眼就看出來。所以規矩是：產品特寫一定要用真實產品照，AI 圖只能做氛圍背景。設計稿裡的 AI 瓶身只是佔位，上線前必須換掉。
實戰一：Dosha 慕絲旅行組 NT$499 促銷頁
主視覺標語：「把清爽，裝進行李。」——旅行組的情境一句話講完。三個賣點、一段「less luggage. more moments.」的儀式感文案、最後是 NT$499 購買區。整稿的節奏是：情境→賣點→情感→行動，標準的銷售頁結構。
我存成 HTML 檔，待辦兩件事：用 Elementor 重刻上線、把 AI 瓶身換成真實產品照。設計稿是設計稿，上線是上線，這中間的兩步不能省。
實戰二：占星課程痛點銷售頁
篠安老師的「現代心靈占星學初階課程」，我做了痛點角度的銷售頁：四個痛點（感情劇本→金星火星、人生卡關→南北交點、拿回選擇權→演化占星、找自我→15 堂課），深藍＋金的配色，15 堂大綱＋報名 CTA。CTA 連到官方課程頁，價格未知所以沒放→ 再次強調，不編數字。
三種上線路線
設計稿是 HTML，要怎麼變成真正的網頁？三條路：
-
- Elementor 重刻（我推薦）：照著設計稿在 Elementor 裡重做，之後改文案、換圖都方便，適合長期經營的頁面；
- 獨立上傳：整份 HTML 丟到網站子目錄，最快，但之後維護麻煩；
- WP 自訂 HTML 區塊：貼進文章／頁面的 HTML 區塊，適合一次性活動頁。
有沒有坑
- 設計稿≠完稿：文案要自己潤、圖片要換真的、價格要填真的。它給你 80 分，剩下 20 分是你的專業。
- 中文排版要檢查：英文設計感很強，但中文斷行、標點有時要手調，交稿前自己看一遍。
- RWD 要驗：手機上看一遍，字會不會太大、按鈕會不會跑掉，設計稿階段就要看。
適合對象
- 要做銷售頁、活動頁的人：必裝，從零排版的時間直接省一半
- 網頁設計師：當作打稿助手，你專心做策略和細修
- 完全不碰網頁的人：可以跳過
Tina學姐評分 五顆星
兩份設計稿都達到接案水準。官方出品＋兩條鐵律守住，這是我會推薦給同行的 Skill。