Frontend Design Skills：Claude Code 與 Codex 安裝指南

安裝前先選對 Skill

Anthropic 的 frontend-design 提供視覺設計指引；Taste 是獨立的社群專案，Framer 轉換與動態效果 Skill 則用於不同任務。README 概覽不是可安裝的 SKILL.md。請先核對原始來源、授權及相依項目。以下以 Anthropic frontend-design 示範目錄安裝，並非通用安裝程式。

在 Claude Code 中安裝

優先安裝於專案目錄，將影響限定在目前的儲存庫。保留原始目錄結構、授權與支援檔案。「複製到 Agent」取得的是安裝請求，網站不會直接在你的電腦上安裝。

.claude/skills/frontend-design/SKILL.md

在 Codex 中安裝

Codex 使用不同的專案目錄。可重用相容的 Skill 指令，但應先檢查工具專用命令和相依項目。Skill 是工作指引，不會提供業務後端或其他工具的帳號。

.agents/skills/frontend-design/SKILL.md

執行一份需求，再檢查實際頁面

寫清頁面、受眾、主要操作與必須保留的事實。可使用下方需求或實測範例。以 1280、390、320 px 檢查頁面，點擊主要連結並使用鍵盤操作。保留原始碼與截圖，如實記錄未通過的檢查。

Frontend Design Skill 沒出現或未觸發？

先確認安裝方式。專案中的 Skill 目錄與 Claude Code 外掛使用不同的路徑和命令名稱。

放在專案中的 Skill 目錄

Claude Code 手動安裝範例將 SKILL.md 與配套檔案放在 .claude/skills/frontend-design/。Codex 使用上方 .agents/skills/ 範例。README 概覽並非可安裝檔案。

由外掛提供的 Skill

在 Claude Code 中開啟 /plugin，確認外掛已安裝、啟用，且作用範圍是預期的專案或使用者。使用選單顯示的命令；外掛 Skill 可能帶命名空間。依外掛自身說明完成設定。

依這個順序檢查

1. 確認目前專案、選擇的 Skill 來源與安裝範圍。保留必要的配套檔案；取代前先比較同名目錄。
2. 檢查 SKILL.md 檔名，確保 YAML 從第一行開始。Claude Code 需檢查 name、description 與呼叫控制欄位；YAML 格式錯誤可能影響自動比對，即使手動呼叫仍可用。
3. 確認 Skill 已列出。在 Claude Code 中詢問可用 Skills 並檢查 / 選單。若已列出但未使用，以選單中的命令加上符合描述的任務手動呼叫，並檢查 disable-model-invocation 與 user-invocable。
4. 確認 Agent 實際讀取了目標 Skill 並執行所需任務。隨結果保留檔案路徑或工具紀錄，再用瀏覽器檢查頁面。只有目錄名稱或好看的截圖，不能確認 Skill 被使用。

下方 Codex 案例是手動讀取固定版本檔案，未驗證自動探索或 Claude Code 外掛安裝。請依所用版本查閱官方文件。

依用途選擇相關 Skill

六個詳細頁皆可免登入閱讀與複製。請先看各頁的設定說明：Framer 整合、影片工具及支援模組不能當作一般前端 Skill 混用。

• Taste Skill：概覽與安裝

  了解專案與可選工作流程。這是 README 概覽，不是安裝檔案。

• Taste Skill：前端設計（v2 實驗版）

  用於到達頁與作品集的社群前端設計流程；封存的 v2 仍為實驗版本。

• Framer Skills：Convert Prompt 提示詞轉換

  將 React／Tailwind 需求轉換為 Framer 提示詞，使用前核對 Framer 整合條件。

• Framer Skills：Sync Styles 樣式同步

  將明確提供的顏色、文字樣式及圖示同步至 Framer 專案，需要對應整合。

• Claude Motion：社群動效設計 Skill

  用於 Claude Code／Remotion 的社群影片流程，並非 Anthropic 內建功能。

• Genjutsu Skill：Cast 工作流程

  透過 Cast 處理動態效果與微互動；使用時保留必要的 _jutsu 模組。

可自行改寫的原創練習

以下 Neruve 原創範例保留英文，是建議輸入，不是工具實測輸出或付費範本 Prompt。使用前請替換虛構事實。

Work in this project's current stack. Read the existing routes, shared components,
styles and the selected frontend-design skill before proposing changes.
Use only the project files and assets I have permission to use.

Task: improve a fictional research-notes landing page for small product teams.
Page goal: explain collect → compare → decide; the primary link targets #workflow.
Design direction: warm paper, ink text, a clear research-note specimen and generous spacing.
Keep the existing API contracts, authentication, prices and route paths unchanged.
Use the skill for the design procedure; use my brief for product facts.

First propose the section order and the shared typography/spacing decisions.
Then implement one coherent pass. Check 1280, 390 and 320 px widths, keyboard focus,
the workflow anchor and reduced motion. Report the checks actually run and defects
still open. Do not invent testimonials, customer logos, metrics or a signup backend.

Review this existing page using the selected design skill.
Before editing, list the three highest-impact defects with a selector or section
name, viewport width and screenshot evidence. Separate styling defects from
broken behavior. Choose one defect, explain the smallest change that addresses it,
and preserve the current copy, prices, forms and navigation contracts.
After the repair, repeat the same browser check and report any regression.
Do not replace the whole page or add another component library for this repair.

實測範例：以 frontend-design 製作 Fieldnote

一個虛構的研究筆記頁面：筆記範例、收集—比較—決定流程，以及可點擊的頁內連結。可開啟範例或下載原始需求與 HTML；範例保留英文。

2026 年 10 月 13 日在 Codex 中手動讀取固定版本的 Anthropic Skill 後實作，並進行瀏覽器檢查。使用來源： Anthropic frontend-design · dbd4588

重現時，依上方步驟安裝已核對的 Skill，再將下載的需求交給 Agent。以 1280、390、320 px 比較實際輸出，確認流程連結與鍵盤焦點，並如實記錄差異。

這只是一次手動提供指引的範例，未驗證 Skill 自動探索、Claude Code、Taste 或 Neruve 生成服務；沒有模型比較、註冊流程或轉換提升結論。

常見問題

瀏覽設計與配套 Prompt

Neruve 的公開目錄提供網站設計、可用的配套提示詞及 Skills 目錄。互動預覽無需登入；配套提示詞依項目與方案權益取得。本工作流程使用你自己的程式開發工具，無需公開的 Neruve 網站產生器。

• 瀏覽資源庫
• SaaS 登陸頁 HTML 範本與提示詞
• 作品集網站範本與設計提示詞

官方參考資料

• Anthropic frontend-design
• Claude Code · SKILL.md
• Claude Code · Plugins
• Codex · SKILL.md

第三方工具和 Skill 屬於各自作者。連結用於參考，不表示合作關係或已包含相關使用權益。