怎麼使用

DESIGN.md 是什麼

DESIGN.md 是一份寫給 AI 看的設計系統：一個網站用了哪些顏色、字型和字級、圓角、間距、陰影，按鈕、連結、輸入框這些元件長什麼樣子。格式照 Google 的 design.md 規格：最上面用 YAML 寫 design token，下面是說明文字。AI 工具照著它做，畫面就會用同一套顏色和字級，不會每次做出來都不一樣。

怎麼找

在首頁照產業、主色系、設計風格篩選，或用關鍵字搜尋名稱、風格描述和分類。點進一份，可以看到原網站的截圖、Specimen（把顏色、字級、元件畫出來的樣子）和 DESIGN.md 全文。

怎麼交給 AI

在單一份的頁面按「下載 DESIGN.md」，在跳出的視窗按「複製」或「下載」拿到 DESIGN.md，再看你用的是哪一種工具：

• Claude Code、Cursor 這類在專案裡工作的工具：把 DESIGN.md 存在專案最上層的資料夾，再跟它說要做什麼。
• ChatGPT、Claude 這類對話的網頁：把 DESIGN.md 的全文貼在指令後面。

照專案裡的 DESIGN.md 做一個咖啡店的首頁：最上面是導覽列和主視覺，接著是三個商品介紹和聯絡方式。顏色、字型、字級、圓角、間距和按鈕都用 DESIGN.md 裡的 token，不要自己加新的顏色或字級。

照專案裡的 DESIGN.md 改這個專案的樣式：顏色、字型、字級、圓角、間距換成 DESIGN.md 的 token，按鈕、連結、輸入框照 components 那一段改。版面和文字內容不要動。

下面是一份設計系統（DESIGN.md）。照它的顏色、字型、字級、圓角、間距和元件，用一個 HTML 檔（CSS 寫在 <style> 裡）做一個咖啡店的首頁，只用 DESIGN.md 裡有的值。

（在這裡貼上 DESIGN.md 的全文）

注意

DESIGN.md 只整理原網站的設計風格，不包括它的商標、文字和圖片。這些屬於原網站，做自己的網站時請換成自己的內容。單一份的頁面上的截圖，版權也屬於原網站。

關於製作的公司

astertaste 由 LYNUXTEK 令客思科技製作。LYNUXTEK 協助企業導入 AI、開發系統；想把 AI 用進公司的流程或系統，歡迎到官網看看。