觀念
共用同一個數值，網站越改越收斂
Stylebook 裡的每一個樣式，都是一個可以被很多地方共用的數值。按鈕、標題、卡片用的是同一個「品牌橘」，改一次，用到它的地方一起變。網站不會越改越發散，而是越來越一致。
這種做法，業界稱為 Design Token。
沒有 Stylebook
每個地方各寫各的
相近但不一樣的橘、不一樣的圓角，越改越發散。
有 Stylebook
全部指向同一個數值
一個「品牌橘」、一種圓角，改一次全站跟著變，越改越收斂。
內容
一本 Stylebook 裡有什麼
COLOR
色彩
背景、文字、品牌色、邊框，各有固定的角色。
TYPOGRAPHY
字型
標題、內文的字體、字級與行高。
SPACING
間距
段落與元件之間的留白，有一套固定級距。
RADIUS
圓角
卡片、按鈕、圖片的轉角。
SHADOW
陰影
卡片浮起的層次。
SURFACE
底色
每一段、每張卡片的底色與背景。
BUTTON
按鈕
按鈕的樣式，跟著整站一起變。
HOVER
滑過效果
滑鼠移上去時的變化。
MOTION
動態效果
進場、轉場等動態。
套用
同一套 Block，不同的 Stylebook
一個網站可以有好幾本 Stylebook；同一個 Block，套不同的 Stylebook，就是不同的長相。
暖橘
米白底、橘色按鈕、中等圓角
夜色
深色底、金色按鈕、幾乎不帶圓角
森林
淡綠底、綠色膠囊按鈕、大圓角
調整
Stylebook Studio
查看並直接修改所有樣式數值，同時看著畫面即時變化。
所有數值一覽
每一項樣式現在是什麼，一目了然。
直接改數值
改一個值，用到它的地方一起變。
即時看到畫面
邊改邊看，不用來回切換。
收錄
Stylebook Merge
把 AI 自由畫的頁面，轉成有結構的 Block。
畫面怎麼畫都可以。收進來之後，每一段都有固定的位置，樣式對應到 Stylebook 裡的數值。
下一步
③ 內容修改
AI 對話修改，或在後台修改。