Claude Code 網站設計提示詞使用指南

一個可檢查的小步驟流程

1. 在目標專案中開啟 Claude Code，先讓它檢查技術堆疊、路由和元件，再建議修改；明確保留後端介面及既有行為。
2. 提供可用的參考提示詞，再另附調整需求：受眾、頁面目標、真實文案、資產、主要操作及限制。編輯前先要求提出具體修改。
3. 在瀏覽器檢查首輪結果，記錄問題檢視尺寸和具體區域，要求一次聚焦修正後重複同一檢查。

原創 SaaS 與作品集需求範例

這是 Neruve 編寫的虛構需求範例，獨立於付費提示詞；英文原文保留以便重現。

Fieldnote is a fictional shared research-notes workspace for small product teams.
Create a calm cream-and-ink landing page. Explain collect → compare → decide.
Show a realistic sample research note, then a three-step workflow.
The primary link is “Explore the workflow” and targets #workflow.
Do not invent logos, testimonials, user counts, security guarantees, pricing,
forms or a working signup flow.
Use semantic HTML, one clear h1, readable contrast and visible keyboard focus.
Support a 390 px mobile view without horizontal overflow and reduced motion.

Mira Chen is a fictional independent product designer.
Create a warm-neutral portfolio with three clearly labelled fictional projects.
For each project explain the role, constraint and illustrative outcome.
The primary link is “View selected work” and targets #projects.
Do not invent awards, employer logos, real contact addresses or business metrics.
Use semantic HTML, one clear h1, readable contrast and visible keyboard focus.
Support a 390 px mobile view without horizontal overflow and reduced motion.

生成結果檢查清單

檢查 390 px 手機與桌面檢視：主標題清楚、文字可讀、連結有效、鍵盤焦點可見且無水平溢位；將所有示範聲明替換為核實的事實。

用於既有專案的 Claude 網站改版 Prompt

從一個 Hero、既有元件庫與原始操作入口開始。完整需求保護產品事實與行為，同時提供 Claude Code 一個具體介面任務。

這是 Neruve 編寫的虛構需求範例，獨立於付費提示詞；英文原文保留以便重現。

Improve the hero of this existing website in Claude Code.
Read the current framework, routes, shared components, design tokens and hero source.
Use the project's installed component library; do not add another UI framework.
Goal: make the existing offer and primary action easier to understand.

Before editing, record the hero at 1280, 390 and 320 px. Name the affected files,
the primary action's exact destination and one concrete presentation defect.
Preserve all copy, product facts, prices, route paths, API calls, forms,
authentication, checkout, analytics events, metadata, canonical and hreflang.
Use only supplied or authorized assets. Do not invent social proof or offers.

Propose one scoped change to hierarchy, spacing, typography or image placement.
After the plan is accepted, implement only the hero using existing components.
If a selected frontend design skill is available, read it for design guidance;
the existing project's behavior and this brief remain the protected contract.

Deliver the changed files and before/after screenshots at the same three widths.
Test the original primary link, visible keyboard focus and reduced motion.
Confirm that unchanged URLs, product facts and event names stayed unchanged.
Separate checks actually run from pending checks; report any regression.
Do not publish the site or describe this input as a verified Claude output.

Review the hero change against the original website and brief.
Compare the same 1280, 390 and 320 px views. Follow the original primary action.
Check for horizontal overflow, unreadable text, hidden content and lost focus.
Compare the protected routes, copy, facts, prices, form/API contracts and SEO tags.
If a defect remains, give its selector, viewport, expected behavior and evidence.
Repair only that defect, then repeat the same checks and list the actual results.
If you cannot run the browser or inspect a contract, mark it as pending.

隨結果保留哪些證據

保留修改檔案、相同寬度的截圖、原始操作目標，以及鍵盤、手機版面與受保護約定的檢查結果。無法測試的項目標示為待驗證。

以下是原創 Claude Code 建議輸入，尚非 Claude 實測輸出。依任務選擇 Skill、檢查相依項目並保留專案事實。連結的 Taste 是獨立社群專案。

• Frontend Design Skill 沒出現或未觸發？
• Taste Skill：前端設計（v2 實驗版）
• 現有網站的 AI 改版 Prompt

真實練習：用 Codex 生成 Fieldnote

我們把上面的 Fieldnote 原創 brief 交給 Codex，並保留完整輸出。這張虛構研究筆記頁面，用來檢驗同一份需求在另一款編碼工具中的結果。嘗試執行 Claude Code 時收到登入錯誤，沒有生成頁面。

記錄於 2026 年 10 月 4 日；Codex CLI 0.145.0，一次成功生成，耗時 35.92 秒，沒有使用檔案或命令工具。CLI 未回報模型識別資訊。輸入、輸出及截圖保留英文原文。

瀏覽器檢查涵蓋 1280、390 及 320 像素版面、工作流程錨點和鍵盤跳轉連結。頁面只有一個 h1，研究筆記明確標為虛構；沒有註冊表單、價格或客戶評價。也檢查了文字對比度及減少動態效果規則；這不是完整的無障礙稽核。

下載完整英文輸入，在已登入的編碼工具中執行。用瀏覽器開啟回傳的 HTML，按相同寬度檢查版面及連結，先記錄失敗，再請求一次聚焦修復。提供的原始碼保留本次真實結果；重新生成的頁面可能不同。

這是一個獨立 HTML/CSS 練習，不是 Claude Code 成功案例，也不是 Neruve 生成服務的測試。輸入沒有附帶 DESIGN.md 或 frontend-design Skill。結果不能證明工具優劣、註冊轉換、SEO 成長或 AI 引用。

DESIGN.md 與 SKILL.md 解決不同任務

Google 的 DESIGN.md 格式結合 YAML 設計 token 與 Markdown 使用說明，用於描述專案視覺識別。作為 Claude Code 背景時，明確要求讀取該檔案；本指南不聲稱自動探索或 Neruve 已支援匯出。 目前格式與 CLI 處於 alpha 階段，可能變動。

Claude Code Skill 在 SKILL.md 中以 frontmatter 和指令提供可重用任務指引。安裝前檢查來源、授權條款和權限。視覺識別檔案提供專案背景，Skill 提供流程或能力。

Neruve 目前提供什麼

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

參考設計是起點；輸出隨模型、工具和版本變化，檔案和存取權益以項目及方案為準。

官方參考資料

• Claude Code
• SKILL.md
• DESIGN.md