Claude Design 網站設計 Prompt 與程式交付
在 Claude Design 描述網站或原型，修改可見結果，再交付實際設計資料與待定事項。精美版面仍需互動驗證、專案整合和瀏覽器檢查。
於 2026 年 10 月 9 日審閱。工具功能隨帳號和版本變動，請核對下方官方文件。
從可用的頁面開始
先預覽可用的 HTML 頁面，再讓程式代理結合原始碼與配套 Prompt，練習這些方法。
Skills 維持免登入免費閱讀與複製。範本可公開預覽；原始碼下載與配套 Prompt 需要帳戶及相應購買權益或方案。 查看原始碼權限與價格
先確定設計交付物
明確要求網站版面、互動原型或既有設計修改，並指定裝置。Anthropic 文件說明目前工具的 Claude Design 流程，請核對帳號可用入口與功能。設計圖上的按鈕不能當作已接通的路由或服務。
提供內容與設計系統
給出受眾、目標、區塊、行動去向及真實文案；已有設計系統與素材時一併提供。要求桌面和手機視圖、清楚層級與明確標記的預留內容，不編造客戶標誌或業務數據。
一次改一個區塊
指出區塊、視窗寬度與具體問題，說明哪些內容及設計系統規則須保留。原型中能實際操作的互動，與僅在文字描述的行為應分開紀錄。審閱新結果後，再開始下一處修改。
準備給程式代理的交付
傳遞可用設計檔案、素材、需求和未解決狀態。要求程式代理先檢查現有專案，並回報缺少的相依項目。保留業務事實與後端約定，再驗證真實路由、行動、鍵盤操作和手機版面。
可自行改寫的原創練習
以下 Neruve 原創範例保留英文，是建議輸入，不是工具實測輸出或付費範本 Prompt。使用前請替換虛構事實。
Claude Design：網站與原型需求
Create a website design for Fieldnote, a fictional research-notes app.
Audience: small product teams. Goal: explain collect → compare → decide.
Use a warm-paper and ink direction; show one clearly fictional note specimen.
Include an introduction, specimen, three-step workflow and closing action.
The action is “Explore the workflow”; the intended destination is #workflow.
Show desktop and 390 px layouts. Keep note details readable on mobile.
Distinguish a designed control from an implemented interaction.
Do not invent signup, prices, testimonials, customer logos or product metrics.
If using a supplied design system, preserve its typography and component rules.
List open interaction and content decisions before handing the design to code.Claude Design：交付給程式實作
Implement the approved Fieldnote design in the current project.
First inspect its framework, routes, components and assets.
Use the actual available design files plus this brief, not only a screenshot.
Keep the supplied copy, semantic hierarchy and #workflow destination.
Preserve backend contracts and authentication; add no signup or payment service.
Record which design elements are implemented and which remain visual placeholders.
Check desktop, 390 and 320 px layouts, the workflow link and keyboard navigation.
Return changed files and actual check results. If design import or assets are
unavailable, name that dependency rather than claiming a completed handoff.真實練習：用 Codex 生成 Fieldnote
Fieldnote 保留原創輸入、未經改寫的 Codex HTML，以及桌面和手機檢查紀錄。該次執行沒有提供 frontend-design Skill，也不是 ChatGPT 或 Claude Design 實測。
真實練習：用 Codex 生成 Fieldnote常見問題
Neruve 實測過這些 Claude Design Prompt 嗎？
沒有。這些是原創建議輸入，尚非 Claude Design 實測輸出，也不是 Neruve 提供的工具整合。Fieldnote 是真實 Codex 輸出，執行時未提供 frontend-design Skill，不能據此證明 Claude Design 效果。
瀏覽設計與配套 Prompt
Neruve 的公開目錄提供網站設計、可用的配套提示詞及 Skills 目錄。互動預覽無需登入；配套提示詞依項目與方案權益取得。本工作流程使用你自己的程式開發工具，無需公開的 Neruve 網站產生器。
官方參考資料
第三方工具和 Skill 屬於各自作者。連結用於參考，不表示合作關係或已包含相關使用權益。