我要做一個全新的產品官網
- 先去 風格庫，把六種風格的示範頁都滑一遍，選一個跟你產品氣質最接近的。
- 進到該風格的 設計系統 頁，確認對比檢查沒有紅字（尤其你想改顏色的時候）。
- 回到示範頁，按「下載檔案包」。裡面已經含 landing page 需要的十個區塊。
- 在你的專案資料夾解壓縮，打開 Claude Code，貼上 PROMPT.md。
- 請它先做 design page（把 design-system 的元件全部列出來），確認風格對了再做功能。
使用教學
怎麼用這個站
這個站的用法只有一條主線：挑風格 → 挑模組 → 產生 prompt / 下載檔案 → 交給 Claude Code。 下面依你的情境分成三條路。
三種常見情境
我只缺一個登入頁 / 定價表 / 錯誤頁
- 去 模組庫，用搜尋框打關鍵字。
- 在模組頁上用色票按鈕試不同風格，用「手機 / 平板 / 桌機」確認 RWD。
- 選好目標框架（Svelte / React / Vue / Next），按「複製精簡版」。
- 如果那個區塊有「注意」欄位，把那句話一起貼給 Claude Code —— 那通常就是最容易做錯的點。
我的專案已經有樣式了，只想拿規範
- 去 工程規範，挑你正在踩的坑。
- 每一份都可以整份複製貼給 agent，也可以下載成 .md 放進專案的 docs/ 目錄。
- 建議至少放三份進專案：
how-to-prompt、error-handling、security-basics。
下 prompt 的三個原則
01
給約束，不要給形容詞
「乾淨現代」不可驗證，「間距只能用 --ds-space-*，不可以出現裸數字」可以。 可驗證的規則，AI 才有辦法自我檢查。
02
先給輸入，再給任務
先貼 token、契約、既有檔案結構，最後才說要做什麼。 順序反過來，模型會先想像一套自己的體系，再硬套你的檔案。
03
永遠附上完成條件
沒有驗收條件的 prompt，回來的東西一定「看起來對」但沒人能檢查。 這個站產生的每一份 prompt 最後都有一段 checklist。
完整版在 怎麼下 Prompt。
新手最常問的五件事
為什麼我叫 AI「做得好看一點」都沒用？
因為「好看」不可驗證。改成可檢查的條件：「主色只能用在按鈕與圖形，不能當內文顏色」「卡片圓角一律 16px」「段落行高 1.75」。這也是這個站每個 prompt 都附 token 表的原因。
為什麼換個顏色整個版面就爛了？
通常是因為顏色寫死在元件裡，而不是走 token。只要有一個地方寫了 #fff，換深色風格那裡就會是白的。規則很簡單：元件只能讀 var(--ds-*)。
為什麼 AI 寫出來的東西在手機上會破？
因為它只在桌機寬度想過一次。要求它用 clamp() 和 auto-fit grid，並且明確寫出「360px / 768px / 1440px 都不能橫向捲動」當作完成條件。
為什麼錯誤訊息會把技術細節噴給用戶？
因為預設行為就是把 error.message 直接丟到畫面上。正確做法是：伺服器記完整的錯誤，前端只給一句人話加一個追蹤碼。看 error-handling。
為什麼我的 API key 會出現在瀏覽器裡？
因為它被放進了會打包到前端的環境變數（PUBLIC_ / NEXT_PUBLIC_ / VITE_ 開頭的都會）。任何金鑰都只能在伺服器端使用。看 security-basics。
規範速查
how-to-prompt 怎麼下 Prompt，AI 才會一次做對 入門vibe-coding-pitfalls Vibe Coding 十四個常見地雷 入門framework-portability 同一份設計，跑在 Svelte / React / Vue / Next 入門token-contract Token 契約：模組 × 風格為什麼能自由組合 設計系統style-neon-ink 風格規格書：Neon Ink 螢光墨紙 設計系統design-system 設計系統規格：零件庫與設計頁 設計系統frontend-plan 前端落地計畫：架構、資料流、狀態模型 設計系統layout-and-overlap 版面與遮擋：z-index、sticky、捲動、破版 設計系統animation 動畫：只動兩個屬性，尊重使用者設定 設計系統imagery-and-backgrounds 圖片、背景與 CSS 造型 設計系統accessibility 無障礙基準：做到這些就贏過九成的網站 設計系統micro-details 小細節：Tooltip、捲軸、游標、間距 設計系統architecture-layers 層級架構：誰可以知道什麼 工程navigation-cache 導覽、快取與「不要每次都重刷」 工程forms-focus-input 表單、焦點與輸入法 工程error-handling 錯誤處理：使用者看一句話，log 看全部 工程i18n 多語系：不要拼句子，交給 Intl 工程performance 效能：先量測，再最佳化 工程comments-and-cleanup 註解與清理：寫為什麼，刪掉噪音 工程code-review Code Review：審什麼、什麼時候擋下來 工程security-basics 前端資安基本盤：金鑰、XSS、CSP 資安auth-session 登入與 Session：不閃爍、不外洩、會過期 資安llm-streaming LLM 串流輸出：SSE、逐字渲染、串流 JSON 解析 AI 介面markdown-parser Markdown 解析與淨化 AI 介面claude-agent-frontend 把 Agent 架構寫進前端 AI 介面writing-for-users 文案是寫給用戶看的，不是寫給工程師看的 內容deployment-cloudflare 部署到 Cloudflare Workers 內容