如何利用 Claude Design，把喜愛品牌的網站轉化成自己的設計系統

過去，如果喜歡某個品牌的網站風格，我們通常只能：

• 截圖收藏
• 建立 Pinterest Board
• 手動在 Figma 重畫
• 靠感覺模仿

但 Claude Design 出現後，多了一種新的工作方式：

利用一個網址，直接將喜愛品牌背後的設計語言轉化成一套可重複使用的 Design System。

最近我嘗試把 glossier.com 拆解成一套設計系統，整個過程比想像中簡單。

重點不在於複製頁面。

而是把品牌背後的：

• 字體比例
• 色彩系統
• 留白節奏
• 元件風格
• 視覺層次
• 排版規則
• 互動細節

整理成一套可以持續使用的設計系統。

換句話說：

網址不只是網站，而是設計語言的資料來源。

進入 Claude Design。

選擇：

Create here

接著建立新的 Design System。

例如：

Glossier Design System Recreation

我使用的提示詞如下：

Glossier 設計系統復刻

目標：

精確拆解並重建 glossier.com 的視覺語言，將其整理成一套可重複使用的設計系統。

目的不是複製其網站內容，而是提煉其設計原則，並應用於以 Next.js + Tailwind 建構的網站。

以高度還原與一致性為優先，而非追求原創性。

接著加入：

請只提取可應用於任何網站的視覺與互動規則。

包含：

FOUNDATION

• Color System
• Typography
• Font hierarchy
• Grid system
• Container widths
• Spacing scale
• Border radius
• Shadows

COMPONENTS

• Header
• Navigation
• Hero section
• Buttons
• Cards
• Product grids
• Editorial sections
• Footer

LAYOUT

• Section spacing
• Image ratios
• White space strategy
• Responsive breakpoints

INTERACTION

• Hover states
• Motion
• Transition timing

DESIGN PRINCIPLES

• Editorial hierarchy
• Visual rhythm
• Balance and proportion

Output a design system specification optimized for React, Next.js and Tailwind.

Prioritize high fidelity over originality.

這種工作流最有趣的地方在於：

任何喜歡的品牌，都可以成為設計系統的來源。

例如：

glossier.com
apple.com
stripe.com
notion.so
linear.app
airbnb.com

不再只是參考網站。

而是：

網址
↓
Claude Design
↓
Design Tokens
↓
Components
↓
Layout Rules
↓
Design System
↓
自己的網站

網站會改版。

流行會改變。

但設計系統可以被持續累積。

當我們喜歡一個品牌時，真正值得學習的，其實不是某一個 Hero Section 或按鈕。

而是它背後的設計語言。

Claude Design 的價值，在於第一次讓「網址」變成一種設計資料來源。

一個網址，不只是網站。

也可以是一套 Design System 的起點。