muji-design 是做什麼的？
用於生成或修改 UI 的設計技能。將日本設計的基礎置於無印良品的理念之上，並以「最佳化」為核心。空間文法取自和室建築，色彩則以 46 色調色板為基礎。
核心 ― 最佳化
將無印良品的三個觀點翻譯並應用於 UI 的營造。
- 素材的選擇 ― 直接使用色彩與質感來自素材本身的元素。如生成り色、無垢木材、榻榻米、石頭、青苔、櫻花。顏色從此調色板的範圍中選取。
- 流程的重新檢視 ― 刪除操作步驟與畫面轉換中的浪費。目標操作應置於少數步驟即可到達的位置。
- 包裝的簡化 ― 減少框架、徽章、裝飾等「包裝」，直接展示內容。
判斷軸線只有一條：「這個畫面，放在無印良品的貨架與畫面上是否感覺不協調」。當感到困惑時，就用這個問題來決定。
進行方式
- 決定主角 ― 每個畫面只有一個主角（類似壁龕）。其他所有元素都扮演輔助角色。
- 確保留白 ― 首先確保不放任何東西的區域。留白不是剩下的東西，而是首先放置的元素。
- 繪製骨架 ― 使用木條與格柵進行分隔。分隔線、列表行、導航的垂直線要細，顏色取自木材色系。
- 放置面 ― 用門檻與階梯來表示區塊。僅透過改變一層面的顏色來進行區分，避免依賴強烈的框線與陰影。
- 放置一個點綴色 ― 如同插花，點綴色與設計元素在一個畫面中僅限一處，並偏離中心放置。
- 自我檢查 ― 通過以下檢查，進行一次減少元素的修正後再提交。
第 1 層 ― 數值（固定值）
顏色
調色板是基礎。在實際畫面中，根據角色使用這些值，並根據專案進行微調。調整時的目標是：保持低飽和度，停留在溫暖的中性色範圍內，並保持明暗階梯與角色。
分配給角色（預設）
| 角色 | 顏色 | HEX |
|---|---|---|
| 背景 | 生成り色 | #FBFAF5 |
| 面（卡片・面板） | 障子の白 | #F5F5F4 |
| 面（降低一層） | 擴散光 | #E5DCD7 |
| 區塊的階梯 | 淡い畳影 | #D5C0B0 |
| 本文文字 | 梁の濃茶 | #2E1E12 |
| 輔助文字 | 利休鼠 | #888E7E |
| 分隔線・木條 | 桟 | #9F7153 |
| 木材元素 | 木肌 | #B3987E |
| 強面・標題帶 | 梁の中茶 | #745E4A |
全部 46 色調色板
- 從參考影像量測：障子の白
#F5F5F4/ 擴散光#E5DCD7/ 淡い畳影#D5C0B0/ 畳#BEB09A/ 木肌#B3987E/ 桟#9F7153/ 梁の中茶#745E4A/ 梁の濃茶#2E1E12 - Tatami Morning Light：
#F7F3EA/#E0D2B5/#C1A879/#8E6B3F/#5A4A38 - Japanese Minimalism：白練
#F5F0E8/ 藁色#E8DFC8/ 生成り#EDE0C4/ 抹茶#7A8C5E/ 墨染#6B6B6B/ 勝色#1C1F2B - 和色：生成り色
#FBFAF5/ 練色#EDE4CD/ 白茶#DDBB99/ 胡桃色#A86F4C/ 利休茶#A59564/ 利休鼠#888E7E - Misty Tatami：
#F2EFE6/#D9D1C1/#B7B0A2/#7C776E/#3F3C37 - 植物：松葉色
#839B5C/ 苔色#6C8253/ 若竹色#6B9362/ 鶯色#928C36/ 松の影#3D4F3C - 水・空・石・土：水淺蔥
#80ABA9/ 藍色#165E83/ 砂礫#E8E3D6/ 濕潤玄武岩#35393B/ 土色#BC763C - 櫻花：桜色
#FEF4F4/ 薄桜#FDEFF2/ 桜鼠#E9DFE5/ 灰桜#E8D3D1/ 撫子色#EEBBCB/ 紅梅色#F2A0A1
顏色的用法
- 畫面的主角是障子、榻榻米、木材的中性色。自然色（植物・水・櫻花）作為點綴色，一個畫面僅限一種顏色，面積控制在整體的 10% 以內。櫻花系是面積最受限制的顏色。
- 顏色平面要平坦地塗抹。顏色之間的關係透過明暗階梯來建立，漸層僅用於需要表現光線的部分。
- CSS 變數一組位於
references/design-tokens.css。
留白・尺寸
- 留白的階梯：4 / 8 / 16 / 24 / 40 / 64 (px)。元素間的留白從此階梯中選取。
- 畫面邊緣的留白要取得較寬。不要壓縮內容寬度，保持留白的比例。
- 元素的高度要取得較低且整齊（低的水平線）。行高與控制項的高度在畫面內保持階梯的一致性。
線條・圓角・陰影
- 分隔線為 1px，顏色使用桟
#9F7153系的淡色。 - 圓角最大 4px。圓潤度保持在素材角落的圓潤程度。
- 陰影透過面與面之間的明暗差異來產生。如果需要投射陰影，要像擴散光一樣柔和、廣泛、淡薄。
字體
- 標題使用明朝體（
'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif）。 - 本文與操作使用哥德體（
'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Noto Sans JP', sans-serif）。 - 字型大小階梯：12 / 13 / 15 / 17 / 22 / 28 (px)。粗體僅用於標題與主角元素。標題的字距稍微放寬，本文保持標準。
動畫
- 畫面轉換是拉門的動作。以橫向滑動的安靜滑動為基礎，持續時間為 200–300ms，緩動使用平滑減速（
cubic-bezier(0.22, 1, 0.36, 1)）。 - 動畫僅附加在傳達狀態變化的位置。
第 2 層 ― 判斷（無法以數值衡量的部分）
數值是基礎。完成度由以下判斷決定。
- 留白 ― 檢查不放任何東西的地方是否具有意義。在增加元素之前，先確認留白是否被破壞。
- 靜寂感 ― 檢查整個畫面是否安靜。顏色、線條、動畫的數量越多，靜寂感就越會喪失。
- 素材感與光線 ― 不只重現顏色代碼，還包括榻榻米與木材的溫暖感、柔和迴繞的光線感，統稱為素材感。透過面的顏色選擇與明暗差異來表現。
- 減法 ― 與其決定放置什麼，不如決定不放置什麼，這決定了完成度。對於猶豫不決的元素，選擇不放置。
良好狀態與崩壞狀態的對比
| 觀點 | 良好狀態 | 崩壞狀態 |
|---|---|---|
| 主角 | 一眼就能看出主角 | 所有元素以相同強度並排 |
| 留白 | 留白中有呼吸感 | 元素擠到邊緣 |
| 顏色 | 中性色主導，一個點綴色發光 | 多個點綴色相互競爭 |
| 分隔 | 透過面的階差安靜地分隔 | 框線與陰影重重疊疊，顯得吵雜 |
| 視線 | 從上到下毫不猶豫地流動 | 視線有多個去處 |
自我檢查（提交前務必通過）
- 主角是否確定為一個？
- 是否有壓迫感？元素是否擠到邊緣？
- 視線是否不猶豫？是否確定了第一個觀看的位置與流動的方向？
- 畫面是否安靜？計算顏色、線條、動畫的數量，如果過多則減少。
- 點綴色是否為一種顏色、一個位置、面積在 10% 以內？
- 是否符合判斷軸線（放在無印良品的貨架與畫面上是否感覺不協調）？
在檢查中發現的問題，應以減少而非增加元素的方向進行修正，執行一次修正後再提交。
參考
references/design-tokens.css― 角色色、留白、字體、動畫的 CSS 變數assets/japanese-color-palette.png― 46 色調色板樣本assets/cover-mincho.png― 樣式象徵圖像（障子、榻榻米、矮桌、一朵插花）