對於 AI、網頁設計、SEO 工作來說，Cowork 適合操作檔案，Projects 適合長期任務與內容規劃，Skills 可重複執行固定流程，Claude Code 能協助網站開發與自動化，Claude Design 則可以直接用對話產出設計稿與原型。
搭配清楚指令與資料整理，才能讓 AI 真正變成網頁設計與 SEO 工作的實用助手。
大多數人用 Claude 的方式只有一種：打開網頁，打字，等回答。
Claude 現在有五個完全不同的操作路徑，每一個解決的問題不一樣。
只用對話框，等於你買了一台車，但只用來放行李。
一、Claude Cowork
它操作你的檔案，不只聊天
Cowork 在 Claude 桌面版 App 裡（claude.com/download），
可以讀取你的檔案、瀏覽網頁、點擊頁面、把輸出成果存回資料夾，
瀏覽器版和手機版不支援。
資料夾結構（設定一次，之後自動執行）
母資料夾/
├── ABOUT ME/
about-me.md 你是誰、你怎麼工作
my-company.md 目標、受眾、做什麼不做什麼
anti-slop-style.md 絕對不能用的詞彙與語氣
├── OUTPUTS/
└── TEMPLATES/
到 Settings → Cowork → Global Instructions，
告訴 Claude 每次工作開始前先讀 ABOUT ME 裡的每個檔案。
萬用提示詞
Read my folder. Ask me questions before you start.
If anything is unclear, do not guess.
注意事項：
- 每 20 則訊息重新開始一次
- ABOUT ME 的檔案保持越小越好，大型檔案在正式開始前就會吃掉 token 預算
- 困難任務用 Opus，快速簡單任務用 Sonnet
二、Claude Projects
不用每次從頭說明背景
Projects 讓每次對話一開始就自動載入你的檔案、指令與範例，不需要每次重新說明背景。
免費帳號最多 5 個；付費方案無上限，支援 RAG 模式，知識庫容量可自動擴充至 10 倍。
使用前先測試：在 Project 裡開新對話，
讓 Claude 產出一份範例，不給額外背景。
語氣不對或格式有問題，先修正 Instructions，再讓團隊開始使用。
三、Claude Skills
重複任務的執行配方
Skill 是一個 SKILL.md 檔案，裡面定義三件事：
Role
Claude 在這項任務中扮演的角色
Rules
要做什麼、避免什麼、怎麼格式化
Trigger
讓 Claude 啟用這個 Skill 的詞彙
Claude Code 用戶
放在 ~/.claude/skills/（個人）或 .claude/skills/（專案）。Claude 啟動時自動掃描。
claude.ai 用戶
Settings → Features 上傳 zip 檔。需要 Pro/Max/Team/Enterprise 並開啟 Code Execution。
30 分鐘建立第一個 Skill
選一個你一直重複交代給 Claude 的任務 → 說 build a skill for this task → 回答問題，
越具體越好 → 測試，漏掉的補回去。
四、Claude Code
適合開發者使用
Claude Code 可以讀取整個程式碼庫、編輯檔案、執行測試、發布成果。
1. Claude Code 有兩個入口：
終端機（CLI） ：
原本的使用方式，輸入 npm install -g @anthropic-ai/claude-code 安裝後，在任何專案資料夾輸入 claude 啟動
2. 桌面版 App（Code 分頁） ：
Claude Desktop 裡的 Code 分頁，直接在 App 介面裡操作，有整合終端機，可以在同一個視窗內建立、執行、測試專案 Pasquale Pillitteri 桌面版還有多 session 並排、側邊欄管理、拖曳排版等功能，對非純 CLI 的用戶來說更直覺。
安裝
npm install -g @anthropic-ai/claude-code安裝後進入專案資料夾，輸入 claude 啟動，執行 /init 建立 CLAUDE.md——這是 Claude 對這個專案的記憶。
裡面放：怎麼執行專案、要避免什麼、程式碼風格。
保持在 200 行以下。
不要這樣說
build my app
要說清楚
問題是什麼、不是什麼、哪些檔案相關、怎麼測試、哪些東西不能動
Token 管理
/compact 當前脈絡太長時執行，壓縮整理/clear 切換任務或流程結束時，完整清空
五、Claude Design
Claude Design 能產出什麼？
- UI 原型與 App 畫面草稿
- 簡報與投影片視覺稿
- 行銷單頁文件（one-pager）
- 品牌素材與活動視覺
- 產品 mockup
Claude Design 怎麼用？
- 在 claude.ai 左側導覽列點調色盤圖示，進入 Design 畫布
- 用文字描述你要什麼，Claude 產出第一版
- 透過對話、inline 留言、調整滑桿修改細節
- 設計完成後打包成 handoff bundle，直接交給 Claude Code 產出程式碼
Claude Design 適合誰用？
- 創辦人：把粗略想法快速變成可展示的簡報或原型
- 產品經理：在設計評審前先產出 wireframe，壓縮來回時間
- 行銷人員：自己做素材，不卡在等設計的流程裡
- 設計師：短時間探索多個方向，再把選定的搬進 Figma 精修
1. 檔案太大：
claude design 所產生的 index.html 檔案非常大，我們實測一個頁面大小約是 11MB 左右，這不是正常手刻網頁的大小。
而是包在類似： __bundler/template 這種打包結構裡。
2. 搜尋與修改很容易失真：
因為內容幾乎都在同一行或巨大字串裡，搜尋「產品系列」「banner」會吐出超長內容，行號也不太有參考價值。
容易出現 bundle error 如果在打包字串裡少一個反斜線、引號沒跳脫、標籤沒有閉合，就可能整頁壞掉。
3. 圖片與資源管理不直覺：
有些資源可能是 UUID、base64、或被打包器改名，
不像正常網站會清楚寫：
所以上傳主機時，要特別確認圖片路徑是不是相對路徑，不能留 。
4. 多頁共用區塊不好維護
5. 什麼是網頁「打包檔」?
就是它比較像「輸出成品」而不是「原始設計檔」。
它可以看、可以改，但不是最舒服的維護格式，比如說：
(1) 修改難度：改文字、連結、色碼：中等，能做，但要小心。
(2) 改 banner、產品卡、CTA：中等偏高，因為要在 bundled template 裡找正確位置。
(3) 大幅改版面、重構 RWD、同步多頁選單 footer：偏高，因為容易牽一髮動全身。
(4) 長期維護：不建議一直用這種方式硬改，之後內容越多會越難維護。
提醒大家：
claude design 網頁設計 視覺基礎可以用，但如果要正式上線並長期維護，
最好最後整理成乾淨版 HTML/CSS/JS，或至少把首頁、選單、footer、語言切換拆得清楚一點。
六、Claude vs Codex 比較：AI 如何協助 網頁設計 與 SEO？
網頁設計與 SEO 的工作方式也正在改變，
Claude 和 Codex 都能協助程式開發，差別在於切入點不同。
Claude 透過 Claude Code 可以理解整個程式庫、協助除錯、重構與執行測試；
Claude 也很適合做偏內容與策略面的工作，例如 SEO 文章大綱、網站文案、服務頁架構、FAQ 整理、客戶提案與 網頁設計 前期規劃。
它的優勢是理解長文、整理脈絡與維持語氣一致，很適合用在網站內容規劃階段。
Codex 則是 OpenAI 針對軟體工程打造的 coding agent，
更偏向程式修改、功能開發、測試與開發流程協作，
Codex 比較適合偏技術面的工作，
例如修改 HTML、CSS、JavaScript、React、WordPress 或 Joomla 專案。
當網頁設計進入實作階段，需要調整版面、修正錯誤、改善網站速度或處理 SEO 技術設定時，
Codex 會比一般聊天型 AI 更適合。
兩者搭配使用，會比只靠單一 AI 工具更有效率。
